/* global React */
function ContentLibrary() {
  const Icons = window.Icons || {};
  const [active, setActive] = React.useState(0);

  const categories = [
    { name: 'Reels',     count: 124 },
    { name: 'Posts',     count: 86  },
    { name: 'Historias', count: 142 },
    { name: 'Copys',     count: 230 },
    { name: 'Carruseles',count: 58  },
  ];

  return (
    <section id="pillar-content" className="section section--paper2" style={{paddingTop: 90, paddingBottom: 100, borderTop:'1px solid var(--paper-line)'}}>
      <div className="container">
        <div className="reveal" style={{display:'grid', gridTemplateColumns:'0.95fr 1.05fr', gap: 56, alignItems:'center'}} id="cl-grid">
          {/* Left */}
          <div>
            <span className="eyebrow">Pilar 03 · Biblioteca de contenido</span>
            <h2 className="display display-lg" style={{marginTop: 14}}>
              Contenido <span style={{color:'var(--brand-500)'}}>listo para subir.</span>
            </h2>
            <p style={{marginTop: 18, fontSize: 18, color:'var(--ink-mute)', maxWidth: 540, textWrap:'pretty'}}>
              Reels, posts, historias, carruseles, copys. Hechos por diseñadores especializados
              en network marketing. Tus vendedores entran al portal, descargan lo que les guste,
              y lo publican como propio en sus redes.
            </p>

            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap: 12}}>
              {[
                [Icons.Refresh, 'Contenido nuevo cada semana', 'No más reciclar los mismos posts. La biblioteca se actualiza constantemente.'],
                [Icons.Sparkle, 'Específico para tu multinivel', 'Adaptado a tu nicho — belleza, salud, suplementos, lo que vendas.'],
                [Icons.Edit,    'Personalizable', 'Cada vendedor puede agregarle su toque antes de publicar.'],
              ].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.1)', color:'var(--brand-600)', 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'}}>{t}</div>
                    <div style={{fontSize:14, color:'var(--ink-mute)', marginTop:2}}>{s}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* Right — Library mock */}
          <div style={{position:'relative'}}>
            <div style={{
              background:'linear-gradient(180deg, #0B0816, #1a1233)', color:'white',
              borderRadius:22, padding:24, position:'relative', overflow:'hidden',
              boxShadow:'0 40px 80px -30px rgba(11,8,22,0.35)',
            }}>
              <div aria-hidden="true" style={{position:'absolute', top:-100, right:-50, width:280, height:280, borderRadius:'50%', background:'radial-gradient(circle, color-mix(in oklab, var(--brand-500) 35%, transparent), transparent 70%)', filter:'blur(40px)'}} />
              <div style={{position:'relative'}}>
                {/* Header */}
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', paddingBottom:16, borderBottom:'1px solid rgba(255,255,255,0.06)'}}>
                  <div>
                    <div style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.5)', letterSpacing:'0.12em', textTransform:'uppercase'}}>Biblioteca</div>
                    <div style={{fontFamily:'var(--f-display)', fontSize:18, fontWeight:600, marginTop:2}}>Contenido K-Beauty</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'}}>+18 esta semana</span>
                </div>

                {/* Category tabs */}
                <div style={{marginTop:14, display:'flex', gap:6, flexWrap:'wrap'}}>
                  {categories.map((c, i) => (
                    <button key={i} onClick={() => setActive(i)} style={{
                      padding:'6px 11px', borderRadius:8, fontSize:11.5, fontFamily:'var(--f-mono)',
                      background: active === i ? 'rgba(124,58,237,0.25)' : 'rgba(255,255,255,0.04)',
                      color: active === i ? 'white' : 'rgba(255,255,255,0.65)',
                      border: active === i ? '1px solid rgba(124,58,237,0.45)' : '1px solid rgba(255,255,255,0.08)',
                      cursor:'pointer',
                    }}>{c.name} <span style={{opacity:0.6, marginLeft:4}}>{c.count}</span></button>
                  ))}
                </div>

                {/* Grid of asset cards */}
                <div style={{marginTop:18, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10}}>
                  {[
                    { grad:'linear-gradient(135deg, #B49AFB, #6B21D9)', tag:'Reel · 0:24', title:'Rutina de noche' },
                    { grad:'linear-gradient(135deg, #5C72FF, #2238B8)', tag:'Post', title:'Promo abril' },
                    { grad:'linear-gradient(135deg, #34D29B, #0FA174)', tag:'Reel · 0:18', title:'Antes y después' },
                    { grad:'linear-gradient(135deg, #E11D74, #871147)', tag:'Carrusel', title:'Top 5 productos' },
                    { grad:'linear-gradient(135deg, #F587B2, #E11D74)', tag:'Historia', title:'Testimonio Ana' },
                    { grad:'linear-gradient(135deg, #9050F5, #5316B0)', tag:'Reel · 0:30', title:'Tips de piel' },
                  ].map((a, i) => (
                    <div key={i} style={{aspectRatio:'9/14', borderRadius:10, background:a.grad, position:'relative', overflow:'hidden', cursor:'pointer'}}>
                      <div style={{position:'absolute', inset:'25% 18%', borderRadius:8, background:'rgba(255,255,255,0.18)', backdropFilter:'blur(2px)'}} />
                      <div style={{position:'absolute', top:6, left:6, padding:'2px 5px', background:'rgba(0,0,0,0.4)', borderRadius:4, fontFamily:'var(--f-mono)', fontSize:8, color:'white', letterSpacing:'0.08em'}}>{a.tag}</div>
                      <div style={{position:'absolute', bottom:6, left:6, right:6, fontSize:9, color:'white', fontWeight:600, lineHeight:1.2}}>{a.title}</div>
                    </div>
                  ))}
                </div>

                <div style={{marginTop:14, padding:'10px 12px', background:'rgba(124,58,237,0.1)', border:'1px solid rgba(124,58,237,0.25)', borderRadius:10, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                  <span style={{fontSize:12, color:'white'}}>640 piezas disponibles</span>
                  <span style={{fontFamily:'var(--f-mono)', fontSize:10, color:'var(--brand-300)'}}>Ver todo →</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

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

window.ContentLibrary = ContentLibrary;