import React, { useState, useEffect } from 'react';
import { Wifi, Clock, MapPin, Phone, Mail, Menu, X, Check, Users, User, Zap } from 'lucide-react';

interface HotspotPlan {
  id: string;
  duration: string;
  type: 'solo' | 'duo' | null;
  price: number;
  icon: string;
  popular?: boolean;
}

const quickPlans: HotspotPlan[] = [
  { id: '1hr', duration: '1 Hour', type: null, price: 10, icon: '⚡' },
  { id: '3hrs', duration: '3 Hours', type: null, price: 20, icon: '🔥' },
  { id: '8hrs', duration: '8 Hours', type: null, price: 30, icon: '☀️' },
  { id: '15hrs', duration: '15 Hours', type: null, price: 50, icon: '🌙' },
];

const extendedPlans: HotspotPlan[] = [
  { id: '24hrs-solo', duration: '24 Hours', type: 'solo', price: 80, icon: '🥉' },
  { id: '24hrs-duo', duration: '24 Hours', type: 'duo', price: 140, icon: '🥉' },
  { id: '7days-solo', duration: '7 Days', type: 'solo', price: 280, icon: '🥈', popular: true },
  { id: '7days-duo', duration: '7 Days', type: 'duo', price: 380, icon: '🥈' },
];

const monthlyPlans: HotspotPlan[] = [
  { id: 'monthly-solo', duration: 'Monthly', type: 'solo', price: 750, icon: '👑' },
  { id: 'monthly-duo', duration: 'Monthly', type: 'duo', price: 1000, icon: '👑' },
];

export default function HotspotPackages() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [selectedPlan, setSelectedPlan] = useState<HotspotPlan | null>(null);
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-gray-900 overflow-hidden">
      <style>{`
        @keyframes float {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-20px); }
        }
        @keyframes slideInLeft {
          from { opacity: 0; transform: translateX(-50px); }
          to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideInRight {
          from { opacity: 0; transform: translateX(50px); }
          to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideInUp {
          from { opacity: 0; transform: translateY(50px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes scaleIn {
          from { opacity: 0; transform: scale(0.8); }
          to { opacity: 1; transform: scale(1); }
        }
        @keyframes shimmer {
          0% { background-position: -1000px 0; }
          100% { background-position: 1000px 0; }
        }
        @keyframes pulse-glow {
          0%, 100% { box-shadow: 0 0 20px rgba(234, 179, 8, 0.5); }
          50% { box-shadow: 0 0 40px rgba(234, 179, 8, 0.8); }
        }
        @keyframes rotate {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        @keyframes bounce-slow {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
        .animate-float { animation: float 3s ease-in-out infinite; }
        .animate-slide-in-left { animation: slideInLeft 0.8s ease-out forwards; }
        .animate-slide-in-right { animation: slideInRight 0.8s ease-out forwards; }
        .animate-slide-in-up { animation: slideInUp 0.8s ease-out forwards; }
        .animate-scale-in { animation: scaleIn 0.6s ease-out forwards; }
        .animate-shimmer {
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
          background-size: 1000px 100%;
          animation: shimmer 2s infinite;
        }
        .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
        .animate-rotate-slow { animation: rotate 20s linear infinite; }
        .animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }
        .hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .hover-lift:hover { transform: translateY(-8px) scale(1.02); }
        .hover-glow:hover { box-shadow: 0 10px 40px rgba(234, 179, 8, 0.4); }
        .stagger-1 { animation-delay: 0.1s; }
        .stagger-2 { animation-delay: 0.2s; }
        .stagger-3 { animation-delay: 0.3s; }
        .stagger-4 { animation-delay: 0.4s; }
        .stagger-5 { animation-delay: 0.5s; }
        .gradient-text {
          background: linear-gradient(90deg, #eab308, #facc15, #fde047);
          background-size: 200% auto;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          animation: shimmer 3s linear infinite;
        }
      `}</style>

      {/* Top Bar */}
      <div className="bg-gradient-to-r from-gray-800 via-gray-900 to-gray-800 text-white py-2 px-4 relative overflow-hidden border-b border-gray-700">
        <div className="absolute inset-0 animate-shimmer"></div>
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center text-sm relative z-10">
          <div className="flex items-center space-x-4 animate-slide-in-left text-gray-300">
            <span>📞 Call: 0740 678 046</span>
            <span className="hidden sm:inline">✉️ info@goldlinkfiber.co.ke</span>
          </div>
          <div className="text-yellow-400 font-semibold animate-slide-in-right flex items-center">
            <span className="animate-pulse mr-2">⚡</span>
            <span>Instant Hotspot Access</span>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <nav className="bg-gray-900 shadow-lg sticky top-0 z-50 border-b border-gray-800" style={{ transform: `translateY(${Math.min(scrollY * 0.1, 0)}px)` }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600 rounded-lg flex items-center justify-center shadow-lg animate-pulse-glow">
                <Wifi className="text-gray-900" size={24} />
              </div>
              <div>
                <div className="text-2xl font-bold text-white">Gold Link Fiber</div>
                <div className="text-xs text-gray-400">Lightning-Fast Internet</div>
              </div>
            </div>

            <div className="hidden md:flex space-x-6">
              <a href="/" className="text-gray-300 hover:text-yellow-400 font-medium transition transform hover:scale-110">Home</a>
              <a href="/#packages" className="text-gray-300 hover:text-yellow-400 font-medium transition transform hover:scale-110">Packages</a>
              <a href="/hotspot" className="text-yellow-400 font-semibold transition transform hover:scale-110">Hotspot</a>
              <a href="/#coverage" className="text-gray-300 hover:text-yellow-400 font-medium transition transform hover:scale-110">Coverage</a>
              <a href="/#why-us" className="text-gray-300 hover:text-yellow-400 font-medium transition transform hover:scale-110">Why Us</a>
              <a href="/#contact" className="text-gray-300 hover:text-yellow-400 font-medium transition transform hover:scale-110">Contact</a>
            </div>

            <button
              className="md:hidden transition transform hover:scale-110 text-gray-300"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            >
              {mobileMenuOpen ? <X /> : <Menu />}
            </button>
          </div>
        </div>

        {mobileMenuOpen && (
          <div className="md:hidden bg-gray-800 border-t border-gray-700 animate-slide-in-up">
            <div className="px-4 py-4 space-y-3">
              <a href="/" className="block text-gray-300 hover:text-yellow-400 font-medium transform hover:translate-x-2 transition">Home</a>
              <a href="/#packages" className="block text-gray-300 hover:text-yellow-400 font-medium transform hover:translate-x-2 transition">Packages</a>
              <a href="/hotspot" className="block text-yellow-400 font-semibold transform hover:translate-x-2 transition">Hotspot</a>
              <a href="/#coverage" className="block text-gray-300 hover:text-yellow-400 font-medium transform hover:translate-x-2 transition">Coverage</a>
              <a href="/#why-us" className="block text-gray-300 hover:text-yellow-400 font-medium transform hover:translate-x-2 transition">Why Us</a>
              <a href="/#contact" className="block text-gray-300 hover:text-yellow-400 font-medium transform hover:translate-x-2 transition">Contact</a>
            </div>
          </div>
        )}
      </nav>

      {/* Hero */}
      <section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 pt-16 pb-12 px-4">
        <div className="absolute top-20 left-10 w-72 h-72 bg-yellow-500/10 rounded-full mix-blend-lighten filter blur-3xl animate-float"></div>
        <div className="absolute bottom-20 right-10 w-72 h-72 bg-yellow-600/10 rounded-full mix-blend-lighten filter blur-3xl animate-float" style={{ animationDelay: '1s' }}></div>

        <div className="max-w-5xl mx-auto text-center relative z-10">
          <div className="inline-flex items-center space-x-2 px-4 py-2 bg-green-900/30 text-green-400 border border-green-800 rounded-full text-sm font-semibold animate-slide-in-left hover-lift mb-6">
            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
            <span>No Login Hassle • Instant Connect</span>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-white leading-tight mb-4 animate-slide-in-up">
            WiFi Hotspot
            <span className="block gradient-text">Packages</span>
          </h1>
          <p className="text-lg text-gray-300 max-w-xl mx-auto animate-slide-in-up stagger-1">
            Quick, affordable internet access — pay as you go. Perfect for browsing, streaming, and staying connected on the move.
          </p>
        </div>
      </section>

      {/* Quick Access */}
      <section className="py-16 px-4 bg-gradient-to-br from-gray-800 via-gray-900 to-gray-800 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-96 h-96 bg-yellow-500/10 rounded-full blur-3xl animate-rotate-slow"></div>

        <div className="max-w-7xl mx-auto relative z-10">
          <div className="flex items-center justify-center mb-10 animate-slide-in-up">
            <div className="h-px bg-gradient-to-r from-transparent via-yellow-500 to-transparent flex-1"></div>
            <div className="px-6 py-2 bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-full">
              <h2 className="text-xl font-bold text-gray-900 flex items-center">
                <Clock size={20} className="mr-2" />
                Quick Access
              </h2>
            </div>
            <div className="h-px bg-gradient-to-r from-transparent via-yellow-500 to-transparent flex-1"></div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {quickPlans.map((plan, idx) => (
              <PlanCard key={plan.id} plan={plan} idx={idx} onSelect={setSelectedPlan} />
            ))}
          </div>
        </div>
      </section>

      {/* Extended Plans */}
      <section id="packages" className="py-16 px-4 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 relative overflow-hidden">
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-yellow-900/20 to-yellow-600/20 rounded-full blur-3xl animate-rotate-slow" style={{ animationDirection: 'reverse' }}></div>

        <div className="max-w-7xl mx-auto relative z-10">
          <div className="flex items-center justify-center mb-10 animate-slide-in-up">
            <div className="h-px bg-gradient-to-r from-transparent via-yellow-500 to-transparent flex-1"></div>
            <div className="px-6 py-2 bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-full">
              <h2 className="text-xl font-bold text-gray-900 flex items-center">
                <Zap size={20} className="mr-2" />
                Extended Plans
              </h2>
            </div>
            <div className="h-px bg-gradient-to-r from-transparent via-yellow-500 to-transparent flex-1"></div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {extendedPlans.map((plan, idx) => (
              <PlanCard key={plan.id} plan={plan} idx={idx} onSelect={setSelectedPlan} />
            ))}
          </div>
        </div>
      </section>

      {/* Monthly */}
      <section className="py-16 px-4 bg-gradient-to-br from-gray-800 via-gray-900 to-gray-800 relative overflow-hidden">
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-yellow-500/10 rounded-full blur-3xl animate-pulse"></div>

        <div className="max-w-3xl mx-auto relative z-10">
          <div className="flex items-center justify-center mb-10 animate-slide-in-up">
            <div className="h-px bg-gradient-to-r from-transparent via-yellow-500 to-transparent flex-1"></div>
            <div className="px-6 py-2 bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-full">
              <h2 className="text-xl font-bold text-gray-900 flex items-center">
                <Users size={20} className="mr-2" />
                Monthly Value
              </h2>
            </div>
            <div className="h-px bg-gradient-to-r from-transparent via-yellow-500 to-transparent flex-1"></div>
          </div>

          <div className="grid grid-cols-2 gap-6 max-w-lg mx-auto">
            {monthlyPlans.map((plan, idx) => (
              <PlanCard key={plan.id} plan={plan} idx={idx} onSelect={setSelectedPlan} />
            ))}
          </div>
        </div>
      </section>

      {/* Info strip */}
      <section className="py-16 px-4 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-72 h-72 bg-yellow-500/10 rounded-full blur-3xl animate-float"></div>

        <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-6 relative z-10">
          {[
            { icon: Zap, text: 'No registration needed — connect instantly and start browsing' },
            { icon: User, text: 'Solo = 1 device, Duo = 2 devices connected simultaneously' },
            { icon: Check, text: 'Unlimited data within your chosen time window' },
          ].map((item, i) => (
            <div key={i} className={`flex items-start space-x-3 bg-gradient-to-br from-gray-800 to-gray-700 border border-gray-600 rounded-xl p-5 hover:border-yellow-500 hover-lift animate-scale-in stagger-${i + 1}`}>
              <div className="w-10 h-10 rounded-lg bg-yellow-500/10 border border-yellow-500/30 flex items-center justify-center flex-shrink-0">
                <item.icon size={18} className="text-yellow-400" />
              </div>
              <p className="text-sm text-gray-300 leading-snug">{item.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Contact CTA */}
      <section id="contact" className="py-16 px-4 bg-gradient-to-br from-gray-800 via-gray-900 to-gray-800 relative overflow-hidden">
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-yellow-500/10 rounded-full blur-3xl animate-float"></div>

        <div className="max-w-2xl mx-auto text-center relative z-10">
          <div className="bg-gradient-to-br from-gray-800 to-gray-700 border-2 border-yellow-500/30 rounded-2xl p-10 shadow-2xl animate-scale-in hover-glow">
            <h3 className="text-2xl font-bold text-white mb-3 animate-slide-in-up">
              Need Help Choosing a <span className="text-yellow-400">Plan?</span>
            </h3>
            <p className="text-gray-300 mb-6 animate-slide-in-up stagger-1">Our team is on standby to get you connected in minutes.</p>
            <a
              href="tel:0740678046"
              className="inline-flex items-center space-x-2 px-8 py-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-gray-900 rounded-lg font-bold hover:shadow-xl transition transform hover:scale-105 hover:-translate-y-1 animate-slide-in-up stagger-2"
            >
              <Phone size={18} />
              <span>Call 0740 678 046</span>
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-950 text-white py-12 px-4 border-t border-gray-800">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div className="animate-slide-in-up stagger-1">
              <div className="flex items-center space-x-2 mb-4">
                <div className="w-10 h-10 bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600 rounded-lg flex items-center justify-center animate-pulse-glow">
                  <Wifi className="text-gray-900" size={20} />
                </div>
                <span className="text-xl font-bold">Gold Link Fiber</span>
              </div>
              <p className="text-gray-400 text-sm">Your neighborhood's most trusted internet provider</p>
            </div>
            <div className="animate-slide-in-up stagger-2">
              <h4 className="font-semibold mb-4 text-yellow-400">Quick Links</h4>
              <div className="space-y-2 text-sm text-gray-400">
                <a href="/#packages" className="block hover:text-yellow-400 transform hover:translate-x-2 transition">Home Packages</a>
                <a href="/hotspot" className="block hover:text-yellow-400 transform hover:translate-x-2 transition">Hotspot Packages</a>
                <a href="/#coverage" className="block hover:text-yellow-400 transform hover:translate-x-2 transition">Coverage Areas</a>
                <a href="/#contact" className="block hover:text-yellow-400 transform hover:translate-x-2 transition">Contact</a>
              </div>
            </div>
            <div className="animate-slide-in-up stagger-3">
              <h4 className="font-semibold mb-4 text-yellow-400">Hotspot Plans</h4>
              <div className="space-y-2 text-sm text-gray-400">
                <p className="hover:text-yellow-400 transition">Hourly from KSh 10</p>
                <p className="hover:text-yellow-400 transition">Daily Solo/Duo</p>
                <p className="hover:text-yellow-400 transition">Weekly Solo/Duo</p>
                <p className="hover:text-yellow-400 transition">Monthly Solo/Duo</p>
              </div>
            </div>
            <div className="animate-slide-in-up stagger-4">
              <h4 className="font-semibold mb-4 text-yellow-400">Contact</h4>
              <div className="space-y-2 text-sm text-gray-400">
                <p className="hover:text-yellow-400 transition">📞 0740 678 046</p>
                <p className="hover:text-yellow-400 transition">✉️ info@goldlinkfiber.co.ke</p>
                <p className="hover:text-yellow-400 transition">🕐 Mon-Sat: 8AM-6PM</p>
              </div>
            </div>
          </div>
          <div className="border-t border-gray-800 pt-8 text-center text-sm text-gray-400">
            <p>© 2025 Gold Link Fiber. All rights reserved.</p>
            <p className="mt-2">Terms & Conditions | Privacy Policy</p>
          </div>
        </div>
      </footer>

      {/* Selected Plan Modal */}
      {selectedPlan && (
        <div className="fixed inset-0 bg-black/80 flex items-center justify-center p-4 z-50 backdrop-blur-sm animate-scale-in" onClick={() => setSelectedPlan(null)}>
          <div className="bg-gray-800 border-2 border-yellow-500 rounded-2xl p-8 max-w-md w-full shadow-2xl animate-scale-in" onClick={(e) => e.stopPropagation()}>
            <div className="text-center mb-6">
              <div className="text-5xl mb-3">{selectedPlan.icon}</div>
              <h3 className="text-2xl font-bold text-white mb-1">
                {selectedPlan.duration}{selectedPlan.type ? ` · ${selectedPlan.type.toUpperCase()}` : ''}
              </h3>
              <p className="text-3xl font-bold text-yellow-400 mt-2">KSh {selectedPlan.price}</p>
            </div>
            <div className="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4 mb-6">
              <p className="text-sm text-gray-300 text-center">
                Connect to the Gold Link hotspot SSID, select this plan, and pay via M-Pesa to activate instantly.
              </p>
            </div>
            <div className="space-y-3">
              <a
                href="tel:0740678046"
                className="block w-full py-3 bg-gradient-to-r from-yellow-500 to-yellow-600 text-gray-900 rounded-lg font-semibold text-center hover:shadow-lg transition transform hover:scale-105 hover:-translate-y-1"
              >
                📞 Call to Activate
              </a>
              <button
                onClick={() => setSelectedPlan(null)}
                className="w-full py-3 bg-gray-700 text-gray-300 rounded-lg font-semibold hover:bg-gray-600 transition transform hover:scale-105"
              >
                Browse More Plans
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function PlanCard({ plan, idx, onSelect }: { plan: HotspotPlan; idx: number; onSelect: (p: HotspotPlan) => void }) {
  return (
    <div
      className={`relative rounded-2xl p-5 transition transform hover:-translate-y-2 hover-glow animate-scale-in stagger-${Math.min(idx + 1, 5)} ${
        plan.popular
          ? 'bg-gradient-to-br from-yellow-500 via-yellow-400 to-yellow-500 text-gray-900 shadow-2xl border-4 border-yellow-300 animate-pulse-glow'
          : 'bg-gradient-to-br from-gray-800 to-gray-700 text-white shadow-lg border-2 border-gray-600 hover:border-yellow-500'
      }`}
    >
      {plan.popular && (
        <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-yellow-600 text-white px-3 py-1 rounded-full text-xs font-bold shadow-lg animate-bounce-slow uppercase">
          Popular
        </div>
      )}
      <div className="text-center">
        <div className="text-3xl mb-2 transform hover:scale-125 hover:rotate-12 transition duration-300">{plan.icon}</div>
        <h4 className={`text-sm font-bold mb-1 ${plan.popular ? 'text-gray-900' : 'text-white'}`}>{plan.duration}</h4>
        {plan.type && (
          <div className="flex items-center justify-center space-x-1 mb-2">
            {plan.type === 'solo' ? (
              <User size={12} className={plan.popular ? 'text-gray-700' : 'text-gray-400'} />
            ) : (
              <Users size={12} className={plan.popular ? 'text-gray-700' : 'text-gray-400'} />
            )}
            <span className={`text-xs uppercase font-semibold ${plan.popular ? 'text-gray-700' : 'text-gray-400'}`}>{plan.type}</span>
          </div>
        )}
        <div className={`text-2xl font-bold mb-3 ${plan.popular ? 'text-gray-900' : 'text-yellow-400'}`}>
          KSh {plan.price}
        </div>
        <button
          onClick={() => onSelect(plan)}
          className={`w-full py-2.5 rounded-lg font-bold text-sm transition transform hover:scale-105 ${
            plan.popular
              ? 'bg-gray-900 text-yellow-400 hover:bg-gray-800'
              : 'bg-yellow-500 text-gray-900 hover:bg-yellow-400'
          }`}
        >
          Select
        </button>
      </div>
    </div>
  );
}