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

  const pillars = [
    {
      n: '01',
      i: Icons.Globe,
      tag: 'Páginas web',
      title: 'Una página por vendedor.',
      body: 'Diseñamos la página de tu multinivel a la medida. BOBAX la replica para toda tu red en minutos — con su nombre, su teléfono y su WhatsApp.',
      link: '#pillar-pages',
      grad: 'linear-gradient(135deg, #7C3AED, #5316B0)',
      side: false,
    },
    {
      n: '02',
      i: Icons.Target,
      tag: 'Tráfico real',
      title: 'Anuncios en Facebook e Instagram.',
      body: 'Nuestro equipo diseña las campañas. Tú solo eliges presupuesto y ciudad. Sin agencia, sin abrir Ads Manager, sin perder tiempo aprendiendo.',
      link: '#pillar-traffic',
      grad: 'linear-gradient(135deg, #5C72FF, #2238B8)',
      featured: true,
    },
    {
      n: '03',
      i: Icons.Layers,
      tag: 'Contenido',
      title: 'Biblioteca lista para redes.',
      body: 'Reels, posts, historias, copys. Contenido profesional especializado para tu multinivel — actualizado constantemente. Tus vendedores solo descargan y publican.',
      link: '#pillar-content',
      grad: 'linear-gradient(135deg, #B49AFB, #6B21D9)',
    },
    {
      n: '04',
      i: Icons.Layout,
      tag: 'Academia',
      title: 'Capacita a tu red a su ritmo.',
      body: 'Cada líder sube sus videos, sus guías, sus protocolos. Tus vendedores aprenden desde el portal, sin chats interminables ni audios perdidos.',
      link: '#pillar-academy',
      grad: 'linear-gradient(135deg, #34D29B, #0FA174)',
    },
  ];

  return (
    <section id="how" className="section section--paper2" style={{paddingTop: 96, paddingBottom: 110, borderTop:'1px solid var(--paper-line)'}}>
      <div className="container">
        <div className="reveal" style={{textAlign:'center', maxWidth: 800, margin:'0 auto'}}>
          <span className="eyebrow">Así funciona</span>
          <h2 className="display display-lg" style={{marginTop: 14}}>
            Cuatro pilares.<br/>
            <span style={{color:'var(--brand-500)'}}>Un sistema completo.</span>
          </h2>
          <p style={{marginTop: 16, fontSize: 19, color:'var(--ink-mute)', textWrap:'pretty'}}>
            BOBAX no es una herramienta más. Es la infraestructura completa
            que tu red necesita para crecer en serio.
          </p>
        </div>

        {/* Pillars grid */}
        <div className="reveal" style={{marginTop:48, display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}} id="pillars-grid">
          {pillars.map((p, i) => (
            <a key={i} href={p.link} style={{
              padding: 28,
              background:'white',
              border:'1px solid var(--paper-line)',
              borderRadius: 22,
              display:'flex', flexDirection:'column',
              gap: 14,
              position:'relative', overflow:'hidden',
              transition:'transform .25s ease, border-color .25s ease, box-shadow .25s ease',
              minHeight: 280,
              cursor:'pointer',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 24px 60px -20px rgba(11,8,22,0.15)'; e.currentTarget.style.borderColor = 'var(--brand-300)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--paper-line)'; }}
            >
              {/* Glow accent */}
              <div aria-hidden="true" style={{
                position:'absolute', top:-40, right:-40, width:180, height:180, borderRadius:'50%',
                background:`radial-gradient(circle, color-mix(in oklab, var(--brand-500) 18%, transparent), transparent 70%)`,
                filter:'blur(30px)', pointerEvents:'none',
              }} />

              <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', position:'relative'}}>
                <div style={{
                  width: 56, height: 56, borderRadius: 16,
                  background: p.grad, color:'white',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  boxShadow:'0 14px 30px -12px rgba(124,58,237,0.5)',
                }}>
                  {p.i && <p.i size={26} />}
                </div>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 11, color:'var(--ink-mute)', letterSpacing:'0.16em'}}>
                  {p.n}
                </span>
              </div>

              <div style={{marginTop: 8, position:'relative'}}>
                <div style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--brand-600)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:600}}>{p.tag}</div>
                <div className="display display-sm" style={{marginTop:6, fontSize:22}}>{p.title}</div>
                <p style={{fontSize:14.5, color:'var(--ink-mute)', marginTop:8, lineHeight:1.55}}>{p.body}</p>
              </div>

              <div style={{marginTop:'auto', display:'flex', alignItems:'center', gap:8, color:'var(--brand-600)', fontFamily:'var(--f-mono)', fontSize:12, fontWeight:600, letterSpacing:'0.04em', textTransform:'uppercase', position:'relative'}}>
                Ver detalle {Icons.ArrowRight && <Icons.ArrowRight size={14}/>}
              </div>
            </a>
          ))}
        </div>

        {/* Optional pillar 5 — IA */}
        <div className="reveal" style={{
          marginTop:18, padding:'22px 26px',
          background:'linear-gradient(180deg, #061812, #0a2620)', color:'white',
          borderRadius: 18, border:'1px solid rgba(52,210,155,0.25)',
          display:'flex', alignItems:'center', justifyContent:'space-between', gap:20, flexWrap:'wrap',
        }}>
          <div style={{display:'flex', alignItems:'center', gap:16, flex:1, minWidth:260}}>
            <span style={{
              flexShrink:0, width:50, height:50, borderRadius:14,
              background:'rgba(16,185,129,0.18)', color:'var(--emerald-400)',
              display:'flex', alignItems:'center', justifyContent:'center',
              border:'1px solid rgba(52,210,155,0.3)',
            }}>{Icons.Bot && <Icons.Bot size={24}/>}</span>
            <div>
              <div style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--emerald-400)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:600}}>
                +1 · Opcional para quien quiera ir más lejos
              </div>
              <div className="display display-sm" style={{marginTop:4, color:'white', fontSize:22}}>
                Una IA entrenada para vender por ti en WhatsApp.
              </div>
            </div>
          </div>
          <a href="#whatsapp" className="btn btn-emerald" style={{padding:'12px 20px', fontSize:14}}>
            Conocer más {Icons.ArrowRight && <Icons.ArrowRight size={14}/>}
          </a>
        </div>
      </div>

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

window.Pillars = Pillars;