import { Hero } from "@/components/hero";
import { Testimonials } from "@/components/testimonials";
import { Services } from "@/components/services";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Badge } from "@/components/badge";

export default function Home() {
  return (
    <main>
      <Hero />
      
      <section className="py-20 border-y border-neutral-100 dark:border-neutral-800">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div className="relative">
              <img 
                src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?q=80&w=2000&auto=format&fit=crop" 
                alt="Young entrepreneurs working" 
                className="rounded-3xl shadow-2xl"
              />
              <div className="absolute -bottom-6 -right-6 bg-blue-600 text-white p-6 rounded-2xl shadow-xl hidden md:block">
                <p className="text-2xl font-bold">13 Years Old</p>
                <p className="text-sm opacity-90">And working hard!</p>
              </div>
            </div>
            <div>
              <Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100 border-none">Our Story</Badge>
              <Heading className="text-3xl mb-6">Real Hustle, Real Results</Heading>
              <Subheading className="text-lg mb-6">
                We started Apex Young Detailers because we wanted to earn our own money and we love cars. We're 13 years old, but we take this seriously. 
              </Subheading>
              <p className="text-neutral-600 dark:text-neutral-400 mb-6">
                While other kids are playing video games, we're out here learning how to run a business and providing a service our neighbors can rely on. We treat every car like it's our own (or like it's the car we're saving up to buy!).
              </p>
              <ul className="space-y-3 text-neutral-700 dark:text-neutral-300 font-medium">
                <li className="flex items-center gap-2">
                  <div className="h-5 w-5 rounded-full bg-green-500 flex items-center justify-center text-white text-[10px]">✓</div>
                  Neighborhood Approved
                </li>
                <li className="flex items-center gap-2">
                  <div className="h-5 w-5 rounded-full bg-green-500 flex items-center justify-center text-white text-[10px]">✓</div>
                  We bring our own supplies
                </li>
                <li className="flex items-center gap-2">
                  <div className="h-5 w-5 rounded-full bg-green-500 flex items-center justify-center text-white text-[10px]">✓</div>
                  100% Satisfaction Guaranteed
                </li>
              </ul>
            </div>
          </div>
        </Container>
      </section>

      <Services />
      <Testimonials />
    </main>
  );
}