// PricingSection — 3-column side-by-side paquetes, PREMIUM highlighted
// Originalmente vivía en el home; se movió a publicidad.html porque era reiterativo tenerlo en ambos.
// Se importa vía <script type="text/babel" src="konecta/pricing-section.jsx"></script>
// Deps: window.K (from shell.jsx must be loaded before this file)

function PricingSection() {
  return (
    <section id="paquetes" style={{ padding: '70px 44px 60px', background: K.ink, color: K.paper, borderTop: `3px solid ${K.ink}`, borderBottom: `3px solid ${K.ink}`, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 30, right: 40, fontFamily: K.mono, fontSize: 10, background: K.accent, color: '#fff', padding: '5px 10px', border: `2px solid ${K.paper}`, transform: 'rotate(-3deg)', letterSpacing: 1.5, boxShadow: `3px 3px 0 ${K.paper}`, textTransform: 'uppercase' }}>K/01 · publicidad</div>
      <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: 'rgba(244,241,234,0.6)' }}>/ paquetes</div>
      <div style={{ fontFamily: K.display, fontSize: 'clamp(44px,7vw,80px)', textTransform: 'uppercase', lineHeight: 0.95, marginBottom: 10 }}>
        elige tu <span style={{ fontStyle: 'italic', background: K.lime, color: K.ink, padding: '0 12px', display: 'inline-block', transform: 'rotate(-2deg)' }}>tamaño</span>
      </div>
      <div style={{ fontFamily: K.mono, fontSize: 12, color: 'rgba(244,241,234,0.7)', marginBottom: 30, maxWidth: 620 }}>
        ↓ mismo proceso, mismo estándar. lo que cambia es la cantidad de contenido y la duración de la campaña.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `3px solid ${K.paper}`, background: K.paper }}>
        {[
          {
            name: 'mini', price: '$7,500', sub: 'para probar', hue: K.paper, fg: K.ink, rot: 0, popular: false,
            tagline: 'Si nunca has invertido en contenido, empieza aquí.',
            delivery: '1 reel + 2 stories',
            time: '6–8 días naturales',
            reach: '40K mínimo garantizado (promedio real: 100K+)',
            includes: ['1 reel promocional (IG + TikTok)', '2 stories con los mejores momentos', 'Publicación en días de alta audiencia', 'Reporte PDF al cierre'],
          },
          {
            name: 'básico', price: '$12,500', sub: 'el más comprado', hue: K.paper, fg: K.ink, rot: 0, popular: false,
            tagline: 'Dos tiros en lugar de uno: el segundo a las 4 semanas, para sostener el momentum.',
            delivery: '2 reels + 4 stories',
            time: '1er reel 6–8 días · 2do a las 4 semanas',
            reach: '80K mínimo garantizado (promedio real: 200K+)',
            includes: ['2 reels promocionales (IG + TikTok)', '4 stories con los mejores momentos', '2do reel publicado 4 semanas después', 'Te mandamos cada pieza para visto bueno 2 días antes (o el mismo día de publicar)', 'Reporte PDF al cierre'],
          },
          {
            name: 'premium', price: '$17,000', sub: 'campaña completa', hue: K.lime, fg: K.ink, rot: -1.5, popular: true,
            tagline: '3 reels en 8 semanas. Es lo que haría una agencia, sin la agencia.',
            delivery: '3 reels + 6 stories',
            time: '1er reel 6–8 días · 2do y 3er reel cada 4 semanas',
            reach: '120K mínimo garantizado (promedio real: 300K+)',
            includes: ['3 reels promocionales (IG + TikTok)', '6 stories con los mejores momentos', '3 apariciones en 2 meses · todo orgánico', '2do y 3er reel publicados cada 4 semanas', 'Te mandamos cada pieza para visto bueno 2 días antes (o el mismo día de publicar)', 'Reporte PDF al cierre'],
          },
        ].map((p, i) => (
          <div key={p.name} style={{
            background: p.hue, color: p.fg,
            borderRight: i < 2 ? `3px solid ${K.ink}` : 'none',
            padding: '26px 22px 24px', position: 'relative',
            transform: p.popular ? `rotate(${p.rot}deg) scale(1.03)` : 'none',
            zIndex: p.popular ? 3 : 1,
            boxShadow: p.popular ? `8px 8px 0 ${K.ink}, 0 0 0 3px ${K.ink}` : 'none',
          }}>
            {p.popular && (
              <div style={{
                position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%) rotate(-2deg)',
                background: K.accent, color: '#fff', 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',
                whiteSpace: 'nowrap', zIndex: 4,
              }}>★ más elegido</div>
            )}
            <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.6 }}>{p.sub}</div>
            <div style={{ fontFamily: K.display, fontSize: 44, textTransform: 'uppercase', lineHeight: 1, marginTop: 4 }}>{p.name}</div>
            <div style={{ fontFamily: K.display, fontSize: 56, lineHeight: 1, marginTop: 16, letterSpacing: '-2px' }}>{p.price}</div>
            <div style={{ fontFamily: K.mono, fontSize: 10, opacity: 0.55, letterSpacing: 1, marginTop: 4 }}>Precio sin IVA · si necesitas factura, se suma 16%</div>

            {p.tagline && (
              <div style={{ marginTop: 14 }}>
                <div style={{
                  display: 'inline-block', fontFamily: K.mono, fontSize: 9,
                  textTransform: 'uppercase', letterSpacing: 1.5, fontWeight: 700,
                  background: p.popular ? K.ink : K.accent,
                  color: p.popular ? K.lime : '#fff',
                  padding: '3px 8px', marginBottom: 6,
                }}>/ cuándo elegirlo</div>
                <div style={{
                  fontFamily: K.sans, fontSize: 13.5, lineHeight: 1.4,
                  fontWeight: 500, fontStyle: 'italic',
                }}>{p.tagline}</div>
              </div>
            )}

            <div style={{ borderTop: `2px solid currentColor`, opacity: 0.25, margin: '20px 0 16px' }} />

            <div style={{ fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 1.5, opacity: 0.65, marginBottom: 6 }}>entregable</div>
            <div style={{ fontFamily: K.sans, fontSize: 16, fontWeight: 700, lineHeight: 1.3, marginBottom: 14 }}>{p.delivery}</div>

            <div style={{ fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 1.5, opacity: 0.65, marginBottom: 6 }}>tiempo de entrega</div>
            <div style={{ fontFamily: K.sans, fontSize: 13, lineHeight: 1.4, marginBottom: 14 }}>{p.time}</div>

            <div style={{ fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 1.5, opacity: 0.65, marginBottom: 6 }}>alcance mínimo</div>
            <div style={{ fontFamily: K.sans, fontSize: 13, lineHeight: 1.4, marginBottom: 18, fontWeight: 500 }}>{p.reach}</div>

            <ul style={{ margin: 0, padding: 0, listStyle: 'none', fontFamily: K.sans, fontSize: 13, lineHeight: 1.5 }}>
              {p.includes.map((item, j) => (
                <li key={j} style={{ paddingLeft: 22, position: 'relative', marginBottom: 6 }}>
                  <span style={{ position: 'absolute', left: 0, top: 0, fontWeight: 700, color: p.popular ? K.ink : '#22c55e' }}>✓</span>
                  {item}
                </li>
              ))}
            </ul>

            <a href={waLink(`Hola Konecta, me interesa el paquete ${p.name} (${p.price}). ¿Cuándo podemos agendar la visita?`)} data-k-cursor={`elegir ${p.name}`} data-cta={`paquete-${p.name}`} style={{
              display: 'block', marginTop: 22, padding: '14px 16px',
              background: p.popular ? K.ink : 'transparent',
              color: p.popular ? K.paper : K.ink,
              border: `3px solid ${K.ink}`,
              fontFamily: K.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
              textDecoration: 'none', textAlign: 'center',
              boxShadow: p.popular ? `5px 5px 0 ${K.paper}` : 'none',
            }}>elegir {p.name} ↗</a>
          </div>
        ))}
      </div>

      {/* Objection handler · vs. pauta · sale tool bridge */}
      <div style={{
        marginTop: 36, padding: '24px 26px',
        border: `3px solid ${K.lime}`, background: 'rgba(200,255,46,0.08)',
        display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap', justifyContent: 'space-between',
      }}>
        <div style={{ flex: '1 1 320px', minWidth: 0 }}>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.lime, marginBottom: 6 }}>/ matemática rápida</div>
          <div style={{ fontFamily: K.display, fontSize: 'clamp(20px, 2.4vw, 26px)', textTransform: 'uppercase', lineHeight: 1.1, letterSpacing: -.5 }}>
            ¿Se te hace caro? <span style={{ background: K.lime, color: K.ink, padding: '0 8px', display: 'inline-block', transform: 'rotate(-1deg)', boxShadow: `3px 3px 0 ${K.paper}` }}>compáralo</span> con la pauta tradicional.
          </div>
          <div style={{ fontFamily: K.sans, fontSize: 13.5, lineHeight: 1.5, marginTop: 10, color: 'rgba(244,241,234,0.82)', maxWidth: 560 }}>
            Para conseguir las vistas que dieron Hakuna (504K) o Frituur (251K), una marca tendría que pagar entre $30K y $50K en pauta IG/TT. Spoiler: el básico cuesta $12,500.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', flexShrink: 0 }}>
          <a href="/comparar.html" data-k-cursor="vs. pauta" data-cta="pricing-bridge-comparar" style={{
            background: K.lime, color: K.ink, padding: '14px 18px',
            fontFamily: K.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
            textDecoration: 'none', border: `3px solid ${K.ink}`, boxShadow: `5px 5px 0 ${K.ink}`,
          }}>vs. pauta ↗</a>
          <a href="/elegir.html" data-k-cursor="¿cuál te toca?" data-cta="pricing-bridge-elegir" style={{
            background: K.paper, color: K.ink, padding: '14px 18px',
            fontFamily: K.mono, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
            textDecoration: 'none', border: `3px solid ${K.ink}`, boxShadow: `5px 5px 0 ${K.ink}`,
          }}>¿cuál te toca? ↗</a>
        </div>
      </div>

      <div style={{ marginTop: 22, fontFamily: K.mono, fontSize: 11, color: 'rgba(244,241,234,0.6)', display: 'flex', gap: 18, flexWrap: 'wrap', letterSpacing: 1 }}>
        <span>▸ mínimos garantizados (40/80/120K) · nuestros reels promedio cruzan las 100K por red</span>
        <span>▸ 50% de anticipo el día de la grabación · liquidación por transferencia o efectivo</span>
        <span>▸ cobertura CDMX + edomex · otros estados, cotizar viáticos</span>
      </div>
    </section>
  );
}

window.PricingSection = PricingSection;