/* Home page - three hero variations + full-length home body */

const { useState, useEffect } = React;

// ============ COMERCIOS DATA ============
const COMERCIOS = [
  {n:'Hipermaxi', r:'Supermercado'}, {n:'Alexander Coffee', r:'Gastronomía'},
  {n:'Farmacorp', r:'Salud'}, {n:'Kactus', r:'Moda'},
  {n:'Pollos Copacabana', r:'Gastronomía'}, {n:'Tía', r:'Supermercado'},
  {n:'Fidalga', r:'Supermercado'}, {n:'IC Norte', r:'Retail'},
  {n:'Chimaco', r:'Gastronomía'}, {n:'Factory', r:'Gastronomía'},
  {n:'Burger King', r:'Gastronomía'}, {n:'Fridosa', r:'Gastronomía'},
  {n:'Farmacia Chávez', r:'Salud'}, {n:'Multicentro', r:'Retail'},
  {n:'Vitaminas', r:'Salud'}, {n:'Subway', r:'Gastronomía'},
  {n:'Los Hierros', r:'Gastronomía'}, {n:'Kids Park', r:'Entretenimiento'},
  {n:'Cinecenter', r:'Entretenimiento'}, {n:'El Arriero', r:'Gastronomía'},
  {n:'Biggest', r:'Retail'}, {n:'Deportes Unión', r:'Retail'},
  {n:'Bolsín', r:'Servicios'}, {n:'Laboratorios Bagó', r:'Salud'},
  {n:'Tigo Money', r:'Servicios'}, {n:'Avianca', r:'Servicios'},
  {n:'Saxo', r:'Moda'}, {n:'Dulcinea', r:'Gastronomía'},
  {n:'La Estancia', r:'Gastronomía'}, {n:'Abuela Goya', r:'Gastronomía'},
];

const RUBROS = ['Todos', 'Gastronomía', 'Supermercado', 'Retail', 'Salud', 'Moda', 'Entretenimiento', 'Servicios'];

// =====================================================
// HERO VARIATION 1 — "Apple WWDC classic" — dark glass
// =====================================================
function HeroV1() {
  return (
    <section className="theme-dark" style={{position:'relative', overflow:'hidden', padding: '0', minHeight: 720}}>
      <OrbStage variant="dark" />
      <div className="container" style={{position:'relative', zIndex: 2, paddingBlock: '5rem 6rem', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: '3rem', alignItems:'center'}}>
        <div>
          <span className="pill pill--dark" style={{marginBottom: '1.5rem'}}>
            <span className="pill__dot" />
            Empresa fintech validada por la AJ
          </span>
          <h1 className="impact t-display-lg" style={{margin: '0 0 1.5rem'}}>
            Tu dinero<br/>
            <span style={{color:'var(--accent)'}}>vale más.</span>
          </h1>
          <p className="t-body-lg" style={{maxWidth: 480, marginBottom: '2rem'}}>
            Cocoa es la billetera de beneficios de Bolivia. Pagá, acumulá y canjeá en +60 comercios. <span style={{color: 'var(--paper)', fontWeight: 600}}>1 Cocoa = 1 Bs.</span>
          </p>
          <div style={{display:'flex', gap:'0.75rem', flexWrap:'wrap'}}>
            <a href="app.html#descargar" className="btn btn--accent btn--lg">Descargá la app <Icon name="arrow" size={18}/></a>
            <a href="empresas.html" className="btn btn--ghost btn--lg" style={{color: 'var(--paper)', borderColor:'rgba(255,255,255,0.2)'}}>Soy empresa</a>
          </div>
          <div style={{display:'flex', gap:'2rem', marginTop: '3rem', flexWrap:'wrap'}}>
            {[{n:'+60', l:'comercios'}, {n:'+3K', l:'usuarios'}, {n:'+5K', l:'descargas'}].map(s => (
              <div key={s.l}>
                <div className="impact" style={{fontSize: '2.5rem', lineHeight: 1}}>{s.n}</div>
                <div className="t-micro" style={{marginTop: 6}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{display:'grid', placeItems:'center'}}>
          <div style={{transform: 'rotate(-4deg)'}}>
            <PhoneMockup screen="home" />
          </div>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// HERO VARIATION 2 — "Editorial type-first" — paper
// =====================================================
function HeroV2() {
  return (
    <section style={{position:'relative', overflow:'hidden', background:'var(--paper)', padding: 0, marginTop: '-70px', paddingTop: '70px', minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center'}}>
      <OrbStage variant="teal" />
      <div className="container-wide" style={{position:'relative', zIndex: 2, paddingBlock: '2rem 1.5rem', width: '100%'}}>
        <div className="hero-v2-grid" style={{display:'grid', gridTemplateColumns:'1fr 1.05fr', gap: '2rem', alignItems:'center'}}>
          <div>
            <h1 className="impact" style={{fontSize: 'clamp(2.5rem, 7.5vw, 7.5rem)', letterSpacing:'-0.055em', lineHeight: 0.86, margin: '0 0 2rem'}}>
              1&nbsp;COCOA<br/>
              = 1&nbsp;<span style={{color:'var(--accent)'}}>BS</span>.
            </h1>
            <p className="t-body-lg" style={{maxWidth: 520, margin: '0 0 1.75rem', fontSize: '1.25rem', color:'var(--ink)', lineHeight: 1.35}}>
              La billetera de beneficios de Bolivia. Pagá con QR, acumulá Cocoas en cada compra y canjealos en los <strong>+60 comercios</strong> de la red.
            </p>
            <div style={{display:'flex', gap:'0.75rem', flexWrap:'wrap'}}>
              <a href="app.html#descargar" className="btn btn--primary btn--lg">Descargá la app <Icon name="arrow" size={18}/></a>
              <a href="empresas.html" className="btn btn--glass btn--lg">Para empresas</a>
            </div>
          </div>
          <div style={{display:'grid', placeItems:'center'}}>
            <PhonePair />
          </div>
        </div>
        <ClientLogos />
      </div>
    </section>
  );
}

// =====================================================
// HERO VARIATION 3 — "Split dual" — paper/dark bifurcation
// =====================================================
function HeroV3() {
  return (
    <section style={{position:'relative', padding: 0, overflow:'hidden'}}>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', minHeight: 680}}>
        {/* LEFT — B2C */}
        <div style={{background:'var(--cocoa-100)', padding:'clamp(2.5rem, 5vw, 5rem)', display:'flex', flexDirection:'column', justifyContent:'space-between', position:'relative', overflow:'hidden'}}>
          <OrbStage variant="default" />
          <div style={{position:'relative', zIndex: 2}}>
            <span className="pill" style={{background: 'var(--paper)'}}>
              <Icon name="coin" size={14}/>
              Soy usuario
            </span>
            <h1 className="impact" style={{fontSize:'clamp(3rem, 6vw, 5.5rem)', margin:'1.5rem 0 1rem', color:'var(--cocoa-800)'}}>
              Pagá.<br/>Acumulá.<br/>Canjeá.
            </h1>
            <p className="t-body-lg" style={{color:'var(--cocoa-700)', maxWidth: 420}}>
              Cocoa App — descuentos automáticos en +60 comercios de Bolivia.
            </p>
          </div>
          <div style={{position:'relative', zIndex: 2, display:'flex', gap:'0.75rem', flexWrap:'wrap'}}>
            <a href="app.html#descargar" className="btn btn--primary btn--lg">Descargar app <Icon name="arrow" size={16}/></a>
            <a href="app.html" className="btn btn--glass btn--lg">Ver features</a>
          </div>
        </div>
        {/* RIGHT — B2B */}
        <div className="theme-dark" style={{padding:'clamp(2.5rem, 5vw, 5rem)', display:'flex', flexDirection:'column', justifyContent:'space-between', position:'relative', overflow:'hidden'}}>
          <OrbStage variant="dark" />
          <div style={{position:'relative', zIndex: 2}}>
            <span className="pill pill--dark">
              <Icon name="building" size={14}/>
              Soy empresa
            </span>
            <h1 className="impact" style={{fontSize:'clamp(3rem, 6vw, 5.5rem)', margin:'1.5rem 0 1rem'}}>
              Fidelizá.<br/>Integrá.<br/><span style={{color:'var(--accent)'}}>Crecé.</span>
            </h1>
            <p className="t-body-lg" style={{maxWidth: 420}}>
              Red multimarca o tu propia app white-label. 5 clientes activos, integración ERP.
            </p>
          </div>
          <div style={{position:'relative', zIndex: 2, display:'flex', gap:'0.75rem', flexWrap:'wrap'}}>
            <a href="empresas.html#demo" className="btn btn--accent btn--lg">Agendar demo <Icon name="arrow" size={16}/></a>
            <a href="empresas.html" className="btn btn--ghost btn--lg" style={{color:'var(--paper)', borderColor:'rgba(255,255,255,0.2)'}}>Conocer más</a>
          </div>
        </div>
      </div>
      <div style={{background:'var(--ink)', color:'var(--paper)', padding:'0.75rem', textAlign:'center', fontSize:'0.8125rem', fontWeight: 500, letterSpacing:'0.02em'}}>
        <span className="pill pill--aj" style={{marginRight: '0.75rem'}}><Icon name="shield" size={12}/>AJ</span>
        Empresa fintech validada por la AJ · Opera bajo marco regulatorio boliviano
      </div>
    </section>
  );
}

// =====================================================
// HOME BODY (shared below any hero)
// =====================================================
function HowItWorks() {
  const steps = [
    {n: '01', t: 'Descargá Cocoa', d: 'Gratis en App Store y Google Play. Registro en 2 minutos con tu CI.'},
    {n: '02', t: 'Pagá con QR', d: 'Escaneá o mostrá tu código en cualquier comercio de la red. Listo.'},
    {n: '03', t: 'Acumulá y canjeá', d: 'Ganás Cocoas en cada compra. 1 Cocoa = 1 Bs. Canjealos donde quieras.'},
  ];
  return (
    <section className="theme-paper">
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap: '4rem', alignItems:'end', marginBottom: '3rem'}}>
          <div>
            <span className="t-eyebrow">Cómo funciona</span>
            <h2 className="impact t-display-md" style={{margin:'1rem 0 0'}}>Tres pasos.<br/>Cero fricción.</h2>
          </div>
          <p className="t-body-lg" style={{maxWidth: 420, margin: 0, justifySelf:'end'}}>
            Cocoa funciona como cualquier billetera digital — pero cada transacción te da beneficios reales.
          </p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'1.5rem'}} className="steps-grid">
          {steps.map((s, i) => (
            <div key={i} className="card" style={{padding:'2rem', minHeight: 280, display:'flex', flexDirection:'column'}}>
              <div className="mono" style={{fontSize: '0.875rem', color: 'var(--accent-deep)', fontWeight: 600}}>{s.n}</div>
              <h3 className="impact" style={{fontSize: '1.75rem', marginTop: '3rem', marginBottom: '0.75rem', letterSpacing:'-0.02em'}}>{s.t}</h3>
              <p className="t-body" style={{margin: 0}}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturesTeaser() {
  const features = [
    {i:'qr', t:'Pagá con QR', d:'Escaneá o mostrá tu código en cualquier comercio de la red.'},
    {i:'coin', t:'Acumulá Cocoas', d:'Cashback automático. Cada Bs que gastás te devuelve valor.'},
    {i:'bolt', t:'Canjeá al instante', d:'Sin vencimiento, sin saldo mínimo. Tus Cocoas son tuyos.'},
    {i:'bell', t:'Beneficios cerca', d:'Notificaciones cuando hay promos en tus comercios favoritos.'},
  ];
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          document.documentElement.classList.add('is-purple');
        } else {
          document.documentElement.classList.remove('is-purple');
        }
      });
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <section ref={ref} className="bg-shift bg-shift--purple">
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:'3rem', gap:'2rem', flexWrap:'wrap'}}>
          <div>
            <span className="t-eyebrow">Cocoa App</span>
            <h2 className="impact t-display-md" style={{margin:'1rem 0 0'}}>Todo lo que hace<br/>Cocoa.</h2>
          </div>
          <a href="app.html#features" className="btn btn--ghost">Ver todas las features <Icon name="arrow" size={16}/></a>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'1rem'}} className="features-grid">
          {features.map((f, i) => (
            <div key={i} className="feature" style={{background:'var(--paper)', borderColor:'rgba(20,15,31,0.08)'}}>
              <div className="feature__ico"><Icon name={f.i} size={22}/></div>
              <h3 className="feature__title">{f.t}</h3>
              <p className="feature__desc">{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ComerciosGrid({ preview = false }) {
  const [rubro, setRubro] = useState('Todos');
  const items = rubro === 'Todos' ? COMERCIOS : COMERCIOS.filter(c => c.r === rubro);
  const shown = preview ? items.slice(0, 18) : items;
  return (
    <section className="theme-paper" id="comercios">
      <div className="container">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:'2rem', gap:'2rem', flexWrap:'wrap'}}>
          <div>
            <span className="t-eyebrow">La red Cocoa</span>
            <h2 className="impact t-display-md" style={{margin:'1rem 0 0'}}>+60 comercios<br/>afiliados.</h2>
          </div>
          <p className="t-body-lg" style={{maxWidth: 360, margin: 0}}>
            Desde supermercados hasta cafeterías — Cocoa se acepta en los lugares que ya frecuentás.
          </p>
        </div>
        <div style={{display:'flex', gap:'0.5rem', flexWrap:'wrap', marginBottom: '2rem'}}>
          {RUBROS.map(r => (
            <button key={r} onClick={() => setRubro(r)} className="pill" style={{
              cursor:'pointer', border: 'none',
              background: rubro === r ? 'var(--ink)' : 'var(--paper)',
              color: rubro === r ? 'var(--paper)' : 'var(--ink-2)',
              transition: 'all 0.2s',
            }}>{r}</button>
          ))}
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:'0.75rem'}} className="comercios-grid">
          {shown.map((c, i) => (
            <div key={c.n} className="paper-card" style={{flexDirection:'column', gap: 4, padding:'1.25rem 0.75rem', minHeight: 100}}>
              <div style={{fontFamily:'var(--font-impact)', fontSize: '0.9375rem', letterSpacing:'-0.02em', lineHeight: 1.1}}>{c.n}</div>
              <div style={{fontSize: '0.6875rem', color:'var(--ink-4)', textTransform:'uppercase', letterSpacing: '0.06em'}}>{c.r}</div>
            </div>
          ))}
        </div>
        {preview && (
          <div style={{textAlign:'center', marginTop:'2.5rem'}}>
            <a href="app.html#comercios" className="btn btn--ghost">Ver los +60 comercios <Icon name="arrow" size={16}/></a>
          </div>
        )}
      </div>
    </section>
  );
}

function CasosB2B() {
  const casos = [
    {n:'Pil', d:'App white-label para la red de distribuidores. Integración ERP nacional.', m:'$7k MRR', c:'cocoa-500'},
    {n:'Más Cerca', d:'Programa de fidelización multimarca en Costa Rica.', m:'+30% ingresos WL', c:'teal-500'},
    {n:'Sobos', d:'Red de comercios Santa Cruz — afiliación y reporting.', m:'+12 locales', c:'lime-500'},
  ];
  return (
    <section className="theme-dark" style={{position:'relative', overflow:'hidden'}}>
      <OrbStage variant="dark" />
      <div className="container" style={{position:'relative', zIndex: 2}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:'3rem', gap:'2rem', flexWrap:'wrap'}}>
          <div>
            <span className="t-eyebrow">Casos B2B</span>
            <h2 className="impact t-display-md" style={{margin:'1rem 0 0'}}>Empresas que<br/>confían en Cocoa.</h2>
          </div>
          <a href="empresas.html#casos" className="btn btn--glass">Ver todos los casos <Icon name="arrow" size={16}/></a>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'1rem'}} className="casos-grid">
          {casos.map((c, i) => (
            <div key={i} className="feature feature--glass-dark" style={{minHeight: 280}}>
              <div style={{width: 52, height: 52, borderRadius: 14, background: `var(--${c.c})`, color:'var(--ink)', display:'grid', placeItems:'center', fontFamily:'var(--font-impact)', fontSize:'1.5rem', marginBottom:'1.5rem'}}>{c.n[0]}</div>
              <h3 className="feature__title" style={{fontSize:'1.75rem'}}>{c.n}</h3>
              <p className="feature__desc" style={{marginBottom:'1.5rem'}}>{c.d}</p>
              <div className="mt-auto" style={{borderTop:'1px solid rgba(255,255,255,0.1)', paddingTop:'1rem'}}>
                <div className="t-micro">Resultado</div>
                <div className="impact" style={{fontSize:'1.5rem', marginTop:6, color:'var(--accent)'}}>{c.m}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =====================================================
// COMERCIOS MARQUEE — 3 filas de logos que se auto-scrollean
// =====================================================
const COMERCIOS_MARQUEE_CSS = `
  .com-marq {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--paper);
    overflow: hidden;
  }
  .com-marq__head {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    padding: 0 1rem;
  }
  .com-marq__eyebrow {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .com-marq__eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 2px;
  }
  .com-marq__title {
    font-family: var(--font-impact);
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0.75rem 0 0;
    color: var(--ink);
  }
  .com-marq__title em {
    font-style: normal;
    color: var(--cocoa-500);
  }
  .com-marq__rows {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .com-marq__row {
    display: flex;
    overflow: hidden;
  }
  .com-marq__track {
    display: flex;
    gap: clamp(0.625rem, 1.2vw, 1rem);
    width: max-content;
    will-change: transform;
  }
  .com-marq__track--right {
    animation: comMarqRight 50s linear infinite;
  }
  .com-marq__track--left {
    animation: comMarqLeft 55s linear infinite;
  }
  @keyframes comMarqRight {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }
  @keyframes comMarqLeft {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  .com-marq__row:hover .com-marq__track { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .com-marq__track { animation: none; }
  }

  .com-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.375rem;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(20,15,31,0.04);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s, border-color .25s;
  }
  .com-chip:hover {
    transform: translateY(-2px);
    border-color: var(--cocoa-300);
    box-shadow: 0 8px 20px -8px rgba(104,79,163,0.25);
  }
  .com-chip__mark {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-impact);
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--paper);
    flex-shrink: 0;
  }
  .com-chip--cocoa .com-chip__mark { background: var(--cocoa-500); }
  .com-chip--teal .com-chip__mark  { background: var(--teal-500); color: var(--paper); }
  .com-chip--ink .com-chip__mark   { background: var(--ink); }
  .com-chip--amber .com-chip__mark { background: #D97706; }
  .com-chip--rose .com-chip__mark  { background: #BE3E6B; }
  .com-chip--forest .com-chip__mark{ background: #2F6B4E; }

  .com-marq__cta {
    text-align: center;
    margin-top: clamp(2rem, 4vw, 3rem);
  }
  .com-marq__count {
    font-size: 0.875rem;
    color: var(--ink-3);
    margin-bottom: 0.5rem;
  }
  .com-marq__count strong { color: var(--ink); font-weight: 700; }
`;

const CHIP_COLORS = ['cocoa', 'teal', 'ink', 'amber', 'rose', 'forest'];

function ComerciosMarquee({ items = COMERCIOS, title, eyebrow = "La red Cocoa" }) {
  // Split into 3 rows of roughly equal size
  const rows = React.useMemo(() => {
    const third = Math.ceil(items.length / 3);
    return [
      items.slice(0, third),
      items.slice(third, third * 2),
      items.slice(third * 2),
    ];
  }, [items]);

  const renderChip = (c, i, rowIdx) => {
    const color = CHIP_COLORS[(rowIdx * 5 + i) % CHIP_COLORS.length];
    const initials = c.n.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
    return (
      <div key={`${rowIdx}-${i}-${c.n}`} className={`com-chip com-chip--${color}`} title={`${c.n} · ${c.r}`}>
        <div className="com-chip__mark">{initials}</div>
        <span>{c.n}</span>
      </div>
    );
  };

  return (
    <React.Fragment>
      <style dangerouslySetInnerHTML={{ __html: COMERCIOS_MARQUEE_CSS }} />
      <section className="com-marq" id="comercios" aria-label="Comercios afiliados a Cocoa">
        <div className="com-marq__head">
          <span className="com-marq__eyebrow">{eyebrow}</span>
          {title || (
            <h2 className="com-marq__title">
              +60 comercios<br/>
              <em>te devuelven valor.</em>
            </h2>
          )}
        </div>

        <div className="com-marq__rows">
          {rows.map((row, rowIdx) => {
            const direction = rowIdx === 1 ? 'left' : 'right';
            // duplicate row for seamless loop
            const doubled = [...row, ...row];
            return (
              <div key={rowIdx} className="com-marq__row">
                <div className={`com-marq__track com-marq__track--${direction}`}>
                  {doubled.map((c, i) => renderChip(c, i, rowIdx))}
                </div>
              </div>
            );
          })}
        </div>

        <div className="com-marq__cta">
          <div className="com-marq__count">Y sumando más cada mes · <strong>{items.length}+ comercios</strong> activos</div>
          <a href="app.html#comercios" className="btn btn--ghost">Ver el directorio completo <Icon name="arrow" size={16}/></a>
        </div>
      </section>
    </React.Fragment>
  );
}

function CTAFinal() {
  return (
    <section style={{background:'var(--cocoa-500)', color:'var(--paper)', position:'relative', overflow:'hidden'}}>
      <OrbStage variant="warm" />
      <div className="container" style={{position:'relative', zIndex:2, textAlign:'center'}}>
        <span className="pill pill--dark" style={{marginBottom:'1.5rem'}}><span className="pill__dot"/>Disponible en Bolivia</span>
        <h2 className="impact" style={{fontSize:'clamp(3rem, 10vw, 8rem)', lineHeight: 0.85, margin: '0 0 2rem', letterSpacing:'-0.05em'}}>
          Bajá Cocoa.<br/>
          <span style={{color:'var(--accent)'}}>Empezá ya.</span>
        </h2>
        <p className="t-body-lg" style={{maxWidth: 500, margin:'0 auto 2.5rem', color:'rgba(255,255,255,0.85)'}}>
          Gratis para siempre. Sin saldo mínimo, sin vencimiento, sin fees ocultos.
        </p>
        <div style={{display:'flex', gap:'0.75rem', justifyContent:'center', flexWrap:'wrap', marginBottom:'3rem'}}>
          <a href="https://apps.apple.com/py/app/cocoa-billetera-de-beneficios/id6746419933" target="_blank" rel="noopener noreferrer" className="btn btn--primary btn--lg" style={{background:'var(--ink)'}}>
            <Icon name="apple" size={18}/> App Store
          </a>
          <a href="https://play.google.com/store/apps/details?id=com.cocoa.cocoaprod&hl=es_BO" target="_blank" rel="noopener noreferrer" className="btn btn--primary btn--lg" style={{background:'var(--ink)'}}>
            <Icon name="play" size={18}/> Google Play
          </a>
        </div>
        <div style={{display:'inline-grid', placeItems:'center', background:'var(--paper)', padding:'1rem', borderRadius:'1rem'}}>
          <div style={{width: 120, height: 120, backgroundImage: 'repeating-conic-gradient(var(--ink) 0 25%, var(--paper) 0 50%)', backgroundSize: '12px 12px', borderRadius: 8}}/>
          <div style={{color:'var(--ink)', fontSize:'0.75rem', fontWeight:600, marginTop:'0.5rem'}}>Escaneá para descargar</div>
        </div>
      </div>
    </section>
  );
}


// =====================================================
// AUDIENCE SPLIT — B2C (paper) + B2B (dark)
// =====================================================
const AUDIENCE_CSS = `
  .aud { position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 7rem) 0; }
  .aud--b2c { background: var(--paper); color: var(--ink); }
  .aud--b2b { background: #000000; color: var(--paper); }

  .aud__head {
    max-width: 920px;
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    text-align: center;
  }
  .aud__eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 1.25rem;
  }
  .aud--b2b .aud__eyebrow { color: rgba(255,255,255,0.55); }
  .aud__eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--cocoa-500); display: inline-block;
  }
  .aud--b2b .aud__eyebrow::before { background: var(--teal-500); }

  .aud__title {
    font-family: var(--font-impact);
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin: 0 0 1.25rem;
    text-transform: uppercase;
  }
  .aud__title em { font-style: normal; color: #5B2ECC; }
  .aud--b2b .aud__title em { color: var(--teal-500); }

  .aud__lead {
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 640px;
    margin: 0 auto 2rem;
  }
  .aud--b2b .aud__lead { color: rgba(255,255,255,0.72); }

  .aud__cta {
    display: flex; gap: 0.875rem; flex-wrap: wrap; justify-content: center;
  }

  .aud__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
    max-width: 1200px;
    margin: clamp(3rem, 5vw, 4rem) auto 0;
  }
  @media (max-width: 900px) {
    .aud__cards { grid-template-columns: 1fr; max-width: 480px; gap: 6rem; }
  }

  .aud__card { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .aud__card:hover { transform: translateY(-4px); }

  .aud__card-art {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.25rem;
  }
  .aud--b2c .aud__card-art {
    background: #F5F2EE;
    border: 1px solid rgba(20,15,31,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
  }
  .aud--b2c .aud__card-art--alt2 { background: #F5F2EE; }
  .aud--b2c .aud__card-art--alt3 { background: #F5F2EE; }
  .aud--b2b .aud__card-art {
    background: #0E0A18;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  }
  .aud--b2b .aud__card-art--alt2 { background: #0E0A18; }
  .aud--b2b .aud__card-art--alt3 { background: #0E0A18; }
  .aud__card-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

  .aud__card-title {
    font-family: var(--font-impact);
    font-size: clamp(1.375rem, 1.8vw, 1.625rem);
    letter-spacing: -0.015em;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
  }
  .aud__card-desc {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0;
  }
  .aud--b2b .aud__card-desc { color: rgba(255,255,255,0.65); }
`;

function AudienceB2C() {
  return (
    <React.Fragment>
      <style dangerouslySetInnerHTML={{ __html: AUDIENCE_CSS }} />
      <section className="aud aud--b2c" id="descargar">
        <div className="container">
          <div className="aud__head">
            <span className="aud__eyebrow">Para vos · Cocoa App</span>
            <h2 className="aud__title">Pagá, acumulá<br/><em>y ganá siempre.</em></h2>
            <p className="aud__lead">
              Cocoa es gratis para siempre. Sin saldo mínimo, sin vencimiento, sin fees ocultos. En 2 minutos estás pagando con QR y acumulando Cocoas en cada compra.
            </p>
          </div>

          <div className="aud__cards">
            <div className="aud__card">
              <div className="aud__card-art">
                <svg viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
                  <rect x="92" y="20" width="136" height="220" rx="22" fill="#FFFFFF" stroke="#1A1428" strokeOpacity="0.08"/>
                  <rect x="100" y="28" width="120" height="204" rx="16" fill="#FAFAF8"/>
                  <rect x="142" y="32" width="36" height="4" rx="2" fill="#1A1428" fillOpacity="0.25"/>
                  <text x="110" y="56" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="600" opacity="0.55">Pagar</text>
                  <text x="210" y="56" textAnchor="end" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="600" opacity="0.4">Bs</text>
                  <rect x="110" y="66" width="100" height="100" rx="6" fill="#FFFFFF" stroke="#1A1428" strokeOpacity="0.06"/>
                  <g transform="translate(116,72)" fill="#1A1428">
                    <rect x="0" y="0" width="20" height="20"/><rect x="4" y="4" width="12" height="12" fill="#FFFFFF"/><rect x="8" y="8" width="4" height="4" fill="#1A1428"/>
                    <rect x="68" y="0" width="20" height="20"/><rect x="72" y="4" width="12" height="12" fill="#FFFFFF"/><rect x="76" y="8" width="4" height="4" fill="#1A1428"/>
                    <rect x="0" y="68" width="20" height="20"/><rect x="4" y="72" width="12" height="12" fill="#FFFFFF"/><rect x="8" y="76" width="4" height="4" fill="#1A1428"/>
                    <rect x="26" y="0" width="4" height="4"/><rect x="34" y="0" width="4" height="4"/><rect x="42" y="0" width="8" height="4"/><rect x="56" y="0" width="4" height="4"/>
                    <rect x="26" y="8" width="8" height="4"/><rect x="42" y="8" width="4" height="4"/><rect x="52" y="8" width="8" height="4"/>
                    <rect x="0" y="26" width="4" height="4"/><rect x="10" y="26" width="8" height="4"/><rect x="22" y="26" width="4" height="4"/><rect x="34" y="26" width="4" height="4"/><rect x="46" y="26" width="8" height="4"/><rect x="60" y="26" width="4" height="4"/><rect x="72" y="26" width="8" height="4"/>
                    <rect x="6" y="34" width="4" height="4"/><rect x="14" y="34" width="8" height="4"/><rect x="26" y="34" width="4" height="4"/><rect x="38" y="34" width="8" height="4"/><rect x="56" y="34" width="4" height="4"/><rect x="68" y="34" width="4" height="4"/><rect x="80" y="34" width="8" height="4"/>
                    <rect x="0" y="42" width="8" height="4"/><rect x="14" y="42" width="4" height="4"/><rect x="22" y="42" width="8" height="4"/><rect x="38" y="42" width="4" height="4"/><rect x="50" y="42" width="4" height="4"/><rect x="60" y="42" width="8" height="4"/><rect x="74" y="42" width="4" height="4"/>
                    <rect x="4" y="50" width="4" height="4"/><rect x="14" y="50" width="8" height="4"/><rect x="30" y="50" width="4" height="4"/><rect x="42" y="50" width="8" height="4"/><rect x="56" y="50" width="4" height="4"/><rect x="68" y="50" width="4" height="4"/><rect x="80" y="50" width="4" height="4"/>
                    <rect x="0" y="58" width="4" height="4"/><rect x="10" y="58" width="4" height="4"/><rect x="22" y="58" width="8" height="4"/><rect x="34" y="58" width="4" height="4"/><rect x="46" y="58" width="4" height="4"/><rect x="58" y="58" width="8" height="4"/><rect x="72" y="58" width="4" height="4"/><rect x="82" y="58" width="4" height="4"/>
                    <rect x="26" y="68" width="4" height="4"/><rect x="34" y="68" width="8" height="4"/><rect x="48" y="68" width="4" height="4"/><rect x="60" y="68" width="8" height="4"/><rect x="76" y="68" width="4" height="4"/>
                    <rect x="26" y="76" width="8" height="4"/><rect x="42" y="76" width="4" height="4"/><rect x="56" y="76" width="4" height="4"/><rect x="66" y="76" width="8" height="4"/><rect x="82" y="76" width="4" height="4"/>
                    <rect x="26" y="84" width="4" height="4"/><rect x="38" y="84" width="4" height="4"/><rect x="48" y="84" width="8" height="4"/><rect x="62" y="84" width="4" height="4"/><rect x="74" y="84" width="8" height="4"/>
                  </g>
                  <text x="160" y="186" textAnchor="middle" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="500" opacity="0.5">Hipermaxi · Sur</text>
                  <text x="160" y="208" textAnchor="middle" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="18" fontWeight="700" letterSpacing="-0.02em">Bs 248,50</text>
                </svg>
              </div>
              <h3 className="aud__card-title">Pagá con QR</h3>
              <p className="aud__card-desc">Escaneá o mostrá tu código en cualquier comercio de la red. Pago directo desde tu saldo Cocoa.</p>
            </div>

            <div className="aud__card">
              <div className="aud__card-art aud__card-art--alt2">
                <svg viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
                  <rect x="28" y="30" width="264" height="180" rx="14" fill="#FFFFFF" stroke="#1A1428" strokeOpacity="0.06"/>
                  <text x="44" y="58" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="600" opacity="0.5" letterSpacing="0.08em">COCOAS ACUMULADOS</text>
                  <text x="44" y="92" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="32" fontWeight="700" letterSpacing="-0.03em">2,847</text>
                  <text x="118" y="92" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="11" fontWeight="500" opacity="0.45">Bs</text>
                  <rect x="232" y="44" width="44" height="20" rx="10" fill="#5B2ECC" fillOpacity="0.1"/>
                  <text x="254" y="58" textAnchor="middle" fill="#5B2ECC" fontFamily="ui-sans-serif, system-ui" fontSize="10" fontWeight="700">+8%</text>
                  <line x1="44" y1="180" x2="276" y2="180" stroke="#1A1428" strokeOpacity="0.06"/>
                  <line x1="44" y1="155" x2="276" y2="155" stroke="#1A1428" strokeOpacity="0.04"/>
                  <line x1="44" y1="130" x2="276" y2="130" stroke="#1A1428" strokeOpacity="0.04"/>
                  <path d="M44 174 C 70 168, 90 160, 108 156 S 150 142, 168 138 S 210 124, 232 118 S 264 112, 276 108" stroke="#5B2ECC" strokeWidth="2" fill="none" strokeLinecap="round"/>
                  <path d="M44 174 C 70 168, 90 160, 108 156 S 150 142, 168 138 S 210 124, 232 118 S 264 112, 276 108 L276 180 L44 180 Z" fill="url(#cocoaArea)"/>
                  <defs><linearGradient id="cocoaArea" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#5B2ECC" stopOpacity="0.18"/><stop offset="100%" stopColor="#5B2ECC" stopOpacity="0"/></linearGradient></defs>
                  <circle cx="276" cy="108" r="3.5" fill="#5B2ECC" stroke="#FFFFFF" strokeWidth="2"/>
                  <text x="44" y="200" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="500" opacity="0.4">Ene</text>
                  <text x="104" y="200" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="500" opacity="0.4">Feb</text>
                  <text x="164" y="200" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="500" opacity="0.4">Mar</text>
                  <text x="224" y="200" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="500" opacity="0.4">Abr</text>
                </svg>
              </div>
              <h3 className="aud__card-title">Acumulá Cocoas</h3>
              <p className="aud__card-desc">Cashback automático en cada compra. Mirá tu saldo crecer en tiempo real — 1 Cocoa = 1 Bs.</p>
            </div>

            <div className="aud__card">
              <div className="aud__card-art aud__card-art--alt3">
                <svg viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
                  <rect x="28" y="22" width="264" height="196" rx="14" fill="#FFFFFF" stroke="#1A1428" strokeOpacity="0.06"/>
                  <text x="44" y="46" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="600" opacity="0.5" letterSpacing="0.08em">MOVIMIENTOS</text>
                  <text x="276" y="46" textAnchor="end" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="500" opacity="0.4">Hoy</text>
                  <line x1="44" y1="56" x2="276" y2="56" stroke="#1A1428" strokeOpacity="0.06"/>
                  <g>
                    <circle cx="56" cy="80" r="12" fill="#5B2ECC" fillOpacity="0.12"/>
                    <text x="56" y="84" textAnchor="middle" fill="#5B2ECC" fontFamily="ui-sans-serif, system-ui" fontSize="10" fontWeight="700">H</text>
                    <text x="76" y="76" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="10" fontWeight="600">Hipermaxi</text>
                    <text x="76" y="88" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="500" opacity="0.45">14:32 · QR</text>
                    <text x="276" y="80" textAnchor="end" fill="#287855" fontFamily="ui-sans-serif, system-ui" fontSize="11" fontWeight="700">+19,88</text>
                  </g>
                  <line x1="44" y1="104" x2="276" y2="104" stroke="#1A1428" strokeOpacity="0.04"/>
                  <g>
                    <circle cx="56" cy="124" r="12" fill="#287855" fillOpacity="0.12"/>
                    <text x="56" y="128" textAnchor="middle" fill="#287855" fontFamily="ui-sans-serif, system-ui" fontSize="10" fontWeight="700">A</text>
                    <text x="76" y="120" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="10" fontWeight="600">Alexander Coffee</text>
                    <text x="76" y="132" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="500" opacity="0.45">11:14 · QR</text>
                    <text x="276" y="124" textAnchor="end" fill="#287855" fontFamily="ui-sans-serif, system-ui" fontSize="11" fontWeight="700">+3,40</text>
                  </g>
                  <line x1="44" y1="148" x2="276" y2="148" stroke="#1A1428" strokeOpacity="0.04"/>
                  <g>
                    <circle cx="56" cy="168" r="12" fill="#B8853A" fillOpacity="0.16"/>
                    <text x="56" y="172" textAnchor="middle" fill="#B8853A" fontFamily="ui-sans-serif, system-ui" fontSize="10" fontWeight="700">F</text>
                    <text x="76" y="164" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="10" fontWeight="600">Farmacorp</text>
                    <text x="76" y="176" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="500" opacity="0.45">Ayer · Canje</text>
                    <text x="276" y="168" textAnchor="end" fill="#1A1428" fontFamily="ui-sans-serif, system-ui" fontSize="11" fontWeight="700">−85,00</text>
                  </g>
                  <line x1="44" y1="192" x2="276" y2="192" stroke="#1A1428" strokeOpacity="0.04"/>
                </svg>
              </div>
              <h3 className="aud__card-title">Canjeá sin vencer</h3>
              <p className="aud__card-desc">Tus Cocoas valen como Bs. Sin restricciones, sin caducidad, en +60 comercios afiliados.</p>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

const AUDIENCE_B2B_CSS = `
  .aud--b2b .aud__card-art > svg .ab-fade-stagger > * { opacity: 0; animation: abFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .aud--b2b .aud__card-art > svg .ab-fade-stagger > *:nth-child(1) { animation-delay: 0.10s; }
  .aud--b2b .aud__card-art > svg .ab-fade-stagger > *:nth-child(2) { animation-delay: 0.25s; }
  .aud--b2b .aud__card-art > svg .ab-fade-stagger > *:nth-child(3) { animation-delay: 0.40s; }
  .aud--b2b .aud__card-art > svg .ab-fade-stagger > *:nth-child(4) { animation-delay: 0.55s; }
  .aud--b2b .aud__card-art > svg .ab-fade-stagger > *:nth-child(5) { animation-delay: 0.70s; }
  @keyframes abFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .aud--b2b .ab-bar-grow { transform-origin: left center; animation: abBarGrow 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
  @keyframes abBarGrow {
    0%   { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }
  .aud--b2b .ab-pulse { animation: abPulse 2.6s ease-in-out infinite; transform-origin: center; }
  @keyframes abPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }
  .aud--b2b .ab-step-active {
    animation: abStepActive 1.8s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes abStepActive {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(91,46,204,0)); }
    50%      { filter: drop-shadow(0 0 6px rgba(91,46,204,0.7)); }
  }
  .aud--b2b .ab-shimmer-line {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: abDraw 2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
  }
  @keyframes abDraw {
    to { stroke-dashoffset: 0; }
  }
  .aud--b2b .ab-tick { transform-origin: center; animation: abTickPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .aud--b2b .ab-tick:nth-of-type(1) { animation-delay: 0.6s; }
  .aud--b2b .ab-tick:nth-of-type(2) { animation-delay: 0.95s; }
  .aud--b2b .ab-tick:nth-of-type(3) { animation-delay: 1.30s; }
  .aud--b2b .ab-tick:nth-of-type(4) { animation-delay: 1.65s; }
  @keyframes abTickPop {
    0%   { opacity: 0; transform: scale(0.4); }
    100% { opacity: 1; transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .aud--b2b .ab-fade-stagger > *,
    .aud--b2b .ab-bar-grow,
    .aud--b2b .ab-pulse,
    .aud--b2b .ab-step-active,
    .aud--b2b .ab-shimmer-line,
    .aud--b2b .ab-tick { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  }
`;

function AudienceB2B() {
  return (
    <React.Fragment>
      <style dangerouslySetInnerHTML={{__html: AUDIENCE_B2B_CSS}} />
      <section className="aud aud--b2b" id="empresas-cta">
        <div className="container">
          <div className="aud__head">
            <span className="aud__eyebrow">Para tu empresa · Cocoa Colaboradores</span>
            <h2 className="aud__title">Pagá variables.<br/><em>Sin inflar tu planilla.</em></h2>
            <p className="aud__lead">
              Convertí comisiones, bonos y sueldo variable en puntos Cocoa. Tu equipo los gasta en +60 comercios o los retira al banco. Vos ahorrás hasta ~40% en cargas sociales.
            </p>
            <div className="aud__cta">
              <a href="empresas.html#demo" className="btn btn--accent btn--lg">Agendá una demo <Icon name="arrow" size={16}/></a>
              <a href="empresas.html" className="btn btn--ghost btn--lg" style={{color:'var(--paper)', borderColor:'rgba(255,255,255,0.2)'}}>Ver Cocoa Colaboradores</a>
            </div>
          </div>

          <div className="aud__cards">
            {/* CARD 1 — Ahorro vs planilla */}
            <div className="aud__card">
              <div className="aud__card-art">
                <svg viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
                  <rect x="20" y="22" width="280" height="196" rx="14" fill="#161020" stroke="#FFFFFF" strokeOpacity="0.06"/>
                  <text x="36" y="44" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="7.5" fontWeight="600" opacity="0.5" letterSpacing="0.12em">COCOA BUSINESS · CALCULADORA</text>

                  <g className="ab-fade-stagger">
                    {/* Pagado en planilla — gray bar */}
                    <g>
                      <text x="36" y="68" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="600" opacity="0.85">Pagado en planilla</text>
                      <text x="284" y="68" textAnchor="end" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="700">Bs 256.040</text>
                      <rect x="36" y="76" width="248" height="8" rx="4" fill="#FFFFFF" fillOpacity="0.08"/>
                      <rect className="ab-bar-grow" x="36" y="76" width="248" height="8" rx="4" fill="#FFFFFF" fillOpacity="0.32"/>
                    </g>

                    {/* Pagado en Cocoa — accent bar */}
                    <g>
                      <text x="36" y="106" fill="#58B8D6" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="700">Pagado en Cocoa</text>
                      <text x="284" y="106" textAnchor="end" fill="#58B8D6" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="700">Bs 184.200</text>
                      <rect x="36" y="114" width="248" height="8" rx="4" fill="#FFFFFF" fillOpacity="0.06"/>
                      <rect className="ab-bar-grow" x="36" y="114" width="180" height="8" rx="4" fill="#58B8D6"/>
                    </g>

                    {/* Savings hero card */}
                    <g>
                      <rect x="36" y="142" width="248" height="58" rx="10" fill="url(#b2bSavingsGrad)"/>
                      <text x="160" y="170" textAnchor="middle" fill="#FFFFFF" fontFamily="var(--font-impact, ui-sans-serif)" fontSize="22" fontWeight="900" letterSpacing="-0.02em" className="ab-pulse">−39% / Bs 71.840</text>
                      <text x="160" y="186" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="7" fontWeight="700" letterSpacing="0.18em" opacity="0.85">AHORRADO ESTE MES</text>
                    </g>
                  </g>

                  <defs>
                    <linearGradient id="b2bSavingsGrad" x1="0" y1="0" x2="1" y2="1">
                      <stop offset="0%"  stopColor="#5B2ECC"/>
                      <stop offset="100%" stopColor="#3A1B85"/>
                    </linearGradient>
                  </defs>
                </svg>
              </div>
              <h3 className="aud__card-title">Ahorrá ~40% en cargas</h3>
              <p className="aud__card-desc">Sin aguinaldo, prima ni finiquito sobre el variable. Por cada Bs 184K distribuidos, tu empresa se ahorra Bs 71K.</p>
            </div>

            {/* CARD 2 — App del colaborador */}
            <div className="aud__card">
              <div className="aud__card-art aud__card-art--alt2">
                <svg viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
                  <rect x="20" y="22" width="280" height="196" rx="14" fill="#161020" stroke="#FFFFFF" strokeOpacity="0.06"/>
                  <text x="36" y="44" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="7.5" fontWeight="600" opacity="0.5" letterSpacing="0.12em">APP COCOA · MI BILLETERA</text>

                  {/* Header */}
                  <text x="36" y="64" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="9" fontWeight="700" opacity="0.95">Recibido este mes</text>
                  <text x="36" y="76" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="7" fontWeight="500" opacity="0.5">Comisión Q4 + Bono noviembre</text>
                  <rect x="220" y="56" width="64" height="20" rx="10" fill="#287855" fillOpacity="0.18" stroke="#287855" strokeOpacity="0.5"/>
                  <text x="252" y="69" textAnchor="middle" fill="#8FDCB6" fontFamily="ui-sans-serif, system-ui" fontSize="8.5" fontWeight="700">Bs 2.847</text>

                  {/* Transactions */}
                  <g className="ab-fade-stagger">
                    <g>
                      <rect x="36" y="92" width="248" height="26" rx="6" fill="#0E0820" stroke="#FFFFFF" strokeOpacity="0.05"/>
                      <circle cx="50" cy="105" r="7" fill="#287855"/>
                      <text x="50" y="108" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="700">H</text>
                      <text x="64" y="103" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">Compra Hipermaxi</text>
                      <text x="64" y="113" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="500" opacity="0.5">Despensa familia</text>
                      <text x="278" y="108" textAnchor="end" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">−Bs 320</text>
                    </g>
                    <g>
                      <rect x="36" y="122" width="248" height="26" rx="6" fill="#0E0820" stroke="#FFFFFF" strokeOpacity="0.05"/>
                      <circle cx="50" cy="135" r="7" fill="#B8853A"/>
                      <text x="50" y="138" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="700">Y</text>
                      <text x="64" y="133" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">YPFB Combustible</text>
                      <text x="64" y="143" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="500" opacity="0.5">QR en surtidor</text>
                      <text x="278" y="138" textAnchor="end" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">−Bs 180</text>
                    </g>
                    <g>
                      <rect x="36" y="152" width="248" height="26" rx="6" fill="#0E0820" stroke="#FFFFFF" strokeOpacity="0.05"/>
                      <circle cx="50" cy="165" r="7" fill="#684FA3"/>
                      <text x="50" y="168" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="700">F</text>
                      <text x="64" y="163" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">Farmacorp</text>
                      <text x="64" y="173" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="500" opacity="0.5">Receta mensual</text>
                      <text x="278" y="168" textAnchor="end" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">−Bs 95</text>
                    </g>
                    <g>
                      <rect x="36" y="182" width="248" height="26" rx="6" fill="#0E0820" stroke="#58B8D6" strokeOpacity="0.25"/>
                      <circle cx="50" cy="195" r="7" fill="#58B8D6"/>
                      <text x="50" y="198" textAnchor="middle" fill="#0A0612" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="700">B</text>
                      <text x="64" y="193" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">Retiro a BCP</text>
                      <text x="64" y="203" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="500" opacity="0.5">A cuenta bancaria</text>
                      <text x="278" y="198" textAnchor="end" fill="#58B8D6" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">−Bs 1.200</text>
                    </g>
                  </g>
                </svg>
              </div>
              <h3 className="aud__card-title">Cero pérdida para el equipo</h3>
              <p className="aud__card-desc">Reciben el 100% de su variable y lo gastan en supermercados, farmacias, combustible — o lo retiran a su banco.</p>
            </div>

            {/* CARD 3 — De planilla a app en 4 pasos */}
            <div className="aud__card">
              <div className="aud__card-art aud__card-art--alt3">
                <svg viewBox="0 0 320 240" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
                  <rect x="20" y="22" width="280" height="196" rx="14" fill="#161020" stroke="#FFFFFF" strokeOpacity="0.06"/>
                  <text x="36" y="44" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="7.5" fontWeight="600" opacity="0.5" letterSpacing="0.12em">COCOA BUSINESS · DISTRIBUIR</text>

                  {/* Step indicator 1 → 2 → 3 → 4 */}
                  <g>
                    <line className="ab-shimmer-line" x1="64" y1="68" x2="276" y2="68" stroke="#5B2ECC" strokeOpacity="0.6" strokeWidth="2" strokeLinecap="round"/>
                    <circle cx="64"  cy="68" r="11" fill="#5B2ECC"/>
                    <text x="64"  y="71" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="800">1</text>
                    <circle cx="134" cy="68" r="11" fill="#5B2ECC"/>
                    <text x="134" y="71" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="800">2</text>
                    <circle cx="204" cy="68" r="11" fill="#5B2ECC"/>
                    <text x="204" y="71" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="800">3</text>
                    <circle className="ab-step-active" cx="276" cy="68" r="11" fill="#7C5EDC" stroke="#A489DC" strokeOpacity="0.6" strokeWidth="2"/>
                    <text x="276" y="71" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="800">4</text>
                  </g>

                  {/* Distribution header */}
                  <rect x="36" y="92" width="248" height="22" rx="6" fill="#5B2ECC"/>
                  <text x="46" y="106" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">Distribuir variable · 142 colab.</text>
                  <text x="274" y="106" textAnchor="end" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="800">Bs 184.200</text>

                  {/* Distribution rows */}
                  <g>
                    <rect x="36" y="120" width="248" height="22" rx="5" fill="#0E0820" stroke="#FFFFFF" strokeOpacity="0.05"/>
                    <circle cx="48" cy="131" r="6.5" fill="#684FA3"/>
                    <text x="48" y="134" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="700">L</text>
                    <text x="60" y="134" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="600">Lucía Mendoza</text>
                    <text x="232" y="134" textAnchor="end" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">Bs 1.840</text>
                    <text x="270" y="134" textAnchor="end" fill="#8FDCB6" fontFamily="ui-sans-serif, system-ui" fontSize="7" fontWeight="700" className="ab-tick">✓ OK</text>
                  </g>
                  <g>
                    <rect x="36" y="146" width="248" height="22" rx="5" fill="#0E0820" stroke="#FFFFFF" strokeOpacity="0.05"/>
                    <circle cx="48" cy="157" r="6.5" fill="#58B8D6"/>
                    <text x="48" y="160" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="700">M</text>
                    <text x="60" y="160" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="600">Marco Patiño</text>
                    <text x="232" y="160" textAnchor="end" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">Bs 2.150</text>
                    <text x="270" y="160" textAnchor="end" fill="#8FDCB6" fontFamily="ui-sans-serif, system-ui" fontSize="7" fontWeight="700" className="ab-tick">✓ OK</text>
                  </g>
                  <g>
                    <rect x="36" y="172" width="248" height="22" rx="5" fill="#0E0820" stroke="#FFFFFF" strokeOpacity="0.05"/>
                    <circle cx="48" cy="183" r="6.5" fill="#A489DC"/>
                    <text x="48" y="186" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="700">S</text>
                    <text x="60" y="186" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="600">Sofía Arce</text>
                    <text x="232" y="186" textAnchor="end" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">Bs 1.620</text>
                    <text x="270" y="186" textAnchor="end" fill="#8FDCB6" fontFamily="ui-sans-serif, system-ui" fontSize="7" fontWeight="700" className="ab-tick">✓ OK</text>
                  </g>
                  <g>
                    <rect x="36" y="198" width="248" height="22" rx="5" fill="#0E0820" stroke="#FFFFFF" strokeOpacity="0.05"/>
                    <circle cx="48" cy="209" r="6.5" fill="#287855"/>
                    <text x="48" y="212" textAnchor="middle" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="6.5" fontWeight="700">J</text>
                    <text x="60" y="212" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="600">Juan Rojas</text>
                    <text x="232" y="212" textAnchor="end" fill="#FFFFFF" fontFamily="ui-sans-serif, system-ui" fontSize="8" fontWeight="700">Bs 980</text>
                    <text x="270" y="212" textAnchor="end" fill="#8FDCB6" fontFamily="ui-sans-serif, system-ui" fontSize="7" fontWeight="700" className="ab-tick">✓ OK</text>
                  </g>
                </svg>
              </div>
              <h3 className="aud__card-title">De planilla a app en 4 pasos</h3>
              <p className="aud__card-desc">Cargás la planilla CSV, Cocoa distribuye al instante. Lanzás en menos de 2 semanas — sin tarjetas, sin papeleo.</p>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}


function ScrollMarquee() {
  const trackRef = React.useRef(null);
  const offsetRef = React.useRef(0);
  const lastScrollRef = React.useRef(typeof window !== 'undefined' ? window.scrollY : 0);
  const directionRef = React.useRef(1);
  const targetSpeedRef = React.useRef(1);
  const speedRef = React.useRef(1);

  React.useEffect(() => {
    let raf;
    let halfWidth = 0;
    const measure = () => {
      const track = trackRef.current;
      if (!track) return;
      halfWidth = track.scrollWidth / 2;
    };
    measure();
    const onResize = () => measure();
    window.addEventListener('resize', onResize);

    const onScroll = () => {
      const y = window.scrollY;
      const delta = y - lastScrollRef.current;
      lastScrollRef.current = y;
      if (Math.abs(delta) > 0.4) {
        directionRef.current = delta > 0 ? 1 : -1;
      }
      // Boost speed when actively scrolling, decay back to baseline
      const boost = Math.min(Math.abs(delta) * 1.4, 40);
      targetSpeedRef.current = 2.2 + boost;
    };
    window.addEventListener('scroll', onScroll, { passive: true });

    const tick = () => {
      // ease speed toward target, then decay target back to baseline
      speedRef.current += (targetSpeedRef.current - speedRef.current) * 0.18;
      targetSpeedRef.current += (2.2 - targetSpeedRef.current) * 0.05;
      offsetRef.current -= directionRef.current * speedRef.current;
      // wrap when we've scrolled one set width
      if (halfWidth > 0) {
        if (offsetRef.current <= -halfWidth) offsetRef.current += halfWidth;
        else if (offsetRef.current > 0) offsetRef.current -= halfWidth;
      }
      const track = trackRef.current;
      if (track) track.style.transform = `translate3d(${offsetRef.current}px, 0, 0)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
      cancelAnimationFrame(raf);
    };
  }, []);

  const phrases = [
    'Tu dinero vale más',
    'Cocoa es lealtad',
    'Pagá. Acumulá. Canjeá',
    '+60 comercios en Bolivia',
    '1 Cocoa = 1 Bs',
    'Validada por la AJ',
  ];
  const sequence = [...phrases, ...phrases];

  return (
    <React.Fragment>
      <style dangerouslySetInnerHTML={{__html: `
        .scroll-marquee {
          background: linear-gradient(180deg, #000000 0%, #0A0612 45%, #140F1F 100%);
          color: var(--paper);
          padding: clamp(2rem, 4vw, 3.25rem) 0;
          overflow: hidden;
          position: relative;
        }
        .scroll-marquee__track {
          display: flex; align-items: center;
          width: max-content;
          will-change: transform;
        }
        .scroll-marquee__item {
          display: inline-flex; align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
          padding-right: clamp(2rem, 4vw, 3.5rem);
          flex-shrink: 0;
        }
        .scroll-marquee__text {
          font-family: var(--font-impact);
          font-size: clamp(3rem, 7.5vw, 7rem);
          line-height: 0.95;
          letter-spacing: -0.025em;
          text-transform: uppercase;
          white-space: nowrap;
          color: var(--paper);
        }
        .scroll-marquee__text--ghost {
          color: transparent;
          -webkit-text-stroke: 2px rgba(255,255,255,0.45);
        }
        .scroll-marquee__coin {
          width: clamp(2.5rem, 6vw, 5.5rem);
          height: clamp(2.5rem, 6vw, 5.5rem);
          flex-shrink: 0;
          color: #5b2ecc;
        }
      `}} />
      <section className="scroll-marquee" aria-hidden="true">
        <div ref={trackRef} className="scroll-marquee__track">
          {sequence.map((p, i) => {
            const ghost = i % 2 === 1;
            return (
              <div key={i} className="scroll-marquee__item">
                <span className={`scroll-marquee__text${ghost ? ' scroll-marquee__text--ghost' : ''}`}>{p}</span>
                <svg className="scroll-marquee__coin" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="28" cy="34" r="22" fill="currentColor" opacity="0.25"/>
                  <circle cx="32" cy="30" r="22" fill="currentColor"/>
                  <circle cx="32" cy="30" r="16" fill="none" stroke="#0A0612" strokeWidth="2" strokeOpacity="0.6"/>
                  <text x="32" y="37" textAnchor="middle" fill="#0A0612" fontFamily="var(--font-impact, ui-sans-serif)" fontSize="20" fontWeight="900">C</text>
                </svg>
              </div>
            );
          })}
        </div>
      </section>
    </React.Fragment>
  );
}

function HomeBody() {
  return (
    <>
      <CinematicCocoa />
      <AudienceB2C />
      <AudienceB2B />
      <ScrollMarquee />
    </>
  );
}

// =====================================================
// WRAPPERS FOR CANVAS
// =====================================================
function HomeV1Full() {
  return (
    <div>
      <Nav active="home" dark />
      <HeroV1 />
      <HomeBody />
      <Footer />
    </div>
  );
}
function HomeV2Full() {
  return (
    <div>
      <Nav active="home" />
      <HeroV2 />
      <HomeBody />
      <Footer />
    </div>
  );
}
function HomeV3Full() {
  return (
    <div>
      <Nav active="home" />
      <HeroV3 />
      <HomeBody />
      <Footer />
    </div>
  );
}

Object.assign(window, {
  HomeV1Full, HomeV2Full, HomeV3Full, HeroV1, HeroV2, HeroV3, HomeBody, COMERCIOS, RUBROS,
  ComerciosGrid, ComerciosMarquee, FeaturesTeaser, HowItWorks, CasosB2B,
  AudienceB2C, AudienceB2B, ScrollMarquee,
});