const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2563eb",
  "showStats": true,
  "pricingAnnual": false
}/*EDITMODE-END*/;


/* ── LOGO ── */
const transparentLogoCache = {};
const KodexLogo = ({ dark = true, size = 30, full = false }) => {
  const src = full ? '/kodex/imagen/LOGO.jpeg' : '/kodex/imagen/nombre.jpeg';
  const [processedSrc, setProcessedSrc] = useState(transparentLogoCache[src] || null);
  useEffect(() => {
    if (transparentLogoCache[src]) { setProcessedSrc(transparentLogoCache[src]); return; }
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      const c = document.createElement('canvas');
      c.width = img.naturalWidth; c.height = img.naturalHeight;
      const ctx = c.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const d = ctx.getImageData(0, 0, c.width, c.height);
      for (let i = 0; i < d.data.length; i += 4) {
        const r = d.data[i], g = d.data[i+1], b = d.data[i+2];
        const lum = 0.299*r + 0.587*g + 0.114*b;
        if (lum > 200) d.data[i+3] = 0;
        else if (lum > 130) d.data[i+3] = Math.round(255 * (200 - lum) / 70);
      }
      ctx.putImageData(d, 0, 0);
      const url = c.toDataURL('image/png');
      transparentLogoCache[src] = url;
      setProcessedSrc(url);
    };
    img.src = src;
  }, [src]);
  const filter = dark ? 'none' : 'brightness(0) invert(1)';
  const height = full ? size * 1.6 : size;
  const width = full ? size * 1.6 : size * 3.4;
  return (
    <img
      src={processedSrc || src}
      alt="KODEX"
      style={{ height, width, objectFit:'contain', filter, display:'block', opacity: processedSrc ? 1 : 0 }}
    />
  );
};

/* ── NAVBAR ── */
const Navbar = ({ t }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return (
    <nav style={{
      position:'fixed', top:0, left:0, right:0, zIndex:300, height:140, padding:'0 6%',
      display:'flex', alignItems:'center', justifyContent:'space-between',
      background: scrolled ? 'rgba(247,248,252,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(13,27,75,0.07)' : 'none',
      transition:'all 0.3s ease',
    }}>
      <KodexLogo dark size={130} />
      <div style={{ display:'flex', gap:32 }}>
        {[
          { label:'Funcionalidades', href:'#funcionalidades' },
          { label:'Módulos', href:'#módulos' },
          { label:'Catálogo Digital', href:'#catalogo' },
          { label:'Precios', href:'#precios' },
          { label:'FAQ', href:'#faq' },
        ].map(({ label, href }) => (
          <a key={label} href={href} style={{ fontSize:14, fontWeight:500, color:'rgba(13,27,75,0.55)', textDecoration:'none', transition:'color 0.2s', fontFamily:'Inter' }}
          onMouseEnter={e=>e.target.style.color='#0d1b4b'}
          onMouseLeave={e=>e.target.style.color='rgba(13,27,75,0.55)'}>{label}</a>
        ))}
      </div>
      <div style={{ display:'flex', gap:10, alignItems:'center' }}>
        <a href={window.KODEX_URLS.login} style={{ background:'transparent', border:'none', color:'rgba(13,27,75,0.6)', fontSize:14, fontFamily:'Inter', fontWeight:500, cursor:'pointer', padding:'8px 16px', textDecoration:'none' }}>Iniciar sesión</a>
        <a href={window.KODEX_URLS.register} style={{
          background:t.accent, border:'none', color:'#fff', padding:'10px 22px', borderRadius:50,
          fontSize:13.5, fontFamily:'Inter', fontWeight:600, cursor:'pointer',
          boxShadow:`0 4px 16px ${t.accent}44`, transition:'all 0.2s', textDecoration:'none',
          display:'inline-block',
        }}
        onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-1px)';e.currentTarget.style.boxShadow=`0 8px 24px ${t.accent}66`}}
        onMouseLeave={e=>{e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.boxShadow=`0 4px 16px ${t.accent}44`}}
        >Empezar gratis</a>
      </div>
    </nav>
  );
};

/* ── ORBITAL ── */
const OrbitalRing = ({ accent }) => {
  const nodes = [
    {icon:'🏪',label:'Comercio',anim:'orbit'},
    {icon:'🍽',label:'Resto',anim:'orbit2'},
    {icon:'✂',label:'Salón',anim:'orbit3'},
    {icon:'💪',label:'Gym',anim:'orbit4'},
  ];
  return (
    <div style={{ position:'relative', width:320, height:320, flexShrink:0 }}>
      <div style={{ position:'absolute', inset:0, borderRadius:'50%', border:'1.5px dashed rgba(37,99,235,0.2)' }} />
      <div style={{ position:'absolute', inset:36, borderRadius:'50%', border:'1.5px solid rgba(37,99,235,0.08)' }} />
      <div style={{
        position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)',
        width:80, height:80, borderRadius:'50%',
        background:'#fff',
        display:'flex', alignItems:'center', justifyContent:'center',
        boxShadow:`0 12px 40px ${accent}55`, animation:'pulse 3s ease-in-out infinite',
        overflow:'hidden',
      }}>
        <img src="/kodex/imagen/LOGO.jpeg" alt="KODEX" loading="lazy" decoding="async" style={{
          width:'92%', height:'92%', objectFit:'contain', display:'block',
        }} />
      </div>
      {nodes.map(({icon,label,anim})=>(
        <div key={label} style={{ position:'absolute', top:'50%', left:'50%', width:0, height:0, animation:`${anim} 14s linear infinite` }}>
          <div style={{
            position:'absolute', transform:'translate(-50%,-50%)',
            width:56, height:56, borderRadius:'50%', background:'#fff',
            boxShadow:'0 8px 24px rgba(13,27,75,0.12)',
            display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:1,
          }}>
            <span style={{ fontSize:20 }}>{icon}</span>
            <span style={{ fontSize:8, fontFamily:'Inter', fontWeight:600, color:'rgba(13,27,75,0.5)' }}>{label}</span>
          </div>
        </div>
      ))}
    </div>
  );
};

/* ── HERO ── */
const Hero = ({ t }) => (
  <section style={{
    minHeight:'100vh', background:'#f7f8fc', position:'relative', overflow:'hidden',
    display:'flex', alignItems:'center', padding:'88px 6% 60px',
  }}>
    <div style={{ position:'absolute', top:-120, right:-120, width:480, height:480, borderRadius:'50%', background:'rgba(37,99,235,0.06)', pointerEvents:'none' }} />
    <div style={{ position:'absolute', bottom:-100, left:-80, width:360, height:360, borderRadius:'50%', background:'rgba(37,99,235,0.04)', pointerEvents:'none' }} />

    <div style={{ maxWidth:1240, margin:'0 auto', width:'100%', display:'grid', gridTemplateColumns:'1fr 1fr', gap:80, alignItems:'center' }}>
      {/* LEFT */}
      <div>
        <div style={{ display:'inline-flex', alignItems:'center', gap:6, marginBottom:24 }}>
          <span style={{ fontSize:13, fontWeight:600, color:t.accent, fontFamily:'Inter' }}>⚡ Plataforma SaaS para negocios</span>
        </div>

        <h1 style={{
          fontFamily:'Plus Jakarta Sans', fontWeight:900,
          fontSize:'clamp(48px,5.5vw,72px)', lineHeight:1.02,
          color:'#0d1b4b', marginBottom:24, letterSpacing:-1, textWrap:'pretty',
        }}>
          Tu <span style={{ color:t.accent }}>negocio</span>, bajo<br />control total.
        </h1>

        <p style={{ fontSize:17, color:'rgba(13,27,75,0.5)', lineHeight:1.8, maxWidth:460, marginBottom:36, fontFamily:'Inter' }}>
          Ventas, inventario, caja, equipo y reportes en una sola plataforma. Trabajamos con vos desde el primer día para que operes simple, ordenado y con datos reales.
        </p>

        <div style={{ display:'flex', gap:14, marginBottom:44, flexWrap:'wrap' }}>
          <a href={window.KODEX_URLS.register} style={{
            background:t.accent, border:'none', color:'#fff',
            padding:'14px 32px', borderRadius:50, fontSize:15,
            fontFamily:'Plus Jakarta Sans', fontWeight:700, cursor:'pointer',
            boxShadow:`0 8px 28px ${t.accent}50`, transition:'all 0.2s',
            textDecoration:'none', display:'inline-block',
          }}
          onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.boxShadow=`0 14px 36px ${t.accent}66`}}
          onMouseLeave={e=>{e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.boxShadow=`0 8px 28px ${t.accent}50`}}
          >Empezar gratis →</a>
          <button style={{
            background:'#fff', border:'1.5px solid rgba(13,27,75,0.12)',
            color:'rgba(13,27,75,0.7)', padding:'14px 28px', borderRadius:50,
            fontSize:15, fontFamily:'Plus Jakarta Sans', fontWeight:600, cursor:'pointer',
            display:'flex', alignItems:'center', gap:10,
            boxShadow:'0 4px 16px rgba(13,27,75,0.06)', transition:'all 0.2s',
          }}
          onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(13,27,75,0.25)';e.currentTarget.style.transform='translateY(-1px)'}}
          onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(13,27,75,0.12)';e.currentTarget.style.transform='translateY(0)'}}
          >
            <span style={{ width:26, height:26, borderRadius:'50%', background:t.accent, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, color:'#fff' }}>▶</span>
            Ver funcionalidades
          </button>
        </div>

        {/* Social proof */}
        <div style={{ display:'flex', alignItems:'center', gap:12 }}>
          <div style={{ display:'flex' }}>
            {['#fbbf24','#34d399','#60a5fa','#f87171'].map((c,i)=>(
              <div key={i} style={{ width:30, height:30, borderRadius:'50%', background:c, border:'2px solid #fff', marginLeft:i===0?0:-8, display:'flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:700, color:'#fff' }}>
                {['M','R','L','C'][i]}
              </div>
            ))}
          </div>
          <div>
            <div style={{ display:'flex', gap:1 }}>{[1,2,3,4,5].map(s=><span key={s} style={{ color:'#fbbf24', fontSize:12 }}>★</span>)}</div>
            <div style={{ fontSize:12, color:'rgba(13,27,75,0.45)', fontFamily:'Inter' }}>+200 negocios ya gestionan con KODEX</div>
          </div>
        </div>
      </div>

      {/* RIGHT — orbital + floating cards */}
      <div style={{ position:'relative', height:480, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <div style={{ position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)' }}>
          <OrbitalRing accent={t.accent} />
        </div>
        {/* Sales card */}
        <div style={{ position:'absolute', top:20, left:-30, background:'#fff', borderRadius:16, padding:'14px 18px', boxShadow:'0 16px 48px rgba(13,27,75,0.10)', border:'1px solid rgba(13,27,75,0.05)', animation:'float 5s ease-in-out infinite', minWidth:160 }}>
          <div style={{ fontSize:11, color:'rgba(13,27,75,0.4)', fontFamily:'Inter', marginBottom:6 }}>Ventas hoy</div>
          <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:28, color:'#0d1b4b', letterSpacing:-0.5 }}>$128k</div>
          <div style={{ display:'flex', alignItems:'center', gap:4, marginTop:4 }}>
            <span style={{ color:'#16a34a', fontSize:11, fontWeight:600 }}>▲ +34% en ventas este mes</span>
          </div>
        </div>
        {/* Notification */}
        <div style={{ position:'absolute', top:10, right:-20, background:'#fff', borderRadius:14, padding:'12px 16px', boxShadow:'0 12px 36px rgba(13,27,75,0.09)', border:'1px solid rgba(13,27,75,0.05)', animation:'floatR 4s ease-in-out infinite 1s', maxWidth:180 }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:4 }}>
            <div style={{ width:28, height:28, borderRadius:8, background:'#dbeafe', display:'flex', alignItems:'center', justifyContent:'center', fontSize:14 }}>🧾</div>
            <div>
              <div style={{ fontSize:11, fontWeight:600, color:'#0d1b4b', fontFamily:'Inter' }}>Venta registrada ✓</div>
              <div style={{ fontSize:10, color:'rgba(13,27,75,0.4)', fontFamily:'Inter' }}>hace 2 min</div>
            </div>
          </div>
        </div>
        {/* Dark card */}
        <div style={{ position:'absolute', bottom:60, left:-40, background:'#0d1b4b', borderRadius:16, padding:'14px 18px', boxShadow:'0 16px 48px rgba(13,27,75,0.20)', animation:'float 6s ease-in-out infinite 0.5s', minWidth:160 }}>
          <div style={{ fontSize:11, color:'rgba(255,255,255,0.5)', fontFamily:'Inter', marginBottom:6 }}>Transacciones</div>
          <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:26, color:'#fff' }}>47</div>
          <div style={{ fontSize:11, color:'#60a5fa', fontWeight:600, marginTop:3 }}>99% Uptime</div>
        </div>
        {/* Users card */}
        <div style={{ position:'absolute', bottom:40, right:-20, background:'#fff', borderRadius:14, padding:'12px 16px', boxShadow:'0 12px 36px rgba(13,27,75,0.09)', border:'1px solid rgba(13,27,75,0.05)', animation:'floatR 5s ease-in-out infinite 2s' }}>
          <div style={{ display:'flex', marginBottom:6 }}>
            {['#fbbf24','#34d399','#60a5fa','#f87171'].map((c,i)=>(
              <div key={i} style={{ width:22, height:22, borderRadius:'50%', background:c, border:'2px solid #fff', marginLeft:i===0?0:-7, display:'flex', alignItems:'center', justifyContent:'center', fontSize:8, fontWeight:700, color:'#fff' }}>{['M','L','C','R'][i]}</div>
            ))}
          </div>
          <div style={{ fontSize:11, color:'rgba(13,27,75,0.55)', fontFamily:'Inter' }}>Dashboard · Ventas · Caja</div>
        </div>
      </div>
    </div>
  </section>
);

/* ── MARQUEE ── */
const Marquee = ({ t }) => {
  const items = ['Punto de Venta','Inventario','Caja Diaria','Reportes PDF','Notas de Crédito','Roles y Permisos','Personalizable','Multi-sucursal'];
  const doubled = [...items,...items];
  return (
    <div style={{ background:'linear-gradient(90deg, #050d2e 0%, #0d1b4b 50%, #050d2e 100%)', overflow:'hidden', padding:'16px 0', borderTop:'1px solid rgba(255,255,255,0.06)', borderBottom:'1px solid rgba(255,255,255,0.06)' }}>
      <div style={{ display:'flex', animation:'marquee 26s linear infinite', width:'max-content' }}>
        {doubled.map((item,i)=>(
          <div key={i} style={{ display:'flex', alignItems:'center', gap:24, paddingRight:24, whiteSpace:'nowrap' }}>
            <span style={{ fontFamily:'Inter', fontWeight:600, fontSize:13, color:'rgba(255,255,255,0.55)', letterSpacing:0.5 }}>{item}</span>
            <div style={{ width:5, height:5, borderRadius:'50%', background:'#93c5fd', opacity:0.7 }} />
          </div>
        ))}
      </div>
    </div>
  );
};

/* ── PENSADO PARA ── */
const PensadoPara = ({ t }) => {
  const tags = ['Comercios','Restaurantes','Salones','Gimnasios','Hotelería','Servicios profesionales','Distribuidoras','Y muchos más'];
  return (
    <section style={{ padding:'60px 6% 0', background:'#f7f8fc' }}>
      <div style={{ maxWidth:1200, margin:'0 auto' }}>
        <div style={{ display:'flex', alignItems:'center', gap:16, flexWrap:'wrap' }}>
          <span style={{ fontSize:11, fontWeight:700, letterSpacing:2, color:'rgba(13,27,75,0.35)', textTransform:'uppercase', fontFamily:'Inter' }}>Pensado para</span>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            {tags.map(tag=>(
              <span key={tag} style={{
                padding:'7px 16px', borderRadius:100, fontSize:13, fontFamily:'Inter', fontWeight:500,
                background:'#fff', border:'1.5px solid rgba(13,27,75,0.1)', color:'rgba(13,27,75,0.6)',
              }}>{tag}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── CATÁLOGO DIGITAL (función estrella) ── */
const CatalogoDigital = ({ t }) => {
  const [activeIdx, setActiveIdx] = useState(0);
  const Icon = ({ name, active }) => {
    if (name === 'whatsapp') {
      const c = active ? '#b45309' : '#38bdf8';
      return (
        <svg width="46" height="46" viewBox="0 0 32 32" fill="none">
          <path d="M16.5 3a13 13 0 0 0-11.06 19.78L4 28.5a.5.5 0 0 0 .62.62l5.83-1.45A13 13 0 1 0 16.5 3Z" fill={c} />
          <path d="M16.5 6a10 10 0 0 0-8.7 14.93l.13.23-.83 3.04 3.12-.82.22.13A10 10 0 1 0 16.5 6Z" fill="#fff" />
          <path d="M21.4 18.65c-.27-.13-1.6-.79-1.85-.88-.25-.09-.43-.13-.61.13-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07a7.4 7.4 0 0 1-2.18-1.34 8.18 8.18 0 0 1-1.51-1.88c-.16-.27-.02-.42.12-.55.12-.12.27-.32.4-.48.13-.16.18-.27.27-.45.09-.18.04-.34-.02-.48-.07-.13-.61-1.47-.84-2.01-.22-.53-.44-.46-.61-.47l-.52-.01c-.18 0-.48.07-.73.34-.25.27-.95.93-.95 2.27 0 1.34.97 2.63 1.11 2.81.13.18 1.91 2.91 4.62 4.08.65.28 1.15.45 1.55.57.65.21 1.24.18 1.71.11.52-.08 1.6-.65 1.83-1.28.23-.63.23-1.18.16-1.29-.07-.11-.25-.18-.52-.31Z" fill={c} />
        </svg>
      );
    }
    if (name === 'qr') {
      const dark = active ? '#78350f' : '#0d1b4b';
      const accent = active ? '#d97706' : '#2563eb';
      const cream = active ? '#FEF3C7' : '#fff';
      return (
        <svg width="46" height="46" viewBox="0 0 24 24">
          <rect x="3" y="3" width="7" height="7" rx="1.2" fill={dark} />
          <rect x="5" y="5" width="3" height="3" fill={cream} />
          <rect x="14" y="3" width="7" height="7" rx="1.2" fill={accent} />
          <rect x="16" y="5" width="3" height="3" fill={cream} />
          <rect x="3" y="14" width="7" height="7" rx="1.2" fill={dark} />
          <rect x="5" y="16" width="3" height="3" fill={cream} />
          <rect x="14" y="14" width="3" height="3" fill={accent} />
          <rect x="18" y="14" width="3" height="3" fill={dark} />
          <rect x="14" y="18" width="3" height="3" fill={dark} />
          <rect x="18" y="18" width="3" height="3" fill={accent} />
        </svg>
      );
    }
    if (name === 'palette') {
      const stroke = active ? '#78350f' : '#0d1b4b';
      return (
        <svg width="46" height="46" viewBox="0 0 24 24">
          <path d="M12 3a9 9 0 1 0 0 18c1.5 0 2-1 2-2 0-1.5-1.5-1.5-1.5-3 0-1 .8-1.5 1.8-1.5H17a4 4 0 0 0 4-4 9 9 0 0 0-9-7.5Z" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" />
          <circle cx="7.5" cy="11" r="1.4" fill="#ef4444" />
          <circle cx="9.5" cy="7" r="1.4" fill="#f59e0b" />
          <circle cx="14" cy="6.5" r="1.4" fill="#10b981" />
          <circle cx="17.5" cy="9.5" r="1.4" fill="#3b82f6" />
        </svg>
      );
    }
    if (name === 'refresh') {
      const c1 = active ? '#d97706' : '#2563eb';
      const c2 = active ? '#78350f' : '#0d1b4b';
      return (
        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 12a9 9 0 0 1 15.5-6.3L21 8" stroke={c1} />
          <path d="M21 3v5h-5" stroke={c1} />
          <path d="M21 12a9 9 0 0 1-15.5 6.3L3 16" stroke={c2} />
          <path d="M3 21v-5h5" stroke={c2} />
        </svg>
      );
    }
    return null;
  };
  const benefits = [
    { icon:'whatsapp', title:'Compartilo por', titleAlt:'WhatsApp', desc:'Un link y listo. Tu cliente abre, navega y consulta, todo desde el celular.', featured:true },
    { icon:'qr', title:'Generá un QR', titleAlt:'personalizado', desc:'Imprimilo y pegalo en tu local, en tu vidriera o en tus tarjetas. Un escaneo y entran a tu catálogo.' },
    { icon:'palette', title:'Diseñalo', titleAlt:'a tu gusto', desc:'Tu logo, tus colores, tus categorías. El catálogo se ve como parte de tu marca.' },
    { icon:'refresh', title:'Siempre', titleAlt:'actualizado', desc:'Cambiás un precio o el stock, y se refleja al instante. Sin re-enviar nada, sin actualizar PDFs.' },
  ];
  return (
    <section id="catalogo" style={{ padding:'110px 6%', background:'#fff', position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', top:'-15%', right:'-10%', width:'45%', height:'70%', background:`radial-gradient(ellipse at center, ${t.accent}15, transparent 65%)`, filter:'blur(40px)', pointerEvents:'none' }} />
      <div style={{ position:'absolute', bottom:'-10%', left:'-5%', width:'40%', height:'60%', background:'radial-gradient(ellipse at center, rgba(147,197,253,0.18), transparent 65%)', filter:'blur(40px)', pointerEvents:'none' }} />
      <div style={{ maxWidth:1200, margin:'0 auto', position:'relative', zIndex:1 }}>
        <div style={{ textAlign:'center', marginBottom:60, position:'relative' }}>
          {/* Golden star decorations */}
          {[
            { top:-10, left:'18%', size:48, rotate:-15, opacity:1 },
            { top:30, left:'8%', size:30, rotate:20, opacity:0.85 },
            { top:90, left:'14%', size:22, rotate:-25, opacity:0.7 },
            { top:-15, right:'18%', size:38, rotate:15, opacity:0.95 },
            { top:40, right:'8%', size:54, rotate:-10, opacity:1 },
            { top:100, right:'14%', size:26, rotate:30, opacity:0.75 },
          ].map((s,i)=>(
            <img key={i} src="/kodex/imagen/estrella sin fondo.png" alt="" loading="lazy" decoding="async"
              style={{
                position:'absolute', top:s.top, left:s.left, right:s.right,
                width:s.size, height:s.size, objectFit:'contain',
                transform:`rotate(${s.rotate}deg)`,
                filter:'drop-shadow(0 4px 10px rgba(245,158,11,0.40))',
                opacity:s.opacity,
                animation:`float ${4 + (i%3)}s ease-in-out infinite`,
                animationDelay:`${i*0.3}s`,
                pointerEvents:'none',
              }} />
          ))}

          <div style={{ display:'inline-flex', alignItems:'center', gap:6,
            background:'linear-gradient(135deg, #FEF3C7, #FDE68A)',
            border:'1px solid rgba(217,119,6,0.25)',
            borderRadius:100, padding:'6px 16px', marginBottom:18,
            boxShadow:'0 4px 14px rgba(245,158,11,0.20)',
          }}>
            <span style={{ fontSize:14 }}>🌟</span>
            <span style={{ fontSize:11, fontWeight:700, color:'#B45309', textTransform:'uppercase', letterSpacing:1.2, fontFamily:'Inter' }}>Función estrella</span>
            <span style={{ fontSize:14 }}>🌟</span>
          </div>
          <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:'clamp(34px,4vw,52px)', color:'#0d1b4b', letterSpacing:-0.5, lineHeight:1.08, marginBottom:16, position:'relative', zIndex:1 }}>
            Tu catálogo, en el bolsillo<br />de tus <span style={{ color:t.accent }}>clientes.</span>
          </h2>
          <p style={{ color:'rgba(13,27,75,0.55)', fontFamily:'Inter', fontSize:16, lineHeight:1.7, maxWidth:680, margin:'0 auto', position:'relative', zIndex:1 }}>
            Compartí tu catálogo digital por WhatsApp, redes o con un código QR. Tus clientes ven productos, precios y stock actualizado en tiempo real, sin descargar apps, sin login, sin fricciones.
          </p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18, marginBottom:48 }}>
          {benefits.map(({ icon, title, titleAlt, desc }, i) => {
            const active = activeIdx === i;
            const FEATURED_BG = 'linear-gradient(135deg, #FEF3C7 0%, #FDE68A 60%, #FCD34D 100%)';
            const bg = active ? FEATURED_BG : '#fff';
            const fg = active ? '#78350f' : '#0d1b4b';
            const dim = active ? 'rgba(120,53,15,0.75)' : 'rgba(13,27,75,0.55)';
            const divider = active ? 'rgba(180,83,9,0.30)' : 'rgba(13,27,75,0.10)';
            const cornerColor = active ? 'rgba(180,83,9,0.55)' : 'rgba(13,27,75,0.5)';
            return (
              <div key={title} onClick={()=>setActiveIdx(i)} style={{ position:'relative', paddingBottom:24 }}>
                <div style={{
                  position:'relative',
                  background:bg, borderRadius:8, padding:'28px 26px', cursor:'pointer',
                  border: active ? 'none' : '1px solid rgba(13,27,75,0.08)',
                  boxShadow: active ? '0 10px 30px rgba(245,158,11,0.30)' : '0 2px 8px rgba(13,27,75,0.04)',
                  transition:'all 0.3s ease', display:'flex', flexDirection:'column',
                }}
                onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow= active ? '0 18px 44px rgba(245,158,11,0.40)' : '0 14px 32px rgba(13,27,75,0.10)';}}
                onMouseLeave={e=>{e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.boxShadow= active ? '0 10px 30px rgba(245,158,11,0.30)' : '0 2px 8px rgba(13,27,75,0.04)';}}
                >
                  {/* L-corner top-left */}
                  <div style={{ position:'absolute', top:8, left:8, width:14, height:14, borderTop:`1.5px solid ${cornerColor}`, borderLeft:`1.5px solid ${cornerColor}`, pointerEvents:'none' }} />
                  {/* L-corner bottom-right */}
                  <div style={{ position:'absolute', bottom:8, right:8, width:14, height:14, borderBottom:`1.5px solid ${cornerColor}`, borderRight:`1.5px solid ${cornerColor}`, pointerEvents:'none' }} />

                  <div style={{ marginBottom:18 }}>
                    <Icon name={icon} active={active} />
                  </div>
                  <div style={{ height:1, background:divider, marginBottom:18 }} />
                  <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:18, color:fg, lineHeight:1.2, marginBottom:10 }}>
                    {title}<br />{titleAlt}
                  </div>
                  <p style={{ fontSize:13, color:dim, lineHeight:1.65, fontFamily:'Inter', margin:0 }}>{desc}</p>
                </div>
                {/* Number below frame */}
                <div style={{
                  position:'absolute', bottom:0, right:6,
                  fontFamily:'Plus Jakarta Sans', fontWeight:500, fontSize:12,
                  color:'rgba(13,27,75,0.5)', letterSpacing:1,
                }}>{String(i+1).padStart(2,'0')}</div>
              </div>
            );
          })}
        </div>
        <div style={{ textAlign:'center' }}>
          <button style={{
            background:t.accent, border:'none', color:'#fff', padding:'14px 30px', borderRadius:50,
            fontSize:14, fontFamily:'Plus Jakarta Sans', fontWeight:700, cursor:'pointer',
            boxShadow:`0 8px 24px ${t.accent}55`, transition:'all 0.2s',
          }}
          onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.boxShadow=`0 12px 32px ${t.accent}77`}}
          onMouseLeave={e=>{e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.boxShadow=`0 8px 24px ${t.accent}55`}}
          >Ver catálogo de ejemplo →</button>
          <div style={{ fontSize:12.5, color:'rgba(13,27,75,0.45)', fontFamily:'Inter', marginTop:14 }}>
            Sin login para tus clientes. Sin apps para descargar. Sin vueltas.
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── FEATURES ── */
const Features = ({ t }) => {
  const feats = [
    { icon:'🧾', image:'/kodex/imagen/caja.jpeg', title:'Registrá ventas en segundos.', tag:'Punto de Venta', bg:'linear-gradient(160deg, #f0f9ff, #e0f2fe)', pill:'#e0f2fe', pillFg:'#0369a1', clay:'radial-gradient(circle at 30% 30%, #ffffff, #bae6fd 60%, #7dd3fc)' },
    { icon:'📋', image:'/kodex/imagen/33.jpeg', title:'Presupuestos con tu marca.', tag:'Presupuestos', bg:'linear-gradient(160deg, #eff6ff, #dbeafe)', pill:'#dbeafe', pillFg:'#1d4ed8', clay:'radial-gradient(circle at 30% 30%, #ffffff, #bfdbfe 60%, #93c5fd)' },
    { icon:'📦', image:'/kodex/imagen/stock.jpeg', title:'Stock que se actualiza solo.', tag:'Inventario', bg:'linear-gradient(160deg, #ecfeff, #cffafe)', pill:'#cffafe', pillFg:'#0e7490', clay:'radial-gradient(circle at 30% 30%, #ffffff, #a5f3fc 60%, #67e8f9)' },
    { icon:'💰', image:'/kodex/imagen/44.jpeg', title:'Caja y cobranzas al día.', tag:'Finanzas', bg:'linear-gradient(160deg, #f0f9ff, #e0f2fe)', pill:'#e0f2fe', pillFg:'#0c4a6e', clay:'radial-gradient(circle at 30% 30%, #ffffff, #bae6fd 60%, #7dd3fc)' },
    { icon:'🛍️', image:'/kodex/imagen/005.jpeg', title:'Tu catálogo, en sus celulares.', tag:'Catálogo Digital', bg:'linear-gradient(160deg, #eff6ff, #c7d2fe)', pill:'#dbeafe', pillFg:'#1e3a8a', clay:'radial-gradient(circle at 30% 30%, #ffffff, #c7d2fe 60%, #a5b4fc)' },
    { icon:'📊', image:'/kodex/imagen/006.jpeg', title:'Reportes claros, decisiones simples.', tag:'Reportes', bg:'linear-gradient(160deg, #f0f9ff, #dbeafe)', pill:'#dbeafe', pillFg:'#1e3a8a', clay:'radial-gradient(circle at 30% 30%, #ffffff, #bfdbfe 60%, #93c5fd)' },
    { icon:'🚚', image:'/kodex/imagen/007.jpeg', title:'Pedidos en una sola bandeja.', tag:'Pedidos', bg:'linear-gradient(160deg, #ecfeff, #bae6fd)', pill:'#bae6fd', pillFg:'#075985', clay:'radial-gradient(circle at 30% 30%, #ffffff, #a5f3fc 60%, #38bdf8)' },
    { icon:'📝', image:'/kodex/imagen/008.jpeg', title:'Devoluciones bajo control.', tag:'Notas de Crédito', bg:'linear-gradient(160deg, #eef2ff, #dbeafe)', pill:'#dbeafe', pillFg:'#3730a3', clay:'radial-gradient(circle at 30% 30%, #ffffff, #c7d2fe 60%, #a5b4fc)' },
    { icon:'👥', image:'/kodex/imagen/009.jpeg', title:'Tus clientes, organizados.', tag:'Clientes', bg:'linear-gradient(160deg, #e0f2fe, #bae6fd)', pill:'#bae6fd', pillFg:'#075985', clay:'radial-gradient(circle at 30% 30%, #ffffff, #7dd3fc 60%, #38bdf8)' },
    { icon:'🔐', image:'/kodex/imagen/010.jpeg', title:'Cada uno ve lo que tiene que ver.', tag:'Roles', bg:'linear-gradient(160deg, #eff6ff, #bfdbfe)', pill:'#bfdbfe', pillFg:'#1e40af', clay:'radial-gradient(circle at 30% 30%, #ffffff, #93c5fd 60%, #60a5fa)' },
    { icon:'🎨', image:'/kodex/imagen/011.jpeg', title:'Se adapta a tu identidad.', tag:'Personalizable', bg:'linear-gradient(160deg, #f0f9ff, #cffafe)', pill:'#a5f3fc', pillFg:'#0e7490', clay:'radial-gradient(circle at 30% 30%, #ffffff, #a5f3fc 60%, #22d3ee)' },
    { icon:'⚙️', image:'/kodex/imagen/012.jpeg', title:'Todo configurable, desde un panel.', tag:'Configuración', bg:'linear-gradient(160deg, #eef2ff, #c7d2fe)', pill:'#c7d2fe', pillFg:'#312e81', clay:'radial-gradient(circle at 30% 30%, #ffffff, #c7d2fe 60%, #a5b4fc)' },
  ];
  return (
    <section id="funcionalidades" style={{ padding:'100px 6%', background:'#f7f8fc' }}>
      <div style={{ maxWidth:1200, margin:'0 auto', position:'relative' }}>
        {/* Floating KODEX logo — centered over the description text */}
        <div style={{
          position:'absolute', top:20, left:'68%', transform:'translateX(-50%)',
          width:150, height:150, borderRadius:'50%',
          background:'#fff',
          display:'flex', alignItems:'center', justifyContent:'center',
          boxShadow:`0 22px 50px ${t.accent}33`,
          border:`1px solid ${t.accent}22`,
          overflow:'hidden',
          animation:'float 4s ease-in-out infinite',
          zIndex:2,
        }}>
          <img src="/kodex/imagen/LOGO.jpeg" alt="KODEX" loading="lazy" decoding="async" style={{
            width:'88%', height:'88%', objectFit:'contain', display:'block',
          }} />
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'end', marginBottom:60 }}>
          <div>
            <div style={{ display:'inline-flex', alignItems:'center', gap:6, background:`${t.accent}12`, borderRadius:100, padding:'5px 14px', marginBottom:18 }}>
              <span style={{ fontSize:11, fontWeight:700, color:t.accent, textTransform:'uppercase', letterSpacing:1, fontFamily:'Inter' }}>⚡ Por qué KODEX</span>
            </div>
            <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:'clamp(36px,4vw,56px)', color:'#0d1b4b', lineHeight:1.06, letterSpacing:-0.5 }}>
              Todo lo que tu negocio necesita para vender más y <span style={{ color:t.accent }}>operar mejor</span>
            </h2>
          </div>
          <p style={{ fontSize:16, color:'rgba(13,27,75,0.5)', lineHeight:1.8, fontFamily:'Inter', margin:0, paddingBottom:4 }}>
            No te dejamos solo. KODEX está pensado para acompañarte desde el día uno, sin importar el rubro ni el tamaño de tu negocio.
          </p>
        </div>
        <div style={{
          background:'#fff', borderRadius:24, padding:28,
          border:'1px solid rgba(13,27,75,0.08)',
          boxShadow:'0 2px 12px rgba(13,27,75,0.04)',
        }}>
          {/* Wrapper header */}
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:24 }}>
            <div>
              <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:20, color:'#0d1b4b' }}>
                Todo en una plataforma
              </div>
              <div style={{ fontSize:13.5, color:'rgba(13,27,75,0.5)', fontFamily:'Inter', marginTop:2 }}>
                Funcionalidades pensadas para vender más y operar mejor
              </div>
            </div>
            <div style={{ display:'flex', gap:8 }}>
              {['‹','›'].map(arrow => (
                <button key={arrow} style={{
                  width:38, height:38, borderRadius:10, border:'1px solid rgba(13,27,75,0.10)',
                  background:'#fff', color:'#0d1b4b', fontSize:18, fontWeight:600, cursor:'pointer',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  transition:'all 0.2s',
                }}
                onMouseEnter={e=>{e.currentTarget.style.background='#f7f8fc';e.currentTarget.style.borderColor='rgba(13,27,75,0.20)';}}
                onMouseLeave={e=>{e.currentTarget.style.background='#fff';e.currentTarget.style.borderColor='rgba(13,27,75,0.10)';}}
                >{arrow}</button>
              ))}
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16 }}>
            {feats.map(({ icon, image, title, tag, bg, pillFg }, i) => (
              <div key={i} style={{
                borderRadius:14, padding:16, border:'1px solid rgba(13,27,75,0.08)',
                background:'#fff', cursor:'default', transition:'all 0.25s',
                display:'flex', flexDirection:'column',
              }}
              onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(13,27,75,0.20)';e.currentTarget.style.boxShadow='0 12px 28px rgba(13,27,75,0.08)';e.currentTarget.style.transform='translateY(-2px)';}}
              onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(13,27,75,0.08)';e.currentTarget.style.boxShadow='none';e.currentTarget.style.transform='translateY(0)';}}
              >
                {/* Number top */}
                <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:500, fontSize:12, color:'rgba(13,27,75,0.45)', marginBottom:10, letterSpacing:0.5 }}>
                  {String(i+1).padStart(3,'0')}
                </div>

                {/* Image-like area */}
                <div style={{
                  background:bg, borderRadius:10, height:140,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  marginBottom:14, position:'relative', overflow:'hidden',
                }}>
                  {image ? (
                    <img src={image} alt={tag} loading="lazy" decoding="async" style={{
                      width:'100%', height:'100%', objectFit:'cover', display:'block',
                    }} />
                  ) : (
                    <span style={{ fontSize:64, lineHeight:1, filter:'drop-shadow(0 6px 10px rgba(13,27,75,0.15))' }}>{icon}</span>
                  )}
                </div>

                {/* Title + subtitle */}
                <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:15, color:'#0d1b4b', marginBottom:4 }}>
                  {tag}
                </div>
                <div style={{ fontSize:13, color:'rgba(13,27,75,0.55)', fontFamily:'Inter', lineHeight:1.5 }}>
                  {title}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── BRIDGE: minimalist quote section with interactive arc ── */
const AnimatedQuote = ({ text, author }) => {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) { setVisible(true); io.disconnect(); } }),
      { threshold: 0.35 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const words = text.split(' ');
  return (
    <p ref={ref} style={{
      fontFamily:'"Plus Jakarta Sans","Inter",sans-serif', fontWeight:800,
      fontSize:'clamp(22px,2.4vw,34px)', color:'#fff',
      lineHeight:1.2, letterSpacing:-0.5, margin:0,
      perspective:'600px',
    }}>
      {words.map((w, i) => (
        <span
          key={i}
          className={`quote-word${visible ? ' loop' : ''}`}
          style={{
            animationDelay: visible
              ? `${i * 60}ms, ${i * 180}ms`
              : `${i * 60}ms`,
            marginRight: '0.28em',
          }}
        >{w}</span>
      ))}
      <span className={`quote-word${visible ? ' in' : ''}`} style={{
        display:'block', marginTop:14, fontSize:13, fontStyle:'italic',
        color:'rgba(255,255,255,0.45)', letterSpacing:0.5,
        animationDelay: `${words.length * 60 + 200}ms`,
      }}>{author}</span>
    </p>
  );
};

const Bridge = ({ t }) => {
  return (
    <section style={{
      position:'relative', padding:'40px 8% 44px', overflow:'hidden',
      background:'#0a1538',
    }}>
      {/* 2-column layout: label + quote */}
      <div style={{
        position:'relative', zIndex:1, maxWidth:1100, margin:'0 auto',
        display:'grid', gridTemplateColumns:'140px 1fr', gap:36, alignItems:'start',
        paddingTop:38,
      }}>
        <div style={{
          fontFamily:'"Plus Jakarta Sans","Inter",sans-serif', fontWeight:800,
          fontSize:13, color:'rgba(255,255,255,0.55)', letterSpacing:1,
          paddingTop:4, textTransform:'uppercase',
        }}>Filosofía</div>

        <AnimatedQuote
          text="Cuando algo es lo suficientemente importante, lo haces incluso cuando las probabilidades están en tu contra."
          author="— Elon Musk"
        />
      </div>
    </section>
  );
};

/* ── HOW IT WORKS ── */
const HowItWorks = ({ t }) => {
  const steps = [
    { n:'01', title:'Creá tu cuenta', desc:'Registro gratis en segundos. Sin tarjeta de crédito, sin contratos.', icon:'✉' },
    { n:'02', title:'Configurá tu negocio', desc:'Cargá tu logo, colores, datos fiscales y categorías. Te guiamos paso a paso.', icon:'⚙' },
    { n:'03', title:'Sumá a tu equipo', desc:'Agregá empleados y asigná roles con los permisos que cada uno necesita.', icon:'👥' },
    { n:'04', title:'¡Empezá a vender!', desc:'Registrá ventas, controlá la caja y monitoreá tu negocio en tiempo real.', icon:'🚀' },
  ];
  return (
    <section style={{ padding:'100px 6%', background:'#fff' }}>
      <div style={{ maxWidth:1100, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom:70 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:2, color:'rgba(13,27,75,0.3)', textTransform:'uppercase', fontFamily:'Inter', marginBottom:14 }}>En 4 pasos</div>
          <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:'clamp(34px,4vw,52px)', color:'#0d1b4b', letterSpacing:-0.5, marginBottom:12 }}>Empezá a operar en menos de 10 minutos.</h2>
          <p style={{ color:'rgba(13,27,75,0.45)', fontFamily:'Inter', fontSize:16, maxWidth:520, margin:'0 auto' }}>Sin instalaciones, sin servidores, sin complicaciones técnicas. Te registrás y trabajamos con vos desde el primer click.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:24, position:'relative' }}>
          <div style={{ position:'absolute', top:44, left:'12%', right:'12%', height:1, background:`linear-gradient(90deg, transparent, ${t.accent}30, ${t.accent}30, transparent)` }} />
          {steps.map(({ n, title, desc, icon }) => (
            <div key={n} style={{ textAlign:'center', position:'relative', zIndex:1 }}>
              <div style={{
                width:88, height:88, borderRadius:'50%', margin:'0 auto 24px',
                background:'#f7f8fc', boxShadow:'0 12px 40px rgba(13,27,75,0.08)',
                border:`2px solid ${t.accent}20`,
                display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', gap:2,
              }}>
                <span style={{ fontSize:24 }}>{icon}</span>
                <span style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:11, color:t.accent, letterSpacing:1 }}>{n}</span>
              </div>
              <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:18, color:'#0d1b4b', marginBottom:8 }}>{title}</div>
              <p style={{ fontSize:13, color:'rgba(13,27,75,0.5)', lineHeight:1.75, fontFamily:'Inter', maxWidth:220, margin:'0 auto' }}>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ── STATS ── */
const Stats = ({ t }) => {
  const stats = [
    { n:'+200', l:'Negocios activos' },
    { n:'+50.000', l:'Ventas procesadas' },
    { n:'99%', l:'Disponibilidad' },
    { n:'24/7', l:'Soporte por WhatsApp' },
  ];
  return (
    <section style={{ padding:'80px 6%', background:'radial-gradient(ellipse 80% 60% at 50% 50%, #1e40af 0%, #0d1b4b 55%, #050d2e 100%)', position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)', width:'70%', height:'140%', background:'radial-gradient(ellipse at center, rgba(96,165,250,0.35) 0%, rgba(59,130,246,0.15) 25%, transparent 60%)', pointerEvents:'none', filter:'blur(20px)' }} />
      <div style={{ position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)', width:'45%', height:'90%', background:'radial-gradient(ellipse at center, rgba(147,197,253,0.25) 0%, transparent 70%)', pointerEvents:'none' }} />
      <div style={{ maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:32, position:'relative', zIndex:1 }}>
        {stats.map(({ n, l }, i) => (
          <div key={i} style={{ textAlign:'center' }}>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:42, color:'#fff', letterSpacing:-0.5 }}>{n}</div>
            <div style={{ fontSize:13, color:'rgba(255,255,255,0.5)', fontFamily:'Inter', marginTop:4 }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ── MISSION STATEMENT (full-bleed image + overlay) ── */
const MissionStatement = ({ t }) => (
  <section style={{ position:'relative', minHeight:520, overflow:'hidden', display:'flex', alignItems:'center' }}>
    <div style={{
      position:'absolute', inset:0,
      backgroundImage:'url("/kodex/imagen/Y_PUEDES_VOLVER_202604262306.jpeg")',
      backgroundSize:'cover', backgroundPosition:'center',
    }} />
    <div style={{ position:'absolute', inset:0, background:'linear-gradient(100deg, rgba(13,27,75,0.92) 0%, rgba(13,27,75,0.7) 50%, rgba(13,27,75,0.15) 100%)' }} />
    <div style={{ position:'relative', zIndex:1, padding:'100px 6%', maxWidth:1200, margin:'0 auto', width:'100%' }}>
      <div style={{ maxWidth:600 }}>
        <div style={{ display:'inline-flex', alignItems:'center', gap:6, background:'rgba(255,255,255,0.1)', backdropFilter:'blur(10px)', borderRadius:100, padding:'5px 14px', marginBottom:24, border:'1px solid rgba(255,255,255,0.15)' }}>
          <span style={{ fontSize:11, fontWeight:700, color:'#fff', textTransform:'uppercase', letterSpacing:1.5, fontFamily:'Inter' }}>Nuestra misión</span>
        </div>
        <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:'clamp(38px,4.5vw,60px)', color:'#fff', lineHeight:1.05, letterSpacing:-1, marginBottom:24 }}>
          Una comunidad de <span style={{ color:'#93c5fd' }}>negocios</span> que crecen juntos.
        </h2>
        <p style={{ fontSize:18, color:'rgba(255,255,255,0.78)', fontFamily:'Inter', lineHeight:1.75, marginBottom:32 }}>
          KODEX no es solo una plataforma. Es la red que conecta a miles de comerciantes, restaurantes y emprendedores que comparten datos, aprenden juntos y profesionalizan su operación cada día.
        </p>
        <button style={{ background:t.accent, color:'#fff', border:'none', padding:'14px 30px', borderRadius:50, fontSize:15, fontFamily:'Plus Jakarta Sans', fontWeight:700, cursor:'pointer', boxShadow:`0 8px 28px ${t.accent}55` }}>Sumate a la comunidad →</button>
      </div>
    </div>
  </section>
);

/* ── ALTERNATING IMAGE+TEXT BLOCK ── */
const ImageTextBlock = ({ t, eyebrow, title, accent, body, bullets, image, reverse=false, bg='#fff' }) => (
  <section style={{ padding:'120px 6%', background:bg }}>
    <div style={{ maxWidth:1200, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap:80, alignItems:'center' }}>
      <div style={{ order: reverse ? 2 : 1 }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:2, color:t.accent, textTransform:'uppercase', fontFamily:'Inter', marginBottom:16 }}>{eyebrow}</div>
        <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:'clamp(34px,3.8vw,52px)', color:'#0d1b4b', lineHeight:1.08, letterSpacing:-0.8, marginBottom:20 }}>
          {title} <span style={{ color:t.accent }}>{accent}</span>
        </h2>
        <p style={{ fontSize:17, color:'rgba(13,27,75,0.55)', fontFamily:'Inter', lineHeight:1.8, marginBottom:28 }}>{body}</p>
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          {bullets.map((b,i) => (
            <div key={i} style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
              <div style={{ width:28, height:28, borderRadius:8, background:`${t.accent}15`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <span style={{ color:t.accent, fontSize:14, fontWeight:700 }}>✓</span>
              </div>
              <div>
                <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:700, fontSize:15, color:'#0d1b4b', marginBottom:3 }}>{b.title}</div>
                <div style={{ fontSize:14, color:'rgba(13,27,75,0.55)', fontFamily:'Inter', lineHeight:1.6 }}>{b.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ order: reverse ? 1 : 2, position:'relative' }}>
        <div style={{ position:'absolute', inset:'-20px', background:`radial-gradient(circle at 30% 30%, ${t.accent}25, transparent 60%)`, filter:'blur(30px)', pointerEvents:'none' }} />
        <div style={{ position:'relative', borderRadius:24, overflow:'hidden', boxShadow:'0 30px 80px rgba(13,27,75,0.18)', border:'1px solid rgba(13,27,75,0.06)' }}>
          <img src={image} alt="" loading="lazy" decoding="async" style={{ width:'100%', display:'block', objectFit:'cover' }} />
        </div>
        <div style={{ position:'absolute', bottom:-24, [reverse?'right':'left']:-24, background:'#fff', borderRadius:18, padding:'14px 20px', boxShadow:'0 16px 48px rgba(13,27,75,0.16)', border:'1px solid rgba(13,27,75,0.05)', display:'flex', alignItems:'center', gap:12 }}>
          <div style={{ width:42, height:42, borderRadius:12, background:`${t.accent}15`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:20 }}>⚡</div>
          <div>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:700, fontSize:14, color:'#0d1b4b' }}>Listo en minutos</div>
            <div style={{ fontSize:12, color:'rgba(13,27,75,0.5)', fontFamily:'Inter' }}>Sin instalación</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── EXPERTS / TRUST BAND ── */
const Experts = ({ t }) => (
  <section style={{ padding:'100px 6%', background:'#0d1b4b', position:'relative', overflow:'hidden' }}>
    <div style={{ position:'absolute', top:'-30%', left:'40%', width:'40%', height:'120%', background:'radial-gradient(ellipse at center, rgba(96,165,250,0.25), transparent 70%)', filter:'blur(60px)', pointerEvents:'none' }} />
    <div style={{ maxWidth:1100, margin:'0 auto', position:'relative', zIndex:1, textAlign:'center' }}>
      <div style={{ fontSize:11, fontWeight:700, letterSpacing:2, color:'rgba(255,255,255,0.5)', textTransform:'uppercase', fontFamily:'Inter', marginBottom:14 }}>Hecho por expertos. Para vos.</div>
      <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:'clamp(38px,4.5vw,60px)', color:'#fff', letterSpacing:-1, marginBottom:24, lineHeight:1.05 }}>
        Equipo experto.<br /><span style={{ color:'#93c5fd' }}>Soporte humano.</span>
      </h2>
      <p style={{ fontSize:17, color:'rgba(255,255,255,0.7)', fontFamily:'Inter', lineHeight:1.75, maxWidth:620, margin:'0 auto 50px' }}>
        Más de 10 años desarrollando software para negocios reales en Latinoamérica. Cuando hablás con KODEX, hablás con personas que entienden tu rubro.
      </p>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24, marginTop:50 }}>
        {[
          { n:'10+', l:'Años de experiencia' },
          { n:'+200', l:'Implementaciones exitosas' },
          { n:'<2h', l:'Tiempo medio de respuesta' },
        ].map(({n,l},i) => (
          <div key={i} style={{ background:'rgba(255,255,255,0.05)', backdropFilter:'blur(10px)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:20, padding:'30px 20px' }}>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:44, color:'#fff', letterSpacing:-1.5, marginBottom:6 }}>{n}</div>
            <div style={{ fontSize:13, color:'rgba(255,255,255,0.55)', fontFamily:'Inter' }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── MODULES ── */
const Modules = ({ t }) => {
  const [active, setActive] = useState(0);
  const mods = [
    { title:'Ventas', desc:'Registrá ventas, generá presupuestos, emití informes detallados, gestioná pedidos y notas de crédito desde una bandeja única.', tags:['Punto de venta','Presupuestos','Pedidos','Notas de crédito','Informes'], icon:'🛒' },
    { title:'Inventario', desc:'Productos con imágenes, control de stock en tiempo real, abastecimiento, categorías y etiquetas imprimibles.', tags:['Stock en vivo','Etiquetas','Imágenes','Categorías'], icon:'📦' },
    { title:'Catálogo Digital', desc:'Tu vidriera online compartible por link o QR. Sin login para tus clientes, con tu marca y siempre actualizado.', tags:['QR','Link compartible','WhatsApp','Tiempo real','Sin login'], icon:'🛍️' },
    { title:'Finanzas', desc:'Caja diaria, cobranzas, cuenta corriente, control de deudores y movimientos exportables.', tags:['Caja','Cobranzas','Deudores','Cuenta corriente'], icon:'💰' },
    { title:'Clientes', desc:'Directorio completo de contactos con historial de compras, datos fiscales y notas privadas.', tags:['Contactos','Historial','Datos fiscales'], icon:'👥' },
    { title:'Administración', desc:'Creá usuarios, asigná roles (admin, cajero, operador) y controlá qué puede ver o hacer cada persona.', tags:['Roles','Permisos granulares','Multi-usuario'], icon:'🔐' },
    { title:'Sistema', desc:'Personalizá colores, logo, datos del negocio, métodos de pago y categorías. La plataforma se adapta a tu identidad.', tags:['Logo','Colores','Datos fiscales','Métodos de pago'], icon:'⚙' },
  ];
  const m = mods[active];
  return (
    <section id="módulos" style={{ padding:'100px 6%', background:'#f7f8fc', position:'relative', overflow:'hidden' }}>
      <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none', opacity:0.5 }} preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="modGrid" x="0" y="0" width="64" height="64" patternUnits="userSpaceOnUse">
            <path d="M 64 0 L 0 0 0 64" fill="none" stroke="rgba(13,27,75,0.06)" strokeWidth="1" />
          </pattern>
          <radialGradient id="modFade" cx="50%" cy="50%" r="55%">
            <stop offset="0%" stopColor="#000" stopOpacity="1" />
            <stop offset="100%" stopColor="#000" stopOpacity="0" />
          </radialGradient>
          <mask id="modMask"><rect width="100%" height="100%" fill="url(#modFade)" /></mask>
        </defs>
        <rect width="100%" height="100%" fill="url(#modGrid)" mask="url(#modMask)" />
        <g stroke="rgba(37,99,235,0.18)" strokeWidth="1" fill="none">
          <rect x="80" y="120" width="280" height="180" rx="32" />
          <rect x="60" y="100" width="320" height="220" rx="40" />
          <rect x="40" y="80" width="360" height="260" rx="48" />
        </g>
        <g stroke="rgba(37,99,235,0.12)" strokeWidth="1" fill="none">
          <circle cx="92%" cy="78%" r="120" />
          <circle cx="92%" cy="78%" r="170" />
          <circle cx="92%" cy="78%" r="220" />
        </g>
        <g stroke="rgba(13,27,75,0.08)" strokeWidth="1" strokeDasharray="2 6" fill="none">
          <path d="M 0 60% Q 30% 50%, 50% 55% T 100% 50%" />
          <path d="M 0 75% Q 35% 65%, 55% 72% T 100% 68%" />
        </g>
      </svg>
      <div style={{ maxWidth:1200, margin:'0 auto', position:'relative', zIndex:1 }}>
        <div style={{ marginBottom:56 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:2, color:'rgba(13,27,75,0.3)', textTransform:'uppercase', fontFamily:'Inter', marginBottom:14 }}>Módulos</div>
          <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:'clamp(34px,4vw,52px)', color:'#0d1b4b', letterSpacing:-0.5, marginBottom:12 }}>Cada herramienta, pensada para tu día a día.</h2>
          <p style={{ color:'rgba(13,27,75,0.45)', fontFamily:'Inter', fontSize:16, maxWidth:520 }}>Módulos conectados entre sí para que no pierdas tiempo saltando entre aplicaciones.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'280px 1fr', gap:24 }}>
          {/* Sidebar tabs */}
          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
            {mods.map((mod, i) => (
              <button key={i} onClick={()=>setActive(i)} style={{
                padding:'14px 18px', borderRadius:14, fontSize:13, fontFamily:'Inter', fontWeight:700, letterSpacing:1,
                cursor:'pointer', transition:'all 0.2s', border:'none', textAlign:'left',
                display:'flex', alignItems:'center', gap:10, textTransform:'uppercase',
                background: active===i ? '#0d1b4b' : '#fff',
                color: active===i ? '#fff' : 'rgba(13,27,75,0.6)',
                boxShadow: active===i ? '0 8px 24px rgba(13,27,75,0.15)' : '0 2px 8px rgba(13,27,75,0.04)',
              }}>
                <span style={{ fontSize:18 }}>{mod.icon}</span>
                {mod.title}
              </button>
            ))}
          </div>
          {/* Detail */}
          <div style={{
            background:'#fff', borderRadius:24, padding:'40px 48px',
            border:'1.5px solid rgba(13,27,75,0.06)',
            boxShadow:'0 8px 32px rgba(13,27,75,0.06)',
            display:'flex', flexDirection:'column', justifyContent:'center',
          }}>
            <div style={{ fontSize:40, marginBottom:20 }}>{m.icon}</div>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:26, color:'#0d1b4b', marginBottom:14 }}>{m.title}</div>
            <p style={{ fontSize:16, color:'rgba(13,27,75,0.55)', fontFamily:'Inter', lineHeight:1.8, marginBottom:24, maxWidth:480 }}>{m.desc}</p>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
              {m.tags.map(tag=>(
                <span key={tag} style={{ padding:'5px 12px', borderRadius:100, fontSize:12, fontFamily:'Inter', fontWeight:500, background:`${t.accent}10`, color:t.accent, border:`1px solid ${t.accent}20` }}>{tag}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── PRICING ── */
const Pricing = ({ t }) => {
  const [hovered, setHovered] = useState(null);
  const plans = [
    { name:'Starter', priceLabel:'7 días', priceUnit:'gratis', kicker:'Prueba sin tarjeta', desc:'Ideal para probar la plataforma o negocios muy pequeños.', feats:['1 usuario','Hasta 100 ventas/mes','Hasta 20 productos','Módulo de ventas básico','Catálogo digital','Soporte por email'], cta:'Empezar prueba', icon:'🌱', bullet:'◆' },
    { name:'Pro', priceLabel:'$29', priceUnit:'USD/mes', kicker:'Facturación mensual', desc:'Para negocios en crecimiento que necesitan toda la potencia.', feats:['Hasta 5 usuarios','Ventas ilimitadas','Productos ilimitados','Todos los módulos','Catálogo digital con QR personalizado','Reportes y exportación PDF','Roles y permisos','Soporte prioritario por WhatsApp'], cta:'Hablemos', icon:'🚀', bullet:'✦' },
    { name:'Business', priceLabel:'Desde $79', priceUnit:'USD/mes', kicker:'Multi-sucursal', desc:'Para negocios grandes o con varias sucursales y equipos.', feats:['Usuarios ilimitados','Todo lo del Plan Pro','Multi-sucursal','API de integración','Personalización avanzada','Capacitación incluida','Soporte prioritario 24/7'], cta:'Hablemos', icon:'💎', bullet:'✦' },
  ];
  return (
    <section id="precios" style={{ padding:'120px 6%', background:'#fff' }}>
      <div style={{ maxWidth:1200, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom:60 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:2, color:'rgba(13,27,75,0.45)', textTransform:'uppercase', fontFamily:'Inter', marginBottom:14 }}>Planes de precios</div>
          <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize:'clamp(32px,4vw,48px)', color:'#0d1b4b', letterSpacing:-0.5 }}>
            Precios transparentes, sin sorpresas.
          </h2>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24 }}>
          {plans.map(({ name, priceLabel, priceUnit, kicker, desc, feats, cta, icon, bullet }) => {
            const isHover = hovered === name;
            return (
              <div key={name}
                onMouseEnter={()=>setHovered(name)}
                onMouseLeave={()=>setHovered(null)}
                style={{
                  borderRadius:18, padding:32, position:'relative',
                  background:'#fff',
                  border:'1px solid rgba(13,27,75,0.10)',
                  boxShadow: isHover ? '0 18px 44px rgba(13,27,75,0.10)' : '0 2px 8px rgba(13,27,75,0.04)',
                  transform: `translateY(${isHover ? -4 : 0}px)`,
                  transition:'transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease',
                  display:'flex', flexDirection:'column',
                }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14 }}>
                  <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:700, fontSize:18, color:'#0d1b4b' }}>{name}</div>
                  <div style={{
                    fontSize:32, lineHeight:1, userSelect:'none',
                    transform: isHover ? 'scale(1.12) rotate(-6deg)' : 'scale(1) rotate(0deg)',
                    transition:'transform 0.3s cubic-bezier(.2,.8,.2,1)',
                  }}>{icon}</div>
                </div>
                <div style={{ display:'flex', alignItems:'baseline', gap:6, marginBottom:4, flexWrap:'wrap' }}>
                  <span style={{ fontFamily:'Plus Jakarta Sans', fontWeight:800, fontSize: priceLabel.length > 5 ? 30 : 42, letterSpacing:-1.5, color:'#0d1b4b', whiteSpace:'nowrap' }}>{priceLabel}</span>
                  <span style={{ fontSize:14, color:'rgba(13,27,75,0.5)', fontFamily:'Inter', whiteSpace:'nowrap' }}>{priceUnit}</span>
                </div>
                <div style={{ fontSize:12.5, color:'rgba(13,27,75,0.45)', fontFamily:'Inter', marginBottom:18 }}>{kicker}</div>
                <p style={{ fontSize:14, color:'rgba(13,27,75,0.6)', fontFamily:'Inter', lineHeight:1.65, marginBottom:24 }}>{desc}</p>
                <div style={{ display:'flex', flexDirection:'column', gap:10, marginBottom:28, flex:1 }}>
                  {feats.map(f=>(
                    <div key={f} style={{ display:'flex', alignItems:'center', gap:10 }}>
                      <span style={{ fontSize:13, color:'#0d1b4b', fontWeight:700, width:14, textAlign:'center', flexShrink:0 }}>{bullet}</span>
                      <span style={{ fontSize:13.5, color:'rgba(13,27,75,0.7)', fontFamily:'Inter' }}>{f}</span>
                    </div>
                  ))}
                </div>
                <button style={{
                  width:'100%', padding:'14px', borderRadius:10, fontSize:14,
                  fontFamily:'Plus Jakarta Sans', fontWeight:700, cursor:'pointer',
                  background:'#0d1b4b', border:'none', color:'#fff',
                  transition:'opacity 0.2s, transform 0.2s',
                }}
                onMouseEnter={e=>{ e.currentTarget.style.opacity='0.88'; e.currentTarget.style.transform='translateY(-1px)'; }}
                onMouseLeave={e=>{ e.currentTarget.style.opacity='1'; e.currentTarget.style.transform='translateY(0)'; }}
                >{cta}</button>
              </div>
            );
          })}
        </div>

        {/* Unique Request card */}
        <div style={{
          marginTop:24, borderRadius:18, padding:'20px 28px',
          background:'#fff',
          border:'1px solid rgba(13,27,75,0.10)',
          boxShadow:'0 2px 8px rgba(13,27,75,0.04)',
          display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, flexWrap:'wrap',
        }}>
          <div style={{ display:'flex', alignItems:'center', gap:14, flex:'1 1 auto', minWidth:0 }}>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:700, fontSize:16, color:'#0d1b4b', whiteSpace:'nowrap' }}>Solicitud única</div>
            <span style={{ width:1, height:24, background:'rgba(13,27,75,0.12)' }} />
            <div style={{ fontSize:13.5, color:'rgba(13,27,75,0.6)', fontFamily:'Inter', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
              ¿Buscás algo personalizado? Te ayudamos a desarrollar el producto ideal para que sea un éxito.
            </div>
          </div>
          <button style={{
            padding:'10px 24px', borderRadius:10, fontSize:13.5,
            fontFamily:'Plus Jakarta Sans', fontWeight:700, cursor:'pointer',
            background:'#0d1b4b', border:'none', color:'#fff',
            transition:'opacity 0.2s, transform 0.2s', whiteSpace:'nowrap',
          }}
          onMouseEnter={e=>{ e.currentTarget.style.opacity='0.88'; e.currentTarget.style.transform='translateY(-1px)'; }}
          onMouseLeave={e=>{ e.currentTarget.style.opacity='1'; e.currentTarget.style.transform='translateY(0)'; }}
          >Hablemos</button>
        </div>
      </div>
    </section>
  );
};

/* ── TESTIMONIALS ── */
const Testimonials = ({ t }) => {
  const [active, setActive] = useState(0);
  const reviews = [
    { name:'Marcela G.', role:'Tienda de indumentaria, Tucumán', img:'/kodex/imagen/marcela.jpeg', text:'Antes perdíamos horas con planillas de Excel. Con KODEX tenemos el control total de ventas y stock, y todo se actualiza solo. Pero lo mejor es que cuando tengo una duda, los chicos te responden al toque.', stars:5 },
    { name:'Romina V.', role:'Estética & Spa, Catamarca', img:'/kodex/imagen/romina.jpeg', text:'Implementamos KODEX en menos de una hora. El equipo lo adoptó al toque y los reportes de caja son impecables. Se nota que están pensados por gente que entiende cómo funciona un negocio.', stars:5 },
    { name:'Carlos P.', role:'Distribuidora, San Fernando del Valle de Catamarca', img:'/kodex/imagen/carlos.jpeg', text:'Tener el catálogo digital para mandarle a los clientes por WhatsApp me cambió la forma de vender. Antes mandaba fotos sueltas, ahora les paso un link o el QR y compran directo. KODEX nos ordenó todo el negocio.', stars:5 },
  ];
  const av = reviews[active];
  return (
    <section style={{ padding:'100px 6%', background:'#f7f8fc', overflow:'hidden' }}>
      <div style={{ maxWidth:1200, margin:'0 auto' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:56, flexWrap:'wrap', gap:20 }}>
          <div>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:2, color:'rgba(13,27,75,0.3)', textTransform:'uppercase', fontFamily:'Inter', marginBottom:12 }}>Lo que dicen nuestros clientes</div>
            <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:'clamp(34px,3.5vw,50px)', color:'#0d1b4b', letterSpacing:-0.5, lineHeight:1.08 }}>
              Negocios reales.<br />Resultados reales.
            </h2>
          </div>
          <div style={{ display:'flex', gap:6, paddingTop:40 }}>
            {reviews.map((_,i)=>(
              <button key={i} onClick={()=>setActive(i)} style={{ width: active===i ? 28 : 8, height:8, borderRadius:50, background: active===i ? t.accent : 'rgba(13,27,75,0.15)', border:'none', cursor:'pointer', transition:'all 0.3s' }} />
            ))}
          </div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:60, alignItems:'center' }}>
          {/* Left: visual */}
          <div style={{ position:'relative', height:380, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <div style={{ position:'absolute', width:300, height:300, borderRadius:'50%', background:'rgba(37,99,235,0.06)' }} />
            <div style={{
              width:220, height:220, borderRadius:'50%',
              background:'linear-gradient(135deg, #dbeafe, #bfdbfe)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:72, boxShadow:'0 20px 60px rgba(37,99,235,0.15)',
              border:'4px solid #fff', position:'relative', zIndex:2,
            }}>🤝</div>
            <div style={{ position:'absolute', bottom:30, right:0, zIndex:4, background:'#fff', borderRadius:16, padding:'12px 16px', boxShadow:'0 16px 48px rgba(13,27,75,0.12)', border:'1px solid rgba(13,27,75,0.05)', maxWidth:190, animation:'float 5s ease-in-out infinite' }}>
              <div style={{ display:'flex', gap:1, marginBottom:4 }}>{[1,2,3,4,5].map(s=><span key={s} style={{ color:'#fbbf24', fontSize:12 }}>★</span>)}</div>
              <div style={{ fontSize:12, color:'rgba(13,27,75,0.65)', fontFamily:'Inter', lineHeight:1.5 }}>+200 negocios activos</div>
            </div>
            <div style={{ position:'absolute', top:30, left:0, zIndex:4, background:'#0d1b4b', borderRadius:16, padding:'12px 18px', boxShadow:'0 16px 48px rgba(13,27,75,0.20)', animation:'floatR 6s ease-in-out infinite 1s' }}>
              <div style={{ fontSize:11, color:'rgba(255,255,255,0.5)', fontFamily:'Inter', marginBottom:3 }}>Satisfacción</div>
              <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:26, color:'#fff' }}>4.9 / 5</div>
            </div>
          </div>
          {/* Right: quote */}
          <div key={active}>
            <div style={{ fontSize:56, color:t.accent, fontFamily:'Plus Jakarta Sans', lineHeight:1, marginBottom:8, opacity:0.3 }}>"</div>
            <p style={{ fontFamily:'Plus Jakarta Sans', fontWeight:700, fontSize:'clamp(18px,2vw,24px)', color:'#0d1b4b', lineHeight:1.55, marginBottom:28 }}>{av.text}</p>
            <div style={{ display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:44, height:44, borderRadius:'50%', background:`${t.accent}20`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:18, overflow:'hidden' }}>
                {av.img ? <img src={av.img} alt={av.name} style={{ width:'100%', height:'100%', objectFit:'cover' }} /> : '👤'}
              </div>
              <div>
                <div style={{ fontFamily:'Plus Jakarta Sans', fontWeight:700, fontSize:15, color:'#0d1b4b' }}>{av.name}</div>
                <div style={{ fontSize:13, color:'rgba(13,27,75,0.45)', fontFamily:'Inter' }}>{av.role}</div>
              </div>
            </div>
            <div style={{ marginTop:28, display:'flex', gap:8 }}>
              {reviews.map((_,i)=>(
                <button key={i} onClick={()=>setActive(i)} style={{
                  padding:'8px 18px', borderRadius:50, fontSize:12, fontFamily:'Inter', fontWeight:500,
                  cursor:'pointer', transition:'all 0.2s', border:'none',
                  background: active===i ? t.accent : 'rgba(13,27,75,0.06)',
                  color: active===i ? '#fff' : 'rgba(13,27,75,0.5)',
                }}>Testimonio {i+1}</button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── FAQ ── */
const FAQ = ({ t }) => {
  const [open, setOpen] = useState(null);
  const faqs = [
    { q:'¿Necesito instalar algo para usar KODEX?', a:'No. KODEX es 100% web. Solo necesitás un navegador y conexión a internet. Funciona desde cualquier dispositivo: PC, tablet o celular.' },
    { q:'¿Cómo funciona el catálogo digital?', a:'Cargás tus productos en KODEX y automáticamente se generan dos formas de compartirlo: un link directo y un código QR. Lo mandás por WhatsApp, redes o pegás el QR en tu local. Tus clientes lo ven sin necesidad de registrarse, con tus precios y stock siempre actualizados.' },
    { q:'¿Puedo probar la plataforma antes de pagar?', a:'Sí. El Plan Starter es gratis para siempre, sin tarjeta de crédito. Los planes pagos tienen 14 días de prueba gratuita.' },
    { q:'¿Funciona para cualquier tipo de negocio?', a:'Sí. KODEX se adapta a comercios, restaurantes, salones de belleza, gimnasios, distribuidoras, servicios profesionales y muchos rubros más.' },
    { q:'¿Cuántos usuarios puedo agregar?', a:'Depende del plan. Starter incluye 1 usuario, Pro hasta 5 y Business usuarios ilimitados. Cada uno con su rol y permisos.' },
    { q:'¿Mis datos están seguros?', a:'Sí. Usamos cifrado SSL, backups automáticos diarios y servidores de alta disponibilidad. Tu información siempre protegida y accesible.' },
    { q:'¿Puedo personalizar la plataforma con mi marca?', a:'Sí. Desde Configuración cargás tu logo, elegís los colores de la plataforma y agregás los datos de tu negocio. KODEX se adapta a tu identidad.' },
    { q:'¿Qué pasa si necesito una funcionalidad que no está?', a:'En el Plan Business desarrollamos módulos a medida según las necesidades de tu negocio. Trabajamos con vos para resolverlo. Contactanos y lo evaluamos.' },
    { q:'¿Cómo es el soporte?', a:'Respuesta directa por WhatsApp y email. Sin tickets, sin esperas eternas, sin bots que no te entienden. Hablás con personas reales que conocen el sistema.' },
  ];
  return (
    <section id="faq" style={{ padding:'100px 6%', background:'#fff' }}>
      <div style={{ maxWidth:760, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom:56 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:2, color:'rgba(13,27,75,0.3)', textTransform:'uppercase', fontFamily:'Inter', marginBottom:14 }}>FAQ</div>
          <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:'clamp(32px,4vw,48px)', color:'#0d1b4b', letterSpacing:-0.5 }}>Preguntas frecuentes.</h2>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {faqs.map(({ q, a }, i) => (
            <div key={i} style={{
              background:'#f7f8fc', borderRadius:16, overflow:'hidden',
              border:`1.5px solid ${open===i ? t.accent+'35' : 'rgba(13,27,75,0.07)'}`,
              boxShadow: open===i ? '0 8px 28px rgba(13,27,75,0.07)' : 'none',
              transition:'all 0.2s',
            }}>
              <button onClick={()=>setOpen(open===i?null:i)} style={{
                width:'100%', padding:'20px 24px', display:'flex', justifyContent:'space-between', alignItems:'center',
                background:'transparent', border:'none', cursor:'pointer', color:'#0d1b4b',
              }}>
                <span style={{ fontFamily:'Plus Jakarta Sans', fontWeight:700, fontSize:15, textAlign:'left' }}>{q}</span>
                <span style={{ color:t.accent, fontSize:22, flexShrink:0, marginLeft:16, transition:'transform 0.2s', transform:open===i?'rotate(45deg)':'rotate(0)' }}>+</span>
              </button>
              {open===i && <div style={{ padding:'0 24px 20px', color:'rgba(13,27,75,0.55)', fontFamily:'Inter', fontSize:14.5, lineHeight:1.75 }}>{a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ── BRAND BANNER ── */
const BrandBanner = ({ t }) => (
  <section style={{
    position:'relative', overflow:'hidden',
    background:'#000', minHeight:480,
    display:'flex', alignItems:'center', justifyContent:'center',
    padding:'120px 6%',
  }}>
    <div style={{
      position:'absolute', bottom:'-30%', left:'-10%', right:'-10%', height:'85%',
      background:'radial-gradient(ellipse at 50% 100%, #67e8f9 0%, #3b82f6 18%, #1d4ed8 38%, #1e3a8a 55%, transparent 75%)',
      filter:'blur(40px)', pointerEvents:'none',
    }} />
    <div style={{
      position:'absolute', bottom:'-10%', left:'30%', width:'40%', height:'60%',
      background:'radial-gradient(ellipse at center, rgba(186,230,253,0.7), transparent 60%)',
      filter:'blur(30px)', pointerEvents:'none',
    }} />
    <div style={{
      position:'absolute', bottom:'5%', left:'45%', width:'15%', height:'25%',
      background:'radial-gradient(ellipse at center, rgba(255,255,255,0.5), transparent 70%)',
      filter:'blur(20px)', pointerEvents:'none',
    }} />
    <div style={{ position:'relative', zIndex:1, textAlign:'center' }}>
      <h2 style={{
        fontFamily:'Plus Jakarta Sans', fontWeight:800,
        fontSize:'clamp(72px, 12vw, 180px)',
        color:'#fff', letterSpacing:-4, lineHeight:0.95, marginBottom:20,
      }}>Kodex</h2>
      <p style={{
        fontFamily:'Plus Jakarta Sans', fontWeight:500,
        fontSize:'clamp(18px, 1.8vw, 24px)',
        color:'rgba(255,255,255,0.7)', letterSpacing:0.5,
      }}>Trabaja con vos.</p>
    </div>
  </section>
);

/* ── CTA FINAL ── */
const CTAFinal = ({ t }) => (
  <section style={{ padding:'80px 6%', background:'#f7f8fc' }}>
    <div style={{ maxWidth:1100, margin:'0 auto' }}>
      <div style={{
        borderRadius:28, background:`linear-gradient(135deg, #0d1b4b 0%, #0a2068 60%, ${t.accent}bb 100%)`,
        padding:'64px 72px', display:'flex', justifyContent:'space-between', alignItems:'center',
        position:'relative', overflow:'hidden', flexWrap:'wrap', gap:40,
      }}>
        <div style={{ position:'absolute', right:-80, top:-80, width:400, height:400, borderRadius:'50%', background:'rgba(255,255,255,0.04)', pointerEvents:'none' }} />
        <div style={{ maxWidth:520, position:'relative', zIndex:2 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:2, color:'rgba(255,255,255,0.5)', textTransform:'uppercase', fontFamily:'Inter', marginBottom:16 }}>Empezá hoy</div>
          <h2 style={{ fontFamily:'Plus Jakarta Sans', fontWeight:900, fontSize:'clamp(32px,3.5vw,48px)', color:'#fff', lineHeight:1.1, letterSpacing:-0.5, marginBottom:16 }}>
            Tu negocio merece una herramienta profesional.
          </h2>
          <p style={{ fontSize:16, color:'rgba(255,255,255,0.6)', fontFamily:'Inter', lineHeight:1.75, marginBottom:32 }}>
            Sumate a los más de 200 negocios que ya gestionan con KODEX. Trabajamos con vos desde el primer día, y no te dejamos solo nunca.
          </p>
          <div style={{ display:'flex', gap:14, flexWrap:'wrap' }}>
            <a href={window.KODEX_URLS.register} style={{ background:'#fff', color:'#0d1b4b', border:'none', padding:'14px 30px', borderRadius:50, fontSize:15, fontFamily:'Plus Jakarta Sans', fontWeight:700, cursor:'pointer', transition:'transform 0.2s', textDecoration:'none', display:'inline-block' }}
            onMouseEnter={e=>e.currentTarget.style.transform='translateY(-2px)'}
            onMouseLeave={e=>e.currentTarget.style.transform='translateY(0)'}
            >Crear cuenta gratis →</a>
            <a href={window.KODEX_URLS.login} style={{ background:'transparent', border:'1.5px solid rgba(255,255,255,0.3)', color:'#fff', padding:'14px 28px', borderRadius:50, fontSize:15, fontFamily:'Plus Jakarta Sans', fontWeight:600, cursor:'pointer', textDecoration:'none', display:'inline-block' }}>Iniciar sesión</a>
          </div>
        </div>
        <div style={{ flexShrink:0, opacity:0.18 }}><KodexLogo dark={false} size={140} full /></div>
      </div>
    </div>
  </section>
);

/* ── FOOTER ── */
const Footer = ({ t }) => (
  <footer style={{ background:'#0d1b4b', padding:'60px 6% 28px' }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:48, marginBottom:48 }}>
        <div>
          <div style={{ width:285, marginBottom:10 }}>
            <KodexLogo dark={false} size={84} />
            <p style={{ fontSize:13, color:'rgba(255,255,255,0.5)', fontFamily:'Inter', fontStyle:'italic', marginTop:4, textAlign:'center' }}>Trabaja con vos.</p>
          </div>
          <p style={{ fontSize:13.5, color:'rgba(255,255,255,0.35)', lineHeight:1.8, fontFamily:'Inter', maxWidth:280 }}>
            La plataforma todo-en-uno para que cualquier negocio gestione sus operaciones de forma simple y profesional.
          </p>
        </div>
        {[
          { title:'Producto', links:['Funcionalidades','Módulos','Catálogo Digital','Precios','Novedades'] },
          { title:'Empresa', links:['Sobre nosotros','Blog','Casos de uso','Contacto'] },
          { title:'Soporte', links:['FAQ','Centro de ayuda','Estado del sistema','Privacidad'] },
        ].map(({ title, links }) => (
          <div key={title}>
            <div style={{ fontFamily:'Inter', fontWeight:600, fontSize:12, color:'rgba(255,255,255,0.4)', marginBottom:16, textTransform:'uppercase', letterSpacing:1.5 }}>{title}</div>
            <div style={{ display:'flex', flexDirection:'column', gap:11 }}>
              {links.map(l=>(
                <a key={l} href="#" style={{ fontSize:14, color:'rgba(255,255,255,0.35)', textDecoration:'none', fontFamily:'Inter', transition:'color 0.2s' }}
                onMouseEnter={e=>e.target.style.color='rgba(255,255,255,0.8)'}
                onMouseLeave={e=>e.target.style.color='rgba(255,255,255,0.35)'}>{l}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop:'1px solid rgba(255,255,255,0.07)', paddingTop:24, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:10 }}>
        <div>
          <div style={{ fontSize:13, color:'rgba(255,255,255,0.22)', fontFamily:'Inter' }}>© 2026 KODEX. Todos los derechos reservados.</div>
          <div style={{ fontSize:12, color:'rgba(255,255,255,0.18)', fontFamily:'Inter', marginTop:4 }}>Creado y diseñado por Miurasoft. Soluciones digitales para negocios reales.</div>
        </div>
        <div style={{ display:'flex', gap:16 }}>
          {['Términos de uso','Privacidad','Cookies'].map(l=>(
            <a key={l} href="#" style={{ fontSize:12, color:'rgba(255,255,255,0.25)', textDecoration:'none', fontFamily:'Inter' }}>{l}</a>
          ))}
        </div>
      </div>
    </div>
  </footer>
);

/* ── APP ── */
window.KodexApp = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <div>
      <Navbar t={t} />
      <Hero t={t} />
      <Marquee t={t} />
      <PensadoPara t={t} />
      <Features t={t} />
      <CatalogoDigital t={t} />
      <Bridge t={t} />
      <HowItWorks t={t} />
      <Stats t={t} />
      <Modules t={t} />
      <MissionStatement t={t} />
      <ImageTextBlock
        t={t}
        eyebrow="Más allá del software"
        title="Tu negocio también merece"
        accent="trato humano."
        body="No te vendemos un sistema y te dejamos solo. Nos sentamos con vos, entendemos tu rubro y configuramos KODEX con vos para que arranques operando desde el día uno."
        bullets={[
          { title:'Onboarding personalizado', desc:'Configuramos tus productos, categorías y datos fiscales con vos.' },
          { title:'Capacitación a tu equipo', desc:'Entrenamos a tus empleados en su rol específico, no en abstracto.' },
          { title:'Soporte humano por WhatsApp', desc:'Respondemos en minutos. Sin tickets, sin bots, sin esperas.' },
        ]}
        image="/kodex/imagen/puedes_agregar_el_202604262115.jpeg"
        bg="#fff"
      />
      <ImageTextBlock
        t={t}
        eyebrow="Empoderamos comerciantes"
        title="Datos reales,"
        accent="decisiones reales."
        body="Olvidate de las planillas y los cálculos a mano. KODEX te muestra qué se vende, qué falta, qué deja margen y dónde estás perdiendo plata, todo en vivo, todo claro."
        bullets={[
          { title:'Dashboard en tiempo real', desc:'Ventas, caja y stock al instante desde cualquier dispositivo.' },
          { title:'Reportes que se entienden', desc:'PDFs claros, gráficos simples. Nada de jerga contable.' },
          { title:'Alertas inteligentes', desc:'Te avisamos cuando algo se queda sin stock o se sale de tu margen.' },
        ]}
        image="/kodex/imagen/bien_pero_la_202604262314.jpeg"
        reverse
        bg="#f7f8fc"
      />
      <BrandBanner t={t} />
      <Pricing t={t} />
      <Experts t={t} />
      <Testimonials t={t} />
      <FAQ t={t} />
      <CTAFinal t={t} />
      <Footer t={t} />

      <TweaksPanel>
        <TweakSection label="Marca" />
        <TweakColor label="Color acento" value={t.accent} onChange={v=>setTweak('accent',v)} />
        <TweakSection label="Hero" />
        <TweakToggle label="Mostrar estadísticas" value={t.showStats} onChange={v=>setTweak('showStats',v)} />
        <TweakSection label="Precios" />
        <TweakToggle label="Anual por defecto" value={t.pricingAnnual} onChange={v=>setTweak('pricingAnnual',v)} />
      </TweaksPanel>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<window.KodexApp />);