const { useState, useEffect, useRef } = React;

function MoonIcon() {
  return React.createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' })
  );
}

function SunIcon() {
  return React.createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('circle', { cx: 12, cy: 12, r: 5 }),
    React.createElement('line', { x1: 12, y1: 1, x2: 12, y2: 3 }),
    React.createElement('line', { x1: 12, y1: 21, x2: 12, y2: 23 }),
    React.createElement('line', { x1: 4.22, y1: 4.22, x2: 5.64, y2: 5.64 }),
    React.createElement('line', { x1: 18.36, y1: 18.36, x2: 19.78, y2: 19.78 }),
    React.createElement('line', { x1: 1, y1: 12, x2: 3, y2: 12 }),
    React.createElement('line', { x1: 21, y1: 12, x2: 23, y2: 12 }),
    React.createElement('line', { x1: 4.22, y1: 19.78, x2: 5.64, y2: 18.36 }),
    React.createElement('line', { x1: 18.36, y1: 5.64, x2: 19.78, y2: 4.22 })
  );
}

function SistemaPOSLanding() {
  const [darkMode, setDarkMode] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const scrollTo = (id) => {
    setMobileMenuOpen(false);
    setTimeout(() => {
      document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
    }, 100);
  };

  const [showBackToTop, setShowBackToTop] = useState(false);
  const [visibleSections, setVisibleSections] = useState(new Set());

  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const idx = Number(entry.target.dataset.reveal);
          setVisibleSections(prev => new Set(prev).add(idx));
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.15 });
    document.querySelectorAll('[data-reveal]').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

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

  const theme = {
    bg: darkMode ? 'bg-[#050816]' : 'bg-[#F5F7FF]',
    surface: darkMode ? 'bg-[#0B1120]' : 'bg-white',
    surfaceSoft: darkMode ? 'bg-white/5' : 'bg-[#EEF2FF]',
    border: darkMode ? 'border-white/10' : 'border-gray-200',
    text: darkMode ? 'text-white' : 'text-[#111827]',
    textSoft: darkMode ? 'text-gray-400' : 'text-gray-600',
    nav: darkMode ? 'bg-[#050816]/80' : 'bg-white/80',
    hero: darkMode
      ? 'from-[#6366F1]/40 via-[#050816] to-[#8B5CF6]/30'
      : 'from-[#C7D2FE] via-[#F5F7FF] to-[#DDD6FE]',
  };

  return (
    <div className={`${theme.bg} ${theme.text} min-h-screen font-sans overflow-x-hidden transition-all duration-500`}>
      {/* NAVBAR */}
      <header className={`${theme.nav} border-b ${theme.border} sticky top-0 z-50 backdrop-blur-xl transition-all duration-500`}>
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#6366F1] to-[#8B5CF6] flex items-center justify-center shadow-2xl shadow-purple-500/30 border border-white/20">
              <i className="fas fa-cash-register text-white text-2xl"></i>
            </div>

            <div>
              <h1 className={`text-2xl font-black leading-none ${theme.text}`}>
                Sistema POS
              </h1>
              <p className={`text-xs mt-1 ${theme.textSoft}`}>
                Punto de Venta Inteligente
              </p>
            </div>
          </div>

          <nav className={`hidden md:flex items-center gap-8 text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
            <a href="javascript:void(0)" onClick={() => scrollTo('hero')} className={`transition-colors hover:text-[#8B5CF6] ${darkMode ? 'hover:text-white' : 'hover:text-[#6366F1]'}`}>Inicio</a>
            <a href="javascript:void(0)" onClick={() => scrollTo('features')} className={`transition-colors hover:text-[#8B5CF6] ${darkMode ? 'hover:text-white' : 'hover:text-[#6366F1]'}`}>Funciones</a>
            <a href="javascript:void(0)" onClick={() => scrollTo('benefits')} className={`transition-colors hover:text-[#8B5CF6] ${darkMode ? 'hover:text-white' : 'hover:text-[#6366F1]'}`}>Beneficios</a>
            <a href="javascript:void(0)" onClick={() => scrollTo('contact')} className={`transition-colors hover:text-[#8B5CF6] ${darkMode ? 'hover:text-white' : 'hover:text-[#6366F1]'}`}>Contacto</a>
          </nav>

          <div className="flex items-center gap-2 md:gap-4">
            <button
              onClick={() => setDarkMode(!darkMode)}
              className={`w-12 h-12 rounded-2xl flex items-center justify-center transition-all duration-300 border ${darkMode ? 'bg-white/5 border-white/10 hover:bg-white/10' : 'bg-gray-100 border-gray-200 hover:bg-gray-200'}`}
            >
              {darkMode ? React.createElement(SunIcon) : React.createElement(MoonIcon)}
            </button>

            <button onClick={() => window.location.href = '/Login/index.html'} className="hidden sm:inline-block border border-purple-400/30 px-5 py-2.5 rounded-xl hover:bg-purple-500/10 transition-all font-medium backdrop-blur-xl">
              Iniciar Sesión
            </button>

            <button onClick={() => scrollTo('contact')} className="hidden sm:inline-block bg-gradient-to-r from-[#6366F1] to-[#8B5CF6] text-white px-5 py-2.5 rounded-xl font-bold shadow-xl shadow-purple-500/20 hover:scale-105 transition-transform">
              Solicitar Demo
            </button>

            <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden w-12 h-12 rounded-2xl flex items-center justify-center border transition-all duration-300 backdrop-blur-xl"
              style={{ color: darkMode ? 'white' : '#111827', borderColor: darkMode ? 'rgba(255,255,255,0.1)' : '#e5e7eb', background: darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)' }}>
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                {mobileMenuOpen
                  ? React.createElement('path', { d: 'M18 6L6 18M6 6l12 12' })
                  : React.createElement('path', { d: 'M3 12h18M3 6h18M3 18h18' })
                }
              </svg>
            </button>
          </div>
        </div>
      </header>

      {/* MOBILE MENU */}
      {mobileMenuOpen && (
        <div className={`md:hidden border-b ${theme.border} backdrop-blur-xl transition-all duration-500`} style={{ background: darkMode ? 'rgba(5,8,22,0.95)' : 'rgba(255,255,255,0.95)' }}>
          <div className="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-3">
            <a href="javascript:void(0)" onClick={() => scrollTo('hero')} className={`text-sm font-medium py-2 transition-colors ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Inicio</a>
            <a href="javascript:void(0)" onClick={() => scrollTo('features')} className={`text-sm font-medium py-2 transition-colors ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Funciones</a>
            <a href="javascript:void(0)" onClick={() => scrollTo('benefits')} className={`text-sm font-medium py-2 transition-colors ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Beneficios</a>
            <a href="javascript:void(0)" onClick={() => scrollTo('contact')} className={`text-sm font-medium py-2 transition-colors ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Contacto</a>
            <hr className={`my-1 ${theme.border}`} />
            <button onClick={() => { window.location.href = '/Login/index.html'; }} className="border border-purple-400/30 px-5 py-2.5 rounded-xl hover:bg-purple-500/10 transition-all font-medium backdrop-blur-xl text-left text-sm">
              Iniciar Sesión
            </button>
            <button onClick={() => scrollTo('contact')} className="bg-gradient-to-r from-[#6366F1] to-[#8B5CF6] text-white px-5 py-2.5 rounded-xl font-bold shadow-xl shadow-purple-500/20 text-sm text-center">
              Solicitar Demo
            </button>
          </div>
        </div>
      )}

      {/* HERO */}
      <section id="hero" data-reveal="0" className={`relative overflow-hidden border-b border-white/5 reveal ${visibleSections.has(0) ? 'visible' : ''}`}>
        <div className={`absolute inset-0 bg-gradient-to-br ${theme.hero} blur-3xl opacity-90`}></div>

        <div className="relative max-w-7xl mx-auto px-6 py-24 grid lg:grid-cols-2 gap-14 items-center">
          <div>
            <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm mb-6 border backdrop-blur-xl ${darkMode ? 'bg-white/10 border-white/10 text-white' : 'bg-white/80 border-gray-200 text-[#111827] shadow-lg'}`}>
              🚀 Sistema Inteligente para Restaurantes y Negocios
            </div>

            <h1 className="text-5xl md:text-7xl font-black leading-tight">
              Moderniza tu negocio con
              <span className="block text-[#8B5CF6] mt-2">
                Sistema POS
              </span>
            </h1>

            <p className={`${theme.textSoft} text-lg mt-8 leading-relaxed max-w-xl`}>
              Un sistema completo de punto de venta diseñado para restaurantes,
              cafeterías, bares y negocios modernos. Controla pedidos, cocina,
              ventas, facturación e inventario desde una sola plataforma.
            </p>

            <div className="flex flex-wrap gap-4 mt-10">
              <button onClick={() => scrollTo('contact')} className="bg-gradient-to-r from-[#6366F1] to-[#8B5CF6] text-white font-bold px-8 py-4 rounded-2xl hover:scale-105 transition-transform shadow-2xl">
                Solicitar Demo
              </button>

              <button onClick={() => scrollTo('features')} className={`${darkMode ? 'border-white/20 hover:bg-white/10' : 'border-gray-300 hover:bg-gray-100'} border px-8 py-4 rounded-2xl transition-all backdrop-blur-xl`}>
                Ver Funciones
              </button>
            </div>

            <div className="grid grid-cols-3 gap-6 mt-14">
              <div>
                <h2 className="text-4xl font-black text-[#8B5CF6]">+15</h2>
                <p className={`${theme.textSoft} mt-2`}>Módulos administrativos</p>
              </div>

              <div>
                <h2 className="text-4xl font-black text-[#8B5CF6]">100%</h2>
                <p className={`${theme.textSoft} mt-2`}>En tiempo real</p>
              </div>

              <div>
                <h2 className="text-4xl font-black text-[#8B5CF6]">24/7</h2>
                <p className={`${theme.textSoft} mt-2`}>Control de ventas</p>
              </div>
            </div>
          </div>

          {/* MOCKUP */}
          <div className="relative">
            <div className={`rounded-[35px] shadow-2xl p-5 backdrop-blur-xl border ${darkMode ? 'bg-gradient-to-br from-[#111827] to-[#1E293B] border-white/10' : 'bg-white border-gray-200 shadow-purple-200/40'}`}>
              <div className={`rounded-[25px] overflow-hidden border ${darkMode ? 'bg-[#050816] border-white/5' : 'bg-[#F8FAFC] border-gray-200'}`}>
                <div className={`flex items-center justify-between px-6 py-4 border-b ${theme.border} ${theme.surface}`}>
                  <div>
                    <h3 className={`font-bold text-lg ${theme.text}`}>Sistema POS</h3>
                    <p className={`text-xs ${theme.textSoft}`}>Dashboard General</p>
                  </div>

                  <div className="bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-xs">
                    ● Online
                  </div>
                </div>

                <div className="p-6 grid gap-5">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="bg-gradient-to-r from-[#6366F1] to-[#8B5CF6] text-white rounded-2xl p-5 shadow-lg shadow-purple-500/20">
                      <p className="font-semibold text-sm">Ventas Hoy</p>
                      <h2 className="text-3xl font-black mt-2">$3.5M</h2>
                    </div>

                    <div className={`${darkMode ? 'bg-[#111827] border-white/10' : 'bg-gray-100 border-gray-200'} border rounded-2xl p-5`}>
                      <p className={`text-sm ${theme.textSoft}`}>Pedidos</p>
                      <h2 className={`text-3xl font-black mt-2 ${theme.text}`}>128</h2>
                    </div>
                  </div>

                  <div className={`${darkMode ? 'bg-[#111827] border-white/10' : 'bg-gray-100 border-gray-200'} border rounded-2xl p-5`}>
                    <div className="flex justify-between mb-5">
                      <p className={`font-semibold ${theme.text}`}>Pedidos en Cocina</p>
                      <span className="text-[#8B5CF6]">8 Activos</span>
                    </div>

                    <div className="space-y-3">
                      <div className={`flex justify-between ${darkMode ? 'bg-black/40' : 'bg-white/60'} p-3 rounded-xl`}>
                        <span className={theme.text}>Mesa #5</span>
                        <span className="text-orange-400">Preparando</span>
                      </div>

                      <div className={`flex justify-between ${darkMode ? 'bg-black/40' : 'bg-white/60'} p-3 rounded-xl`}>
                        <span className={theme.text}>Domicilio #21</span>
                        <span className="text-green-400">Listo</span>
                      </div>

                      <div className={`flex justify-between ${darkMode ? 'bg-black/40' : 'bg-white/60'} p-3 rounded-xl`}>
                        <span className={theme.text}>Mesa #2</span>
                        <span className="text-red-400">Pendiente</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="absolute -bottom-8 -left-8 bg-gradient-to-r from-[#6366F1] to-[#8B5CF6] text-black px-6 py-4 rounded-3xl shadow-2xl font-bold rotate-[-8deg]">
              ⚡ Plataforma moderna y elegante
            </div>
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section id="features" data-reveal="1" className={`max-w-7xl mx-auto px-6 py-24 transition-all duration-500 ${theme.text} reveal ${visibleSections.has(1) ? 'visible' : ''}`}>
        <div className="text-center mb-16">
          <h2 className={`text-5xl font-black ${theme.text}`}>Todo lo que tu negocio necesita</h2>
          <p className={`mt-5 max-w-3xl mx-auto text-lg ${theme.textSoft}`}>
            Un ecosistema completo para gestionar ventas, pedidos, cocina,
            clientes y reportes en un solo lugar.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {[
            {
              title: 'Login Seguro',
              desc: 'Autenticación con JWT y recuperación de contraseña por email.',
              icon: '🔐'
            },
            {
              title: 'Panel Mesero',
              desc: 'Gestión de mesas, pedidos, adicionales, prefactura y cobros.',
              icon: '🍽️'
            },
            {
              title: 'Panel Cocina',
              desc: 'Pedidos en tiempo real y control del estado de preparación.',
              icon: '👨‍🍳'
            },
            {
              title: 'Facturación',
              desc: 'Impresión de comandas y facturas térmicas personalizadas.',
              icon: '🧾'
            },
            {
              title: 'Inventario',
              desc: 'Control de productos, categorías y stock disponible.',
              icon: '📦'
            },
            {
              title: 'Reportes',
              desc: 'Estadísticas, ventas, productos más vendidos y rendimiento del personal.',
              icon: '📊'
            }
          ].map((item, index) => (
            <div
              key={index}
              className={`rounded-3xl p-8 hover:-translate-y-2 transition-all border ${darkMode ? 'bg-white/5 border-white/10 hover:border-purple-400/40' : 'bg-white border-gray-200 shadow-lg hover:border-purple-400/40'}`}
            >
              <div className="text-5xl mb-5">{item.icon}</div>
              <h3 className={`text-2xl font-bold mb-4 ${theme.text}`}>{item.title}</h3>
              <p className={`leading-relaxed ${theme.textSoft}`}>{item.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ADMIN MODULES */}
      <section id="admin" data-reveal="2" className={`${darkMode ? 'bg-[#0B1120] border-white/10' : 'bg-[#EEF2FF] border-gray-200'} border-y transition-all duration-500 reveal ${visibleSections.has(2) ? 'visible' : ''}`}>
        <div className="max-w-7xl mx-auto px-6 py-24">
          <div className="grid lg:grid-cols-2 gap-14 items-center">
            <div>
              <h2 className={`text-5xl font-black leading-tight ${theme.text}`}>
                Panel Administrativo
                <span className="text-[#8B5CF6] block mt-2">
                  avanzado y completo
                </span>
              </h2>

              <p className={`text-lg mt-8 leading-relaxed ${theme.textSoft}`}>
                Control total de tu negocio desde un dashboard intuitivo.
                Gestiona ventas, inventario, clientes, reportes, usuarios,
                domicilios y configuración general.
              </p>
            </div>

            <div className="grid sm:grid-cols-2 gap-4">
              {[
                'Dashboard',
                'Ventas',
                'Productos',
                'Pedidos',
                'Clientes',
                'Facturación',
                'Configuración',
                'Reportes'
              ].map((module, index) => (
                <div
                  key={index}
                  className={`rounded-2xl px-6 py-5 flex items-center justify-between border transition-all ${darkMode ? 'bg-black border-white/10' : 'bg-white border-gray-200 shadow-md'}`}
                >
                  <span className={`font-semibold ${theme.text}`}>{module}</span>
                  <span className="text-[#8B5CF6]">●</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* BENEFITS */}
      <section id="benefits" data-reveal="3" className={`max-w-7xl mx-auto px-6 py-24 transition-all duration-500 ${theme.text} reveal ${visibleSections.has(3) ? 'visible' : ''}`}>
        <div className="grid lg:grid-cols-3 gap-8">
          <div className="bg-gradient-to-br from-[#6366F1] to-[#8B5CF6] text-white rounded-[32px] p-10">
            <h3 className="text-3xl font-black mb-5">Más velocidad</h3>
            <p className="font-medium leading-relaxed">
              Reduce tiempos de atención y mejora la experiencia de tus clientes.
            </p>
          </div>

          <div className={`${darkMode ? 'bg-white/5 border-white/10' : 'bg-white border-gray-200 shadow-lg'} border rounded-[32px] p-10 transition-all duration-500`}>
            <h3 className={`text-3xl font-black mb-5 ${theme.text}`}>Control Total</h3>
            <p className={`leading-relaxed ${theme.textSoft}`}>
              Visualiza todas las operaciones de tu negocio en tiempo real.
            </p>
          </div>

          <div className={`${darkMode ? 'bg-white/5 border-white/10' : 'bg-white border-gray-200 shadow-lg'} border rounded-[32px] p-10 transition-all duration-500`}>
            <h3 className={`text-3xl font-black mb-5 ${theme.text}`}>Escalable</h3>
            <p className={`leading-relaxed ${theme.textSoft}`}>
              Preparado para crecer junto con tu restaurante o empresa.
            </p>
          </div>
        </div>
      </section>

      {/* ECOSYSTEM */}
      <section id="ecosystem" data-reveal="4" className={`py-28 border-y transition-all duration-500 ${darkMode ? 'border-white/10 bg-[#0A0F1F]' : 'border-gray-200 bg-[#EEF2FF]'} reveal ${visibleSections.has(4) ? 'visible' : ''}`}>
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center max-w-4xl mx-auto">
            <div className={`inline-flex items-center gap-2 px-5 py-2 rounded-full border mb-8 ${darkMode ? 'bg-white/5 border-white/10' : 'bg-white border-gray-200 shadow-md'}`}>
              🌎 Ecosistema en expansión
            </div>

            <h2 className={`text-5xl md:text-6xl font-black leading-tight ${theme.text}`}>
              Esto es solo el comienzo de
              <span className="block mt-3 bg-gradient-to-r from-[#6366F1] to-[#8B5CF6] bg-clip-text text-transparent">
                una nueva generación POS
              </span>
            </h2>

            <p className={`mt-8 text-xl leading-relaxed ${theme.textSoft}`}>
              Sistema POS para restaurantes es el primer modelo de una plataforma
              más grande. Estamos desarrollando nuevas soluciones especializadas
              para distintos tipos de negocios y sectores comerciales.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-7 mt-20">
            {[
              {
                title: 'POS Restaurantes',
                desc: 'Control de mesas, cocina y domicilios.',
                status: 'Disponible',
                active: true,
              },
              {
                title: 'POS Retail',
                desc: 'Tiendas, minimarkets y comercios físicos.',
                status: 'En desarrollo',
              },
              {
                title: 'POS Farmacia',
                desc: 'Control de medicamentos y ventas rápidas.',
                status: 'Próximamente',
              },
              {
                title: 'POS Barbería',
                desc: 'Citas, servicios y control de clientes.',
                status: 'Próximamente',
              },
            ].map((item, index) => (
              <div
                key={index}
                className={`relative overflow-hidden rounded-[28px] border p-8 transition-all duration-500 hover:-translate-y-2 ${darkMode ? 'bg-white/5 border-white/10 hover:border-[#8B5CF6]/40' : 'bg-white border-gray-200 shadow-lg hover:border-[#8B5CF6]/40'}`}
              >
                {item.active && (
                  <div className="absolute top-0 right-0 bg-gradient-to-r from-[#6366F1] to-[#8B5CF6] text-white text-xs px-4 py-1 rounded-bl-2xl font-bold">
                    ACTIVO
                  </div>
                )}

                <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#6366F1] to-[#8B5CF6] mb-6 flex items-center justify-center text-2xl shadow-lg shadow-purple-500/30">
                  ⚡
                </div>

                <h3 className={`text-2xl font-black mb-4 ${theme.text}`}>{item.title}</h3>

                <p className={`${theme.textSoft} leading-relaxed mb-8`}>
                  {item.desc}
                </p>

                <div className="flex items-center justify-between">
                  <span className={`text-sm font-semibold ${item.active ? 'text-green-400' : 'text-[#8B5CF6]'}`}>
                    {item.status}
                  </span>

                  <div className="w-3 h-3 rounded-full bg-[#8B5CF6] animate-pulse"></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section id="contact" data-reveal="5" className={`px-6 pb-24 reveal ${visibleSections.has(5) ? 'visible' : ''}`}>
        <div className="max-w-6xl mx-auto bg-gradient-to-r from-[#6366F1] via-[#8B5CF6] to-[#7C3AED] rounded-[40px] p-14 text-white text-center shadow-2xl">
          <h2 className="text-5xl font-black leading-tight">
            Lleva tu negocio al siguiente nivel
          </h2>

          <p className="mt-6 text-lg font-medium max-w-3xl mx-auto">
            Sistema POS está diseñado para automatizar procesos, mejorar ventas
            y brindar una experiencia moderna a tus clientes.
          </p>

          <div className="flex flex-wrap justify-center gap-5 mt-10">
            <button onClick={() => window.location.href = '/Login/index.html'} className={`${darkMode ? 'bg-[#050816]' : 'bg-white text-[#111827]'} px-8 py-4 rounded-2xl font-bold hover:scale-105 transition-transform shadow-xl`}>
              Empezar Ahora
            </button>

            <button onClick={() => scrollTo('hero')} className="bg-white/30 backdrop-blur border border-black/10 px-8 py-4 rounded-2xl font-bold hover:bg-white/40 transition-all">
              Contactar
            </button>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className={`border-t ${theme.border} ${darkMode ? 'bg-[#050816]' : 'bg-white'}`}>
        <div className="max-w-7xl mx-auto px-6 py-14">
          <div className="grid md:grid-cols-3 gap-10">
            <div>
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#6366F1] to-[#8B5CF6] flex items-center justify-center shadow-lg border border-white/20">
                  <i className="fas fa-cash-register text-white text-sm"></i>
                </div>
                <h3 className={`font-black text-lg ${theme.text}`}>Sistema POS</h3>
              </div>
              <p className={`text-sm leading-relaxed ${theme.textSoft}`}>
                Punto de Venta Inteligente para restaurantes, cafeterías, bares y negocios modernos.
              </p>
            </div>

            <div>
              <h4 className={`font-bold mb-4 ${theme.text}`}>Enlaces rápidos</h4>
              <div className="flex flex-col gap-2">
                <a href="javascript:void(0)" onClick={() => scrollTo('hero')} className={`text-sm transition-colors ${theme.textSoft} hover:text-[#8B5CF6]`}>Inicio</a>
                <a href="javascript:void(0)" onClick={() => scrollTo('features')} className={`text-sm transition-colors ${theme.textSoft} hover:text-[#8B5CF6]`}>Funciones</a>
                <a href="javascript:void(0)" onClick={() => scrollTo('benefits')} className={`text-sm transition-colors ${theme.textSoft} hover:text-[#8B5CF6]`}>Beneficios</a>
                <a href="javascript:void(0)" onClick={() => scrollTo('contact')} className={`text-sm transition-colors ${theme.textSoft} hover:text-[#8B5CF6]`}>Contacto</a>
              </div>
            </div>

            <div>
              <h4 className={`font-bold mb-4 ${theme.text}`}>Acceso</h4>
              <div className="flex flex-col gap-2">
                <a href="/Login/index.html" className={`text-sm transition-colors ${theme.textSoft} hover:text-[#8B5CF6]`}>Iniciar Sesión</a>
                <a href="javascript:void(0)" onClick={() => scrollTo('contact')} className={`text-sm transition-colors ${theme.textSoft} hover:text-[#8B5CF6]`}>Solicitar Demo</a>
              </div>
              <div className="flex gap-3 mt-5">
                <a href="#" className={`w-9 h-9 rounded-xl flex items-center justify-center border transition-all ${darkMode ? 'border-white/10 hover:bg-white/10' : 'border-gray-200 hover:bg-gray-100'} ${theme.textSoft}`}>
                  <i className="fab fa-facebook-f"></i>
                </a>
                <a href="#" className={`w-9 h-9 rounded-xl flex items-center justify-center border transition-all ${darkMode ? 'border-white/10 hover:bg-white/10' : 'border-gray-200 hover:bg-gray-100'} ${theme.textSoft}`}>
                  <i className="fab fa-instagram"></i>
                </a>
                <a href="#" className={`w-9 h-9 rounded-xl flex items-center justify-center border transition-all ${darkMode ? 'border-white/10 hover:bg-white/10' : 'border-gray-200 hover:bg-gray-100'} ${theme.textSoft}`}>
                  <i className="fab fa-whatsapp"></i>
                </a>
              </div>
            </div>
          </div>

          <div className={`border-t ${theme.border} mt-10 pt-8 text-center`}>
            <p className={`text-sm ${theme.textSoft}`}>
              © {new Date().getFullYear()} Sistema POS. Todos los derechos reservados.
            </p>
          </div>
        </div>
      </footer>

      {/* BACK TO TOP */}
      {showBackToTop && (
        <button onClick={() => scrollTo('hero')}
          className={`fixed bottom-8 right-8 w-14 h-14 rounded-2xl flex items-center justify-center shadow-2xl border z-50 transition-all duration-300 hover:scale-110 ${darkMode ? 'bg-[#0B1120] border-white/10 text-white' : 'bg-white border-gray-200 text-[#111827]'}`}>
          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M18 15l-6-6-6 6"/>
          </svg>
        </button>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(SistemaPOSLanding));