import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { CheckCircle2, Sparkles, ShieldCheck, Car } from "lucide-react";

const services = [
  {
    title: "Interior Detailing",
    description: "Deep cleaning of all surfaces, steam cleaning, leather conditioning, and odor removal.",
    icon: <Sparkles className="w-8 h-8 text-blue-500" />,
    price: "Starting at $149",
    features: ["Vacuum & Steam Clean", "Stain Removal", "Leather Treatment", "Dashboard UV Protection"]
  },
  {
    title: "Exterior Detailing",
    description: "Hand wash, clay bar treatment, iron decontamination, and high-quality wax application.",
    icon: <Car className="w-8 h-8 text-blue-500" />,
    price: "Starting at $129",
    features: ["Foam Cannon Wash", "Wheel & Tire Deep Clean", "Clay Bar Treatment", "Hand Wax/Sealant"]
  },
  {
    title: "Ceramic Coating",
    description: "Long-term protection and extreme gloss with professional-grade ceramic coatings.",
    icon: <ShieldCheck className="w-8 h-8 text-blue-500" />,
    price: "Starting at $599",
    features: ["Multi-year Protection", "Hydrophobic Properties", "UV & Chemical Resistance", "Enhanced Gloss"]
  },
  {
    title: "Full Detail Package",
    description: "The ultimate transformation for your vehicle, combining interior and exterior services.",
    icon: <CheckCircle2 className="w-8 h-8 text-blue-500" />,
    price: "Starting at $249",
    features: ["Complete Interior", "Complete Exterior", "Engine Bay Cleaning", "Paint Sealant"]
  }
];

export function Services() {
  return (
    <section id="services" className="py-24 bg-neutral-50 dark:bg-neutral-900">
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Heading>Our Premium Services</Heading>
          <Subheading className="mt-4">
            Professional detailing solutions tailored to your vehicle's needs in Cedar Rapids and surrounding areas.
          </Subheading>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {services.map((service, index) => (
            <Card key={index} className="border-none shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader>
                <div className="mb-4">{service.icon}</div>
                <CardTitle className="text-xl">{service.title}</CardTitle>
                <CardDescription className="text-blue-600 font-semibold">{service.price}</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-neutral-600 dark:text-neutral-400 mb-6 text-sm">
                  {service.description}
                </p>
                <ul className="space-y-2">
                  {service.features.map((feature, fIndex) => (
                    <li key={fIndex} className="flex items-center text-sm text-neutral-700 dark:text-neutral-300">
                      <CheckCircle2 className="w-4 h-4 mr-2 text-green-500" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}