/* global React */
function Pricing() {
  const Icons = window.Icons || {};

  return (
    <section id="pricing" className="section section--light" style={{paddingTop:96, paddingBottom:110, borderTop:'1px solid var(--paper-line)'}}>
      <div className="container">
        <div className="reveal" style={{textAlign:'center', maxWidth: 760, margin:'0 auto'}}>
          <span className="eyebrow">Precios claros</span>
          <h2 className="display display-lg" style={{marginTop: 16}}>
            Sin sorpresas.<br/>
            <span style={{color:'var(--brand-500)'}}>Solo pagas lo que usas.</span>
          </h2>
          <p style={{marginTop: 18, fontSize: 19, color:'var(--ink-mute)', textWrap:'pretty'}}>
            Diseñamos tu página una sola vez. Después solo pagas $800 al mes por cada
            persona que se sume a tu red. La publicidad de Meta corre por separado y tú decides cuánto invertir.
          </p>
        </div>

        <div className="reveal" style={{marginTop: 48, display:'grid', gridTemplateColumns:'1fr 1.05fr', gap: 24}} id="pricing-grid">
          {/* Setup card */}
          <div style={{
            padding: 36, background:'white', borderRadius: 22,
            border:'1px solid var(--paper-line)', display:'flex', flexDirection:'column',
          }}>
            <div style={{display:'flex', alignItems:'center', gap:10}}>
              <span style={{width:42, height:42, borderRadius:12, background:'rgba(124,58,237,0.1)', color:'var(--brand-600)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                {Icons.Edit && <Icons.Edit size={20} />}
              </span>
              <span style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--ink-mute)', letterSpacing:'0.14em', textTransform:'uppercase'}}>Pago único · Setup</span>
            </div>
            <div style={{fontFamily:'var(--f-display)', fontSize:26, fontWeight:600, letterSpacing:'-0.01em', marginTop:18}}>
              Diseño de tu embudo
            </div>
            <p style={{fontSize:15, color:'var(--ink-mute)', marginTop:8}}>
              Creamos la página de tu marca con tu identidad, productos y mensajes. Lista para ser copiada a todos tus vendedores.
            </p>

            <div style={{marginTop: 24, display:'flex', alignItems:'baseline', gap:8}}>
              <span style={{fontFamily:'var(--f-display)', fontSize:64, fontWeight:600, letterSpacing:'-0.03em', lineHeight:1}}>
                $10,000
              </span>
              <span style={{fontSize:14, color:'var(--ink-mute)', fontFamily:'var(--f-mono)'}}>MXN</span>
            </div>
            <div style={{fontSize:12, color:'var(--ink-mute)', marginTop:4, fontFamily:'var(--f-mono)'}}>
              pago único · entrega en 5–7 días
            </div>

            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10, flex:1}}>
              {[
                'Diseño personalizado con tu marca',
                'Hasta 3 rondas de ajustes',
                'Conexión con tu cuenta de Meta',
                'Configuración de WhatsApp Business',
                'Tu primer vendedor incluido',
              ].map((f, i) => (
                <li key={i} style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:14.5, lineHeight:1.45, color:'var(--ink-2)'}}>
                  <span style={{color:'var(--brand-600)', flexShrink:0, marginTop:2}}>{Icons.Check && <Icons.Check size={14} stroke={2.5}/>}</span>
                  {f}
                </li>
              ))}
            </ul>
          </div>

          {/* Per-affiliate card — featured */}
          <div style={{
            padding: 36, background:'linear-gradient(180deg, #0B0816, #1a1233)', color:'white',
            borderRadius: 22, position:'relative', overflow:'hidden',
            boxShadow:'0 40px 80px -30px rgba(124,58,237,0.4)',
            display:'flex', flexDirection:'column',
          }}>
            <div aria-hidden="true" style={{position:'absolute', top:-50, right:-50, width:280, height:280, borderRadius:'50%', background:'radial-gradient(circle, color-mix(in oklab, var(--brand-500) 45%, transparent), transparent 70%)', filter:'blur(40px)'}} />
            <div style={{position:'absolute', top:18, right:18, padding:'4px 10px', borderRadius:999, background:'var(--brand-500)', color:'white', fontSize:10, fontFamily:'var(--f-mono)', fontWeight:600, letterSpacing:'0.1em', textTransform:'uppercase'}}>
              Recurrente
            </div>
            <div style={{position:'relative'}}>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <span style={{width:42, height:42, borderRadius:12, background:'rgba(124,58,237,0.25)', color:'var(--brand-300)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                  {Icons.User && <Icons.User size={20} />}
                </span>
                <span style={{fontFamily:'var(--f-mono)', fontSize:11, color:'rgba(255,255,255,0.55)', letterSpacing:'0.14em', textTransform:'uppercase'}}>Por cada vendedor</span>
              </div>
              <div style={{fontFamily:'var(--f-display)', fontSize:26, fontWeight:600, letterSpacing:'-0.01em', marginTop:18}}>
                Cada página activa
              </div>
              <p style={{fontSize:15, color:'rgba(255,255,255,0.7)', marginTop:8}}>
                Cada vendedor con su propia página, su WhatsApp con IA, su portal y sus clientes. Sumas o quitas cuando quieras.
              </p>

              <div style={{marginTop:24, display:'flex', alignItems:'baseline', gap:8}}>
                <span style={{fontFamily:'var(--f-display)', fontSize:64, fontWeight:600, letterSpacing:'-0.03em', lineHeight:1}}>$800</span>
                <span style={{fontSize:14, color:'rgba(255,255,255,0.55)', fontFamily:'var(--f-mono)'}}>MXN / mes · por persona</span>
              </div>
              <div style={{fontSize:12, color:'rgba(255,255,255,0.5)', marginTop:4, fontFamily:'var(--f-mono)'}}>
                facturación mensual · sin compromiso largo
              </div>

              <ul style={{margin:'24px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10}}>
                {[
                  'Página personal con su nombre',
                  'WhatsApp Business conectado',
                  'Portal con sus clientes y métricas',
                  'Acceso a campañas Meta del líder',
                  'Soporte por WhatsApp',
                ].map((f, i) => (
                  <li key={i} style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:14.5, lineHeight:1.45, color:'rgba(255,255,255,0.88)'}}>
                    <span style={{color:'var(--brand-300)', flexShrink:0, marginTop:2}}>{Icons.Check && <Icons.Check size={14} stroke={2.5}/>}</span>
                    {f}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        {/* Extras strip */}
        <div className="reveal" style={{marginTop:24, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14}} id="extras-grid">
          {[
            { i: Icons.Coins,   t:'Publicidad de Meta', s:'Tú decides el presupuesto. Se carga directo a tu tarjeta o transferencia, no a BOBAX.' },
            { i: Icons.Globe,   t:'Dominio propio',     s:'Si quieres tu dominio (no un subdominio nuestro), pagas el alojamiento y entran todos tus vendedores ahí.' },
            { i: Icons.Sparkle, t:'IA en WhatsApp',      s:'Servicio adicional opcional. Cualquier vendedor puede conectarla a su WhatsApp para vender en automático. Se cotiza aparte.' },
          ].map((x, i) => (
            <div key={i} style={{padding:'22px 24px', background:'white', border:'1px solid var(--paper-line)', borderRadius:16}}>
              <span style={{width:36, height:36, borderRadius:10, background:'rgba(124,58,237,0.08)', color:'var(--brand-600)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                {x.i && <x.i size={18}/>}
              </span>
              <div style={{fontFamily:'var(--f-display)', fontSize:17, fontWeight:600, letterSpacing:'-0.01em', marginTop:12}}>{x.t}</div>
              <div style={{fontSize:13.5, color:'var(--ink-mute)', marginTop:4, lineHeight:1.5}}>{x.s}</div>
            </div>
          ))}
        </div>

        {/* CTA band */}
        <div className="reveal" style={{
          marginTop: 32, padding: '28px 36px',
          background:'#0B0816', color:'white', borderRadius: 20,
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap: 20,
        }}>
          <div>
            <div style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--brand-300)', letterSpacing:'0.12em', textTransform:'uppercase', fontWeight:600}}>Listo para empezar</div>
            <div style={{fontFamily:'var(--f-display)', fontSize: 24, fontWeight: 600, letterSpacing:'-0.01em', marginTop: 6}}>
              Agenda una llamada y diseñamos tu embudo esta semana.
            </div>
          </div>
          <a href="#book" data-book-call className="btn btn-primary" style={{padding:'14px 22px', fontSize: 15}}>
            Quiero empezar {Icons.ArrowRight && <Icons.ArrowRight size={16}/>}
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          #pricing-grid { grid-template-columns: 1fr !important; }
          #extras-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.Pricing = Pricing;