// app/components/Landing/AmenitiesServices.tsx
'use client';

import { useState } from 'react';
import { 
  Home,
  Utensils,
  Users,
  Leaf,
  Calendar,
  Heart,
  Coffee,
  Music,
  Dumbbell,
  Car,
  BookOpen,
  Sparkles,
  Wifi,
  Scissors,
  Church,
  Sunset,
  TreePine,
  Paintbrush,
  Gamepad2,
  Pizza,
  Waves,
  Flame,
  Snowflake,
  Wind,
  Shield,
  Clock,
  CheckCircle,
  ChevronRight,
  Star
} from 'lucide-react';
import Link from 'next/link';

const AmenitiesServices = () => {
  const [activeCategory, setActiveCategory] = useState('all');
  const [hoveredItem, setHoveredItem] = useState<number | null>(null);

  const categories = [
    { id: 'all', name: 'All Amenities', icon: Sparkles, count: 24 },
    { id: 'living', name: 'Living Spaces', icon: Home, count: 4 },
    { id: 'dining', name: 'Dining', icon: Utensils, count: 4 },
    { id: 'wellness', name: 'Wellness', icon: Heart, count: 5 },
    { id: 'activities', name: 'Activities', icon: Users, count: 6 },
    { id: 'outdoor', name: 'Outdoor', icon: Leaf, count: 5 }
  ];

  const amenities = [
    // Living Spaces
    {
      id: 1,
      icon: Home,
      name: 'Private Suites',
      description: 'Spacious private rooms with en-suite bathrooms, personal climate control, and cable TV.',
      longDescription: 'Each suite features a private bathroom, emergency call system, personal thermostat, and space for cherished furniture.',
      category: 'living',
      featured: true,
      color: 'emerald',
      image: 'https://images.pexels.com/photos/1643383/pexels-photo-1643383.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 2,
      icon: Home,
      name: 'Companion Suites',
      description: 'Shared suites for roommates, with privacy dividers and shared living area.',
      category: 'living',
      featured: false,
      color: 'emerald',
      image: 'https://images.pexels.com/photos/3771097/pexels-photo-3771097.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 3,
      icon: BookOpen,
      name: 'Library & Lounge',
      description: 'Quiet reading room with computer access and daily newspapers.',
      category: 'living',
      featured: false,
      color: 'stone',
      image: 'https://images.pexels.com/photos/2954199/pexels-photo-2954199.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 4,
      icon: Wifi,
      name: 'WiFi Throughout',
      description: 'High-speed internet access in all common areas and private suites.',
      category: 'living',
      featured: false,
      color: 'blue',
      image: ''
    },

    // Dining
    {
      id: 5,
      icon: Utensils,
      name: 'Restaurant Dining',
      description: 'Chef-prepared meals served restaurant-style in our beautiful dining room.',
      longDescription: 'Three delicious meals daily with multiple entree choices, prepared by our executive chef. Dietary restrictions always accommodated.',
      category: 'dining',
      featured: true,
      color: 'amber',
      image: 'https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 6,
      icon: Coffee,
      name: 'Coffee Bar',
      description: 'Gourmet coffee, tea, and snacks available throughout the day.',
      category: 'dining',
      featured: false,
      color: 'amber',
      image: 'https://images.pexels.com/photos/312418/pexels-photo-312418.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 7,
      icon: Pizza,
      name: 'Private Dining',
      description: 'Reserve our private dining room for family celebrations.',
      category: 'dining',
      featured: false,
      color: 'orange',
      image: ''
    },
    {
      id: 8,
      icon: Users,
      name: 'Family Sunday Brunch',
      description: 'Weekly brunch where families can dine together.',
      category: 'dining',
      featured: false,
      color: 'amber',
      image: ''
    },

    // Wellness
    {
      id: 9,
      icon: Heart,
      name: 'Wellness Center',
      description: 'On-site health monitoring and wellness programs.',
      longDescription: 'Regular health checks, medication management, and coordination with your physicians.',
      category: 'wellness',
      featured: true,
      color: 'rose',
      image: 'https://images.pexels.com/photos/7659564/pexels-photo-7659564.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 10,
      icon: Dumbbell,
      name: 'Fitness Center',
      description: 'Senior-friendly exercise equipment and classes.',
      category: 'wellness',
      featured: false,
      color: 'orange',
      image: 'https://images.pexels.com/photos/669586/pexels-photo-669586.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 11,
      icon: Scissors,
      name: 'Salon & Barber',
      description: 'Full-service salon with licensed stylists.',
      category: 'wellness',
      featured: false,
      color: 'pink',
      image: 'https://images.pexels.com/photos/3993449/pexels-photo-3993449.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 12,
      icon: Church,
      name: 'Spiritual Care',
      description: 'Non-denominational services and pastoral counseling.',
      category: 'wellness',
      featured: false,
      color: 'purple',
      image: ''
    },
    {
      id: 13,
      icon: Waves,
      name: 'Hydrotherapy',
      description: 'Therapeutic whirlpool and spa services.',
      category: 'wellness',
      featured: false,
      color: 'blue',
      image: 'https://images.pexels.com/photos/261327/pexels-photo-261327.jpeg?auto=compress&cs=tinysrgb&w=600'
    },

    // Activities
    {
      id: 14,
      icon: Music,
      name: 'Live Music',
      description: 'Weekly performances by local musicians.',
      category: 'activities',
      featured: false,
      color: 'indigo',
      image: 'https://images.pexels.com/photos/167636/pexels-photo-167636.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 15,
      icon: Paintbrush,
      name: 'Art Studio',
      description: 'Painting, pottery, and craft classes.',
      category: 'activities',
      featured: true,
      color: 'purple',
      image: 'https://images.pexels.com/photos/207732/pexels-photo-207732.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 16,
      icon: Gamepad2,
      name: 'Game Room',
      description: 'Billiards, cards, and board games.',
      category: 'activities',
      featured: false,
      color: 'amber',
      image: ''
    },
    {
      id: 17,
      icon: Calendar,
      name: 'Daily Activities',
      description: 'Exercise classes, book club, and social hours.',
      category: 'activities',
      featured: true,
      color: 'emerald',
      image: 'https://images.pexels.com/photos/6646873/pexels-photo-6646873.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 18,
      icon: Users,
      name: 'Happy Hour',
      description: 'Weekly social gatherings with refreshments.',
      category: 'activities',
      featured: false,
      color: 'amber',
      image: ''
    },
    {
      id: 19,
      icon: Car,
      name: 'Scheduled Outings',
      description: 'Group trips to shopping, museums, and local attractions.',
      category: 'activities',
      featured: false,
      color: 'teal',
      image: 'https://images.pexels.com/photos/97082/weimaraner-dog-puppy-breed-97082.jpeg?auto=compress&cs=tinysrgb&w=600'
    },

    // Outdoor
    {
      id: 20,
      icon: Leaf,
      name: 'Gardens',
      description: 'Beautiful walking paths and meditation gardens.',
      longDescription: 'Secure, manicured gardens with benches, fountains, and raised garden beds for residents who love to garden.',
      category: 'outdoor',
      featured: true,
      color: 'green',
      image: 'https://images.pexels.com/photos/261579/pexels-photo-261579.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 21,
      icon: TreePine,
      name: 'Walking Paths',
      description: 'Paved, well-lit paths throughout the property.',
      category: 'outdoor',
      featured: false,
      color: 'green',
      image: 'https://images.pexels.com/photos/158028/sunset-trees-field-meadow-158028.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 22,
      icon: Sunset,
      name: 'Outdoor Terraces',
      description: 'Screened porches and sunrooms with seating.',
      category: 'outdoor',
      featured: false,
      color: 'amber',
      image: 'https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      id: 23,
      icon: Flame,
      name: 'Fire Pits',
      description: 'Evening gatherings around cozy fire pits.',
      category: 'outdoor',
      featured: false,
      color: 'orange',
      image: ''
    },
    {
      id: 24,
      icon: Wind,
      name: 'Screened Patios',
      description: 'Bug-free outdoor relaxation areas.',
      category: 'outdoor',
      featured: false,
      color: 'blue',
      image: ''
    }
  ];

  const getColorClasses = (color: string) => {
    const colors = {
      emerald: {
        bg: 'bg-emerald-50',
        text: 'text-emerald-600',
        border: 'border-emerald-200',
        light: 'bg-emerald-100',
        gradient: 'from-emerald-500 to-emerald-400',
        dark: 'bg-emerald-600',
        soft: 'bg-emerald-50/50'
      },
      amber: {
        bg: 'bg-amber-50',
        text: 'text-amber-600',
        border: 'border-amber-200',
        light: 'bg-amber-100',
        gradient: 'from-amber-500 to-amber-400',
        dark: 'bg-amber-600',
        soft: 'bg-amber-50/50'
      },
      rose: {
        bg: 'bg-rose-50',
        text: 'text-rose-600',
        border: 'border-rose-200',
        light: 'bg-rose-100',
        gradient: 'from-rose-500 to-rose-400',
        dark: 'bg-rose-600',
        soft: 'bg-rose-50/50'
      },
      blue: {
        bg: 'bg-blue-50',
        text: 'text-blue-600',
        border: 'border-blue-200',
        light: 'bg-blue-100',
        gradient: 'from-blue-500 to-blue-400',
        dark: 'bg-blue-600',
        soft: 'bg-blue-50/50'
      },
      green: {
        bg: 'bg-green-50',
        text: 'text-green-600',
        border: 'border-green-200',
        light: 'bg-green-100',
        gradient: 'from-green-500 to-green-400',
        dark: 'bg-green-600',
        soft: 'bg-green-50/50'
      },
      purple: {
        bg: 'bg-purple-50',
        text: 'text-purple-600',
        border: 'border-purple-200',
        light: 'bg-purple-100',
        gradient: 'from-purple-500 to-purple-400',
        dark: 'bg-purple-600',
        soft: 'bg-purple-50/50'
      },
      indigo: {
        bg: 'bg-indigo-50',
        text: 'text-indigo-600',
        border: 'border-indigo-200',
        light: 'bg-indigo-100',
        gradient: 'from-indigo-500 to-indigo-400',
        dark: 'bg-indigo-600',
        soft: 'bg-indigo-50/50'
      },
      orange: {
        bg: 'bg-orange-50',
        text: 'text-orange-600',
        border: 'border-orange-200',
        light: 'bg-orange-100',
        gradient: 'from-orange-500 to-orange-400',
        dark: 'bg-orange-600',
        soft: 'bg-orange-50/50'
      },
      pink: {
        bg: 'bg-pink-50',
        text: 'text-pink-600',
        border: 'border-pink-200',
        light: 'bg-pink-100',
        gradient: 'from-pink-500 to-pink-400',
        dark: 'bg-pink-600',
        soft: 'bg-pink-50/50'
      },
      teal: {
        bg: 'bg-teal-50',
        text: 'text-teal-600',
        border: 'border-teal-200',
        light: 'bg-teal-100',
        gradient: 'from-teal-500 to-teal-400',
        dark: 'bg-teal-600',
        soft: 'bg-teal-50/50'
      },
      stone: {
        bg: 'bg-stone-50',
        text: 'text-stone-600',
        border: 'border-stone-200',
        light: 'bg-stone-100',
        gradient: 'from-stone-500 to-stone-400',
        dark: 'bg-stone-600',
        soft: 'bg-stone-50/50'
      }
    };
    return colors[color as keyof typeof colors] || colors.emerald;
  };

  const featuredAmenities = amenities.filter(a => a.featured);
  const filteredAmenities = activeCategory === 'all' 
    ? amenities 
    : amenities.filter(a => a.category === activeCategory);

  return (
    <section className="py-0 bg-white relative overflow-hidden">
      {/* Decorative Background */}
      <div className="absolute inset-0">
        <div className="absolute top-40 left-20 w-72 h-72 bg-emerald-100 rounded-full blur-3xl opacity-20"></div>
        <div className="absolute bottom-40 right-20 w-72 h-72 bg-amber-100 rounded-full blur-3xl opacity-20"></div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="inline-flex items-center gap-2 bg-emerald-50 px-4 py-2 rounded-full mb-4">
            <Sparkles className="w-4 h-4 text-emerald-600" />
            <span className="text-sm font-semibold text-emerald-700 uppercase tracking-wider">
              Premium Amenities & Services
            </span>
          </div>
          
          <h2 className="text-4xl md:text-5xl font-light text-gray-900 mb-4">
            Everything That{' '}
            <span className="font-bold bg-gradient-to-r from-emerald-600 to-amber-500 bg-clip-text text-transparent">
              Feels Like Home
            </span>
          </h2>
          
          <p className="text-lg text-gray-600">
            From restaurant-style dining to beautiful gardens and engaging activities, 
            discover all the ways we make everyday living extraordinary.
          </p>
        </div>

        {/* Category Tabs */}
        <div className="flex flex-wrap justify-center gap-2 mb-12">
          {categories.map((category) => {
            const Icon = category.icon;
            const isActive = activeCategory === category.id;
            
            return (
              <button
                key={category.id}
                onClick={() => setActiveCategory(category.id)}
                className={`
                  flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-medium transition-all
                  ${isActive 
                    ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-600/30 scale-105' 
                    : 'bg-white text-gray-600 hover:bg-emerald-50 border border-gray-200'
                  }
                `}
              >
                <Icon className="w-4 h-4" />
                {category.name}
                <span className={`
                  text-xs px-1.5 py-0.5 rounded-full
                  ${isActive ? 'bg-white/20' : 'bg-gray-100 text-gray-500'}
                `}>
                  {category.count}
                </span>
              </button>
            );
          })}
        </div>

        {/* Featured Amenities */}
        {activeCategory === 'all' && (
          <div className="mb-16">
            {/* <h3 className="text-2xl font-light text-gray-900 mb-6 flex items-center gap-2">
              <Star className="w-5 h-5 text-amber-500 fill-current" />
              Featured Amenities
            </h3> */}
            <div className="grid md:grid-cols-3 gap-6">
              {featuredAmenities.slice(0, 3).map((amenity) => {
                const Icon = amenity.icon;
                const colors = getColorClasses(amenity.color);
                
                return (
                  <div
                    key={amenity.id}
                    className="group relative bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-lg hover:shadow-2xl transition-all duration-500 hover:scale-105"
                  >
                    {/* Image */}
                    <div className="h-48 overflow-hidden">
                      <img
                        src={amenity.image}
                        alt={amenity.name}
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/0 via-transparent to-transparent"></div>
                    </div>

                    {/* Content */}
                    <div className="p-6">
                      <div className="flex items-center gap-3 mb-3">
                        <div className={`w-10 h-10 ${colors.bg} rounded-lg flex items-center justify-center`}>
                          <Icon className={`w-5 h-5 ${colors.text}`} />
                        </div>
                        <h4 className="text-lg font-semibold text-gray-900">{amenity.name}</h4>
                      </div>
                      <p className="text-sm text-gray-600 mb-4">{amenity.longDescription || amenity.description}</p>
                      {/* <Link
                        href="#"
                        className={`inline-flex items-center gap-1 text-sm font-medium ${colors.text} hover:gap-2 transition-all`}
                      >
                        Learn more <ChevronRight className="w-4 h-4" />
                      </Link> */}
                    </div>

                    {/* Featured Badge */}
                    <div className="absolute top-4 right-4 bg-amber-500 text-white text-xs px-2 py-1 rounded-full shadow-lg">
                      Featured
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* Amenities Grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {filteredAmenities.map((amenity) => {
            const Icon = amenity.icon;
            const colors = getColorClasses(amenity.color);
            const isHovered = hoveredItem === amenity.id;

            return (
              <div
                key={amenity.id}
                className="group relative"
                onMouseEnter={() => setHoveredItem(amenity.id)}
                onMouseLeave={() => setHoveredItem(null)}
              >
                <div className={`
                  relative bg-white rounded-xl p-5 border-2 transition-all duration-300 h-full
                  ${isHovered 
                    ? `${colors.border} shadow-xl scale-105 z-10` 
                    : 'border-gray-100 shadow-md hover:shadow-lg'
                  }
                `}>
                  {/* Icon */}
                  <div className="flex items-start gap-3 mb-3">
                    <div className={`
                      w-10 h-10 rounded-lg flex items-center justify-center
                      transition-all duration-300 group-hover:scale-110 group-hover:rotate-3
                      ${colors.bg}
                    `}>
                      <Icon className={`w-5 h-5 ${colors.text}`} />
                    </div>
                    
                    {/* Category Badge */}
                    <span className="text-[10px] font-medium text-gray-400 uppercase tracking-wider">
                      {amenity.category}
                    </span>
                  </div>

                  {/* Content */}
                  <h4 className="text-sm font-semibold text-gray-900 mb-2 group-hover:text-emerald-600 transition-colors">
                    {amenity.name}
                  </h4>
                  <p className="text-xs text-gray-500 leading-relaxed">
                    {amenity.description}
                  </p>

                  {/* Hover Indicator */}
                  {isHovered && (
                    <div className="absolute -bottom-2 right-4">
                      <div className={`w-6 h-6 ${colors.dark} rounded-full flex items-center justify-center shadow-lg`}>
                        <ChevronRight className="w-3 h-3 text-white" />
                      </div>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        {/* Stats Row */}
        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { number: '24', label: 'Premium Amenities', icon: Sparkles, color: 'emerald' },
            { number: '50+', label: 'Weekly Activities', icon: Calendar, color: 'amber' },
            { number: '3', label: 'Chef-Prepared Meals', icon: Utensils, color: 'rose' },
            { number: '24/7', label: 'Access to All', icon: Clock, color: 'purple' }
          ].map((stat, idx) => {
            const StatIcon = stat.icon;
            const colors = getColorClasses(stat.color);
            
            return (
              <div 
                key={idx}
                className="bg-white rounded-xl p-5 border border-gray-100 shadow-md hover:shadow-lg transition-all group"
              >
                <div className="flex items-center gap-3">
                  <div className={`w-10 h-10 ${colors.bg} rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform`}>
                    <StatIcon className={`w-5 h-5 ${colors.text}`} />
                  </div>
                  <div>
                    <div className="text-2xl font-bold text-gray-900">{stat.number}</div>
                    <div className="text-xs text-gray-500">{stat.label}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Services Spotlight */}
        <div className="mt-16 bg-gradient-to-r from-emerald-700 via-emerald-600 to-amber-600 rounded-3xl p-8 text-white relative overflow-hidden">
          {/* Decorative elements */}
          <div className="absolute inset-0 opacity-10">
            <div className="absolute top-0 right-0 w-64 h-64 bg-white rounded-full blur-3xl"></div>
            <div className="absolute bottom-0 left-0 w-64 h-64 bg-amber-400 rounded-full blur-3xl"></div>
          </div>

          <div className="relative flex flex-col md:flex-row items-center justify-between gap-6">
            <div className="flex items-center gap-4">
              <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm">
                <Shield className="w-8 h-8 text-white" />
              </div>
              <div>
                <h4 className="text-xl font-semibold mb-1">All-Inclusive Living</h4>
                <p className="text-emerald-100">No hidden fees • Everything included in one monthly price</p>
              </div>
            </div>

            <div className="flex flex-wrap gap-3">
              {[
                'Utilities',
                'Meals',
                'Activities',
                'Maintenance',
                'Housekeeping',
                'Transportation'
              ].map((item, idx) => (
                <div key={idx} className="flex items-center gap-1 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-full">
                  <CheckCircle className="w-3 h-3 text-amber-300" />
                  <span className="text-xs">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Download Guide */}
        <div className="mt-12 text-center">
          <Link
            href="#"
            className="group inline-flex items-center gap-2 px-8 py-4 bg-white border-2 border-emerald-600 text-emerald-600 rounded-xl font-semibold hover:bg-emerald-50 hover:scale-105 transition-all duration-300 shadow-lg"
          >
            <Sparkles className="w-5 h-5" />
            <span>Download Complete Amenities Guide</span>
            <ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </Link>
          <p className="text-sm text-gray-400 mt-3">
            Includes detailed descriptions, photos, and floor plans
          </p>
        </div>
      </div>
    </section>
  );
};

export default AmenitiesServices;