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";
import { Chatbot } from "@/components/chatbot";
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";

export default function Home() {
  return (
    <main>
      <Hero />
      <Chatbot />
      
      <section className="py-20 border-y border-neutral-100 dark:border-neutral-800 overflow-hidden">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div className="relative">
              <CardContainer className="py-0">
                <CardBody className="w-full h-auto">
                  <CardItem translateZ="100" className="w-full">
                    <img 
                      src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?q=80&w=2000&auto=format&fit=crop" 
                      alt="Young entrepreneur working" 
                      className="rounded-3xl shadow-2xl w-full"
                    />
                  </CardItem>
                </CardBody>
              </CardContainer>
              <div className="absolute -bottom-6 -right-6 bg-blue-600 text-white p-6 rounded-2xl shadow-xl hidden md:block z-10">
                <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">
                I started Apex Young Detailers to build something of my own. I'm 13 years old and I've invested in professional-grade equipment—from high-pressure washers to industrial vacuums—to ensure your car gets a better-than-pro finish.
              </Subheading>
              <p className="text-neutral-600 dark:text-neutral-400 mb-6">
                While other kids are playing video games, I'm out here learning how to run a business and providing a service my neighbors can rely on. I treat every car like it's my own.
              </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>
                  I bring my own professional 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>
  );
}