"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";

export function Hero() {
  return (
    <section className="relative pt-24 pb-20 overflow-hidden bg-white dark:bg-neutral-950">
      <Container>
        <div className="max-w-3xl mx-auto text-center">
          <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 Detailers
          </Heading>
          <Subheading className="mt-6 text-lg text-neutral-600 dark:text-neutral-400">
            We're two 13-year-olds with a passion for cars and a serious work ethic. We don't use fancy AI—just high-quality soaps, real elbow grease, and a commitment to making your car look brand new.
          </Subheading>
          <div className="flex flex-col sm:flex-row justify-center 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">
            "We're saving up for our first cars and college. Thanks for supporting local young entrepreneurs!"
          </p>
        </div>
      </Container>
    </section>
  );
}