"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

export function Hero() {
  return (
    <section className="relative pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden">
      <div className="absolute inset-0 bg-grid-neutral-200/50 [mask-image:radial-gradient(ellipse_at_center,white,transparent)] -z-10" />
      <Container>
        <div className="flex flex-col items-center text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <Heading as="h1" className="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight">
              Predator AI <span className="text-primary">Solutions</span>
            </Heading>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            <Subheading className="mt-6 max-w-2xl text-lg md:text-xl text-neutral-600">
              Powerful AI-driven systems that automate operations, analyze data, and help you make faster, smarter decisions.
            </Subheading>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="mt-10 flex flex-wrap gap-4 justify-center"
          >
            <Button size="lg" className="rounded-full px-8" asChild>
              <a href="#contact">Get Started</a>
            </Button>
            <Button size="lg" variant="outline" className="rounded-full px-8" asChild>
              <a href="#services">Our Services</a>
            </Button>
          </motion.div>
        </div>
      </Container>
    </section>
  );
}
