'use client'

import { Check } from 'lucide-react'

const services = [
  {
    title: 'Hull Cleaning & Anode Change',
    description: 'Professional underwater hull cleaning and zinc anode maintenance for optimal performance and corrosion protection.',
    image: '/diver_cleaning.jpg',
    features: [
      'Removes marine growth',
      'Improves fuel efficiency',
      'Prevents corrosion',
      'Marine-grade anodes'
    ]
  },
  {
    title: 'Exterior Cleaning',
    description: 'Complete exterior detailing to keep your boat looking pristine and protected.',
    image: '/Washdown.jpg',
    features: [
      'Deep cleaning wash',
      'Protective wax application',
      'UV protection',
      'Gel coat restoration'
    ]
  },
  {
    title: 'Interior Detailing',
    description: 'Thorough interior cleaning and conditioning for a fresh, comfortable cabin.',
    image: '/Interior.jpg',
    features: [
      'Upholstery cleaning',
      'Mold & mildew treatment',
      'Surface conditioning',
      'Odor elimination'
    ]
  }
]

export default function ServicesSection() {
  const handleQuote = () => {
    window.location.href = 'tel:510-701-2535'
  }

  return (
    <section id="services" className="py-16 md:py-24 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-harbor-blue mb-4">Our Services</h2>
          <p className="text-lg md:text-xl text-gray-600">Professional boat maintenance tailored to your needs</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-7xl mx-auto">
          {services.map((service, index) => (
            <div key={index} className="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col">
              {/* Service Image */}
              <div className="h-48 md:h-56 overflow-hidden">
                <img
                  src={service.image}
                  alt={service.title}
                  className="w-full h-full object-cover"
                />
              </div>

              {/* Service Content */}
              <div className="p-6 md:p-8 flex flex-col flex-1">
                <h3 className="text-xl md:text-2xl font-bold text-harbor-blue mb-3">
                  {service.title}
                </h3>
                <p className="text-gray-600 mb-6">
                  {service.description}
                </p>

                {/* Features List */}
                <ul className="space-y-3 mb-6 flex-1">
                  {service.features.map((feature, idx) => (
                    <li key={idx} className="flex items-start gap-2">
                      <Check className="w-5 h-5 text-harbor-gold mt-0.5 flex-shrink-0" />
                      <span className="text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>

                {/* CTA Button */}
                <button
                  onClick={handleQuote}
                  className="w-full bg-harbor-gold text-white font-semibold py-3 px-6 rounded-lg hover:bg-harbor-amber transition-colors"
                >
                  Get Quote
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}