import React from 'react';
import { motion } from 'motion/react';
import { 
  Building, Leaf, Bus, Footprints, ThermometerSun,
  Flower2, Building2, PartyPopper, Mic, Sofa,
  Layers, Activity, Sun, Dumbbell, Waves,
  LifeBuoy, Gamepad2, Move, Smile, Puzzle,
  Trophy, Target, LayoutGrid
} from 'lucide-react';

const amenitiesList = [
  { icon: <Building size={48} strokeWidth={1} />, title: "Designer AC entrance lobbies" },
  { icon: <Leaf size={48} strokeWidth={1} />, title: "Peripheral planting of medicinal shrubs/vegetable plantation" },
  { icon: <Bus size={48} strokeWidth={1} />, title: "School-bus drop zone" },
  { icon: <Footprints size={48} strokeWidth={1} />, title: "Acupressure path" },
  { icon: <ThermometerSun size={48} strokeWidth={1} />, title: "Steam room bath unit separate for men and women" },
  { icon: <Flower2 size={48} strokeWidth={1} />, title: "Meditation area with lounge for seniors" },
  { icon: <Building2 size={48} strokeWidth={1} />, title: "Designer clubhouse" },
  { icon: <PartyPopper size={48} strokeWidth={1} />, title: "Party area with space and provision for a pantry" },
  { icon: <Mic size={48} strokeWidth={1} />, title: "Amphitheatre" },
  { icon: <Sofa size={48} strokeWidth={1} />, title: "Designer sit out" },
  { icon: <Layers size={48} strokeWidth={1} />, title: "Multipurpose deck with seating" },
  { icon: <Activity size={48} strokeWidth={1} />, title: "Jogging track" },
  { icon: <Sun size={48} strokeWidth={1} />, title: "Open gym area" },
  { icon: <Dumbbell size={48} strokeWidth={1} />, title: "Air-conditioned gym" },
  { icon: <Waves size={48} strokeWidth={1} />, title: "Main swimming pool with wooden deck" },
  { icon: <LifeBuoy size={48} strokeWidth={1} />, title: "Toddlers' outdoor pool" },
  { icon: <Gamepad2 size={48} strokeWidth={1} />, title: "Air-conditioned indoor games zone" },
  { icon: <Move size={48} strokeWidth={1} />, title: "Skating ring" },
  { icon: <Smile size={48} strokeWidth={1} />, title: "Interactive kids play area with equipment" },
  { icon: <Puzzle size={48} strokeWidth={1} />, title: "Toddlers' play area" },
  { icon: <Trophy size={48} strokeWidth={1} />, title: "Box cricket area" },
  { icon: <Target size={48} strokeWidth={1} />, title: "Basketball court" },
  { icon: <LayoutGrid size={48} strokeWidth={1} />, title: "Multipurpose court" }
];

export default function Amenities() {
  return (
    <section id="amenities" className="py-24 bg-[#fcfaf7] relative overflow-hidden">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="text-center max-w-3xl mx-auto mb-20">
          <h4 className="text-primary font-medium tracking-[0.2em] uppercase mb-4 text-sm">World-Class Facilities</h4>
          <h2 className="text-4xl md:text-5xl font-serif mb-6 text-gray-900">Over 20+ Amenities</h2>
          <p className="text-gray-500 text-xl font-light">
            Crafted precisely for the legacy you desire.
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-x-8 gap-y-16">
          {amenitiesList.map((item, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: (index % 5) * 0.1, duration: 0.6, ease: "easeOut" }}
              className="flex flex-col items-center text-center group"
            >
              <div className="text-[#a67a54] mb-5 transform group-hover:scale-110 transition-transform duration-300">
                {item.icon}
              </div>
              <p className="text-gray-600 text-sm font-light leading-snug px-2">
                {item.title}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
