/* Shared components for all Cocoa pages */

const { useState, useEffect, useRef, useMemo } = React;

// ============ ICONS ============
const Icon = ({ name, size = 20, ...p }) => {
  const paths = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>,
    check: <path d="M4 12l5 5L20 6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>,
    plus: <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none"/>,
    shield: <path d="M12 3l8 3v5c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-3z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>,
    qr: <g fill="currentColor"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="3" height="3"/><rect x="18" y="14" width="3" height="3"/><rect x="14" y="18" width="7" height="3"/></g>,
    coin: <g><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8" fill="none"/><text x="12" y="16" textAnchor="middle" fontSize="10" fontWeight="900" fill="currentColor">C</text></g>,
    chart: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 20h18"/><path d="M6 16v-5M10 16v-8M14 16v-3M18 16v-10"/></g>,
    bolt: <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" fill="currentColor"/>,
    bell: <path d="M6 16V11a6 6 0 1112 0v5l2 3H4l2-3zM9 20a3 3 0 006 0" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>,
    pin: <g fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 22s8-7 8-13a8 8 0 10-16 0c0 6 8 13 8 13z"/><circle cx="12" cy="9" r="3"/></g>,
    lock: <g fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></g>,
    history: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 12a9 9 0 109-9 9 9 0 00-6 2.3L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></g>,
    users: <g fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5"/><circle cx="17" cy="8" r="2.5"/><path d="M15.5 15c2 .5 4 2 4 5"/></g>,
    sparkle: <path d="M12 3l1.5 5L19 9.5 13.5 11 12 16l-1.5-5L5 9.5 10.5 8z" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    wa: <path d="M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2zm5.3 14c-.2.6-1.2 1.2-1.8 1.2-1.6 0-3.5-.7-5.6-2.7-1.6-1.5-2.6-3.4-2.7-3.5-.1-.1-.6-.8-.6-1.5s.4-1.1.5-1.2c.2-.2.4-.2.5-.2h.4c.1 0 .3 0 .4.3.2.4.6 1.4.7 1.5 0 .1.1.2 0 .4l-.2.3c-.1.1-.2.2-.3.3-.1.1-.2.2-.1.4.1.2.6 1 1.3 1.6.9.8 1.7 1 1.9 1.1.2.1.3.1.4 0l.8-1c.1-.2.3-.1.4-.1.2 0 1.1.5 1.3.6.2.1.3.2.4.2.1.2.1.7-.1 1.3z" fill="currentColor"/>,
    mail: <g fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></g>,
    phone: <path d="M5 4h3l2 5-2.5 1.5a11 11 0 005 5L14 13l5 2v3a2 2 0 01-2 2A15 15 0 013 6a2 2 0 012-2z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>,
    calendar: <g fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></g>,
    building: <g fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="4" y="3" width="16" height="18"/><path d="M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2"/></g>,
    tag: <g fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M3 3h8l10 10-8 8L3 11z"/><circle cx="7" cy="7" r="1.5" fill="currentColor"/></g>,
    globe: <g fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></g>,
    puzzle: <path d="M9 3a2 2 0 014 0v2h3a1 1 0 011 1v3h2a2 2 0 010 4h-2v3a1 1 0 01-1 1h-3v-2a2 2 0 00-4 0v2H6a1 1 0 01-1-1v-3H3v-1a2 2 0 010-4h2V7a1 1 0 011-1h3V3z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>,
    star: <path d="M12 3l2.6 6.4 6.9.5-5.3 4.5 1.7 6.8L12 17.8l-6 3.4 1.7-6.8-5.3-4.5 6.9-.5L12 3z" fill="currentColor"/>,
    apple: <path d="M17 17.5c-.5 1-1.2 2-2.2 2-1 0-1.3-.6-2.5-.6-1.2 0-1.5.6-2.5.6-1 0-1.7-1-2.3-2-1.4-2-2.5-5.6-1-8 .7-1.2 2-2 3.3-2 1 0 2 .7 2.5.7S14 7.4 15.3 7.4a3.3 3.3 0 012.8 1.5 3.3 3.3 0 00-1.5 5.6c.2.4.3.7.4 1zM14 5c.5-.6.8-1.5.7-2.3-.8 0-1.7.5-2.2 1.1-.5.5-.8 1.4-.7 2.2.8.1 1.7-.4 2.2-1z" fill="currentColor"/>,
    play: <path d="M3 20V4l16 8-16 8z" fill="currentColor"/>,
    download: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M12 3v12M6 11l6 5 6-5"/><path d="M4 20h16"/></g>,
    menu: <g fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></g>,
    x: <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>,
    external: <g fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M14 4h6v6M20 4L10 14M18 14v5a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h5"/></g>,
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} {...p}>{paths[name]}</svg>
  );
};

// ============ DOWNLOAD MODAL ============
const STORE_LINKS = {
  appstore: 'https://apps.apple.com/py/app/cocoa-billetera-de-beneficios/id6746419933',
  playstore: 'https://play.google.com/store/apps/details?id=com.cocoa.cocoaprod&hl=es_BO',
};

function DownloadModal({ open, onClose }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const handleClose = (e) => {
    if (e) { e.preventDefault(); e.stopPropagation(); }
    onClose();
  };

  return (
    <div
      className="dlmodal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="dlmodal-title"
      onClick={handleClose}
    >
      <div className="dlmodal__panel" onClick={(e) => e.stopPropagation()}>
        <button
          type="button"
          className="dlmodal__close"
          onClick={handleClose}
          aria-label="Cerrar"
        >
          <Icon name="x" size={18} />
        </button>
        <div className="dlmodal__head">
          <span className="t-eyebrow">Descargá Cocoa</span>
          <h3 id="dlmodal-title" className="impact dlmodal__title">
            Elegí tu tienda
          </h3>
          <p className="dlmodal__sub">Disponible gratis en iOS y Android.</p>
        </div>
        <div className="dlmodal__stores">
          <a
            href={STORE_LINKS.appstore}
            target="_blank"
            rel="noopener noreferrer"
            className="dlstore dlstore--apple"
          >
            <span className="dlstore__icon">
              <Icon name="apple" size={32} />
            </span>
            <span className="dlstore__text">
              <span className="dlstore__small">Descargar en</span>
              <span className="dlstore__big">App Store</span>
            </span>
            <span className="dlstore__arrow"><Icon name="arrow" size={16} /></span>
          </a>
          <a
            href={STORE_LINKS.playstore}
            target="_blank"
            rel="noopener noreferrer"
            className="dlstore dlstore--apple"
          >
            <span className="dlstore__icon">
              <Icon name="play" size={28} />
            </span>
            <span className="dlstore__text">
              <span className="dlstore__small">Disponible en</span>
              <span className="dlstore__big">Google Play</span>
            </span>
            <span className="dlstore__arrow"><Icon name="arrow" size={16} /></span>
          </a>
        </div>
      </div>
    </div>
  );
}

// ============ NAV ============
function Nav({ active = 'home', dark = false }) {
  const [dlOpen, setDlOpen] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const openDl = (e) => { e.preventDefault(); setDlOpen(true); };

  // Close drawer when resizing back to desktop, and lock body scroll while open
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 860) setMenuOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = menuOpen ? 'hidden' : prev;
    return () => { document.body.style.overflow = prev; };
  }, [menuOpen]);

  const items = [
    { href: 'index.html',         key: 'home',     label: 'Home' },
    { href: 'app.html',           key: 'app',      label: 'Cocoa App' },
    { href: 'empresas.html',      key: 'empresas', label: 'Cocoa Business' },
    { href: 'contacto.html#faqs', key: 'faqs',     label: 'FAQs' },
  ];

  return (
    <div className={`nav-float-wrap ${dark ? 'nav-float-wrap--dark' : ''}`}>
      <nav className={`nav-float ${dark ? 'nav-float--dark' : ''}`}>
        <a href="index.html" className="nav-float__logo" aria-label="Cocoa">
          <img
            src="public/images/Cocoa_Logo_Oficial.png"
            alt="Cocoa"
            style={{height: 26, width: 'auto', display: 'block'}}
          />
        </a>
        <div className="nav-float__links">
          {items.map(it => (
            <a key={it.key} href={it.href} className={active === it.key ? 'active' : ''}>{it.label}</a>
          ))}
        </div>
        <div className="nav-float__cta">
          <a href="#descargar" onClick={openDl} className="btn btn--primary btn--sm">
            Descargá la app <Icon name="arrow" size={14} />
          </a>
        </div>
        <button
          type="button"
          className={`nav-float__burger ${menuOpen ? 'is-open' : ''}`}
          aria-label={menuOpen ? 'Cerrar menú' : 'Abrir menú'}
          aria-expanded={menuOpen}
          aria-controls="nav-drawer"
          onClick={() => setMenuOpen(o => !o)}
        >
          <span/><span/><span/>
        </button>
      </nav>

      <div
        id="nav-drawer"
        className={`nav-drawer ${menuOpen ? 'is-open' : ''}`}
        onClick={() => setMenuOpen(false)}
        aria-hidden={!menuOpen}
      >
        <div className="nav-drawer__sheet" onClick={e => e.stopPropagation()}>
          {items.map(it => (
            <a
              key={it.key}
              href={it.href}
              className={`nav-drawer__link ${active === it.key ? 'is-active' : ''}`}
              onClick={() => setMenuOpen(false)}
            >
              {it.label}
            </a>
          ))}
          <a
            href="#descargar"
            className="btn btn--primary btn--lg nav-drawer__cta"
            onClick={(e) => { setMenuOpen(false); openDl(e); }}
          >
            Descargá la app <Icon name="arrow" size={16}/>
          </a>
        </div>
      </div>

      <DownloadModal open={dlOpen} onClose={() => setDlOpen(false)} />
    </div>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__col">
            <div style={{display:'flex', alignItems:'center', marginBottom: '1rem'}}>
              <img
                src="public/images/Cocoa_Logo_Blanco.png"
                alt="Cocoa"
                style={{height: 28, width: 'auto', display: 'block'}}
              />
            </div>
            <p style={{color:'rgba(255,255,255,0.6)', fontSize:'0.9375rem', maxWidth: 320, margin: 0}}>
              Tu dinero vale más. Billetera digital de beneficios en Bolivia. 1 Cocoa = 1 Bs.
            </p>
            <div style={{marginTop:'1.25rem'}}>
              <span className="pill pill--aj">
                <Icon name="shield" size={14} />
                Validada por la AJ · Bolivia
              </span>
            </div>
          </div>
          <div className="footer__col">
            <h4>Producto</h4>
            <ul>
              <li><a href="app.html">Cocoa App</a></li>
              <li><a href="app.html#comercios">Red de comercios</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Empresas</h4>
            <ul>
              <li><a href="empresas.html#red-cocoa">Red Cocoa</a></li>
              <li><a href="https://cal.com/cocoa-srl/30min" target="_blank" rel="noopener noreferrer">Agendar demo</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Compañía</h4>
            <ul>
              <li><a href="contacto.html">Contacto</a></li>
              <li><a href="contacto.html#faqs">FAQs</a></li>
              <li><a href="#">Privacidad</a></li>
              <li><a href="#">Términos</a></li>
              <li><a href="#">Seguridad</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__wordmark impact">COCOA</div>
        <div className="footer__base">
          <div>© 2026 Loyalty Clubs SRL — Santa Cruz de la Sierra, Bolivia.</div>
        </div>
      </div>
    </footer>
  );
}

// ============ ORBS ============
function OrbStage({ variant = 'default' }) {
  const configs = {
    default: [
      { cls: 'orb--cocoa', style: { width: 520, height: 520, top: -120, left: -80 } },
      { cls: 'orb--teal',  style: { width: 380, height: 380, top: 100, right: -60, animationDelay: '-4s' } },
      { cls: 'orb--cocoa', style: { width: 280, height: 280, bottom: -80, left: '35%', animationDelay: '-8s', opacity: 0.4 } },
    ],
    dark: [
      { cls: 'orb--cocoa', style: { width: 600, height: 600, top: -180, left: -120, opacity: 0.7 } },
      { cls: 'orb--teal',  style: { width: 420, height: 420, bottom: -120, right: -100, animationDelay: '-6s', opacity: 0.55 } },
    ],
    warm: [
      { cls: 'orb--coral', style: { width: 500, height: 500, top: -100, right: -100 } },
      { cls: 'orb--amber', style: { width: 320, height: 320, bottom: 40, left: -80, animationDelay: '-5s' } },
      { cls: 'orb--cocoa', style: { width: 360, height: 360, top: '30%', left: '40%', animationDelay: '-10s', opacity: 0.6 } },
    ],
    app: [
      { cls: 'orb--teal',  style: { width: 460, height: 460, top: -100, left: -60 } },
      { cls: 'orb--cocoa', style: { width: 400, height: 400, bottom: -80, right: -60, animationDelay: '-6s' } },
      { cls: 'orb--teal',  style: { width: 220, height: 220, top: '20%', right: '30%', animationDelay: '-9s', opacity: 0.5 } },
    ],
    teal: [
      { cls: 'orb--cocoa', style: { width: 520, height: 520, top: -140, left: -120, opacity: 0.55, background: '#5b2ecc' } },
      { cls: 'orb--teal',  style: { width: 460, height: 460, top: 80, right: -120, animationDelay: '-5s', background: '#5b2ecc', opacity: 0.5 } },
      { cls: 'orb--cocoa', style: { width: 280, height: 280, bottom: -80, left: '40%', animationDelay: '-9s', opacity: 0.35, background: '#5b2ecc' } },
    ],
  };
  return (
    <div className="orb-stage">
      {configs[variant].map((o, i) => (
        <div key={i} className={`orb ${o.cls}`} style={o.style} />
      ))}
    </div>
  );
}

// ============ MARQUEE ============
function Marquee({ items, dark = true }) {
  const content = (
    <span>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span>{it}</span>
          <span className="marquee__dot" />
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee" style={dark ? {background: 'var(--ink)', color: 'var(--paper)'} : {background:'var(--cocoa-800)', color: 'var(--paper)', borderColor: 'rgba(255,255,255,0.08)'}}>
      <div className="marquee__track">
        {content}
        {content}
      </div>
    </div>
  );
}

// ============ ACCORDION ============
function Accordion({ items }) {
  const [open, setOpen] = useState(null);
  return (
    <div>
      {items.map((it, i) => (
        <div key={i} className={`acc ${open === i ? 'open' : ''}`}>
          <button className="acc__btn" onClick={() => setOpen(open === i ? null : i)}>
            <span>{it.q}</span>
            <span className="acc__icon"><Icon name="plus" size={16} /></span>
          </button>
          <div className="acc__panel"><div className="acc__content">{it.a}</div></div>
        </div>
      ))}
    </div>
  );
}

// ============ PHONE MOCKUP (Cocoa app UI) ============
function PhoneMockup({ screen = 'home' }) {
  if (screen === 'home') {
    return (
      <div className="phone">
        <div className="phone__notch" />
        <div className="phone__screen" style={{background: '#FFFFFF', color: 'var(--ink)', padding: '34px 16px 16px', display:'flex', flexDirection:'column', gap: 12}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', fontSize: 12, color:'var(--ink-3)', fontFamily:'var(--font-mono)'}}>
            <span>9:41</span>
            <span>●●● 5G</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: 8}}>
            <div>
              <div style={{fontSize: 11, color:'var(--ink-4)'}}>Hola, Camila</div>
              <div style={{fontFamily:'var(--font-impact)', fontSize: 16, textTransform:'uppercase', letterSpacing:'-0.02em'}}>Mi Cocoa</div>
            </div>
            <div style={{width: 32, height: 32, borderRadius:'50%', background:'var(--cocoa-500)'}} />
          </div>
          <div style={{background: 'var(--cocoa-500)', color:'#FFFFFF', borderRadius: 20, padding: 16, marginTop: 4}}>
            <div style={{fontSize: 10, opacity: 0.75, textTransform:'uppercase', letterSpacing: 0.5}}>Saldo Cocoas</div>
            <div style={{fontFamily:'var(--font-impact)', fontSize: 38, letterSpacing:'-0.04em', marginTop: 4}}>2.847</div>
            <div style={{fontSize: 11, opacity: 0.7, marginTop: 4, fontFamily:'var(--font-mono)'}}>= Bs 2.847,00</div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8, marginTop: 4}}>
            {[
              {i:'qr', l:'Pagar'}, {i:'coin', l:'Cargar'}, {i:'history', l:'Historial'},
            ].map(b => (
              <div key={b.l} style={{background:'rgba(26,20,38,0.04)', borderRadius: 14, padding: '12px 6px', textAlign:'center'}}>
                <div style={{width: 32, height: 32, borderRadius: 10, background:'var(--accent)', color: 'var(--ink)', display:'grid', placeItems:'center', margin:'0 auto 6px'}}>
                  <Icon name={b.i} size={16} />
                </div>
                <div style={{fontSize: 10, fontWeight: 600}}>{b.l}</div>
              </div>
            ))}
          </div>
          <div style={{fontSize: 10, color:'var(--ink-4)', textTransform:'uppercase', letterSpacing: 1, marginTop: 8}}>Cerca tuyo</div>
          {['Hipermaxi · 8% cashback', 'Alexander Coffee · 12%', 'Farmacorp · 5%'].map((t, i) => (
            <div key={i} style={{background:'rgba(26,20,38,0.04)', borderRadius: 12, padding: '10px 12px', fontSize: 11, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span>{t}</span>
              <Icon name="arrow" size={12} />
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (screen === 'qr') {
    return (
      <div className="phone">
        <div className="phone__notch" />
        <div className="phone__screen" style={{background: 'var(--ink)', color: 'var(--paper)', padding: '34px 16px 16px'}}>
          <div style={{display:'flex', justifyContent:'space-between', fontSize: 12, opacity: 0.7, fontFamily:'var(--font-mono)'}}>
            <span>9:41</span><span>●●● 5G</span>
          </div>
          <div style={{textAlign:'center', marginTop: 16}}>
            <div style={{fontSize: 12, opacity: 0.6}}>Pagar con QR</div>
            <div style={{fontFamily:'var(--font-impact)', fontSize: 22, textTransform:'uppercase', letterSpacing:'-0.02em', marginTop: 4}}>Escaneá para pagar</div>
          </div>
          <div style={{background: 'var(--paper)', borderRadius: 20, padding: 18, marginTop: 20, aspectRatio:'1', position:'relative'}}>
            <div style={{background:'var(--ink)', width:'100%', height:'100%', borderRadius: 12, backgroundImage: 'repeating-conic-gradient(var(--ink) 0 25%, var(--paper) 0 50%)', backgroundSize: '16px 16px', position:'relative'}}>
              <div style={{position:'absolute', inset: '40% 40%', background:'var(--paper)', borderRadius: 8, display:'grid', placeItems:'center'}}>
                <span style={{fontFamily:'var(--font-impact)', color:'var(--ink)'}}>C</span>
              </div>
            </div>
          </div>
          <div style={{textAlign:'center', marginTop: 16, fontSize: 12, opacity: 0.6}}>El comercio escanea este código</div>
          <div style={{background:'var(--accent)', color:'var(--ink)', borderRadius:999, padding: 14, textAlign:'center', fontWeight: 700, marginTop: 16, fontSize: 13}}>
            Abrir cámara
          </div>
        </div>
      </div>
    );
  }
  if (screen === 'comercios') {
    return (
      <div className="phone">
        <div className="phone__notch" />
        <div className="phone__screen" style={{background: 'var(--paper)', padding: '34px 14px 14px'}}>
          <div style={{display:'flex', justifyContent:'space-between', fontSize: 11, color:'var(--ink-3)', fontFamily:'var(--font-mono)'}}>
            <span>9:41</span><span>●●● 5G</span>
          </div>
          <div style={{fontFamily:'var(--font-impact)', fontSize: 26, textTransform:'uppercase', letterSpacing:'-0.03em', marginTop: 14}}>Comercios</div>
          <div style={{background:'var(--paper-2)', borderRadius: 12, padding: '8px 12px', marginTop: 10, fontSize: 12, color:'var(--ink-4)'}}>🔍 Buscar...</div>
          <div style={{display:'flex', gap: 6, overflow:'hidden', marginTop: 10}}>
            {['Todos', 'Food', 'Retail', 'Salud'].map((c, i) => (
              <span key={c} style={{padding:'4px 10px', borderRadius: 99, background: i === 0 ? 'var(--ink)' : 'var(--paper-2)', color: i === 0 ? 'var(--paper)' : 'var(--ink-3)', fontSize: 11, fontWeight: 600, whiteSpace:'nowrap'}}>{c}</span>
            ))}
          </div>
          <div style={{display:'grid', gap: 8, marginTop: 12}}>
            {[
              {n:'Hipermaxi', r:'Supermercado', p: '8%'},
              {n:'Alexander', r:'Café', p:'12%'},
              {n:'Farmacorp', r:'Farmacia', p:'5%'},
              {n:'Kactus', r:'Moda', p:'10%'},
              {n:'Pollos Copacabana', r:'Fast food', p:'7%'},
            ].map((m, i) => (
              <div key={i} style={{display:'flex', alignItems:'center', gap: 10, padding:'10px', background:'var(--paper)', border:'1px solid var(--line)', borderRadius: 14}}>
                <div style={{width: 36, height: 36, borderRadius: 10, background:'var(--cocoa-100)', color:'var(--cocoa-600)', display:'grid', placeItems:'center', fontFamily:'var(--font-impact)', fontSize: 14}}>{m.n[0]}</div>
                <div style={{flex: 1, minWidth: 0}}>
                  <div style={{fontSize: 12, fontWeight: 700}}>{m.n}</div>
                  <div style={{fontSize: 10, color:'var(--ink-4)'}}>{m.r}</div>
                </div>
                <div style={{fontFamily:'var(--font-impact)', fontSize: 14, color:'var(--cocoa-600)'}}>{m.p}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

// ============ PHONE — REALISTIC (light + dark) ============
function PhoneRealistic({ mode = 'light' }) {
  const isDark = mode === 'dark';
  const screenBg = isDark ? '#0E0820' : '#FAF7F2';
  const ink = isDark ? '#FFFFFF' : '#1A1426';
  const inkSoft = isDark ? 'rgba(255,255,255,0.62)' : 'rgba(26,20,38,0.62)';
  const inkMute = isDark ? 'rgba(255,255,255,0.42)' : 'rgba(26,20,38,0.42)';
  const cardBg = isDark ? 'rgba(255,255,255,0.06)' : '#FFFFFF';
  const cardBorder = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(26,20,38,0.08)';
  // Hero card — purple in BOTH modes (just slightly different shades)
  const heroCardBg = isDark
    ? 'linear-gradient(155deg, #6F3FE0 0%, #3D1A8F 100%)'
    : 'linear-gradient(155deg, #6F3FE0 0%, #3D1A8F 100%)';
  const heroCardInk = '#FFFFFF';
  const accent = isDark ? '#58B8D6' : '#A489DC';
  const actionTile = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(26,20,38,0.04)';
  const merchants = isDark
    ? [
        { n: 'Hipermaxi', p: '8% cashback' },
        { n: 'Alexander', p: '12%' },
        { n: 'Farmacorp', p: '5%' },
      ]
    : [
        { n: 'Hipermaxi', p: '8% cashback' },
        { n: 'Alexander Coffee', p: '12%' },
        { n: 'Farmacorp', p: '5%' },
      ];

  return (
    <div className="phone phone--realistic">
      <div className="phone__notch" />
      <div
        className="phone__screen"
        style={{
          background: screenBg,
          color: ink,
          padding: '46px 16px 18px',
          display: 'flex',
          flexDirection: 'column',
          gap: 11,
        }}
      >
        {/* Status bar */}
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontSize: 11,
          fontFamily: 'var(--font-mono)',
          color: inkSoft,
          fontWeight: 600,
          paddingInline: 4,
        }}>
          <span>9:41</span>
          <span style={{display:'inline-flex', gap: 4, alignItems:'center'}}>
            <span style={{display:'inline-block', width: 14, height: 8, border:`1px solid ${inkSoft}`, borderRadius: 2, position:'relative'}}>
              <span style={{position:'absolute', inset: 1, background: inkSoft, borderRadius: 1}}/>
            </span>
            <span style={{fontSize: 9}}>5G</span>
          </span>
        </div>

        {/* Header */}
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6}}>
          <div>
            <div style={{fontSize: 10, color: inkMute, letterSpacing: '0.04em'}}>Hola, Camila</div>
            <div style={{
              fontFamily: 'var(--font-impact)',
              fontSize: 17,
              textTransform: 'uppercase',
              letterSpacing: '-0.02em',
              marginTop: 2,
            }}>
              Mi Cocoa
            </div>
          </div>
          <div style={{
            width: 32, height: 32,
            borderRadius: '50%',
            background: isDark
              ? 'linear-gradient(135deg, #7C5EDC, #58B8D6)'
              : 'linear-gradient(135deg, #5B2ECC, #7C5EDC)',
            display: 'grid', placeItems: 'center',
            color: '#fff', fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-impact)',
          }}>C</div>
        </div>

        {/* Hero balance card */}
        <div style={{
          background: heroCardBg,
          borderRadius: 18,
          padding: '14px 16px',
          color: heroCardInk,
          marginTop: 2,
          position: 'relative',
          overflow: 'hidden',
          boxShadow: isDark
            ? '0 6px 14px rgba(91, 46, 204, 0.5)'
            : '0 6px 14px rgba(91, 46, 204, 0.3)',
        }}>
          {/* Decorative orb */}
          <div style={{
            position: 'absolute',
            right: -20, top: -20,
            width: 80, height: 80,
            borderRadius: '50%',
            background: 'rgba(255,255,255,0.12)',
            filter: 'blur(8px)',
          }}/>
          <div style={{fontSize: 9, opacity: 0.78, textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600}}>
            Saldo Cocoas
          </div>
          <div style={{
            fontFamily: 'var(--font-impact)',
            fontSize: 36,
            letterSpacing: '-0.04em',
            marginTop: 2,
            lineHeight: 1,
          }}>2.847</div>
          <div style={{fontSize: 10, opacity: 0.72, marginTop: 4, fontFamily: 'var(--font-mono)'}}>
            ≈ Bs 2.847,00
          </div>
        </div>

        {/* Action tiles */}
        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 7, marginTop: 2}}>
          {[
            { i: 'qr', l: 'Pagar' },
            { i: 'coin', l: 'Cargar' },
            { i: 'history', l: 'Historial' },
          ].map(b => (
            <div key={b.l} style={{
              background: actionTile,
              border: `1px solid ${cardBorder}`,
              borderRadius: 12,
              padding: '10px 4px',
              textAlign: 'center',
            }}>
              <div style={{
                width: 28, height: 28,
                borderRadius: 9,
                background: accent,
                color: isDark ? '#0E0820' : '#FFFFFF',
                display: 'grid', placeItems: 'center',
                margin: '0 auto 5px',
              }}>
                <Icon name={b.i} size={14} />
              </div>
              <div style={{fontSize: 9, fontWeight: 600, color: ink}}>{b.l}</div>
            </div>
          ))}
        </div>

        {/* Section label */}
        <div style={{
          fontSize: 9,
          color: inkMute,
          textTransform: 'uppercase',
          letterSpacing: '0.14em',
          fontWeight: 600,
          marginTop: 4,
        }}>
          Cerca tuyo
        </div>

        {/* Merchant rows */}
        {merchants.map((m, i) => (
          <div key={i} style={{
            background: cardBg,
            border: `1px solid ${cardBorder}`,
            borderRadius: 12,
            padding: '9px 11px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 8,
          }}>
            <div style={{display:'flex', alignItems:'center', gap: 8, minWidth: 0}}>
              <div style={{
                width: 22, height: 22,
                borderRadius: 7,
                background: isDark ? 'rgba(88, 184, 214, 0.15)' : 'rgba(91, 46, 204, 0.12)',
                color: accent,
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-impact)', fontSize: 11,
                flexShrink: 0,
              }}>
                {m.n[0]}
              </div>
              <div style={{minWidth: 0}}>
                <div style={{fontSize: 10.5, fontWeight: 600, color: ink, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
                  {m.n}
                </div>
                <div style={{fontSize: 9, color: inkMute, marginTop: 1}}>
                  {m.p}
                </div>
              </div>
            </div>
            <div style={{color: inkMute, flexShrink: 0}}>
              <Icon name="arrow" size={11} />
            </div>
          </div>
        ))}

        {/* Bottom indicator */}
        <div style={{
          position: 'absolute',
          bottom: 6,
          left: '50%',
          transform: 'translateX(-50%)',
          width: 100,
          height: 4,
          borderRadius: 2,
          background: isDark ? 'rgba(255,255,255,0.4)' : 'rgba(26,20,38,0.35)',
        }} />
      </div>
    </div>
  );
}

// ============ PHONE PAIR (two phones — light front, dark back) ============
function PhonePair() {
  return (
    <div className="phone-pair" aria-label="Cocoa app — light and dark mode">
      <div className="phone-pair__slot phone-pair__slot--back">
        <PhoneRealistic mode="dark" />
      </div>
      <div className="phone-pair__slot phone-pair__slot--front">
        <PhoneRealistic mode="light" />
      </div>
    </div>
  );
}

// ============ STATS BAR ============
function StatsBar({ stats, dark = false }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:`repeat(${stats.length}, 1fr)`, gap: '1rem'}} className="stats-bar">
      {stats.map((s, i) => (
        <div key={i} style={{padding: '1rem 0'}}>
          <div className="stat__num impact">{s.num}</div>
          <div className="stat__label">{s.label}</div>
        </div>
      ))}
    </div>
  );
}

// ============ CLIENT LOGOS MARQUEE ============
// Fictional Bolivian enterprise clients using Cocoa for employee loyalty.
// Pure CSS marquee — 2 copies side-by-side animate -50% for seamless loop.
const CLIENT_LOGOS_CSS = `
  .clients-band {
    position: relative;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
  }
  .clients-band__eyebrow {
    display: block;
    text-align: center;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 1.5rem;
  }
  .clients-band__viewport {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .clients-band__track {
    display: flex;
    width: max-content;
    gap: 3.5rem;
    align-items: center;
    animation: clientsScroll 18s linear infinite;
  }
  .clients-band__viewport:hover .clients-band__track { animation-play-state: paused; }
  @keyframes clientsScroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
  }
  .clients-band__logo {
    flex-shrink: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    opacity: 0.85;
    transition: opacity .25s, filter .25s;
  }
  .clients-band__logo:hover { opacity: 1; }
  .clients-band__logo svg,
  .clients-band__logo img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    filter: grayscale(1) contrast(0.85) brightness(0.95);
  }
  .clients-band__logo[data-logo="redenlace"] img { height: 60%; }
  @media (max-width: 640px) {
    .clients-band__track { gap: 2.25rem; animation-duration: 14s; }
    .clients-band__logo { height: 48px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .clients-band__track { animation: none; }
  }
`;

const CLIENT_LOGOS = [
  { id: 'soboce',      label: 'SOBOCE',      src: 'public/images/socialproof/logo soboce.png' },
  { id: 'cybersource', label: 'Cybersource', src: 'public/images/socialproof/Cybersource.svg' },
  { id: 'redenlace',   label: 'Red Enlace',  src: 'public/images/socialproof/Red Enlace.svg' },
  { id: 'terracor',    label: 'Terracor',    src: 'public/images/socialproof/ISOLOGOTIPO TERRACOR.png' },
  { id: 'm40',         label: 'M40',         src: 'public/images/socialproof/LOGO M40 NEGRO.png' },
  { id: 'farmacorp',   label: 'Farmacorp',   src: 'public/images/socialproof/farmacorp.jpeg' },
  { id: 'amarket',     label: 'Amarket',     src: 'public/images/socialproof/amarket.png' },
];

function ClientLogos({
  eyebrow = "Empresas que fidelizan con Cocoa",
  logos = CLIENT_LOGOS,
}) {
  // Duplicate the list so -50% translate creates a seamless loop.
  const doubled = [...logos, ...logos];
  return (
    <React.Fragment>
      <style dangerouslySetInnerHTML={{ __html: CLIENT_LOGOS_CSS }} />
      <div className="clients-band" aria-label="Clientes empresariales de Cocoa">
        <span className="clients-band__eyebrow">{eyebrow}</span>
        <div className="clients-band__viewport">
          <div className="clients-band__track">
            {doubled.map((logo, i) => (
              <div
                key={`${logo.id}-${i}`}
                className="clients-band__logo"
                data-logo={logo.id}
                title={logo.label}
                aria-label={logo.label}
              >
                <img src={logo.src} alt={logo.label} loading="lazy" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

// Share with other scripts
Object.assign(window, {
  Icon, Nav, Footer, OrbStage, Marquee, Accordion, PhoneMockup, PhoneRealistic, PhonePair, StatsBar, ClientLogos,
});