// sections.jsx — Secciones de la landing CobraNow (excepto hero, que vive en app.jsx)
// Exporta: Nav, HowItWorks, Features, Audiences, NotStrip, FinalCTA, Footer, Reveal

function Reveal({ children, delay = 0, as = 'div', className = '', variant = 'up' }) {
  const ref = React.useRef(null);
  const [state, setState] = React.useState('idle'); // idle -> pre -> in
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;

    if (!window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
      setState('in');
      return;
    }

    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight * 0.92) { setState('in'); return; }

    setState('pre');
    const observer = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      setState('in');
      observer.disconnect();
    }, { rootMargin: '0px 0px -12% 0px', threshold: 0.12 });

    observer.observe(el);
    return () => observer.disconnect();
  }, []);
  const Tag = as;
  const cls = state === 'pre' ? 'pre' : state === 'in' ? 'in' : '';
  return (
    <Tag
      ref={ref}
      className={`cn-reveal cn-reveal-${variant} ${cls} ${className}`}
      style={{ '--reveal-delay': state === 'in' ? `${delay}ms` : '0ms' }}
    >
      {children}
    </Tag>
  );
}

function Wordmark() {
  return (
    <span className="cn-wordmark">Cobra<b>Now</b></span>
  );
}

function Nav() {
  return (
    <nav className="cn-nav">
      <div className="cn-nav-inner">
        <a className="cn-nav-brand" href="#top">
          <img src="assets/cobranow-mark.png" alt="CobraNow" />
          <Wordmark />
        </a>
        <div className="cn-nav-links">
          <a href="#como">Cómo funciona</a>
          <a href="#funciones">Funciones</a>
          <a href="#quien">Para quién</a>
          <a href="CobraNow Bot.html">Demo del bot 🐍</a>
          <a className="cn-btn cn-btn-primary cn-btn-sm" href="#cta">Lista de espera</a>
        </div>
      </div>
    </nav>
  );
}

// ── Cómo funciona ──
function MiniChat() {
  return (
    <div className="cn-step-visual" style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{ alignSelf: 'flex-start', background: 'var(--bg-3)', border: '1px solid var(--line)', borderRadius: 10, borderTopLeftRadius: 3, padding: '6px 10px', fontSize: 12.5, color: 'var(--ink-2)' }}>¿me apartas los 2 vestidos? 😍</div>
      <div style={{ alignSelf: 'flex-end', background: 'var(--wa-out)', borderRadius: 10, borderTopRightRadius: 3, padding: '6px 10px', fontSize: 12.5, color: '#111b21' }}>Son $1,450 los dos</div>
      <div style={{ alignSelf: 'flex-start', background: 'var(--bg-3)', border: '1px solid var(--line)', borderRadius: 10, borderTopLeftRadius: 3, padding: '6px 10px', fontSize: 12.5, color: 'var(--ink-2)' }}>te deposito el viernes 🙏</div>
    </div>
  );
}

function MiniCobro() {
  const row = (l, v, strong) => (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', borderBottom: '1px solid var(--line)', fontSize: 12.5 }}>
      <span style={{ color: 'var(--ink-3)' }}>{l}</span>
      <span style={{ fontWeight: strong ? 700 : 600, color: 'var(--ink)' }}>{v}</span>
    </div>
  );
  return (
    <div className="cn-step-visual">
      {row('Cliente', 'María G.')}
      {row('Monto', '$1,450', true)}
      {row('Concepto', '2 vestidos')}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 8 }}>
        <span style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>Estado</span>
        <div style={{ display: 'flex', gap: 5 }}>
          <span style={{ background: '#FFF4E0', color: '#B25E09', fontWeight: 700, fontSize: 11, padding: '3px 11px', borderRadius: 999 }}>Pendiente</span>
          <span style={{ background: 'var(--bg-2)', color: 'var(--ink-3)', fontWeight: 600, fontSize: 11, padding: '3px 11px', borderRadius: 999, border: '1px solid var(--line)' }}>Pagado</span>
        </div>
      </div>
    </div>
  );
}

// visual del paso 3: la bifurcación según el estado
function MiniDosCaminos() {
  return (
    <div className="cn-step-visual" style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ flexShrink: 0, background: '#FFF4E0', color: '#B25E09', fontWeight: 700, fontSize: 10.5, padding: '3px 9px', borderRadius: 999 }}>Pendiente</span>
        <svg width="14" height="12" viewBox="0 0 14 12" style={{ flexShrink: 0 }}><path d="M1 6h11m0 0L8 2m4 4L8 10" stroke="var(--ink-3)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        <div style={{ flex: 1, background: 'var(--wa-out)', borderRadius: 9, borderTopLeftRadius: 3, padding: '6px 9px', fontSize: 11.5, color: '#111b21', lineHeight: 1.3 }}>Recordatorio listo · “¿sigue en pie el viernes?”</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ flexShrink: 0, background: 'color-mix(in oklab, var(--green) 16%, transparent)', color: 'var(--green-ink)', fontWeight: 700, fontSize: 10.5, padding: '3px 9px', borderRadius: 999 }}>Pagado</span>
        <svg width="14" height="12" viewBox="0 0 14 12" style={{ flexShrink: 0 }}><path d="M1 6h11m0 0L8 2m4 4L8 10" stroke="var(--ink-3)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 7, background: 'var(--bg-3)', border: '1px solid var(--line)', borderRadius: 9, padding: '6px 9px' }}>
          <svg width="18" height="18" viewBox="0 0 30 30" style={{ flexShrink: 0 }}><rect x="4" y="2" width="22" height="26" rx="3" fill="#E2554D"/><path d="M19 2v6h7" fill="#F08B85"/><text x="15" y="21" textAnchor="middle" fontSize="7.5" fontWeight="800" fill="#fff" fontFamily="-apple-system, sans-serif">PDF</text></svg>
          <span style={{ fontSize: 11.5, color: 'var(--ink)', fontWeight: 500 }}>Recibo en PDF</span>
        </div>
      </div>
    </div>
  );
}

function HowItWorks() {
  const steps = [
    { t: 'Reenvíale la venta al bot', p: 'Pedido, apartado, anticipo o un comprobante de pago: reenvíaselo a CobraNow como a cualquier contacto. También lee screenshots y entiende notas de voz.', V: MiniChat },
    { t: 'Queda registrada: pagada o pendiente', p: 'CobraNow saca quién, cuánto y por qué concepto, y detecta si ya te pagaron o si todavía te deben. Todo en una tarjeta, con un tap.', V: MiniCobro },
    { t: 'Hace lo que toca con cada una', p: 'Si aún te deben, te deja el recordatorio listo. Si ya te pagaron, te arma el recibo en PDF. Tú solo reenvías.', V: MiniDosCaminos },
  ];
  return (
    <section className="cn-section" id="como">
      <div className="cn-wrap">
        <Reveal>
          <p className="cn-kicker">Cómo funciona</p>
          <h2 className="cn-h2">Una sola cosa que aprender:<br />tus ventas están pagadas o pendientes.</h2>
          <p className="cn-lead">Reenvía cualquier venta y CobraNow sabe en cuál de las dos cae. Es un contacto más en tu WhatsApp: sin apps nuevas, sin formularios.</p>
        </Reveal>
        <div className="cn-steps">
          {steps.map((s, i) => (
            <Reveal key={s.t} delay={i * 120}>
              <div className="cn-step" style={{ height: '100%' }}>
                <div className="cn-step-num">{i + 1}</div>
                <h3>{s.t}</h3>
                <p>{s.p}</p>
                <s.V />
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Funciones (bento) ──
function DemoTonos() {
  const [tone, setTone] = React.useState(0);
  const msgs = [
    'Hola Carlos 😊 ¿cómo vas? Te escribo por el pendiente de $600 de la reparación. ¿Lo vemos esta semana?',
    'Hola Carlos. Te recuerdo el pago pendiente de $600 por la reparación. ¿Me confirmas fecha?',
    'Carlos, el pago de $600 venció hace 3 días. Necesito que lo resolvamos hoy, por favor.',
    'Estimado Carlos: le recuerdo el saldo pendiente de $600 correspondiente a la reparación. Quedo atento a su confirmación.',
  ];
  const tones = ['Amistoso', 'Directo', 'Urgente', 'Profesional'];
  return (
    <div className="cn-bento-demo">
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 14 }}>
        {tones.map((t, i) => (
          <button key={t} className={`cn-chip ${i === tone ? 'on' : ''}`} style={{ cursor: 'pointer', fontFamily: 'inherit' }} onClick={() => setTone(i)}>{t}</button>
        ))}
      </div>
      <div className="cn-mini" style={{ background: 'var(--wa-out)', border: 'none', color: '#111b21', borderTopRightRadius: 4, lineHeight: 1.45, minHeight: 84 }}>
        {msgs[tone]}
      </div>
    </div>
  );
}

function ReciboPDF({ name, concept, amount, file, size, time }) {
  return (
    <div style={{ maxWidth: 256, background: 'var(--wa-out)', borderRadius: 14, borderTopRightRadius: 4, padding: 8, boxShadow: '0 1px 3px rgba(0,0,0,0.1)' }}>
      <div style={{ borderRadius: 8, overflow: 'hidden', background: '#fff' }}>
        <div style={{ background: '#e9eef2', padding: '11px 11px 0' }}>
          <div style={{ background: '#fff', boxShadow: '0 1px 4px rgba(0,0,0,0.16)', padding: '13px 13px 15px', borderTopLeftRadius: 2, borderTopRightRadius: 2 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, paddingBottom: 8, borderBottom: '1px solid #eee' }}>
              <img src="assets/cobranow-mark.png" alt="" style={{ width: 20, height: 20, objectFit: 'contain' }} />
              <div style={{ lineHeight: 1.1 }}>
                <div style={{ fontSize: 10.5, fontWeight: 800, color: '#111' }}>Recibo de pago</div>
                <div style={{ fontSize: 7, color: '#aeaeb2', letterSpacing: '0.04em' }}>COMPROBANTE NO FISCAL</div>
              </div>
            </div>
            <div style={{ padding: '9px 0', display: 'flex', flexDirection: 'column', gap: 5 }}>
              {[['Recibido de', name], ['Concepto', concept]].map(([l, v]) => (
                <div key={l} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontSize: 8.5 }}>
                  <span style={{ color: '#9aa0a6' }}>{l}</span>
                  <span style={{ color: '#222', fontWeight: 600 }}>{v}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '1px solid #eee', paddingTop: 7 }}>
              <span style={{ fontSize: 8.5, color: '#9aa0a6', fontWeight: 600 }}>TOTAL PAGADO</span>
              <b style={{ fontSize: 16, color: '#111', letterSpacing: 0 }}>{amount}</b>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, marginTop: 9, fontSize: 7.5, fontWeight: 800, color: '#1d7a32', border: '1.5px solid #1d7a32', borderRadius: 4, padding: '3px 7px', letterSpacing: '0.06em', transform: 'rotate(-3deg)' }}>
              <svg width="9" height="9" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="2"></circle><path d="M5 8.2l2 2 4-4.4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path></svg>
              PAGADO
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '9px 11px', background: '#f5f6f6' }}>
          <svg width="26" height="26" viewBox="0 0 30 30" style={{ flexShrink: 0 }}>
            <rect x="4" y="2" width="22" height="26" rx="3" fill="#E2554D"></rect>
            <path d="M19 2v6h7" fill="#F08B85"></path>
            <text x="15" y="21" textAnchor="middle" fontSize="7.5" fontWeight="800" fill="#fff" fontFamily="-apple-system, sans-serif">PDF</text>
          </svg>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11.5, fontWeight: 500, color: '#111b21' }}>{file}</div>
            <div style={{ fontSize: 9.5, color: '#667781' }}>1 página · PDF · {size}</div>
          </div>
          <svg width="22" height="22" viewBox="0 0 26 26" style={{ flexShrink: 0 }}>
            <circle cx="13" cy="13" r="12" fill="none" stroke="#8696a0" strokeWidth="1.4"></circle>
            <path d="M13 7.5v8M9.5 12.5l3.5 3.5 3.5-3.5" stroke="#8696a0" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"></path>
          </svg>
        </div>
      </div>
      <div style={{ fontSize: 10, color: '#667781', textAlign: 'right', marginTop: 4 }}>{time} <span style={{ color: '#53bdeb' }}>✓✓</span></div>
    </div>
  );
}

function DemoRecibo() {
  return (
    <div className="cn-bento-demo">
      <ReciboPDF name="María G." concept="2 vestidos" amount="$1,450" file="Recibo_Maria_1450.pdf" size="28 kB" time="20:15" />
    </div>
  );
}

function DemoControl() {
  const items = [
    { n: 'María G.', s: 'Promesa: hoy', m: '$1,450', dot: '#E8A013' },
    { n: 'Vale M.', s: 'Cobrado hoy ✅', m: '$450', dot: '#34A853', paid: true },
    { n: 'Carlos R.', s: 'Venció hace 3 días', m: '$600', dot: '#E2554D' },
  ];
  return (
    <div className="cn-bento-demo" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {items.map(it => (
        <div key={it.n} className="cn-mini" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 14px' }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: it.dot, flexShrink: 0 }}></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 13.5, color: 'var(--ink)' }}>{it.n}</div>
            <div style={{ fontSize: 11.5, color: it.paid ? 'var(--green-ink)' : 'var(--ink-3)' }}>{it.s}</div>
          </div>
          <b style={{ fontSize: 14, color: 'var(--ink)', letterSpacing: 0 }}>{it.m}</b>
        </div>
      ))}
    </div>
  );
}

function DemoPromesas() {
  return (
    <div className="cn-bento-demo">
      <div className="cn-mini" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 600 }}>JUNIO</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, textAlign: 'center', fontSize: 12 }}>
          {['L','M','M','J','V','S','D'].map((d, i) => <span key={i} style={{ color: 'var(--ink-3)', fontSize: 10.5 }}>{d}</span>)}
          {[8,9,10,11,12,13,14].map(d => (
            <span key={d} style={{
              padding: '5px 0', borderRadius: 8, fontWeight: 600,
              background: d === 12 ? 'var(--green)' : d === 9 ? 'color-mix(in oklab, var(--green) 14%, transparent)' : 'transparent',
              color: d === 12 ? '#fff' : 'var(--ink)',
            }}>{d}</span>
          ))}
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--ink-2)', display: 'flex', gap: 6, alignItems: 'center' }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--green)' }}></span>
          Vie 12 · María prometió depositar $1,450
        </div>
      </div>
    </div>
  );
}

function DemoPagoInmediato() {
  return (
    <div className="cn-bento-demo" style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 420 }}>
      <div style={{ alignSelf: 'flex-start', maxWidth: '90%', background: 'var(--wa-in, #fff)', border: '1px solid var(--line)', borderRadius: 12, borderTopLeftRadius: 3, padding: '8px 11px', boxShadow: '0 1px 2px rgba(0,0,0,0.08)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 10.5, fontStyle: 'italic', color: 'var(--ink-3)', marginBottom: 3 }}>
          <svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor"><path d="M9 3v3C4 6.5 1.8 9.8 1 13c2-2.2 4.5-3.3 8-3.3V13l6-5-6-5z"></path></svg>
          Reenviado · Vale 💅
        </div>
        <div style={{ fontSize: 13, color: 'var(--ink)' }}>¡Listo! Ya te transferí los <b>$450</b> del esmaltado ✨</div>
      </div>
      <div style={{ alignSelf: 'flex-end', maxWidth: '92%', background: 'var(--wa-out)', borderRadius: 12, borderTopRightRadius: 3, padding: '9px 12px', fontSize: 13, lineHeight: 1.45, color: '#111b21', boxShadow: '0 1px 2px rgba(0,0,0,0.1)' }}>
        ⚡ Pago al contado registrado:<br /><b>Vale · $450</b> · esmaltado · <b>Pagado ✅</b><br />Junio: <b>$7,200 cobrados</b> 🐍 ya le hago su recibo.
      </div>
    </div>
  );
}

function Features() {
  const cards = [
    { t: 'Recordatorios en tu tono', p: 'Mismo cobro, cuatro maneras de decirlo. Elige el tono según el cliente y la situación, sin sonar improvisado ni grosero.', D: DemoTonos },
    { t: 'Tu día en una pregunta', p: 'Pregúntale “¿cómo voy?” cuando quieras: lo que ya cobraste hoy, lo que te deben y a quién escribirle. Nada de tableros complicados.', D: DemoControl },
    { t: 'Promesas con fecha', p: '“Te pago el viernes” deja de ser palabra al aire. El bot guarda la promesa y te avisa cuando llega el día.', D: DemoPromesas },
    { t: 'Recibo en PDF al pagar', p: 'Cuando el cliente paga, el bot te manda un comprobante sencillo (no fiscal) como archivo de WhatsApp, listo para reenviar y cerrar con estilo.', D: DemoRecibo },
  ];
  return (
    <section className="cn-section cn-section-alt" id="funciones">
      <div className="cn-wrap">
        <Reveal>
          <p className="cn-kicker">Funciones</p>
          <h2 className="cn-h2">Las dos mitades de cada venta,<br />resueltas en el chat que ya usas.</h2>
          <p className="cn-lead">Pendiente o pagada, CobraNow se encarga: recordatorios para lo que te deben, recibos para lo que ya entró. No procesa pagos ni toca tu dinero, solo te ayuda a no perder ninguno.</p>
        </Reveal>
        <div className="cn-bento">
          <Reveal className="cn-bento-wide">
            <div className="cn-bento-card" style={{ height: '100%', flexDirection: 'row', flexWrap: 'wrap', gap: 32, alignItems: 'center' }}>
              <div style={{ flex: '1 1 300px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <h3>El otro lado: registra lo que ya te pagaron.</h3>
                <p>Muchas ventas se cobran al instante y el cliente manda su comprobante ahí mismo. Reenvíaselo al bot: lo marca como <b>pagado</b>, lo suma a tu mes y te arma el recibo. La otra cara de la misma libreta: no solo lo que te deben, también lo que ya entró.</p>
              </div>
              <div style={{ flex: '1 1 320px' }}><DemoPagoInmediato /></div>
            </div>
          </Reveal>
          {cards.map((c, i) => (
            <Reveal key={c.t} delay={(i % 2) * 120}>
              <div className="cn-bento-card" style={{ height: '100%' }}>
                <h3>{c.t}</h3>
                <p>{c.p}</p>
                <c.D />
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Por qué no solo ChatGPT ──
function WhyNotAI() {
  const points = [
    ['Vive en tu WhatsApp', 'No abres otra app ni copias y pegas: le reenvías el chat y ya.'],
    ['Se acuerda de todo', 'Cada venta y cada cobro quedan guardados. Una IA genérica olvida al cerrar.'],
    ['Te busca a ti', 'Te avisa de lo que vence hoy. Una IA cualquiera solo responde si le escribes.'],
    ['Hecho para tu negocio', 'Entiende montos, fechas y estados de pago, no solo conversa.'],
  ];
  return (
    <section className="cn-section" id="porque">
      <div className="cn-wrap">
        <Reveal>
          <p className="cn-kicker">Más que una IA genérica</p>
          <h2 className="cn-h2">¿Por qué no solo ChatGPT?</h2>
          <p className="cn-lead">Podrías pegarle tus chats a una IA cualquiera. Pero esa es una hoja en blanco a la que vuelves a explicarle todo cada vez. CobraNow vive donde vendes y se acuerda de lo que te deben.</p>
          <div className="cn-why">
            {points.map(([t, s]) => (
              <div className="cn-why-item" key={t}>
                <span className="cn-why-check">
                  <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M3 8.4l3.2 3L13 4.6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
                <div>
                  <div className="t">{t}</div>
                  <div className="s">{s}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Para quién ──
function Audiences() {
  const auds = ['Vendedoras de catálogo', 'Boutiques', 'Repostería y comida', 'Uñas y belleza', 'Reparaciones y servicios', 'Tutores y clases', 'Freelancers', 'Agencias pequeñas'];
  return (
    <section className="cn-section" id="quien">
      <div className="cn-wrap">
        <Reveal>
          <p className="cn-kicker">Para quién</p>
          <h2 className="cn-h2">Si vendes por WhatsApp,<br />CobraNow es para ti.</h2>
          <p className="cn-lead">Para todos los que cierran ventas en el chat y no quieren perder la cuenta de lo que venden ni de lo que les deben.</p>
          <div className="cn-aud-row">
            {auds.map(a => <span key={a} className="cn-aud">{a}</span>)}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Lo que no es ──
function NotStrip() {
  const items = [
    ['No procesa pagos.', 'El dinero sigue llegando como siempre: depósito, transferencia, efectivo.'],
    ['No es facturación fiscal.', 'Genera recibos simples, no comprobantes fiscales.'],
    ['No es un CRM ni un ERP.', 'Es una libreta de ventas y cobros, no un sistema corporativo.'],
    ['No cobra por ti.', 'Tú revisas, tú decides, tú envías. CobraNow solo te deja todo listo.'],
  ];
  return (
    <section className="cn-section cn-section-alt">
      <div className="cn-wrap">
        <Reveal>
          <p className="cn-kicker">Claridad ante todo</p>
          <h2 className="cn-h2">Lo que CobraNow no es.</h2>
          <p className="cn-lead">Herramienta ligera, promesa honesta. WhatsApp sigue siendo tuyo; nosotros solo llevamos la cuenta de tus ventas y cobros.</p>
          <div className="cn-not">
            {items.map(([b, s]) => (
              <div key={b} className="cn-not-item">
                <span className="x">✕</span>
                <span><b>{b}</b> {s}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── CTA final + footer ──
function FinalCTA() {
  const [val, setVal] = React.useState('');
  const [done, setDone] = React.useState(false);
  const [status, setStatus] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    const email = val.trim();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setStatus('Escribe un correo válido para apuntarte.');
      return;
    }
    setBusy(true);
    setStatus('Guardando...');
    try {
      const params = new URLSearchParams(window.location.search);
      const response = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email,
          company,
          source: 'cobra-landing',
          page: window.location.href,
          referralCode: params.get('ref') || '',
          utmSource: params.get('utm_source') || '',
        }),
      });
      const data = await response.json().catch(() => ({}));
      if (!response.ok || !data.ok) throw new Error(data.error || 'waitlist_failed');
      setVal('');
      setDone(true);
      setStatus('');
    } catch (_) {
      setStatus('No se pudo guardar. Inténtalo de nuevo en un momento.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <section className="cn-section" id="cta">
      <div className="cn-wrap">
        <Reveal>
          <div className="cn-final">
            <div className="glow"></div>
            <img src="assets/cobranow-mark.png" alt="" style={{ width: 68, height: 68, objectFit: 'contain', position: 'relative', marginBottom: 18 }} />
            <h2 className="cn-h2" style={{ color: '#f5f5f7' }}>Estamos abriendo CobraNow<br />poco a poco.</h2>
            <p className="cn-sub" style={{ maxWidth: 460, margin: '0 auto 28px' }}>Déjanos tu correo y sé de los primeros en saber cuando abramos. Con prioridad para entrar.</p>
            {done ? (
              <div className="cn-wl-done">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="2"/><path d="M7 12.5l3.2 3L17 8.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                ¡Listo! Estás en la lista. Te avisamos por correo.
              </div>
            ) : (
              <form className="cn-wl-form" onSubmit={submit}>
                <input className="cn-honey" type="text" tabIndex="-1" autoComplete="off" value={company} onChange={(e) => setCompany(e.target.value)} aria-hidden="true" />
                <input className="cn-wl-input" type="email" inputMode="email" placeholder="Tu correo" value={val} onChange={(e) => setVal(e.target.value)} disabled={busy} />
                <button className="cn-btn cn-btn-primary cn-btn-lg" type="submit" disabled={busy}>{busy ? 'Guardando...' : 'Apúntame'}</button>
              </form>
            )}
            {status && <span className="cn-wl-status">{status}</span>}
            <span className="cn-final-note">Ya somos 240+ en la lista · sin spam, solo el aviso</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="cn-footer">
      <div className="cn-wrap cn-footer-inner">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <img src="assets/cobranow-mark.png" alt="" style={{ width: 20, height: 20, objectFit: 'contain' }} />
          <span>CobraNow © 2026 · El control de tus ventas y cobros, al lado de tu WhatsApp.</span>
        </div>
        <div style={{ display: 'flex', gap: 20 }}>
          <span>Privacidad</span>
          <span>Términos</span>
          <span>Contacto</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, HowItWorks, Features, WhyNotAI, Audiences, NotStrip, FinalCTA, Footer, Reveal, Wordmark });