"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Sparkles, Scissors, Heart, Star, Zap, Smile } from "lucide-react";

const services = [
  {
    title: "Advanced Facials",
    description: "Customized skin treatments including hydrafacials, anti-aging, and deep cleansing for a radiant Miami glow.",
    icon: <Sparkles className="w-8 h-8 text-pink-500" />,
  },
  {
    title: "Expert Waxing",
    description: "Professional hair removal services for smooth, long-lasting results using premium, gentle waxes.",
    icon: <Zap className="w-8 h-8 text-pink-500" />,
  },
  {
    title: "Body Treatments",
    description: "Rejuvenating body scrubs and wraps designed to detoxify and hydrate your skin.",
    icon: <Heart className="w-8 h-8 text-pink-500" />,
  },
  {
    title: "Manicure & Pedicure",
    description: "Luxury nail care with high-quality polishes and relaxing spa techniques for perfect hands and feet.",
    icon: <Star className="w-8 h-8 text-pink-500" />,
  },
  {
    title: "Skin Care Consultation",
    description: "Personalized analysis and product recommendations from our licensed estheticians.",
    icon: <Smile className="w-8 h-8 text-pink-500" />,
  },
  {
    title: "Lash & Brow",
    description: "Enhance your natural beauty with professional lash lifts, tints, and brow shaping.",
    icon: <Scissors className="w-8 h-8 text-pink-500" />,
  },
];

export function Services() {
  return (
    <section id="services" className="py-24 bg-neutral-50">
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Heading>Our Signature Services</Heading>
          <Subheading className="mt-4">
            Tailored beauty solutions designed to make you look and feel your absolute best.
          </Subheading>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <Card key={index} className="border-none shadow-sm hover:shadow-md transition-shadow bg-white">
              <CardHeader>
                <div className="mb-4">{service.icon}</div>
                <CardTitle className="text-xl font-semibold">{service.title}</CardTitle>
                <CardDescription className="text-neutral-600 leading-relaxed">
                  {service.description}
                </CardDescription>
              </CardHeader>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}