"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Sparkles, Droplets, Shield, Clock } from "lucide-react";
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";

const services = [
  {
    title: "Full Interior Deep Clean",
    description: "Vacuuming, floor mats, dashboard wipe-down, and window cleaning. We get into all the cracks and crevices.",
    icon: Droplets,
    price: "$80"
  },
  {
    title: "Exterior Hand Wash",
    description: "Safe hand wash and dry. No scratchy automatic brushes—just soft microfiber and premium soap.",
    icon: Sparkles,
    price: "$40"
  },
  {
    title: "Wheel & Tire Shine",
    description: "We scrub the brake dust off your rims and apply a long-lasting tire shine for that showroom look.",
    icon: Shield,
    price: "$25"
  },
  {
    title: "Full Detail Package",
    description: "The ultimate treatment. Interior deep clean plus exterior wash and tire shine for a complete refresh.",
    icon: Clock,
    price: "$110"
  }
];

export function Services() {
  return (
    <section id="services" className="py-24 bg-neutral-50 dark:bg-neutral-900/50 overflow-hidden">
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Heading>What I Do</Heading>
          <Subheading className="mt-4">
            Professional results. I use top-tier pressure washers, steam cleaners, and premium chemicals to get your car spotless.
          </Subheading>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {services.map((service, i) => (
            <CardContainer key={i} className="py-0">
              <CardBody className="bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 shadow-sm rounded-2xl p-8 h-full">
                <CardItem translateZ="50" className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-6">
                  <service.icon className="w-6 h-6 text-blue-600" />
                </CardItem>
                <CardItem translateZ="60" className="text-xl font-bold mb-3">
                  {service.title}
                </CardItem>
                <CardItem translateZ="40" className="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed mb-6">
                  {service.description}
                </CardItem>
                <CardItem translateZ="80" className="text-2xl font-black text-blue-600">
                  {service.price}
                </CardItem>
              </CardBody>
            </CardContainer>
          ))}
        </div>
      </Container>
    </section>
  );
}