import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
import { Eye, Heart, TreePine, UtensilsCrossed, Wifi, Wine } from 'lucide-react'

const amenities = [
  { icon: Wifi, title: 'Complimentary Wi-Fi', description: 'Stay connected even in the bush with high-speed satellite internet in all rooms and common areas.' },
  { icon: UtensilsCrossed, title: 'Fine Dining', description: 'Enjoy gourmet African cuisine prepared by our in-house chef using fresh local ingredients.' },
  { icon: Wine, title: 'Curated Wine Cellar', description: "A selection of South Africa's finest wines available for pairing with your meals." },
  { icon: TreePine, title: 'Nature Trails', description: "Guided bush walks led by experienced rangers revealing the region's flora and fauna." },
  { icon: Eye, title: 'Game Drives', description: 'Daily morning and sunset game drives in open vehicles across the private reserve.' },
  { icon: Heart, title: 'Spa & Wellness', description: 'Bespoke treatments using organic African botanicals in an open-air spa overlooking the plains.' },
]

export default function AmenitiesSection() {
  return (
    <section data-vula-section="amenities" id="amenities" className="py-20 lg:py-28 bg-white">
      <div className="max-w-7xl mx-auto px-4">
        <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-center mb-4 text-[#111827]">Luxury Amenities</h2>
        <p className="text-lg text-neutral-600 text-center max-w-2xl mx-auto mb-12 leading-relaxed">
          Every detail curated for an unforgettable wilderness experience.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {amenities.map((item, index) => {
            const Icon = item.icon
            return (
              <Card key={index} className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out p-8 text-center">
                <div className="flex justify-center mb-4">
                  <Icon className="w-10 h-10 text-[#36454F]" />
                </div>
                <CardTitle className="text-xl font-semibold mb-2 text-[#111827]">{item.title}</CardTitle>
                <CardContent className="p-0">
                  <p className="text-neutral-600 text-sm leading-relaxed">{item.description}</p>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
}