// 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

const K = window.K;

// ─── ESCALA STRIP — tagline de escala justo después del hero ──────────────────
function EscalaStrip() {
  const stats = [
    { val: '692K+', 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 · Del Valle CDMX',
      bg: K.lime, fg: K.ink, kicker: 'caso completo · chef posicionado',
      summary: 'Paquete mini: 1 reel orgánico. La gente empezó a llegar al local preguntando por el chef. "Estamos cerrando un muy buen mes" (Ricardo, dueño).',
      metrics: [{ val: '273K', lbl: 'vistas IG + TT' }, { val: '+720', lbl: 'seguidores en 24d' }, { val: '7.0%', lbl: 'engagement rate' }],
      note: 'Caso completo con análisis del positioning del chef.',
      caseUrl: '/casos/japi-ramen/',
    },
    {
      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',
            display: 'flex', flexDirection: 'column',
          }}>
            <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>

            {c.caseUrl && (
              <a href={c.caseUrl} data-cta={`pub-caso-${c.handle}`} data-k-cursor="leer caso de estudio" style={{
                marginTop: 14, display: 'inline-block', alignSelf: 'flex-start',
                fontFamily: K.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.4,
                textTransform: 'uppercase', textDecoration: 'none',
                color: K.ink, background: K.paper, border: `2.5px solid ${K.ink}`,
                padding: '7px 11px', boxShadow: `3px 3px 0 ${K.ink}`,
              }}>leer caso completo ↗</a>
            )}
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 32, padding: '20px 24px', background: K.ink, color: K.paper,
        border: `3px solid ${K.ink}`, boxShadow: `6px 6px 0 ${K.lime}`,
        display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between',
        alignItems: 'center', gap: 14,
      }}>
        <div>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 1.6, opacity: 0.65 }}>/ todos los casos</div>
          <div style={{ fontFamily: K.display, fontSize: 'clamp(18px,2.6vw,24px)', textTransform: 'uppercase', marginTop: 4, lineHeight: 1.1, letterSpacing: '-0.3px' }}>
            Hospedaje, birria, ramen y más. <span style={{ background: K.lime, color: K.ink, padding: '0 6px' }}>Casos completos por industria.</span>
          </div>
        </div>
        <a href="/casos.html" data-cta="pub-casos-hub" data-k-cursor="ver casos" style={{
          fontFamily: K.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5,
          textTransform: 'uppercase', textDecoration: 'none',
          color: K.ink, background: K.lime, border: `3px solid ${K.paper}`,
          padding: '12px 18px', boxShadow: `4px 4px 0 ${K.accent}`,
          flex: '0 0 auto',
        }}>ver todos los casos ↗</a>
      </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, subimos otro video sin costo —o los que correspondan a tu 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 });