"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { Badge } from "@/components/badge";
import { motion } from "framer-motion";
import { BackgroundBeamsWithCollision } from "@/components/ui/background-beams-with-collision";
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";

export function Hero() {
  return (
    <BackgroundBeamsWithCollision className="h-auto py-20 md:py-32">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
            className="text-left"
          >
            <Badge variant="outline" className="mb-6 border-blue-500 text-blue-600 dark:text-blue-400">
              100% Real Human Effort • No AI, Just Hard Work
            </Badge>
            <Heading className="text-4xl md:text-6xl font-black tracking-tight">
              Cedar Rapids' Most <span className="text-blue-600">Hardworking</span> 13-Year-Old Detailer
            </Heading>
            <Subheading className="mt-6 text-lg text-neutral-600 dark:text-neutral-400">
              I'm a 13-year-old entrepreneur with a passion for cars and a serious work ethic. I've invested in professional-grade equipment to ensure your car gets a better-than-pro finish.
            </Subheading>
            <div className="flex flex-col sm:flex-row gap-4 mt-10">
              <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white h-14 px-8 text-lg" asChild>
                <Link href="/contact">Book a Detail</Link>
              </Button>
              <Button size="lg" variant="outline" className="h-14 px-8 text-lg" asChild>
                <Link href="#services">See Our Work</Link>
              </Button>
            </div>
            <p className="mt-6 text-sm text-neutral-500 italic">
              "I'm saving up for my first car and college. Thanks for supporting local young entrepreneurs!"
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <CardContainer className="inter-var">
              <CardBody className="bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-blue-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border">
                <CardItem
                  translateZ="50"
                  className="text-xl font-bold text-neutral-600 dark:text-white"
                >
                  Professional Grade Equipment
                </CardItem>
                <CardItem
                  as="p"
                  translateZ="60"
                  className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
                >
                  I use high-pressure washers and industrial vacuums for a spotless finish.
                </CardItem>
                <CardItem translateZ="100" className="w-full mt-4">
                  <img
                    src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?q=80&w=2000&auto=format&fit=crop"
                    height="1000"
                    width="1000"
                    className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
                    alt="Car detailing equipment"
                  />
                </CardItem>
                <div className="flex justify-between items-center mt-20">
                  <CardItem
                    translateZ={20}
                    className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
                  >
                    Better than pro →
                  </CardItem>
                  <CardItem
                    translateZ={20}
                    as={Link}
                    href="/contact"
                    className="px-4 py-2 rounded-xl bg-blue-600 text-white text-xs font-bold"
                  >
                    Book Now
                  </CardItem>
                </div>
              </CardBody>
            </CardContainer>
          </motion.div>
        </div>
      </Container>
    </BackgroundBeamsWithCollision>
  );
}