// publicidad-sections.jsx — secciones nuevas para /publicidad
// Depende de window.K, window.waLink (de shell.jsx) y window.PricingSection (de pricing-section.jsx).
// Exporta: EscalaStrip, CaseStudies, EnterpriseTier, ProcesoTimeline, UpsellsRow, MiniGallery, PublicidadFAQ, DualCTA

// ─── ESCALA STRIP — tagline de escala justo después del hero ──────────────────
function EscalaStrip() {
  const stats = [
    { val: '695K+', lbl: 'personas reales que sí abren las notis' },
    { val: '100K+', lbl: 'vistas que el promedio de tu reel cruza' },
    { val: '90+',   lbl: 'marcas que ya pasaron por aquí' },
    { val: '0%',    lbl: 'pauta · todo orgánico' },
  ];
  return (
    <section style={{ background: K.ink, color: K.paper, padding: '26px 44px', borderBottom: `3px solid ${K.ink}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {stats.map((s, i) => (
          <div key={i} style={{ borderRight: i < 3 ? `1px dashed rgba(244,241,234,0.25)` : 'none', paddingRight: 20 }}>
            <div style={{ fontFamily: K.display, fontSize: 'clamp(34px, 4vw, 54px)', lineHeight: 1, letterSpacing: '-1px', color: K.lime }}>{s.val}</div>
            <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 1.5, marginTop: 8, opacity: 0.8 }}>{s.lbl}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── CASE STUDIES — 3 anchors: Japi Ramen / Hakuna Caguama / Frituur ──────────
function CaseStudies() {
  const cases = [
    {
      brand: 'Japi Ramen', handle: 'japiramen', tier: 'ramen · CDMX',
      bg: K.lime, fg: K.ink, kicker: 'caso reciente · 3 sem en vivo',
      summary: 'Paquete mini: 1 reel + 2 stories. Mercado Lázaro Cárdenas, Del Valle. Publicado el 3 de abril, sigue creciendo orgánico sin pauta.',
      metrics: [{ val: '190K', lbl: 'vistas totales' }, { val: '13.3K', lbl: 'likes' }, { val: '7.0%', lbl: 'del público interactuó' }],
      note: 'Reel verificable en @ciendetodo · DWrd2xEjj-L · 100s de duración.',
    },
    {
      brand: 'Hakuna Caguama', handle: 'hakunacaguama', tier: 'bar · CDMX',
      bg: K.yellow, fg: K.ink, kicker: 'caso viral',
      summary: 'Reel único de 44s. Cruzó medio millón de vistas orgánicas y trajo gente al lugar el fin de semana siguiente.',
      metrics: [{ val: '503K', lbl: 'vistas totales' }, { val: '21K', lbl: 'likes' }, { val: '241K', lbl: 'cuentas alcanzadas' }],
      note: 'Reel DMRdcP7uQsh · jul 2025 · sigue sumando vistas 9+ meses después.',
    },
    {
      brand: 'Frituur', handle: 'frituur.mx', tier: 'comida · Cuauhtémoc, CDMX',
      bg: K.cyan, fg: K.ink, kicker: 'caso eficiente',
      summary: 'Reel de 32s, corto y directo. La gente lo ve varias veces seguidas: por eso suma tantas vistas en tan poco tiempo.',
      metrics: [{ val: '250K', lbl: 'vistas totales' }, { val: '9.4K', lbl: 'likes' }, { val: '4.4×', lbl: 'veces que se repitió' }],
      note: 'Reel DMI5MyhueRI · jul 2025 · muy alta repetición.',
    },
  ];
  return (
    <section id="casos" style={{ padding: '70px 44px 50px', background: K.paper, borderBottom: `3px solid ${K.ink}`, position: 'relative' }}>
      <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ casos destacados</div>
      <div style={{ fontFamily: K.display, fontSize: 'clamp(40px,6vw,72px)', textTransform: 'uppercase', lineHeight: 0.95, marginTop: 4, letterSpacing: '-1.5px' }}>
        así se ve <span style={{ fontStyle: 'italic', background: K.ink, color: K.lime, padding: '0 10px', display: 'inline-block', transform: 'rotate(-1.5deg)' }}>en vivo</span>
      </div>
      <div style={{ fontFamily: K.mono, fontSize: 12, color: K.dim, marginTop: 10, maxWidth: 640 }}>
        Tres reels, tres lugares, números reales. Cero pauta, cero filtros. Verificables en @ciendetodo.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 34 }}>
        {cases.map((c, i) => (
          <div key={i} style={{
            background: c.bg, color: c.fg, border: `3px solid ${K.ink}`,
            boxShadow: `6px 6px 0 ${K.ink}`, padding: '20px 22px 22px', position: 'relative',
          }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.7 }}>{c.kicker}</div>
            <div style={{ fontFamily: K.display, fontSize: 28, textTransform: 'uppercase', marginTop: 4, lineHeight: 1, letterSpacing: '-0.5px' }}>{c.brand}</div>
            <div style={{ fontFamily: K.mono, fontSize: 10, opacity: 0.7, marginTop: 4, letterSpacing: 1 }}>@{c.handle} · {c.tier}</div>

            <div style={{ fontFamily: K.sans, fontSize: 13.5, lineHeight: 1.5, marginTop: 16 }}>{c.summary}</div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginTop: 18, paddingTop: 14, borderTop: `1.5px dashed rgba(10,10,10,0.25)` }}>
              {c.metrics.map((m, j) => (
                <div key={j}>
                  <div style={{ fontFamily: K.display, fontSize: 22, lineHeight: 1, letterSpacing: '-0.3px' }}>{m.val}</div>
                  <div style={{ fontFamily: K.mono, fontSize: 9, textTransform: 'uppercase', letterSpacing: 1.2, opacity: 0.65, marginTop: 4 }}>{m.lbl}</div>
                </div>
              ))}
            </div>

            <div style={{ fontFamily: K.mono, fontSize: 10, opacity: 0.55, marginTop: 12, fontStyle: 'italic' }}>{c.note}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── ENTERPRISE TIER — 4to paquete custom, debajo del grid ────────────────────
function EnterpriseTier() {
  return (
    <section id="enterprise" style={{ padding: '40px 44px 60px', background: K.ink, borderBottom: `3px solid ${K.ink}`, position: 'relative' }}>
      <div style={{
        background: K.paper, color: K.ink, border: `3px solid ${K.paper}`,
        boxShadow: `8px 8px 0 ${K.accent}`,
        padding: '28px 30px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 30, alignItems: 'center',
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute', top: -16, left: 28,
          background: K.lime, color: K.ink, padding: '5px 14px',
          fontFamily: K.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.5,
          border: `3px solid ${K.ink}`, boxShadow: `3px 3px 0 ${K.ink}`, textTransform: 'uppercase',
        }}>★ enterprise · custom</div>
        <div>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ para marcas grandes</div>
          <div style={{ fontFamily: K.display, fontSize: 'clamp(32px,4.2vw,52px)', textTransform: 'uppercase', lineHeight: 0.95, marginTop: 4, letterSpacing: '-1px' }}>
            ¿manejas <span style={{ fontStyle: 'italic', background: K.ink, color: K.lime, padding: '0 8px', display: 'inline-block' }}>varias marcas</span><br/>o campañas grandes?
          </div>
          <div style={{ fontFamily: K.sans, fontSize: 14, lineHeight: 1.55, marginTop: 14, color: '#333', maxWidth: 520 }}>
            Armamos campañas a la medida cuando un solo reel ya no cubre lo que necesitas: varias piezas, varias ciudades, integración con tu pauta, o un acuerdo anual. <b>Factura con IVA, orden de compra y NDA</b> están cubiertos. Nos acoplamos a tu proceso.
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 18 }}>
            <a href="#contacto-b2b" data-k-cursor="cotizar a la medida" style={{
              padding: '12px 18px', background: K.ink, color: K.paper,
              border: `3px solid ${K.ink}`, boxShadow: `4px 4px 0 ${K.accent}`,
              fontFamily: K.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', textDecoration: 'none',
            }}>↓ cotizar a la medida</a>
            <a href={waLink('Hola Konecta, soy de una marca o agencia. Necesito cotizar una campaña a la medida (multi-reel o multi-ciudad). ¿Hablamos?')} target="_blank" rel="noreferrer" data-k-cursor="whatsapp directo" data-cta="pub-enterprise" style={{
              padding: '12px 18px', background: 'transparent', color: K.ink,
              border: `3px solid ${K.ink}`,
              fontFamily: K.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', textDecoration: 'none',
            }}>whatsapp directo ↗</a>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim, marginBottom: 10 }}>puede incluir</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', fontFamily: K.sans, fontSize: 13, lineHeight: 1.6 }}>
            {[
              'Campañas multi-reel (4+ piezas)',
              'Multi-ciudad: CDMX, GDL, MTY u otras (viáticos cotizados)',
              'Factura CFDI con IVA',
              'Orden de compra a 30 / 60 días · contrato anual',
              'NDA y exclusividad por categoría',
              'Reporte mensual a la medida (alcance, repeticiones, guardados)',
            ].map((item, j) => (
              <li key={j} style={{ paddingLeft: 22, position: 'relative', marginBottom: 6 }}>
                <span style={{ position: 'absolute', left: 0, top: 0, fontWeight: 700, color: K.accent }}>✓</span>
                {item}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ─── PROCESO TIMELINE — horizontal, 4 pasos ───────────────────────────────────
function ProcesoTimeline() {
  const steps = [
    { n: '01', d: 'día 1', t: 'Elige paquete',     desc: 'Escríbenos por WhatsApp. En <2h te mandamos propuesta + disponibilidad.',        hue: K.paper },
    { n: '02', d: 'día 2–3', t: 'Brief + agenda',    desc: 'Llenamos juntos el brief (30 min). Cerramos fecha y lugar de grabación.',         hue: K.yellow },
    { n: '03', d: 'día 4–5', t: 'Grabación',         desc: 'Llega nuestro equipo a tu lugar. 50% del pago ese día. Tú solo dejas la puerta abierta.', hue: K.lime },
    { n: '04', d: 'día 6–8', t: 'Edición y publicación', desc: 'Te mandamos el reel para visto bueno. Publicamos en día de alta audiencia.',     hue: K.cyan },
  ];
  return (
    <section id="proceso" style={{ padding: '70px 44px 50px', background: K.paperAlt, borderBottom: `3px solid ${K.ink}` }}>
      <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ proceso</div>
      <div style={{ fontFamily: K.display, fontSize: 'clamp(40px,6vw,72px)', textTransform: 'uppercase', lineHeight: 0.95, marginTop: 4, letterSpacing: '-1.5px' }}>
        de <span style={{ fontStyle: 'italic' }}>cero</span> a publicado <span style={{ background: K.accent, color: '#fff', padding: '0 10px', display: 'inline-block', transform: 'rotate(-1deg)' }}>en 6–8 días</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginTop: 34, border: `3px solid ${K.ink}`, background: '#fff' }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            background: s.hue, padding: '24px 20px 22px',
            borderRight: i < 3 ? `3px solid ${K.ink}` : 'none',
            position: 'relative', minHeight: 220,
          }}>
            <div style={{ fontFamily: K.display, fontSize: 64, lineHeight: 1, color: K.ink, opacity: 0.15, position: 'absolute', top: 8, right: 14 }}>{s.n}</div>
            <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>{s.d}</div>
            <div style={{ fontFamily: K.display, fontSize: 22, textTransform: 'uppercase', lineHeight: 1, marginTop: 8, letterSpacing: '-0.5px' }}>{s.t}</div>
            <div style={{ fontFamily: K.sans, fontSize: 13, lineHeight: 1.55, marginTop: 14 }}>{s.desc}</div>
            {i < 3 && (
              <div style={{ position: 'absolute', right: -14, top: '50%', transform: 'translateY(-50%)', fontFamily: K.display, fontSize: 28, color: K.ink, background: K.paperAlt, padding: '0 4px', zIndex: 2 }}>→</div>
            )}
          </div>
        ))}
      </div>

      {/* upsells row */}
      <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {[
          { t: 'Hora extra de grabación', v: '+$1,000 MXN', d: 'si la grabación se extiende.' },
          { t: 'Cuenta aliada extra',     v: '+$2,000 MXN', d: 'publicamos también en una 4ta cuenta amiga.' },
          { t: 'Viáticos fuera de CDMX',  v: 'cotizar',     d: 'GDL, MTY, Mérida, etc.: transporte + hospedaje.' },
        ].map((u, i) => (
          <div key={i} style={{ background: '#fff', border: `2.5px solid ${K.ink}`, padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, background: K.ink, color: K.lime, padding: '2px 6px', letterSpacing: 1.5, fontWeight: 700, textTransform: 'uppercase', whiteSpace: 'nowrap' }}>+ extra</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: K.display, fontSize: 14, textTransform: 'uppercase', letterSpacing: '-0.2px' }}>{u.t}</div>
              <div style={{ fontFamily: K.mono, fontSize: 11, color: K.dim, marginTop: 2 }}>{u.v} · {u.d}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── MINI GALLERY — 6 reels con eng rate ──────────────────────────────────────
function MiniGallery() {
  // Top 6 reels por vistas. Datos reales auditados de @ciendetodo.
  const reels = [
    { brand: 'Hakuna Caguama',  handle: 'ciendetodo', shortcode: 'DMRdcP7uQsh', tier: 'bar · CDMX',           views: '503K', reach: '241K', viral: true  },
    { brand: 'Onn & Off',        handle: 'ciendetodo', shortcode: 'DOZUxEBkmla', tier: 'experiencia · CDMX',  views: '454K', reach: '243K', viral: true  },
    { brand: 'Frituur',          handle: 'ciendetodo', shortcode: 'DMI5MyhueRI', tier: 'comida · Cuauhtémoc', views: '250K', reach: '56K',  viral: true  },
    { brand: 'Richeese',         handle: 'ciendetodo', shortcode: 'DIkpUbkuu_n', tier: 'comida · CDMX',       views: '222K', reach: '54K',  viral: false },
    { brand: 'Japi Ramen',       handle: 'ciendetodo', shortcode: 'DWrd2xEjj-L', tier: 'ramen · Del Valle',   views: '190K', reach: '114K', viral: false },
    { brand: 'Magia del Bosque', handle: 'ciendetodo', shortcode: 'DWKBZ39jhvL', tier: 'hospedaje · Puebla',  views: '134K', reach: '69K',  viral: false },
  ];
  return (
    <section id="reels" style={{ padding: '70px 44px 60px', background: K.paper, borderBottom: `3px solid ${K.ink}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap', marginBottom: 30 }}>
        <div>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ muestras · métricas auditadas</div>
          <div style={{ fontFamily: K.display, fontSize: 'clamp(34px,5vw,58px)', textTransform: 'uppercase', lineHeight: 0.95, marginTop: 4, letterSpacing: '-1px' }}>
            6 reels · <span style={{ fontStyle: 'italic', background: K.lime, padding: '0 8px' }}>vistas reales</span>
          </div>
        </div>
        <a href="/#resultados" data-k-cursor="ver los 10" style={{
          fontFamily: K.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
          padding: '10px 16px', border: `3px solid ${K.ink}`, textDecoration: 'none', color: K.ink, background: '#fff',
        }}>ver los 10 completos ↗</a>
      </div>

      <div data-k-grid="reels-mini" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {reels.map((r, i) => (
          <a
            key={i}
            href={`https://www.instagram.com/ciendetodo/reel/${r.shortcode}/`}
            target="_blank"
            rel="noreferrer"
            data-k-cursor={`ver reel @${r.handle}`}
            data-k-reel-card
            style={{
              border: `3px solid ${K.ink}`, color: K.ink, textDecoration: 'none',
              position: 'relative', aspectRatio: '4/5', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
              boxShadow: `5px 5px 0 ${K.ink}`, overflow: 'hidden',
              backgroundImage: `url(konecta/reels/${r.shortcode}.webp)`,
              backgroundSize: 'cover',
              backgroundPosition: 'center 35%',
              backgroundColor: K.ink,
            }}
          >
            {/* gradient overlay para legibilidad del footer */}
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.78) 100%)',
              pointerEvents: 'none',
            }} />

            {r.viral && (
              <div style={{
                position: 'absolute', top: 12, right: 12, background: K.accent, color: '#fff',
                padding: '3px 8px', fontFamily: K.mono, fontSize: 9, fontWeight: 700, letterSpacing: 1.5, border: `2px solid ${K.ink}`, textTransform: 'uppercase', zIndex: 2,
              }}>★ viral</div>
            )}

            {/* play indicator top-left */}
            <div style={{
              position: 'absolute', top: 12, left: 12, zIndex: 2,
              background: 'rgba(10,10,10,0.72)', color: K.paper,
              padding: '4px 8px', fontFamily: K.mono, fontSize: 9, letterSpacing: 1.5, textTransform: 'uppercase',
              display: 'flex', alignItems: 'center', gap: 6,
              border: `1.5px solid rgba(244,241,234,0.4)`,
            }}>
              <span style={{ fontSize: 8 }}>▶</span> reel
            </div>

            {/* footer info, sobre el degradado */}
            <div style={{ position: 'relative', zIndex: 2, color: K.paper, padding: '14px 16px 16px' }}>
              <div style={{ fontFamily: K.mono, fontSize: 9.5, textTransform: 'uppercase', letterSpacing: 1.5, opacity: 0.85 }}>{r.tier}</div>
              <div style={{ fontFamily: K.display, fontSize: 22, textTransform: 'uppercase', lineHeight: 1, marginTop: 3, letterSpacing: '-0.3px' }}>{r.brand}</div>

              <div style={{
                marginTop: 12, paddingTop: 10,
                borderTop: `1.5px solid rgba(244,241,234,0.28)`,
                display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
              }}>
                <div>
                  <div style={{ fontFamily: K.display, fontSize: 26, lineHeight: 1, letterSpacing: '-0.5px' }}>{r.views}</div>
                  <div style={{ fontFamily: K.mono, fontSize: 9, opacity: 0.75, textTransform: 'uppercase', letterSpacing: 1.2, marginTop: 3 }}>vistas</div>
                </div>
                <div>
                  <div style={{ fontFamily: K.display, fontSize: 26, lineHeight: 1, letterSpacing: '-0.5px' }}>{r.reach}</div>
                  <div style={{ fontFamily: K.mono, fontSize: 9, opacity: 0.75, textTransform: 'uppercase', letterSpacing: 1.2, marginTop: 3 }}>alcance</div>
                </div>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ─── FAQ — preguntas específicas de publicidad ────────────────────────────────
function PublicidadFAQ() {
  const faqs = [
    { q: '¿Puedo elegir la fecha de publicación?',
      a: 'Sí. Elegimos juntos en el brief. Priorizamos días de alta audiencia (mar–jue, vier tarde), pero si tu marca tiene una fecha específica (apertura, lanzamiento, estacionalidad) la respetamos.' },
    { q: '¿Qué pasa si no me gusta el reel?',
      a: 'Te mandamos el corte para visto bueno 2 días antes de publicar (o el mismo día, según calendario). Incluye 1 ronda de ajustes menores (cortes, orden, texto). Revisiones adicionales o cambios estructurales se cotizan aparte.' },
    { q: '¿Facturan con IVA?',
      a: 'Sí. Si necesitas factura con IVA te facturamos con el RFC de la marca al cierre. Para flujos B2B más grandes (PO, 30/60 días, contratos anuales), escríbenos directo: cotizamos a la medida.' },
    { q: '¿Puedo elegir en cuál de las 3 cuentas se publica?',
      a: 'Lo elegimos según el tipo de lugar: @descubre.cdmx (288K · lugares de la capital), @mexicoexplorers (138K · viajes y destinos en México) o @ciendetodo (32.8K · comida y experiencias variadas). Si tu marca encaja en 2 cuentas, publicamos en ambas sin costo extra.' },
    { q: '¿Y si se extiende la grabación?',
      a: 'Cada paquete incluye hasta 3 horas de grabación. Hora extra: $1,000 MXN. Te avisamos en el momento antes de cobrarla. Cero sorpresas.' },
    { q: '¿Trabajan fuera de CDMX?',
      a: 'Sí. Cubrimos CDMX y Edo. Mex. sin costo extra. Para Puebla, Morelos, Hidalgo, Querétaro, GDL, MTY u otros estados, los viáticos (transporte y hospedaje del equipo) se cotizan aparte y se cierran antes de agendar.' },
    { q: '¿Cuál es el alcance real por paquete?',
      a: 'Los mínimos garantizados son 40K / 80K / 120K vistas. En la práctica, la mayoría de nuestros reels cruza las 100K por red social. Si no llegamos al mínimo, te damos una segunda visita gratis con el mismo paquete.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq-pub" style={{ padding: '70px 44px 60px', background: K.paperAlt, borderBottom: `3px solid ${K.ink}` }}>
      <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ preguntas frecuentes</div>
      <div style={{ fontFamily: K.display, fontSize: 'clamp(40px,6vw,72px)', textTransform: 'uppercase', lineHeight: 0.95, marginTop: 4, letterSpacing: '-1.5px', marginBottom: 30 }}>
        dudas <span style={{ fontStyle: 'italic', background: K.yellow, padding: '0 10px' }}>resueltas</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        {faqs.map((f, i) => {
          const isOpen = open === i;
          return (
            <button key={i} onClick={() => setOpen(isOpen ? -1 : i)} style={{
              textAlign: 'left', background: isOpen ? K.ink : '#fff', color: isOpen ? K.paper : K.ink,
              border: `3px solid ${K.ink}`, padding: '16px 20px', cursor: 'none',
              fontFamily: K.sans, fontSize: 14, lineHeight: 1.5,
              boxShadow: isOpen ? `5px 5px 0 ${K.accent}` : 'none', transition: 'box-shadow 0.15s',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ fontFamily: K.display, fontSize: 15, textTransform: 'uppercase', letterSpacing: '-0.2px', lineHeight: 1.15 }}>{f.q}</span>
                <span style={{ fontFamily: K.mono, fontSize: 18, opacity: 0.7 }}>{isOpen ? '−' : '+'}</span>
              </div>
              {isOpen && (
                <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px dashed rgba(244,241,234,0.3)`, fontSize: 13.5, lineHeight: 1.6, opacity: 0.95 }}>
                  {f.a}
                </div>
              )}
            </button>
          );
        })}
      </div>
    </section>
  );
}

// ─── PUBLIC CTA — WhatsApp-only para la página pública de Publicidad
function PublicCTA() {
  return (
    <section id="contacto-pub" style={{ padding: '70px 44px 70px', background: K.ink, color: K.paper, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -80, right: -20, fontFamily: K.display, fontSize: 320, opacity: 0.06, lineHeight: 0.8, pointerEvents: 'none', color: K.paper }}>?</div>
      <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: 'rgba(244,241,234,0.6)' }}>/ contacto</div>
      <div style={{ fontFamily: K.display, fontSize: 'clamp(48px,7vw,90px)', textTransform: 'uppercase', lineHeight: 0.9, marginTop: 4, letterSpacing: '-2px' }}>
        ¿listo para <span style={{ fontStyle: 'italic', background: K.lime, color: K.ink, padding: '0 12px', display: 'inline-block', transform: 'rotate(-1deg)' }}>empezar</span>?
      </div>

      <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, alignItems: 'center' }}>
        <div style={{ background: '#22c55e', color: '#fff', border: `3px solid ${K.paper}`, boxShadow: `8px 8px 0 ${K.paper}`, padding: '32px 32px 36px' }}>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.85 }}>la forma más rápida</div>
          <div style={{ fontFamily: K.display, fontSize: 'clamp(40px, 5vw, 64px)', textTransform: 'uppercase', lineHeight: 1, marginTop: 8, letterSpacing: '-1.5px' }}>Escríbenos por WhatsApp</div>
          <div style={{ fontFamily: K.sans, fontSize: 15, lineHeight: 1.55, marginTop: 14, maxWidth: 460 }}>
            Cuéntanos qué lugar quieres mostrar y te mandamos propuesta + disponibilidad. Respondemos en <b>&lt;2h</b>.
          </div>
          <div style={{ fontFamily: K.mono, fontSize: 12, marginTop: 18, opacity: 0.9 }}>+52 56 6772 7583 · lun–sáb · 10:00–20:00</div>
          <a href={waLink('Hola Konecta, me interesa publicidad para mi lugar. ¿Cuándo podemos agendar?')} target="_blank" rel="noreferrer" data-k-cursor="abrir whatsapp" data-cta="pub-cta-final" style={{
            display: 'inline-flex', marginTop: 24, padding: '16px 26px',
            background: '#fff', color: '#0a0a0a', border: `3px solid ${K.ink}`, boxShadow: `5px 5px 0 ${K.ink}`,
            fontFamily: K.mono, fontSize: 13, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', textDecoration: 'none',
          }}>abrir whatsapp ↗</a>
        </div>

        <div style={{ color: K.paper }}>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.6, marginBottom: 14 }}>también puedes</div>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <li>
              <a href="#paquetes" data-k-cursor="ver paquetes" style={{ color: K.lime, textDecoration: 'none', fontFamily: K.display, fontSize: 22, textTransform: 'uppercase', letterSpacing: '-0.5px', borderBottom: `2px dashed ${K.lime}` }}>↓ ver los 3 paquetes</a>
            </li>
            <li>
              <a href="#casos" data-k-cursor="ver casos" style={{ color: K.cyan, textDecoration: 'none', fontFamily: K.display, fontSize: 22, textTransform: 'uppercase', letterSpacing: '-0.5px', borderBottom: `2px dashed ${K.cyan}` }}>→ revisar los casos</a>
            </li>
            <li>
              <a href="#faq-pub" data-k-cursor="faq" style={{ color: K.yellow, textDecoration: 'none', fontFamily: K.display, fontSize: 22, textTransform: 'uppercase', letterSpacing: '-0.5px', borderBottom: `2px dashed ${K.yellow}` }}>? preguntas frecuentes</a>
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}

// ─── DUAL CTA — B2B form + WhatsApp final (sólo en página Enterprise privada)────────────
function DualCTA() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contacto-b2b" style={{ padding: '70px 44px 70px', background: K.ink, color: K.paper, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -80, right: -20, fontFamily: K.display, fontSize: 320, opacity: 0.06, lineHeight: 0.8, pointerEvents: 'none', color: K.paper }}>?</div>
      <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: 'rgba(244,241,234,0.6)' }}>/ contacto</div>
      <div style={{ fontFamily: K.display, fontSize: 'clamp(48px,7vw,90px)', textTransform: 'uppercase', lineHeight: 0.9, marginTop: 4, letterSpacing: '-2px' }}>
        elige cómo <span style={{ fontStyle: 'italic', background: K.lime, color: K.ink, padding: '0 12px', display: 'inline-block', transform: 'rotate(-1deg)' }}>empezar</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 40 }}>
        {/* WHATSAPP CARD */}
        <div style={{ background: '#22c55e', color: '#fff', border: `3px solid ${K.paper}`, boxShadow: `8px 8px 0 ${K.paper}`, padding: '28px 28px 32px', position: 'relative' }}>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.85 }}>rápido · ya sabes qué paquete</div>
          <div style={{ fontFamily: K.display, fontSize: 40, textTransform: 'uppercase', lineHeight: 1, marginTop: 8, letterSpacing: '-1px' }}>WhatsApp</div>
          <div style={{ fontFamily: K.sans, fontSize: 14, lineHeight: 1.55, marginTop: 14, maxWidth: 420 }}>
            Si ya sabes qué paquete quieres (o casi), escríbenos directo. Respondemos en <b>&lt;2h</b> (lun–sáb · 10:00–20:00).
          </div>
          <div style={{ fontFamily: K.mono, fontSize: 12, marginTop: 18, opacity: 0.9 }}>+52 56 6772 7583</div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 22 }}>
            <a href={waLink('Hola Konecta, ¿cuál paquete me recomiendan para mi lugar?')} target="_blank" rel="noreferrer" data-k-cursor="abrir whatsapp" data-cta="pub-paquete-recomendado" style={{
              display: 'inline-flex', padding: '14px 22px',
              background: '#fff', color: '#0a0a0a', border: `3px solid ${K.ink}`, boxShadow: `5px 5px 0 ${K.ink}`,
              fontFamily: K.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', textDecoration: 'none',
            }}>abrir whatsapp ↗</a>
            <button type="button" data-cal-namespace="konecta" data-cal-link="konecta" data-cal-config='{"layout":"month_view"}' data-cta="pub-cal" data-k-cursor="agendar llamada" style={{
              padding: '14px 22px', background: K.lime, color: K.ink, border: `3px solid ${K.ink}`, boxShadow: `5px 5px 0 ${K.ink}`,
              fontFamily: K.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', cursor: 'pointer',
            }}>📅 agendar 15 min ↗</button>
          </div>
        </div>

        {/* B2B FORM */}
        <div style={{ background: K.paper, color: K.ink, border: `3px solid ${K.paper}`, boxShadow: `8px 8px 0 ${K.accent}`, padding: '28px 28px 32px' }}>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>formal · para marcas o agencias</div>
          <div style={{ fontFamily: K.display, fontSize: 40, textTransform: 'uppercase', lineHeight: 1, marginTop: 8, letterSpacing: '-1px' }}>Cotizar enterprise</div>
          <div style={{ fontFamily: K.sans, fontSize: 13, lineHeight: 1.55, marginTop: 12, color: '#333' }}>
            Campañas a la medida con factura, orden de compra y NDA. Te contestamos con propuesta en <b>48h hábiles</b>.
          </div>
          {!sent ? (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ marginTop: 18, display: 'grid', gap: 10 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <input required placeholder="Marca" style={inpStyle} />
                <input required placeholder="Tu nombre" style={inpStyle} />
              </div>
              <input required type="email" placeholder="Email corporativo" style={inpStyle} />
              <select required style={inpStyle} defaultValue="">
                <option value="" disabled>Presupuesto estimado</option>
                <option>Menos de $20K</option>
                <option>$20K – $50K</option>
                <option>$50K – $100K</option>
                <option>$100K+ / campaña anual</option>
                <option>Aún por definir</option>
              </select>
              <textarea placeholder="Contexto breve: marca, objetivo, fechas tentativas" rows={3} style={{ ...inpStyle, resize: 'vertical' }} />
              <button type="submit" data-k-cursor="enviar" style={{
                padding: '13px 18px', background: K.ink, color: K.paper,
                border: `3px solid ${K.ink}`, fontFamily: K.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
                cursor: 'none', marginTop: 4,
              }}>enviar cotización ↗</button>
              <div style={{ fontFamily: K.mono, fontSize: 10, color: K.dim, marginTop: 4 }}>
                * Este form es demo. En producción mandará a hola@konecta.mx (o tu email preferido).
              </div>
            </form>
          ) : (
            <div style={{ marginTop: 22, padding: '18px 20px', background: K.lime, color: K.ink, border: `3px solid ${K.ink}`, fontFamily: K.sans, fontSize: 14, lineHeight: 1.5 }}>
              <div style={{ fontFamily: K.display, fontSize: 20, textTransform: 'uppercase', letterSpacing: '-0.3px', marginBottom: 6 }}>✓ Recibido</div>
              Gracias. Te escribimos en las próximas 48h hábiles con una propuesta.
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

const inpStyle = {
  padding: '12px 14px', border: `2.5px solid ${K.ink}`, background: '#fff',
  fontFamily: K.mono, fontSize: 13, color: K.ink, outline: 'none',
  cursor: 'none',
};

Object.assign(window, { EscalaStrip, CaseStudies, EnterpriseTier, ProcesoTimeline, MiniGallery, PublicidadFAQ, PublicCTA, DualCTA });