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

  return (
    <section id="whatsapp" className="section section--emerald" style={{paddingTop: 84, paddingBottom: 92, overflow:'hidden', position:'relative'}}>
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, pointerEvents:'none',
        background: 'radial-gradient(700px 360px at 80% 20%, rgba(16,185,129,0.4), transparent 60%), radial-gradient(600px 320px at 10% 90%, rgba(16,185,129,0.25), transparent 60%)',
        opacity: 0.55,
      }} />

      <div className="container" style={{position:'relative'}}>
        <div className="reveal" style={{display:'grid', gridTemplateColumns:'1.15fr 0.85fr', gap: 48, alignItems:'center'}} id="wa-grid">
          {/* LEFT */}
          <div>
            <div className="pill" style={{marginBottom: 16, background:'rgba(16,185,129,0.18)', color:'var(--emerald-400)'}}>
              <span className="pill-dot" />
              Servicio opcional · No incluido en el plan
            </div>
            <h2 className="display display-md" style={{margin:0, color:'white', fontSize:'clamp(28px, 3.6vw, 46px)'}}>
              ¿Quieres que tu <span style={{color:'var(--emerald-400)'}}>WhatsApp</span> venda <em style={{fontStyle:'italic', fontWeight:500}}>solo?</em>
            </h2>
            <p style={{marginTop: 18, fontSize: 17, color:'rgba(255,255,255,0.78)', maxWidth: 580, textWrap:'pretty'}}>
              Cualquier vendedor puede conectar una inteligencia artificial a su
              WhatsApp Business. Responderá a sus clientes 24/7, dará precios y agendará
              llamadas — y le pasará al vendedor solo los clientes que ya estén listos para
              comprar. Es un extra de la plataforma. Tú decides si lo activas.
            </p>

            <ul style={{margin:'22px 0 0', padding:0, listStyle:'none', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}} id="wa-bullets">
              {[
                [Icons.Bot, 'Respuestas a cualquier hora'],
                [Icons.Sparkle, 'Suena como tú'],
                [Icons.Inbox, 'Te pasa al cliente caliente'],
                [Icons.Whatsapp, 'Tu mismo WhatsApp Business'],
              ].map(([I, t], i) => (
                <li key={i} style={{display:'flex', gap:10, alignItems:'center', fontSize:14, color:'rgba(255,255,255,0.85)'}}>
                  <span style={{flexShrink:0, width:30, height:30, borderRadius:8, background:'rgba(16,185,129,0.16)', color:'var(--emerald-400)', display:'flex', alignItems:'center', justifyContent:'center', border:'1px solid rgba(52,210,155,0.2)'}}>
                    {I && <I size={15} />}
                  </span>
                  {t}
                </li>
              ))}
            </ul>

            <div style={{marginTop:24, display:'flex', alignItems:'center', gap:14, padding:'12px 16px', background:'rgba(16,185,129,0.08)', border:'1px solid rgba(52,210,155,0.2)', borderRadius: 12}}>
              <span style={{width:34, height:34, borderRadius:999, background:'rgba(16,185,129,0.2)', color:'var(--emerald-400)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                {Icons.Sparkle && <Icons.Sparkle size={16}/>}
              </span>
              <div style={{fontSize:13.5, color:'rgba(255,255,255,0.8)'}}>
                <strong style={{color:'white'}}>Cotízalo aparte cuando lo necesites.</strong> No está incluido en los $800 mensuales del plan — lo activas solo cuando un vendedor lo quiera.
              </div>
            </div>
          </div>

          {/* RIGHT — small illustrative mock */}
          <WhatsappCardMock />
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          #wa-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
        @media (max-width: 520px) {
          #wa-bullets { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function WhatsappCardMock() {
  const Icons = window.Icons || {};
  return (
    <div style={{position:'relative', display:'flex', justifyContent:'center'}}>
      <div aria-hidden="true" style={{
        position:'absolute', inset:'-20px -30px', borderRadius:'50%',
        background:'radial-gradient(circle, rgba(16,185,129,0.3), transparent 65%)',
        filter:'blur(40px)', zIndex:0,
      }} />
      <div style={{
        position:'relative', zIndex:1,
        width:'100%', maxWidth: 360,
        background:'rgba(11,24,18,0.85)', border:'1px solid rgba(52,210,155,0.2)',
        borderRadius: 18, padding: 18,
        backdropFilter:'blur(10px)',
      }}>
        <div style={{display:'flex', alignItems:'center', gap:10, paddingBottom:12, borderBottom:'1px solid rgba(255,255,255,0.06)'}}>
          <span style={{width:36, height:36, borderRadius:999, background:'linear-gradient(135deg, var(--brand-400), var(--brand-700))', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--f-display)', fontWeight:600, fontSize:13, color:'white'}}>P</span>
          <div style={{flex:1}}>
            <div style={{fontSize:13, fontWeight:600, color:'white', display:'flex', alignItems:'center', gap:6}}>
              Paula G.
              <span style={{padding:'2px 6px', borderRadius:5, background:'rgba(16,185,129,0.2)', border:'1px solid rgba(52,210,155,0.3)', fontSize:8.5, fontFamily:'var(--f-mono)', color:'var(--emerald-400)', letterSpacing:'0.1em'}}>IA</span>
            </div>
            <div style={{fontSize:10, color:'rgba(255,255,255,0.5)'}}>respondiendo…</div>
          </div>
          {Icons.Whatsapp && <span style={{color:'var(--emerald-400)'}}><Icons.Whatsapp size={16}/></span>}
        </div>

        <div style={{padding:'14px 0', display:'flex', flexDirection:'column', gap:8}}>
          <div style={{alignSelf:'flex-start', background:'#202c33', color:'white', padding:'8px 11px', borderRadius:'10px 10px 10px 4px', maxWidth:'85%', fontSize:12, lineHeight:1.4}}>
            ¿Cuánto cuesta el set de skincare?
          </div>
          <div style={{alignSelf:'flex-end', background:'#005c4b', color:'white', padding:'8px 11px', borderRadius:'10px 10px 4px 10px', maxWidth:'85%', fontSize:12, lineHeight:1.4}}>
            $1,290. ¿Para ti o para regalo?
            <div style={{fontSize:8, color:'rgba(255,255,255,0.45)', textAlign:'right', marginTop:3, fontFamily:'var(--f-mono)'}}>IA · 3.2s</div>
          </div>
          <div style={{alignSelf:'flex-start', background:'#202c33', color:'white', padding:'8px 11px', borderRadius:'10px 10px 10px 4px', maxWidth:'85%', fontSize:12, lineHeight:1.4}}>
            Para mí. ¿Envío a Querétaro?
          </div>
          <div style={{
            background:'rgba(16,185,129,0.15)', border:'1px solid rgba(52,210,155,0.3)',
            borderRadius: 8, padding:'8px 10px', display:'flex', alignItems:'center', gap:8, marginTop: 4,
          }}>
            <span style={{width:22, height:22, borderRadius:999, background:'var(--emerald-500)', display:'flex', alignItems:'center', justifyContent:'center', color:'white', flexShrink:0}}>
              {Icons.Inbox && <Icons.Inbox size={12} />}
            </span>
            <div style={{fontSize:11, color:'white', lineHeight:1.3}}>
              <strong style={{color:'var(--emerald-400)'}}>Cliente listo</strong> — te paso a Paula
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.WhatsappAI = WhatsappAI;