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

  return (
    <section id="pillar-academy" className="section section--dark" style={{paddingTop: 96, paddingBottom: 106, overflow:'hidden', position:'relative'}}>
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(800px 480px at 80% 20%, color-mix(in oklab, var(--brand-700) 35%, transparent), transparent 60%)',
        opacity: 0.55,
      }} />

      <div className="container" style={{position:'relative'}}>
        <div className="reveal" style={{display:'grid', gridTemplateColumns:'1.05fr 0.95fr', gap: 56, alignItems:'center'}} id="ac-grid">
          {/* Left — academy mock */}
          <div style={{position:'relative'}}>
            <div style={{
              background:'linear-gradient(180deg, #14112b, #0B0816)', color:'white',
              borderRadius:22, padding:24, position:'relative', overflow:'hidden',
              border:'1px solid rgba(255,255,255,0.06)',
              boxShadow:'0 50px 100px -30px rgba(0,0,0,0.5)',
            }}>
              {/* Header */}
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', paddingBottom:14, borderBottom:'1px solid rgba(255,255,255,0.06)'}}>
                <div style={{display:'flex', alignItems:'center', gap:10}}>
                  <span style={{width:30, height:30, borderRadius:8, background:'var(--brand-500)', display:'flex', alignItems:'center', justifyContent:'center', color:'white'}}>{Icons.Layout && <Icons.Layout size={16}/>}</span>
                  <div>
                    <div style={{fontFamily:'var(--f-display)', fontWeight:600, fontSize:14}}>Academia K-Beauty</div>
                    <div style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.5)'}}>32 lecciones · 7 módulos</div>
                  </div>
                </div>
                <span style={{padding:'4px 9px', borderRadius:6, background:'rgba(16,185,129,0.15)', border:'1px solid rgba(52,210,155,0.3)', color:'var(--emerald-400)', fontFamily:'var(--f-mono)', fontSize:9, letterSpacing:'0.1em'}}>Tu progreso · 64%</span>
              </div>

              {/* Featured video */}
              <div style={{marginTop:14, borderRadius:12, overflow:'hidden', position:'relative', aspectRatio:'16/9', background:'linear-gradient(135deg, #6B21D9 0%, #2238B8 100%)'}}>
                <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <span style={{width:56, height:56, borderRadius:999, background:'rgba(255,255,255,0.92)', color:'var(--brand-700)', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 14px 30px -10px rgba(0,0,0,0.5)'}}>{Icons.Play && <Icons.Play size={22}/>}</span>
                </div>
                <div style={{position:'absolute', bottom:10, left:12, right:12, display:'flex', justifyContent:'space-between', alignItems:'flex-end', color:'white'}}>
                  <div>
                    <div style={{fontFamily:'var(--f-mono)', fontSize:9, opacity:0.7, letterSpacing:'0.14em', textTransform:'uppercase'}}>Módulo 04 · Lección 3</div>
                    <div style={{fontFamily:'var(--f-display)', fontSize:18, fontWeight:600, letterSpacing:'-0.01em', marginTop:2}}>Cómo cerrar tu primera venta</div>
                  </div>
                  <span style={{fontFamily:'var(--f-mono)', fontSize:10, padding:'3px 7px', background:'rgba(0,0,0,0.4)', borderRadius:4}}>12:34</span>
                </div>
              </div>

              {/* Lessons list */}
              <div style={{marginTop:14}}>
                <div style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.5)', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:8}}>Tu camino</div>
                {[
                  ['M01', 'Bienvenida a la red', '08:12', true],
                  ['M02', 'Productos y catálogo', '14:30', true],
                  ['M03', 'Tu página personal', '06:48', true],
                  ['M04', 'Cómo cerrar tu primera venta', '12:34', false, true],
                  ['M05', 'Manejo de objeciones', '11:20', false],
                  ['M06', 'Cómo crecer tu red', '15:48', false],
                ].map(([m, t, dur, done, current], i) => (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'9px 10px', background: current ? 'rgba(124,58,237,0.1)' : 'transparent', border: current ? '1px solid rgba(124,58,237,0.25)' : '1px solid transparent', borderRadius:8, marginBottom:4}}>
                    <span style={{
                      width:22, height:22, borderRadius:999, flexShrink:0,
                      background: done ? 'var(--emerald-500)' : (current ? 'var(--brand-500)' : 'rgba(255,255,255,0.06)'),
                      color: 'white', display:'flex', alignItems:'center', justifyContent:'center',
                    }}>
                      {done ? (Icons.Check && <Icons.Check size={11} stroke={2.6}/>) : (current ? (Icons.Play && <Icons.Play size={9}/>) : null)}
                    </span>
                    <span style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.5)'}}>{m}</span>
                    <span style={{flex:1, fontSize:12.5, color: done ? 'rgba(255,255,255,0.55)' : 'white', textDecoration: done ? 'line-through' : 'none'}}>{t}</span>
                    <span style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.45)'}}>{dur}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right */}
          <div>
            <span className="eyebrow">Pilar 04 · Academia interna</span>
            <h2 className="display display-lg" style={{marginTop: 14, color:'white'}}>
              Tu propia academia.<br/>
              <span style={{color:'var(--brand-300)'}}>Tu propio ritmo.</span>
            </h2>
            <p style={{marginTop: 18, fontSize: 18, color:'rgba(255,255,255,0.75)', maxWidth: 560, textWrap:'pretty'}}>
              Cada líder sube sus videos, guías y protocolos a la academia de su red.
              Tus vendedores aprenden cuando quieren, repasan cuando les hace falta —
              sin chats interminables ni audios perdidos en WhatsApp.
            </p>

            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap: 12}}>
              {[
                [Icons.Eye,   'Videos siempre disponibles',  'Tu red consulta cuando quiera. Las mejores capacitaciones, siempre a la mano.'],
                [Icons.ChartUp,'Progreso por vendedor',     'Sabes quién va al día, quién necesita refuerzo y quién está listo para promoción.'],
                [Icons.Layers,'Módulos personalizables',     'Tú decides el orden, los temas, los plazos. Es tu academia, no la nuestra.'],
              ].map(([I, t, s], i) => (
                <li key={i} style={{display:'flex', gap:12, alignItems:'flex-start'}}>
                  <span style={{flexShrink:0, width:36, height:36, borderRadius:10, background:'rgba(124,58,237,0.18)', color:'var(--brand-300)', border:'1px solid rgba(124,58,237,0.25)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    {I && <I size={18}/>}
                  </span>
                  <div>
                    <div style={{fontFamily:'var(--f-display)', fontWeight:600, fontSize:16, letterSpacing:'-0.01em', color:'white'}}>{t}</div>
                    <div style={{fontSize:14, color:'rgba(255,255,255,0.65)', marginTop:2}}>{s}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) { #ac-grid { grid-template-columns: 1fr !important; gap: 40px !important; } #ac-grid > div:first-child { order: 2; } }
      `}</style>
    </section>
  );
}

window.Academy = Academy;