import React, { useState, useEffect } from 'react';
import { 
  Smartphone, 
  ShieldCheck, 
  Zap, 
  ArrowRight, 
  QrCode, 
  PiggyBank, 
  Globe, 
  CreditCard, 
  CheckCircle2, 
  Menu, 
  X,
  Wifi,
  Droplets,
  Lightbulb,
  Phone
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [showCookies, setShowCookies] = useState(true);
  const [scrolled, setScrolled] = useState(false);

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

  const keywords = [
    "pagos en línea", "pagar servicios online", "pago de facturas", 
    "pago de luz online", "pago de agua online", "pago de internet online",
    "pagos desde el celular", "transferencias bancarias", "transferencias rápidas",
    "enviar dinero online", "enviar dinero desde el celular", "pagos con código QR",
    "ahorro digital", "ahorrar dinero fácil", "app para ahorrar"
  ];

  const services = [
    { icon: <Lightbulb className="w-6 h-6 text-yellow-500" />, title: "Luz", keyword: "pago de luz online" },
    { icon: <Droplets className="w-6 h-6 text-blue-500" />, title: "Agua", keyword: "pago de agua online" },
    { icon: <Wifi className="w-6 h-6 text-indigo-500" />, title: "Internet", keyword: "pago de internet online" },
    { icon: <Phone className="w-6 h-6 text-green-500" />, title: "Móvil", keyword: "recarga móvil" },
  ];

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-indigo-100 selection:text-indigo-700">
      
      {/* --- COOKIE BANNER --- */}
      {showCookies && (
        <div className="fixed bottom-6 left-6 right-6 md:left-auto md:right-8 md:max-w-md bg-white border border-slate-200 p-6 rounded-2xl shadow-2xl z-[100] animate-in fade-in slide-in-from-bottom-10 duration-500">
          <div className="flex items-start gap-4">
            <ShieldCheck className="w-10 h-10 text-indigo-600 shrink-0" />
            <div>
              <p className="text-sm text-slate-600 leading-relaxed">
                Utilizamos cookies para mejorar tu experiencia en <strong>ReservApp</strong> y mostrarte publicidad relevante mediante <strong>pagos en línea</strong>. Al continuar, aceptas nuestra política de privacidad.
              </p>
              <div className="mt-4 flex gap-3">
                <button 
                  onClick={() => setShowCookies(false)}
                  className="bg-indigo-600 text-white px-5 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors"
                >
                  Aceptar todo
                </button>
                <button 
                  onClick={() => setShowCookies(false)}
                  className="text-slate-500 px-4 py-2 text-sm font-medium hover:text-slate-700 transition-colors"
                >
                  Configurar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* --- NAVBAR --- */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/80 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-6'}`}>
        <div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center">
              <Zap className="text-white w-6 h-6 fill-current" />
            </div>
            <span className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-violet-600">
              ReservApp
            </span>
          </div>
          
          <div className="hidden md:flex items-center gap-8 font-medium text-slate-600">
            <a href="#servicios" className="hover:text-indigo-600 transition-colors">Servicios</a>
            <a href="#transferencias" className="hover:text-indigo-600 transition-colors">Transferencias</a>
            <a href="#ahorro" className="hover:text-indigo-600 transition-colors">Ahorro</a>
            <button className="bg-indigo-600 text-white px-6 py-2.5 rounded-full hover:bg-indigo-700 hover:shadow-lg hover:shadow-indigo-200 transition-all">
              Descargar App
            </button>
          </div>

          <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X /> : <Menu />}
          </button>
        </div>
      </nav>

      {/* --- HERO SECTION --- */}
      <section className="pt-32 pb-20 px-6 overflow-hidden">
        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
          <div className="relative z-10">
            <div className="inline-flex items-center gap-2 bg-indigo-50 border border-indigo-100 text-indigo-700 px-4 py-1.5 rounded-full text-sm font-bold mb-6">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-600"></span>
              </span>
              Seguridad de Grado Bancario
            </div>
            <h1 className="text-5xl lg:text-7xl font-extrabold text-slate-900 leading-[1.1] mb-6">
              ReservApp – <span className="text-indigo-600">Pagos y Recargas</span> en un Solo Lugar
            </h1>
            <p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-xl">
              Paga tus servicios, recarga tu móvil y administra tus transacciones de forma rápida y segura mediante <strong>pagos desde el celular</strong>. La solución definitiva para tu <strong>pago de facturas</strong>.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <button className="bg-indigo-600 text-white px-8 py-4 rounded-2xl text-lg font-bold flex items-center justify-center gap-2 hover:bg-indigo-700 transition-all shadow-xl shadow-indigo-100">
                Empezar Ahora <ArrowRight className="w-5 h-5" />
              </button>
              <div className="flex items-center gap-3 px-4">
                <div className="flex -space-x-3">
                  {[1,2,3].map(i => (
                    <div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-slate-200 overflow-hidden">
                      <img src={`https://i.pravatar.cc/100?img=${i+10}`} alt="user" />
                    </div>
                  ))}
                </div>
                <div className="text-sm font-medium text-slate-500">
                  <span className="text-slate-900 font-bold">+50k</span> usuarios activos
                </div>
              </div>
            </div>
          </div>

          <div className="relative lg:h-[600px] flex items-center justify-center">
            {/* Mockup visual dinámico */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-indigo-100/50 rounded-full blur-3xl -z-10 animate-pulse"></div>
            <div className="relative w-[280px] h-[580px] bg-slate-900 rounded-[3rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden">
              <div className="absolute top-0 w-full h-6 bg-slate-800 flex justify-center">
                <div className="w-20 h-4 bg-slate-900 rounded-b-xl"></div>
              </div>
              <div className="p-6 pt-10 h-full bg-slate-50">
                <div className="h-4 w-24 bg-slate-200 rounded-full mb-8"></div>
                <div className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 mb-6">
                  <p className="text-xs text-slate-400 mb-1">Balance Disponible</p>
                  <p className="text-2xl font-bold text-slate-800">$1,240.50</p>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  {services.map((s, idx) => (
                    <div key={idx} className="bg-white p-3 rounded-xl border border-slate-100 flex flex-col items-center gap-2">
                      {s.icon}
                      <span className="text-[10px] font-bold text-slate-500 uppercase">{s.title}</span>
                    </div>
                  ))}
                </div>
                <div className="mt-8 bg-indigo-600 p-4 rounded-2xl text-white">
                  <div className="flex justify-between items-center mb-4">
                    <QrCode className="w-8 h-8" />
                    <span className="text-[10px] bg-white/20 px-2 py-1 rounded-full">QR Activo</span>
                  </div>
                  <p className="text-sm font-medium">Pago rápido con QR</p>
                </div>
              </div>
            </div>
            {/* Floating badges */}
            <div className="absolute top-20 right-0 bg-white p-4 rounded-2xl shadow-lg border border-slate-100 animate-bounce transition-all duration-[3000ms]">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                  <CheckCircle2 size={18} />
                </div>
                <p className="text-xs font-bold text-slate-800">Transferencia Exitosa</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* --- SERVICES BENTO GRID --- */}
      <section id="servicios" className="py-24 px-6 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-5xl font-bold text-slate-900 mb-4">
              Soluciones para tus <span className="text-indigo-600">Pagos en Línea</span>
            </h2>
            <p className="text-slate-500 max-w-2xl mx-auto text-lg">
              Simplifica tu vida financiera. Desde el <strong>pago de agua online</strong> hasta recargas instantáneas.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* Card 1: Servicios Básicos */}
            <div className="md:col-span-2 bg-slate-50 rounded-[2.5rem] p-10 border border-slate-100 hover:shadow-xl transition-all group overflow-hidden relative">
              <div className="relative z-10">
                <h3 className="text-2xl font-bold mb-4">Pagar servicios online nunca fue tan fácil</h3>
                <p className="text-slate-600 mb-8 max-w-md">Olvídate de las filas. Realiza el <strong>pago de luz online</strong>, internet y gas en segundos desde la comodidad de tu hogar.</p>
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                  {services.map((s, idx) => (
                    <div key={idx} className="bg-white p-6 rounded-2xl shadow-sm flex flex-col items-center gap-3 group-hover:scale-105 transition-transform">
                      {s.icon}
                      <span className="font-bold text-sm">{s.title}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="absolute top-0 right-0 p-8 opacity-5">
                <Globe size={200} />
              </div>
            </div>

            {/* Card 2: QR Code */}
            <div className="bg-indigo-600 rounded-[2.5rem] p-10 text-white flex flex-col justify-between hover:shadow-xl transition-all">
              <div>
                <QrCode className="w-12 h-12 mb-6" />
                <h3 className="text-2xl font-bold mb-4">Pagos con código QR</h3>
                <p className="text-indigo-100 text-sm leading-relaxed">Paga en miles de establecimientos físicos simplemente escaneando. Sin contacto, rápido y seguro.</p>
              </div>
              <button className="mt-8 bg-white text-indigo-600 font-bold py-3 rounded-xl hover:bg-indigo-50 transition-colors">
                Ver comercios
              </button>
            </div>

            {/* Card 3: Transferencias */}
            <div id="transferencias" className="bg-white border-2 border-slate-100 rounded-[2.5rem] p-10 flex flex-col justify-between hover:border-indigo-200 transition-all">
              <div>
                <div className="w-12 h-12 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 mb-6">
                  <CreditCard />
                </div>
                <h3 className="text-2xl font-bold mb-4">Transferencias Bancarias</h3>
                <p className="text-slate-500 text-sm leading-relaxed">
                  Realiza <strong>transferencias rápidas</strong> a cualquier banco. <strong>Enviar dinero online</strong> es tan simple como enviar un mensaje.
                </p>
              </div>
              <div className="mt-8 space-y-3">
                <div className="flex items-center gap-2 text-sm text-slate-700 font-medium">
                  <CheckCircle2 size={16} className="text-indigo-600" /> Sin comisiones ocultas
                </div>
                <div className="flex items-center gap-2 text-sm text-slate-700 font-medium">
                  <CheckCircle2 size={16} className="text-indigo-600" /> Disponible 24/7
                </div>
              </div>
            </div>

            {/* Card 4: Ahorro Digital (Banner Largo) */}
            <div id="ahorro" className="md:col-span-2 bg-gradient-to-br from-violet-600 to-indigo-700 rounded-[2.5rem] p-10 text-white relative overflow-hidden group">
              <div className="relative z-10 flex flex-col md:flex-row items-center gap-10">
                <div className="flex-1 text-center md:text-left">
                  <h3 className="text-3xl font-bold mb-4 italic">Ahorro Digital Inteligente</h3>
                  <p className="text-indigo-100 mb-8 max-w-lg">
                    Descubre la mejor <strong>app para ahorrar</strong>. Crea metas personalizadas y empieza a <strong>ahorrar dinero fácil</strong> con nuestro sistema de redondeo automático.
                  </p>
                  <button className="bg-white text-indigo-700 px-8 py-3 rounded-full font-bold hover:bg-indigo-50 transition-all">
                    Activar mi Ahorro
                  </button>
                </div>
                <div className="w-48 h-48 bg-white/10 rounded-full flex items-center justify-center backdrop-blur-md group-hover:scale-110 transition-transform">
                  <PiggyBank size={80} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* --- TRUST & STEPS --- */}
      <section className="py-24 px-6 bg-slate-50">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col lg:flex-row gap-16 items-center">
            <div className="lg:w-1/2">
              <h2 className="text-4xl font-bold text-slate-900 mb-8">¿Por qué confiar en ReservApp?</h2>
              <div className="space-y-8">
                {[
                  { title: "Seguridad Biométrica", desc: "Accede mediante huella o rostro para máxima protección en tus pagos desde el celular." },
                  { title: "Soporte 24/7", desc: "Un equipo humano siempre listo para ayudarte con tus transferencias bancarias." },
                  { title: "Cero Comisiones", desc: "Olvídate de cobros extras al pagar servicios online o recargas." }
                ].map((item, i) => (
                  <div key={i} className="flex gap-4">
                    <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center shrink-0">
                      <span className="text-indigo-600 font-bold text-xl">{i+1}</span>
                    </div>
                    <div>
                      <h4 className="font-bold text-lg mb-1">{item.title}</h4>
                      <p className="text-slate-500">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="lg:w-1/2 bg-white p-12 rounded-[3rem] shadow-xl border border-slate-100 text-center">
              <div className="w-20 h-20 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center mx-auto mb-6">
                <Smartphone size={40} />
              </div>
              <h3 className="text-2xl font-bold mb-4 italic">Todo el control en tu bolsillo</h3>
              <p className="text-slate-500 mb-8">
                Descarga la aplicación más completa para <strong>enviar dinero desde el celular</strong> y gestionar tus finanzas sin complicaciones.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <div className="bg-slate-900 text-white px-6 py-3 rounded-xl flex items-center gap-3 cursor-pointer hover:bg-slate-800 transition-colors">
                  <div className="text-left leading-tight">
                    <p className="text-[10px] opacity-70">Download on</p>
                    <p className="text-lg font-bold">App Store</p>
                  </div>
                </div>
                <div className="bg-slate-900 text-white px-6 py-3 rounded-xl flex items-center gap-3 cursor-pointer hover:bg-slate-800 transition-colors">
                  <div className="text-left leading-tight">
                    <p className="text-[10px] opacity-70">Get it on</p>
                    <p className="text-lg font-bold">Google Play</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* --- FOOTER (Ads Compliance) --- */}
      <footer className="bg-white border-t border-slate-100 pt-20 pb-10 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-12 mb-16">
            <div className="col-span-2 md:col-span-1">
              <div className="flex items-center gap-2 mb-6">
                <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
                  <Zap className="text-white w-5 h-5 fill-current" />
                </div>
                <span className="text-xl font-bold text-indigo-600">ReservApp</span>
              </div>
              <p className="text-slate-500 text-sm leading-relaxed mb-6">
                Liderando la revolución de los <strong>pagos en línea</strong> con tecnología segura y centrada en el usuario.
              </p>
            </div>
            <div>
              <h5 className="font-bold mb-6 uppercase text-[10px] tracking-widest text-slate-400">Plataforma</h5>
              <ul className="space-y-4 text-slate-600 text-sm font-medium">
                <li><a href="#" className="hover:text-indigo-600 transition-colors">Pagar Facturas</a></li>
                <li><a href="#" className="hover:text-indigo-600 transition-colors">Recargas de Internet</a></li>
                <li><a href="#" className="hover:text-indigo-600 transition-colors">Transferencias</a></li>
                <li><a href="#" className="hover:text-indigo-600 transition-colors">Código QR</a></li>
              </ul>
            </div>
            <div>
              <h5 className="font-bold mb-6 uppercase text-[10px] tracking-widest text-slate-400">Compañía</h5>
              <ul className="space-y-4 text-slate-600 text-sm font-medium">
                <li><a href="#" className="hover:text-indigo-600 transition-colors">Sobre Nosotros</a></li>
                <li><a href="#" className="hover:text-indigo-600 transition-colors">Blog de Ahorro</a></li>
                <li><a href="#" className="hover:text-indigo-600 transition-colors">Prensa</a></li>
              </ul>
            </div>
            <div>
              <h5 className="font-bold mb-6 uppercase text-[10px] tracking-widest text-slate-400">Legal</h5>
              <ul className="space-y-4 text-slate-600 text-sm font-medium">
                <li><a href="#" className="hover:text-indigo-600 transition-colors underline decoration-indigo-100 decoration-2 underline-offset-4">Política de Privacidad</a></li>
                <li><a href="#" className="hover:text-indigo-600 transition-colors underline decoration-indigo-100 decoration-2 underline-offset-4">Términos de Servicio</a></li>
                <li><a href="#" className="hover:text-indigo-600 transition-colors underline decoration-indigo-100 decoration-2 underline-offset-4">Cookies</a></li>
              </ul>
            </div>
          </div>
          
          <div className="pt-8 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center gap-6">
            <p className="text-slate-400 text-xs text-center md:text-left">
              &copy; {new Date().getFullYear()} ReservApp Inc. Reservados todos los derechos. 
              ReservApp es una plataforma tecnológica que facilita el <strong>envío de dinero online</strong>.
            </p>
            <div className="flex gap-6">
              {['Facebook', 'Twitter', 'Instagram'].map(social => (
                <a key={social} href="#" className="text-slate-400 hover:text-indigo-600 transition-colors text-xs font-bold uppercase tracking-widest">
                  {social}
                </a>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </div>