/* global React */
function AfiliAds() {
  const Icons = window.Icons || {};
  return (
    <section id="afiliads" className="section section--light" style={{paddingTop: 90, paddingBottom: 100, position:'relative', overflow:'hidden'}}>
      <div className="container">
        <div className="reveal" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 56, alignItems:'center'}} id="afi-grid">
          <div>
            <span className="pill" style={{marginBottom: 18}}>
              <span className="pill-dot" />
              Campañas de Meta · Facebook & Instagram
            </span>
            <h2 className="display display-lg" style={{margin:0}}>
              Anuncios que <span style={{color:'var(--brand-500)'}}>te traen clientes nuevos</span> en automático.
            </h2>
            <p style={{marginTop: 22, fontSize: 19, color:'var(--ink-mute)', textWrap:'pretty'}}>
              Tu líder arma las campañas. Tú eliges en qué ciudad quieres anunciarte y cuánto
              quieres invertir. BOBAX las prende, las monitorea y las apaga cuando llegan al
              presupuesto. Sin Ads Manager. Sin complicaciones.
            </p>

            <ul style={{margin:'28px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap: 14}}>
              {[
                [Icons.Layout, 'Plantillas de anuncios listas', 'Tu líder diseña la campaña una vez. Tú solo eliges geo y presupuesto.'],
                [Icons.Coins, 'Tú decides cuánto invertir', 'Desde $500 hasta el tope que defina tu líder. Tú mandas.'],
                [Icons.Eye, 'Métricas en español', 'Sin tecnicismos. Sabes cuántos clientes, cuánto gastaste y tu costo por cliente.'],
                [Icons.Shield, 'Pausa automática', 'Cuando llegas al 95% de tu presupuesto, el sistema apaga el anuncio. No te pasas.'],
              ].map(([I, t, s], i) => (
                <li key={i} style={{display:'flex', gap:14, alignItems:'flex-start'}}>
                  <span style={{
                    flexShrink:0, width:40, height:40, borderRadius:10,
                    background:'rgba(124,58,237,0.1)', color:'var(--brand-600)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                  }}>{I && <I size={20} />}</span>
                  <div>
                    <div style={{fontFamily:'var(--f-display)', fontWeight:600, fontSize:16, letterSpacing:'-0.01em'}}>{t}</div>
                    <div style={{fontSize: 14.5, color:'var(--ink-mute)', marginTop:2}}>{s}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          <CampaignMock />
        </div>
      </div>

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

function CampaignMock() {
  const Icons = window.Icons || {};
  const [budget] = React.useState(2000);
  const [spent, setSpent] = React.useState(420);

  React.useEffect(() => {
    const id = setInterval(() => {
      setSpent(s => {
        const next = s + Math.floor(Math.random() * 80);
        return next >= budget * 0.95 ? Math.floor(budget * 0.18) : next;
      });
    }, 1700);
    return () => clearInterval(id);
  }, [budget]);

  const pct = Math.min(100, (spent / budget) * 100);

  return (
    <div style={{position:'relative'}}>
      <div style={{
        background:'white', borderRadius: 22, padding: 28,
        border:'1px solid var(--paper-line)',
        boxShadow:'0 30px 60px -30px rgba(11,8,22,0.15)',
      }}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:14}}>
          <div>
            <div style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--brand-600)', letterSpacing:'0.12em', textTransform:'uppercase', fontWeight:600}}>
              Campaña · K-Beauty Q2
            </div>
            <div style={{fontFamily:'var(--f-display)', fontSize:22, fontWeight:600, letterSpacing:'-0.01em', marginTop: 6}}>
              Activa · vendiendo ahora
            </div>
          </div>
          <span style={{
            display:'inline-flex', alignItems:'center', gap: 6,
            padding:'5px 10px', borderRadius:999,
            background:'rgba(16,185,129,0.1)', color:'var(--emerald-600)',
            fontSize: 11, fontWeight:600, fontFamily:'var(--f-mono)',
            letterSpacing:'0.08em', textTransform:'uppercase',
          }}>
            <span style={{width:6, height:6, borderRadius:999, background:'var(--emerald-500)', animation:'pulse 1.4s ease-in-out infinite'}} />
            En vivo
          </span>
        </div>

        <div style={{marginTop: 24}}>
          <div style={{display:'flex', justifyContent:'space-between', fontSize:13, color:'var(--ink-mute)'}}>
            <span>Lo que llevas gastado</span>
            <span><strong style={{color:'var(--ink)', fontFamily:'var(--f-mono)'}}>${spent.toLocaleString()}</strong> / ${budget.toLocaleString()} MXN</span>
          </div>
          <div style={{height: 10, background:'#EFEDE5', borderRadius:999, marginTop: 10, overflow:'hidden'}}>
            <div style={{
              height:'100%', width: `${pct}%`,
              background: `linear-gradient(90deg, var(--brand-500), var(--brand-400))`,
              borderRadius:999, transition:'width .6s ease',
            }} />
          </div>
        </div>

        <div style={{marginTop: 22, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 10}}>
          {[
            ['Dónde', 'CDMX'],
            ['Clientes', '47'],
            ['Costo/cliente', '$8.94'],
          ].map(([k, v], i) => (
            <div key={i} style={{padding:'14px 16px', background:'#F7F6F2', borderRadius:12}}>
              <div style={{fontSize:11, color:'var(--ink-mute)', letterSpacing:'0.08em', textTransform:'uppercase', fontFamily:'var(--f-mono)'}}>{k}</div>
              <div style={{fontFamily:'var(--f-display)', fontSize:18, fontWeight:600, marginTop:4, letterSpacing:'-0.01em'}}>{v}</div>
            </div>
          ))}
        </div>

        <div style={{marginTop:22, paddingTop: 22, borderTop:'1px solid var(--paper-line)'}}>
          <div style={{fontSize: 11, fontFamily:'var(--f-mono)', color:'var(--ink-mute)', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom: 10}}>
            Línea de tiempo
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {[
              ['09:14', 'Subiste tu comprobante', 'var(--emerald-500)', Icons.Check],
              ['09:32', 'Líder aprobó', 'var(--emerald-500)', Icons.Check],
              ['09:35', 'Campaña encendida', 'var(--brand-500)', Icons.Zap],
              ['10:02', 'Primer cliente', 'var(--brand-500)', Icons.Sparkle],
            ].map(([t, l, c, I], i) => (
              <div key={i} style={{display:'flex', alignItems:'center', gap:10, fontSize:13}}>
                <span style={{width:20, height:20, borderRadius:999, background: c, color:'white', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                  {I && <I size={12} stroke={2.5}/>}
                </span>
                <span style={{fontFamily:'var(--f-mono)', color:'var(--ink-mute)', fontSize:11}}>{t}</span>
                <span style={{color:'var(--ink-2)'}}>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{
        position:'absolute', top:-14, right:-18,
        background:'#0B0816', color:'white', padding:'10px 14px', borderRadius:12,
        fontSize:12, display:'flex', gap:10, alignItems:'center',
        boxShadow:'0 24px 50px -20px rgba(11,8,22,0.4)',
        animation: 'float-card 6s ease-in-out infinite',
      }}>
        <span style={{width:28, height:28, borderRadius:8, background:'rgba(124,58,237,0.25)', color:'var(--brand-300)', display:'flex', alignItems:'center', justifyContent:'center'}}>
          {Icons.Refresh && <Icons.Refresh size={14} />}
        </span>
        <div style={{lineHeight: 1.2}}>
          <div style={{fontWeight:600}}>Actualizando</div>
          <div style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.55)', marginTop:2}}>cada 15 min</div>
        </div>
      </div>

      <style>{`
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
      `}</style>
    </div>
  );
}

window.AfiliAds = AfiliAds;
