// components-sections.jsx — all sections except Hero, Control Center
const { useState: useS, useEffect: useE, useRef: useR } = React;
const SD = () => window.SINDICATO;

/* ============================================================ */
function Nav({ navInvert }){
  const [open, setOpen] = useS(false);
  return (
    <header className={`nav ${navInvert ? 'invert' : ''}`}>
      <div className="nav-in">
        <a className="brand-mark" href="#top" aria-label="Sindicato">
          <img src="assets/sindicato-negro.svg" alt="Sindicato"/>
          <span className="brand-sub">A Peltier<br/>Group company</span>
        </a>
        <nav className={`nav-links ${open ? 'open' : ''}`} aria-label="Principal">
          {SD().NAV.map(n => (
            <a key={n.href} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>
          ))}
        </nav>
        <div className="nav-cta">
          <a className="btn btn-primary btn-sm nav-cta-btn" href="#demo" aria-label="Agendar demo guiada">
            <span className="lbl lbl-full">Agendar demo guiada</span>
            <span className="lbl lbl-short">Demo</span>
            <span className="ar" aria-hidden="true">↗</span>
          </a>
          <button className="nav-toggle" onClick={() => setOpen(!open)} aria-label="Menú" aria-expanded={open}>{open ? '×' : '≡'}</button>
        </div>
      </div>
    </header>
  );
}

/* ============================================================ */
// ProofStrip: una sola unidad combinada, logos grandes, sin marquee
function ProofStrip(){
  const T = SD().TRUST;
  return (
    <section className="proof-strip" aria-label="Marcas con las que hemos trabajado">
      <div className="wrap-wide">
        <div className="proof-head reveal-fast">
          <h2 className="proof-headline">{T.headline}</h2>
          <p className="proof-sub">{T.sub}</p>
        </div>
        <div className="proof-grid reveal-fast">
          {T.items.map((l, i) => (
            <div className="proof-item" key={i} title={l.nm}>
              <img src={l.src} alt={l.nm} loading="lazy"/>
            </div>
          ))}
        </div>
        <p className="proof-disclaimer reveal-fast">{T.disclaimer}</p>
      </div>
    </section>
  );
}

/* ============================================================ */
function Manifesto(){
  const P = SD().PROBLEM;
  const stages = SD().FLOW;
  return (
    <section className="manifesto" id="problema">
      <div className="wrap-wide">
        <div className="m-grid">
          <div className="reveal">
            <h2>{P.headline}<br/><span className="or">{P.accent}</span></h2>
          </div>
          <div className="manifesto-side reveal">
            <p>{P.body}</p>
          </div>
        </div>

        {/* Comparador: sin sistema vs con B2Boost · pasos explícitos en prosa */}
        <div className="dolor reveal">
          <div className="dol-col broken">
            <div className="dol-title">Sin un sistema</div>
            <ol className="dol-list">
              <li><span className="n">01</span><span className="t">El anuncio genera un lead.</span></li>
              <li><span className="n">02</span><span className="t">Entra por WhatsApp o un formulario.</span></li>
              <li className="break"><span className="n">✕</span><span className="t">Nadie registra de qué campaña vino.</span></li>
              <li className="break"><span className="n">✕</span><span className="t">No hay responsable claro de atenderlo.</span></li>
              <li className="break"><span className="n">✕</span><span className="t">El lead se enfría sin seguimiento.</span></li>
            </ol>
            <div className="dol-foot bad">Pérdida silenciosa de oportunidad</div>
          </div>
          <div className="dol-col healed">
            <div className="dol-title">Con B2Boost Paid Media</div>
            <ol className="dol-list">
              <li><span className="n">01</span><span className="t">El anuncio genera un lead.</span></li>
              <li><span className="n">02</span><span className="t">Entra al CRM con origen, mensaje y ruta.</span></li>
              <li><span className="n">03</span><span className="t">Se asigna a un responsable con contexto.</span></li>
              <li><span className="n">04</span><span className="t">Hay seguimiento por etapa, con alertas.</span></li>
              <li><span className="n">05</span><span className="t">Avanza por el funnel o se descarta con razón.</span></li>
            </ol>
            <div className="dol-foot ok">Avance comercial medible</div>
          </div>
        </div>

        <div className="flow reveal">
          {stages.map((s,i) => (
            <div className="flow-stage" key={i} style={{'--i': i}}>
              <span className="n">{s[0]}</span>
              <span className="ttl">{s[1]}</span>
              <span className="sub">{s[2]}</span>
              {i < stages.length-1 && <span className="arr" aria-hidden="true">↗</span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
// Mini-diagramas tipográficos por capacidad · sin iconos, brand-safe
function CapVisual({n}){
  if (n === '01') return (
    <div className="cap-vis vis-converge" aria-hidden="true">
      <div className="vc-row">
        <span className="vc-pt">Meta</span>
        <span className="vc-pt">Google</span>
        <span className="vc-pt">TikTok</span>
        <span className="vc-pt">LinkedIn</span>
      </div>
      <svg className="vc-funnel" viewBox="0 0 200 36" preserveAspectRatio="none">
        <line x1="25" y1="0" x2="100" y2="32" />
        <line x1="75" y1="0" x2="100" y2="32" />
        <line x1="125" y1="0" x2="100" y2="32" />
        <line x1="175" y1="0" x2="100" y2="32" />
      </svg>
      <div className="vc-out"><span className="vc-dot"></span><span>Ruta de conversión</span></div>
    </div>
  );
  if (n === '02') return (
    <div className="cap-vis vis-tag" aria-hidden="true">
      <div className="vt-chip">
        <span className="vt-l">Lead</span>
        <span className="vt-id">#R-4124</span>
      </div>
      <div className="vt-meta">
        <span><b>Origen</b> Meta · Promo Q2</span>
        <span><b>Ruta</b> Landing B</span>
        <span><b>Responsable</b> NLA</span>
      </div>
    </div>
  );
  if (n === '03') return (
    <div className="cap-vis vis-stages" aria-hidden="true">
      <div className="vo-track">
        <div className="vo-step done"><span className="vo-dot"></span><span className="vo-lb">Nuevo</span></div>
        <div className="vo-step done"><span className="vo-dot"></span><span className="vo-lb">Contactado</span></div>
        <div className="vo-step now"><span className="vo-dot"></span><span className="vo-lb">Calificando</span></div>
        <div className="vo-step"><span className="vo-dot"></span><span className="vo-lb">Propuesta</span></div>
      </div>
      <div className="vo-foot">Cada paso queda asignado, registrado y con alerta.</div>
    </div>
  );
  if (n === '04') return (
    <div className="cap-vis vis-cadence" aria-hidden="true">
      <div className="vd-weeks">
        <div className="vd-wk done"><span className="vd-lb">Sem 1</span><div className="vd-bar"></div></div>
        <div className="vd-wk done"><span className="vd-lb">Sem 2</span><div className="vd-bar"></div></div>
        <div className="vd-wk now"><span className="vd-lb">Sem 3</span><div className="vd-bar"></div></div>
        <div className="vd-wk"><span className="vd-lb">Sem 4</span><div className="vd-bar"></div></div>
      </div>
      <div className="vd-foot">Reporte mensual + Control Center continuo.</div>
    </div>
  );
  return null;
}

function Capabilities(){
  const caps = SD().CAPABILITIES;
  const [hover, setHover] = useS(null);
  return (
    <section className="cap-sec" id="sistema">
      <div className="wrap-wide">
        <div className="sec-head reveal">
          <h2>Cuatro capas, una sola lógica.</h2>
          <p className="lead-mixed">El sistema lee la pauta, la convierte en lead con contexto, lo opera con disciplina y la decisión vuelve a alimentar la pauta. No es una lista de servicios: es un circuito.</p>
        </div>

        <div className="cap-diagram reveal">
          <div className="cap-flow">
            {caps.map((c, i) => (
              <div
                className={`cap-node ${hover===i ? 'on' : ''}`}
                data-n={c.title}
                key={c.n}
                style={{'--i': i}}
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(null)}
              >
                <div className="head">
                  <span className="num">{c.n}</span>
                </div>
                <h3 className="ttl">{c.title}</h3>
                <p className="one">{c.one}</p>
                <CapVisual n={c.n}/>
              </div>
            ))}
          </div>
          <div className="cap-loopback reveal-fast" aria-hidden="true">
            <span className="cap-loop-line"></span>
            <span className="cap-loop-label">La decisión vuelve a alimentar la pauta</span>
            <span className="cap-loop-line"></span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
function Setup(){
  const S = SD().SETUP;
  const T = SD().SETUP_TIERS;
  const B = SD().SETUP_BRIDGE;
  return (
    <section className="setup-sec" id="setup">
      <div className="wrap-wide">
        <div className="setup-grid">
          <div className="setup-side reveal">
            <h2>{S.headline}<br/><span className="or">{S.headlineAccent}</span></h2>
            <p className="lead-mixed" style={{marginTop:24}}>{S.body1}</p>
            <p className="lead-mixed" style={{marginTop:14}}>{S.body2}</p>
            <p className="setup-closer">{S.closer}</p>
          </div>
          <div className="setup-card reveal">
            <div className="sc-label">{S.cardLabel}</div>
            <ul className="sc-list">
              {S.bullets.map((b, i) => (
                <li key={i} style={{'--i': i}}><span className="sc-bullet" aria-hidden="true"></span><span>{b}</span></li>
              ))}
            </ul>
          </div>
        </div>

        <div className="setup-tiers reveal">
          {T.map((t, i) => (
            <div className="st-card" key={t.key} style={{'--i': i}}>
              <div className="st-head">
                <span className="st-key">{t.key}</span>
                <span className="st-price-label">{t.priceLabel}</span>
                <span className="st-price">{t.price}</span>
              </div>
              <p className="st-copy">{t.copy}</p>
            </div>
          ))}
        </div>

        {B && (
          <div className="setup-bridge reveal" role="note">
            <span className="sb-text">{B.text}</span>
            <a className="sb-link" href={B.href}>
              <span>{B.cta}</span>
              <span className="ar" aria-hidden="true">↗</span>
            </a>
          </div>
        )}
      </div>
    </section>
  );
}

/* ============================================================ */
function Pricing(){
  const d = SD();
  const PI = d.PRICING_INTRO;
  const PC = d.PRICING_CLOSER;
  const C = d.CUSTOM;
  const [sel, setSel] = useS(1);
  return (
    <section className="price-sec" id="pricing">
      <div className="wrap-wide">
        <div className="sec-head reveal">
          <h2>El sistema se configura según cómo vendes hoy.</h2>
          <p className="lead-mixed">No todas las empresas necesitan empezar en el mismo punto. Algunas necesitan validar un canal. Otras, entender qué mover. Otras, conectar pauta, CRM, seguimiento y operación comercial. La idea no es vender más: es ubicar qué configuración tiene sentido para la etapa actual de la operación.</p>
        </div>

        {PI && (
          <div className="price-intro reveal" role="note">
            <h3 className="pi-head">{PI.headline}</h3>
            <div className="pi-body">
              {PI.body.map((t, i) => <p key={i}>{t}</p>)}
              {PI.bodyEmph && <p className="pi-emph">{PI.bodyEmph}</p>}
            </div>
          </div>
        )}

        <div className="price-stage reveal">
          {d.PRICING.map((p, i) => {
            const totalMin = p.hon + p.pmin;
            const totalMax = p.hon + p.pmax;
            return (
              <div className={`price-card ${sel===i ? 'on' : ''} ${p.feat ? 'featured' : ''}`} key={p.key} onClick={() => setSel(i)} role="button" tabIndex={0} style={{'--i': i}}>
                <div className="top">
                  <div>
                    <div className="name">{p.key}</div>
                    <div className="sub">{p.sub}</div>
                  </div>
                  {p.feat && <span className="flag">{p.flag}</span>}
                </div>
                <p className="copy">{p.copy}</p>

                <div className="num-block">
                  <ul className="price-breakdown">
                    <li>
                      <span className="pb-k">Fee de agencia</span>
                      <span className="pb-v">{pesoFull(p.hon)} MXN / mes</span>
                    </li>
                    <li>
                      <span className="pb-k">Pauta sugerida</span>
                      <span className="pb-v">{pesoFull(p.pmin)} a {pesoFull(p.pmax)} MXN / mes</span>
                    </li>
                    <li className="pb-total">
                      <span className="pb-k">Inversión mensual estimada</span>
                      <span className="pb-v">{pesoFull(totalMin)} a {pesoFull(totalMax)} MXN</span>
                    </li>
                    <li>
                      <span className="pb-k">Setup inicial</span>
                      <span className="pb-v">desde {pesoFull(p.setup)} MXN</span>
                    </li>
                  </ul>
                  <div className="num-foot">3 meses mínimo · bonificable a 6 o 12</div>
                </div>

                <div className="group">
                  <h5>Buen punto de entrada si necesitas</h5>
                  <ul>{p.good.map((g,j) => <li key={j}>{g}</li>)}</ul>
                </div>

                <div className="sessions-block">
                  <div className="sess-title">{p.sessions}</div>
                  <div className="sess-detail">{p.sessionsDetail}</div>
                </div>

                <div className="cta">
                  <a className={`btn ${p.feat ? 'btn-primary' : 'btn-ghost'}`} href="#demo" onClick={(e)=>e.stopPropagation()}>
                    <span className="lbl">{p.cta}</span>
                    <span className="ar" aria-hidden="true">↗</span>
                  </a>
                </div>
              </div>
            );
          })}

          <div className="price-card custom">
            <div>
              <div className="name">Custom</div>
              <div className="sub" style={{marginTop:10}}>{C.sub}</div>
              <p className="copy">{C.copy}</p>
            </div>
            <ul className="price-breakdown custom-breakdown">
              <li>
                <span className="pb-k">Fee de agencia</span>
                <span className="pb-v">{C.feeText}</span>
              </li>
              <li>
                <span className="pb-k">Pauta sugerida</span>
                <span className="pb-v">{C.pautaText}</span>
              </li>
              <li className="pb-total">
                <span className="pb-k">Inversión mensual estimada</span>
                <span className="pb-v">{C.totalText}</span>
              </li>
              <li>
                <span className="pb-k">Setup inicial</span>
                <span className="pb-v">{C.setupText}</span>
              </li>
            </ul>
            <div>
              <a className="btn btn-primary" href="#configuracion">
                <span className="lbl">{C.cta}</span>
                <span className="ar" aria-hidden="true">↗</span>
              </a>
            </div>
          </div>
        </div>

        {PC && (
          <p className="price-closer reveal">{PC}</p>
        )}
      </div>
    </section>
  );
}

/* ============================================================ */
// COMPARADOR · "Qué activa cada configuración" (después de Pricing)
function Comparator(){
  const C = SD().COMPARATOR;
  return (
    <section className="cmp-sec" id="comparador">
      <div className="wrap-wide">
        <div className="sec-head reveal">
          <h2>{C.headline}</h2>
          <p className="lead-mixed">{C.sub}</p>
        </div>

        <div className="cmp-table reveal" role="table">
          <div className="cmp-row cmp-head" role="row">
            <div className="cmp-cell cmp-k" role="columnheader">Capacidad</div>
            {C.tiers.map(t => (
              <div className={`cmp-cell cmp-tier ${t==='Signal' ? 'feat' : ''}`} role="columnheader" key={t}>{t}</div>
            ))}
          </div>
          {C.rows.map((r, i) => (
            <div className={`cmp-row ${r.k==='Cuándo conviene subir' ? 'cmp-last' : ''}`} role="row" key={i} style={{'--i': i}}>
              <div className="cmp-cell cmp-k" role="rowheader">{r.k}</div>
              {r.vals.map((v, j) => (
                <div className={`cmp-cell cmp-v ${j===1 ? 'feat' : ''}`} role="cell" key={j}>{v}</div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
// EXTENSIONS · capacidades opcionales (después de Comparator, antes de Configurator)
function Extensions(){
  const E = SD().EXTENSIONS;
  return (
    <section className="ext-sec" id="extensiones">
      <div className="wrap-wide">
        <div className="sec-head reveal">
          <h2>{E.headline}</h2>
          <p className="lead-mixed">{E.sub1}</p>
          <p className="lead-mixed" style={{marginTop:8}}>{E.sub2}</p>
        </div>

        <div className="ext-grid reveal">
          {E.items.map((it, i) => (
            <div className="ext-card" key={it.key} style={{'--i': i}}>
              <div className="ext-head">
                <span className="ext-key">{it.key}</span>
                <span className="ext-from">{it.from}</span>
              </div>
              <div className="ext-range">
                <span className="ext-range-label">Rango habitual</span>
                <span className="ext-range-val">{it.range}</span>
              </div>
              <p className="ext-copy">{it.copy}</p>
            </div>
          ))}
        </div>

        <p className="ext-disclaimer reveal">{E.disclaimer}</p>
      </div>
    </section>
  );
}

/* ============================================================ */
/* ============================================================
   DEMO NOTE + LEAD FORM
   Tracking: Meta Pixel Lead · GA4 generate_lead · dataLayer form_submit
   Storage: Web3Forms (email) + Klaviyo Client API (CRM)
   Replicado de b2boost-os.pages.dev (mismos IDs operativos de Sindicato)
   ============================================================ */
const KLAVIYO_COMPANY_ID = 'Wpj6Tn';   // Public API key Sindicato
const KLAVIYO_LIST_ID    = 'UwFEs6';   // B2Boost · Leads landing
const KLAVIYO_API_REV    = '2024-10-15';
const WEB3FORMS_KEY      = '81b3314c-af34-45fa-9186-79be8de7d3be';

function toE164MX(raw){
  if(!raw) return '';
  const d = raw.replace(/\D/g,''); if(!d) return '';
  if(d.startsWith('52') && d.length>=12) return '+'+d;
  if(d.length===10) return '+52'+d;
  return '+'+d;
}
function getUtms(){
  try{
    const p = new URLSearchParams(location.search), u = {};
    ['utm_source','utm_medium','utm_campaign','utm_content','utm_term'].forEach(k=>{const v=p.get(k);if(v)u[k]=v});
    return u;
  }catch(e){ return {}; }
}

function DemoForm(){
  const [f, setF] = useS({nombre:'',empresa:'',cargo:'',correo:'',whatsapp:'',industria:'',ciudad:'',comentarios:'',consent:false});
  const [status, setStatus] = useS('idle'); // idle | sending | sent | error
  const [err, setErr] = useS('');
  const upd = (k,v) => setF(s => ({...s, [k]: v}));

  const submit = async (ev) => {
    ev.preventDefault();
    if (status === 'sending' || status === 'sent') return;
    const correoOk = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.correo);
    if (!(f.nombre && f.empresa && correoOk)){
      setErr('Faltan datos: nombre, empresa y correo válido.');
      setStatus('error');
      return;
    }
    setErr('');
    setStatus('sending');

    // Tracking
    try{ if(typeof fbq==='function') fbq('track','Lead',{content_name:f.industria||'paid_media',content_category:'B2Boost Paid Media',value:0,currency:'MXN'}); }catch(e){}
    try{ if(typeof gtag==='function') gtag('event','generate_lead',{method:'form',industria:f.industria,empresa:f.empresa,origen:'sindicato_paid_demo'}); }catch(e){}
    (window.dataLayer = window.dataLayer || []).push({event:'form_submit',form_name:'sindicato_paid_demo',industria:f.industria,empresa:f.empresa});

    // Web3Forms (email notification)
    const fd = new FormData();
    fd.append('access_key', WEB3FORMS_KEY);
    fd.append('subject', 'Lead B2Boost Paid Media · '+f.empresa+' · solicitud de demo');
    fd.append('from_name', 'B2Boost Paid Media · sindicato-paid.pages.dev');
    fd.append('botcheck', '');
    fd.append('nombre', f.nombre);
    fd.append('empresa', f.empresa);
    fd.append('cargo', f.cargo);
    fd.append('correo', f.correo);
    fd.append('whatsapp', f.whatsapp);
    fd.append('industria', f.industria);
    fd.append('ciudad', f.ciudad);
    fd.append('comentarios', f.comentarios);
    fd.append('consentimiento_marketing', f.consent ? 'sí' : 'no');
    fd.append('origen', 'sindicato_paid_demo');
    fd.append('fecha_envio', new Date().toISOString());
    const utms = getUtms();
    Object.keys(utms).forEach(k => fd.append(k, utms[k]));

    let ok = false;
    try {
      const r = await fetch('https://api.web3forms.com/submit', {method:'POST',headers:{'Accept':'application/json'},body:fd});
      const j = await r.json();
      ok = r.status === 200 && j.success;
      if (!ok) console.warn('Web3Forms no-ok:', j);
    } catch(e){ console.warn('Web3Forms failed:', e); }

    // Klaviyo subscribe (fire-and-forget)
    try {
      const body = {data:{type:'subscription',attributes:{
        custom_source:'B2Boost Paid Media · landing',
        profile:{data:{type:'profile',attributes:{
          email: f.correo,
          phone_number: toE164MX(f.whatsapp) || undefined,
          first_name: f.nombre,
          organization: f.empresa,
          title: f.cargo || undefined,
          properties: {
            b2boost_paid_industria: f.industria,
            b2boost_paid_ciudad: f.ciudad,
            b2boost_paid_comentarios: f.comentarios,
            b2boost_paid_consentimiento_marketing: f.consent ? 'si' : 'no',
            b2boost_paid_origen: 'sindicato_paid_landing',
            b2boost_paid_fecha_envio: new Date().toISOString(),
            ...utms,
          }
        }}}
      },relationships:{list:{data:{type:'list',id:KLAVIYO_LIST_ID}}}}};
      fetch('https://a.klaviyo.com/client/subscriptions/?company_id='+KLAVIYO_COMPANY_ID, {
        method:'POST',
        headers:{'Content-Type':'application/json','revision':KLAVIYO_API_REV},
        body: JSON.stringify(body)
      }).catch(e => console.warn('Klaviyo:', e));
    } catch(e){}

    if (ok) {
      setStatus('sent');
    } else {
      setStatus('error');
      setErr('No se pudo enviar. Intenta de nuevo o escríbenos por WhatsApp.');
    }
  };

  if (status === 'sent') {
    return (
      <div className="dn-confirm reveal">
        <h3>Listo. Recibimos tu solicitud de demo.</h3>
        <p>Un ejecutivo revisará tu información y te contactará para coordinar la sesión.</p>
        <span className="dn-confirm-meta">{f.nombre} · {f.empresa} · {f.correo}</span>
      </div>
    );
  }

  const sending = status === 'sending';
  return (
    <form className="dn-form reveal" onSubmit={submit} noValidate>
      <div className="dn-grid">
        <div className="lf">
          <label htmlFor="df_nombre">Nombre <span className="req">*</span></label>
          <input id="df_nombre" type="text" autoComplete="name" value={f.nombre} onChange={e=>upd('nombre',e.target.value)} required/>
        </div>
        <div className="lf">
          <label htmlFor="df_empresa">Empresa / organización <span className="req">*</span></label>
          <input id="df_empresa" type="text" autoComplete="organization" value={f.empresa} onChange={e=>upd('empresa',e.target.value)} required/>
        </div>
        <div className="lf">
          <label htmlFor="df_cargo">Cargo</label>
          <input id="df_cargo" type="text" autoComplete="organization-title" value={f.cargo} onChange={e=>upd('cargo',e.target.value)}/>
        </div>
        <div className="lf">
          <label htmlFor="df_correo">Correo <span className="req">*</span></label>
          <input id="df_correo" type="email" autoComplete="email" value={f.correo} onChange={e=>upd('correo',e.target.value)} required/>
        </div>
        <div className="lf">
          <label htmlFor="df_wa">WhatsApp</label>
          <input id="df_wa" type="tel" autoComplete="tel" value={f.whatsapp} onChange={e=>upd('whatsapp',e.target.value)}/>
        </div>
        <div className="lf">
          <label htmlFor="df_industria">Industria / sector</label>
          <input id="df_industria" type="text" value={f.industria} onChange={e=>upd('industria',e.target.value)}/>
        </div>
        <div className="lf">
          <label htmlFor="df_ciudad">Ciudad</label>
          <input id="df_ciudad" type="text" value={f.ciudad} onChange={e=>upd('ciudad',e.target.value)}/>
        </div>
        <div className="lf full">
          <label htmlFor="df_coment">Comentarios</label>
          <textarea id="df_coment" rows="3" value={f.comentarios} onChange={e=>upd('comentarios',e.target.value)}/>
        </div>
      </div>
      <label className="dn-consent">
        <input type="checkbox" checked={f.consent} onChange={e=>upd('consent',e.target.checked)}/>
        <span>Acepto recibir información comercial de Sindicato.</span>
      </label>
      <div className="dn-submit">
        <button type="submit" className="btn btn-primary" disabled={sending}>
          <span className="lbl">{sending ? 'Enviando…' : 'Agendar demo guiada'}</span>
          <span className="ar" aria-hidden="true">↗</span>
        </button>
        {status === 'error' && err && <span className="dn-err">{err}</span>}
      </div>
    </form>
  );
}

function DemoNote(){
  const d = SD().DEMO_NOTE;
  return (
    <section className="demo-note" id="demo">
      <div className="wrap-wide">
        <div className="dn-shell reveal">
          <div className="dn-tag">Demo guiada</div>
          <div className="dn-body">
            <h3 className="dn-title">{d.title}</h3>
            <p className="dn-text">{d.body}</p>
          </div>
        </div>
        <DemoForm/>
      </div>
    </section>
  );
}

/* ============================================================ */
function Configurator(){
  const QS = SD().CONFIG_QS;
  const [ans, setAns] = useS({});
  const rec = computeRec(ans);
  const recData = SD().PRICING.find(p => p.key === rec.key) || SD().PRICING[0];

  return (
    <section className="cfg-sec" id="configuracion">
      <div className="wrap-wide">
        <div className="sec-head reveal">
          <h2>Ubica tu configuración en 4 preguntas.</h2>
          <p className="lead-mixed">Responde rápido. No te pedimos correo ni teléfono. Llegamos a una recomendación con su rango estimado.</p>
        </div>

        <div className="cfg-shell reveal">
          <div className="cfg-controls">
            {QS.map(q => (
              <div className="cfg-q" key={q.id}>
                <div className="q">{q.q}</div>
                <div className="opts">
                  {q.opts.map(o => (
                    <button
                      key={o.v}
                      className={`cfg-opt ${ans[q.id]===o.v ? 'on' : ''}`}
                      onClick={() => setAns(a => ({...a, [q.id]: o.v}))}
                      type="button"
                    >
                      {o.l}
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div className="cfg-output">
            {Object.keys(ans).length === 0 ? (
              <div className="cfg-result placeholder">
                <div className="rec">Responde las preguntas</div>
                <h3>Para ubicar tu configuración</h3>
                <p className="why">Elige tus respuestas a la izquierda y el sistema elige la configuración que tiene sentido para tu etapa.</p>
              </div>
            ) : (
              <div className="cfg-result" key={`r-${rec.key}`}>
                <div className="rec">{rec.label}</div>
                <h3>B2Boost {rec.key}</h3>
                <p className="why">{rec.why}</p>
              </div>
            )}
            <div className="cfg-numbers">
              {(() => {
                const empty = Object.keys(ans).length === 0;
                const isCustom = rec.key === 'Custom';
                const C = SD().CUSTOM;
                const tier = recData;
                const fee = empty ? '-' : isCustom ? C.feeText : pesoFull(tier.hon)+' MXN / mes';
                const pauta = empty ? '-' : isCustom ? C.pautaText : pesoFull(tier.pmin)+' a '+pesoFull(tier.pmax)+' MXN / mes';
                const total = empty ? '-' : isCustom ? C.totalText : pesoFull(tier.hon+tier.pmin)+' a '+pesoFull(tier.hon+tier.pmax)+' MXN';
                const setup = empty ? '-' : isCustom ? C.setupText : 'desde '+pesoFull(tier.setup)+' MXN';
                const ritmo = empty ? '-' : isCustom ? 'Según operación' : (tier.sessions || '-');
                const ritmoDetail = empty ? '' : isCustom ? 'Definido al cierre del setup.' : (tier?.sessionsDetail || '');
                const K = rec.key + '-' + Object.keys(ans).length;
                return (
                  <>
                    <div className="n">
                      <div className="k">Fee de agencia</div>
                      <div className="v" key={'fee-'+K}>{fee}</div>
                    </div>
                    <div className="n">
                      <div className="k">Pauta sugerida</div>
                      <div className="v" key={'pauta-'+K}>{pauta}</div>
                    </div>
                    <div className="n cfg-num-total">
                      <div className="k">Inversión mensual estimada</div>
                      <div className="v" key={'total-'+K}>{total}</div>
                      <div className="s">{empty ? '' : 'Fee + pauta'}</div>
                    </div>
                    <div className="n">
                      <div className="k">Setup inicial</div>
                      <div className="v" key={'setup-'+K}>{setup}</div>
                      <div className="s">{empty ? '' : '3 meses mínimo · bonificable a 6 o 12'}</div>
                    </div>
                    <div className="n">
                      <div className="k">Ritmo de decisión</div>
                      <div className="v" key={'ritmo-'+K}>{ritmo}</div>
                      <div className="s">{ritmoDetail}</div>
                    </div>
                  </>
                );
              })()}
            </div>
            {SD().CONFIG_NOTE && <p className="cfg-note">{SD().CONFIG_NOTE}</p>}
            <div className="cfg-actions">
              <a className="btn btn-primary" href="#demo">
                <span className="lbl">Agendar demo guiada</span>
                <span className="ar" aria-hidden="true">↗</span>
              </a>
              <a className="btn btn-ghost-light" href="#pricing">
                <span className="lbl">Ver paquetes</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function computeRec(ans){
  if (ans.goal === 'integrar' || ans.stage === 'avanzado'){
    return { key:'Custom', label:'Configuración sugerida · Arquitectura', why:'Tu operación ya tiene piezas en marcha que conviene integrar antes de cotizar. Diseñamos la arquitectura, no un paquete cerrado.' };
  }
  if (ans.stage === 'sin' || ans.goal === 'validar'){
    return { key:'Start', label:'Configuración sugerida · Punto de entrada', why:'Buen punto para validar un canal con estructura mínima y empezar a registrar qué pasa con los leads. Sin sobredimensionar la inversión.' };
  }
  if (ans.goal === 'conectar' || (ans.crm === 'crm' && ans.team !== '1')){
    return { key:'Control', label:'Configuración sugerida · Operación madura', why:'Tu operación está lista para conectar pauta con CRM y leer avance por etapa. El sistema toma decisiones por lead, cita, propuesta y oportunidad.' };
  }
  return { key:'Signal', label:'Configuración sugerida · Escalón natural', why:'Ya tienes campañas corriendo. Signal te ayuda a comparar mensajes, audiencias y rutas, y a entender qué vale la pena escalar.' };
}

/* ============================================================ */
// RESULTS — featured strip of real numbers + disclaimer
function Results(){
  const R = SD().RESULTS;
  return (
    <section className="results-sec" id="resultados">
      <div className="wrap-wide">
        <div className="sec-head reveal">
          <h2>{R.headline}</h2>
          <p className="lead-mixed">{R.sub}</p>
        </div>

        <div className="results-grid reveal">
          {R.items.map((it, i) => (
            <div className="result-tile" key={i} style={{'--i': i}}>
              <div className="rt-num">{it.v}</div>
              <div className="rt-k">{it.k}</div>
              <div className="rt-d">{it.d}</div>
            </div>
          ))}
        </div>

        <p className="results-disclaimer reveal">{R.disclaimer}</p>
      </div>
    </section>
  );
}

/* ============================================================ */
// Helper · resolve cover image (manual override or default hero.jpg)
function caseImg(c){
  return c.coverImage || `assets/cases/${c.slug}/hero.jpg`;
}

// Render a single case card · feature variant supports 2x2 span
function CaseCard({c, i, peltier, asLink}){
  const Tag = asLink ? 'a' : 'div';
  const props = asLink ? {href:'#demo'} : {};
  return (
    <Tag className={`case-card ${peltier ? 'peltier-card' : ''} ${c.feature ? 'feature' : ''}`} key={c.slug} style={{'--i': i}} {...props}>
      <div className="cc-img" style={{backgroundImage:`url(${caseImg(c)})`}} role="img" aria-label={c.nm}>
        <div className="cc-fallback" aria-hidden="true">
          <span className="cc-fb-name">{c.nm}</span>
          <span className="cc-fb-cat">{c.cat}</span>
        </div>
      </div>
      <div className="cc-meta">
        <span className="cc-nm">{c.nm}</span>
        <span className="cc-cat">{c.cat}</span>
        {c.desc && <span className="cc-desc">{c.desc}</span>}
      </div>
    </Tag>
  );
}

/* ============================================================ */
// CasesDigital · 6 items con feature 2x2 + 5 secondary, evidencia Paid Media
function CasesDigital(){
  const C = SD().CASES_DIGITAL;
  return (
    <section className="cases-sec digital" id="casos-digitales">
      <div className="wrap-wide">
        <div className="sec-head reveal">
          <h2>{C.headline}</h2>
          <p className="lead-mixed">{C.sub}</p>
        </div>

        <div className="cases-grid digital reveal">
          {C.items.map((c, i) => <CaseCard key={c.slug} c={c} i={i} asLink/>)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
// CasesPeltier · 8 items, etiqueta clara como capacidad de grupo (no prueba directa)
function CasesPeltier(){
  const C = SD().CASES_PELTIER;
  return (
    <section className="cases-sec peltier" id="peltier">
      <div className="wrap-wide">
        <div className="sec-head reveal">
          <span className="eyebrow">{C.eyebrow}</span>
          <h2 style={{marginTop:24}}>{C.headline}</h2>
          <p className="lead-mixed">{C.sub}</p>
        </div>

        <div className="cases-grid peltier reveal">
          {C.items.map((c, i) => <CaseCard key={c.slug} c={c} i={i} peltier/>)}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
function Family(){
  const f = SD().FAMILY;
  return (
    <section className="fam-sec" id="b2boost">
      <div className="fam-row">
        <div className="fam-card paid reveal">
          <div className="lockup"><img src={f.paid.logo} alt={f.paid.name}/></div>
          <div className="sys-tag">{f.paid.sys}</div>
          <h3>{f.paid.name}</h3>
          <p className="copy">{f.paid.copy}</p>
          <div className="actions">
            <a className="btn btn-primary" href={f.paid.href}>
              <span className="lbl">{f.paid.cta}</span>
              <span className="ar" aria-hidden="true">↗</span>
            </a>
          </div>
        </div>
        <div className="fam-card live reveal">
          <div className="lockup"><img src={f.live.logo} alt={f.live.name}/></div>
          <div className="sys-tag">{f.live.sys}</div>
          <h3>{f.live.name}</h3>
          <p className="copy">{f.live.copy}</p>
          <div className="actions">
            <a className="btn btn-light" href={f.live.href}>
              <span className="lbl">{f.live.cta}</span>
              <span className="ar" aria-hidden="true">↗</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
function LiveSection({ light=false, animIntensity=1 }){
  const frames = SD().LIVE_FRAMES;
  const reduced = window.useReducedMotion ? window.useReducedMotion() : false;
  const motionOn = !reduced && animIntensity > 0.05;
  const [cur, setCur] = useS(0);
  useE(() => {
    if (!motionOn) return;
    const id = setInterval(() => setCur(c => (c+1) % frames.length), 2400 / Math.max(animIntensity, 0.3));
    return () => clearInterval(id);
  }, [motionOn, animIntensity]);

  return (
    <section className={`live-sec ${light ? 'light' : ''}`} id="live">
      <div className="live-grid">
        <div className="live-side reveal">
          <h2>Un stand lleno no sirve si el seguimiento queda vacío.</h2>
          <p className="lead-mixed">Captura ordenada, calificación inmediata y registro con origen. Cada visitante queda asignado, no extraviado.</p>
          <div style={{display:'flex',gap:12,flexWrap:'wrap',marginTop:24}}>
            <a className="btn btn-ghost-light" href="#live">
              <span className="lbl">Ver B2Boost Live</span>
            </a>
          </div>
        </div>
        <div className="live-stage">
          <div className="lockup"><img src={light ? 'assets/b2boost-negro.svg' : 'assets/b2boost-blanco.svg'} alt="B2Boost Live"/></div>
          <div className="ls-frames">
            {frames.map((f, i) => (
              <div className={`ls-row ${i===cur ? 'on' : ''}`} key={i}>
                <span className="num">{f.n}</span>
                <div>
                  <div className="ttl">{f.t}</div>
                  <div className="sub">{f.s}</div>
                </div>
                <span className="pill">{f.pill}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
function FAQ(){
  const items = SD().FAQ;
  const [open, setOpen] = useS(0);
  return (
    <section className="faq-sec" id="faq">
      <div className="wrap-wide">
        <div className="faq-grid">
          <div className="reveal">
            <h2>Preguntas frecuentes.</h2>
            <p className="lead-mixed" style={{marginTop:24}}>Las dudas que llegan más seguido, respondidas con la misma claridad con la que opera el sistema.</p>
          </div>
          <div className="faq-items reveal">
            {items.map((it, i) => (
              <div className={`faq-item ${open===i ? 'open' : ''}`} key={i}>
                <button className="faq-q" onClick={() => setOpen(open===i ? -1 : i)} aria-expanded={open===i}>
                  <span>{it.q}</span><span className="ic" aria-hidden="true"></span>
                </button>
                <div className="faq-a"><div><p>{it.a}</p></div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ */
function FinalCta(){
  return (
    <section className="final" id="cierre">
      <div className="wrap-wide">
        <h2 className="reveal">Deja de operar campañas sueltas.<br/><span className="w">Construye un sistema.</span></h2>
        <div className="actions reveal">
          <a className="btn btn-dark" href="#demo">
            <span className="lbl">Agendar demo guiada</span>
            <span className="ar" aria-hidden="true">↗</span>
          </a>
          <a className="btn btn-light" href="#configuracion">
            <span className="lbl">Configurar mi sistema</span>
            <span className="ar" aria-hidden="true">↗</span>
          </a>
        </div>
        <div className="meta">Sindicato · Unidad de adquisición y trazabilidad comercial · A Peltier Group company</div>
      </div>
    </section>
  );
}

/* ============================================================ */
function Footer(){
  return (
    <footer>
      <div className="footer-statement" aria-hidden="true">EL RESULTADO</div>
      <div className="wrap-wide">
        <div className="footer-content">
          <div className="footer-brand">
            <img src="assets/sindicato-blanco.svg" alt="Sindicato"/>
          </div>
          <div className="footer-products">
            <img src="assets/b2boost-blanco.svg" alt="B2Boost"/>
          </div>
          <div className="footer-claim">El resultado es <span className="or">el que manda.</span></div>
          <div className="footer-actions">
            <a className="btn btn-primary" href="#demo">
              <span className="lbl">Agendar demo guiada</span>
              <span className="ar" aria-hidden="true">↗</span>
            </a>
            <a className="btn btn-ghost-light" href="#configuracion">
              <span className="lbl">Configurar mi sistema</span>
            </a>
          </div>
        </div>
        <div className="footer-eco">
          <span className="fe-label">Ecosistema</span>
          <div className="fe-links">
            <a href="https://peltiermkt.com/" target="_blank" rel="noopener">
              <span>Peltier Group</span>
              <span className="ar" aria-hidden="true">↗</span>
            </a>
            <span className="fe-sep" aria-hidden="true">·</span>
            <a href="https://b2boost-os.pages.dev/" target="_blank" rel="noopener">
              <span>B2Boost OS</span>
              <span className="ar" aria-hidden="true">↗</span>
            </a>
          </div>
          <span className="fe-note">B2Boost Paid Media es la oferta principal de esta landing. Peltier Group respalda institucionalmente. B2Boost OS es el sistema operativo del ecosistema.</span>
        </div>

        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Sindicato · Peltier Group</span>
          <div className="footer-meta">
            <span>Insurgentes Sur 866, Del Valle, CDMX</span>
            <a href="mailto:hola@peltiermkt.com">hola@peltiermkt.com</a>
            <span>B2Boost Paid Media · B2Boost Live</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, ProofStrip, Manifesto, Capabilities, Setup, Family, Pricing,
  Comparator, Extensions, DemoNote, Configurator, Results, CasesDigital, CasesPeltier,
  LiveSection, FAQ, FinalCta, Footer
});