/* global React */
function Portals() {
  const Icons = window.Icons || {};
  const [tab, setTab] = React.useState('leader');

  return (
    <section id="portals" className="section section--paper2" style={{paddingTop: 90, paddingBottom: 100, borderTop:'1px solid var(--paper-line)'}}>
      <div className="container">
        <div className="reveal" style={{textAlign:'center', maxWidth:780, margin:'0 auto'}}>
          <span className="eyebrow">Portales · Líder y Vendedor</span>
          <h2 className="display display-lg" style={{marginTop: 16}}>
            Cada quien ve <em style={{fontStyle:'italic', fontWeight:500}}>solo lo suyo.</em>
          </h2>
          <p style={{marginTop: 18, fontSize: 19, color:'var(--ink-mute)', textWrap:'pretty'}}>
            Tu líder maneja toda la red desde su portal. Tú —como vendedor—
            tienes el tuyo con tus clientes, tu página y tus campañas. Limpio. Privado. Sin desorden.
          </p>
        </div>

        {/* Tabs */}
        <div className="reveal" style={{marginTop: 40, display:'flex', justifyContent:'center'}}>
          <div style={{display:'inline-flex', background:'white', border:'1px solid var(--paper-line)', borderRadius:999, padding:4}}>
            <button onClick={()=>setTab('leader')} style={tabBtn(tab==='leader')}>
              {Icons.Users && <Icons.Users size={16} />} Portal del Líder
            </button>
            <button onClick={()=>setTab('affiliate')} style={tabBtn(tab==='affiliate')}>
              {Icons.User && <Icons.User size={16} />} Portal del Vendedor
            </button>
          </div>
        </div>

        {/* Showcase */}
        <div className="reveal" style={{marginTop: 44}}>
          {tab === 'leader' ? <LeaderShowcase /> : <AffiliateShowcase />}
        </div>
      </div>
    </section>
  );
}

const tabBtn = (active) => ({
  padding:'10px 18px', borderRadius:999, fontSize:14, fontWeight:600,
  background: active ? 'var(--brand-500)' : 'transparent',
  color: active ? 'white' : 'var(--ink-2)',
  display:'flex', alignItems:'center', gap:8,
  transition:'all .2s ease',
});

function LeaderShowcase() {
  const Icons = window.Icons || {};
  return (
    <div style={{
      display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:32, alignItems:'stretch',
    }} className="portal-grid">
      {/* Left — copy + checklist */}
      <div>
        <div className="display display-md" style={{margin:0}}>
          Lleva tu red completa<br/>desde una sola pantalla.
        </div>
        <p style={{marginTop: 14, fontSize: 16, color:'var(--ink-mute)', maxWidth: 460}}>
          Crea vendedores, asigna campañas, ve qué tan bien va cada quien y exporta todo a Excel cuando quieras.
        </p>

        <ul style={{margin:'28px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:14}}>
          {[
            [Icons.Layout, 'Diseña la página de tu marca', 'Una vez. Después se copia automáticamente para cada vendedor.'],
            [Icons.Users, 'Agrega vendedores en bulk', 'Sube un Excel y BOBAX activa las páginas y manda los WhatsApps.'],
            [Icons.Target, 'Crea plantillas de campañas Meta', 'Tus vendedores eligen geo y presupuesto. Tú controlas todo.'],
            [Icons.ChartUp, 'Reportes en tiempo real', 'Ventas, clientes, gasto en publicidad. Por vendedor o consolidado.'],
          ].map(([I, t, s], i) => (
            <li key={i} style={{display:'flex', gap:12}}>
              <span style={{width:36, height:36, borderRadius:10, background:'rgba(124,58,237,0.1)', color:'var(--brand-600)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                {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 — dashboard mock */}
      <div style={{
        background:'linear-gradient(180deg, #0B0816, #1a1233)', color:'white',
        borderRadius:22, padding:22, position:'relative', overflow:'hidden',
        boxShadow:'0 40px 80px -30px rgba(11,8,22,0.4)',
      }}>
        <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'}}>
          {/* fake sidebar/topbar */}
          <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:26, height:26, borderRadius:8, background:'var(--brand-500)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--f-display)', fontWeight:700, fontSize:13, color:'white'}}>B</span>
              <span style={{fontFamily:'var(--f-display)', fontWeight:600, fontSize:14}}>K-Beauty Latam · Mariana R.</span>
            </div>
            <span style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.5)', letterSpacing:'0.1em'}}>PORTAL LÍDER</span>
          </div>

          <div style={{marginTop:18, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10}}>
            {[
              ['Vendedores', '127', '+12 esta semana', 'var(--brand-300)'],
              ['Clientes nuevos', '1,842', '+24%', 'var(--emerald-400)'],
              ['Ventas mes', '$284k', '+38% vs anterior', 'var(--emerald-400)'],
            ].map(([k, v, d, c], i) => (
              <div key={i} style={{padding:'12px 14px', background:'rgba(255,255,255,0.04)', borderRadius:10, border:'1px solid rgba(255,255,255,0.06)'}}>
                <div style={{fontSize:10, color:'rgba(255,255,255,0.55)', fontFamily:'var(--f-mono)', letterSpacing:'0.06em', textTransform:'uppercase'}}>{k}</div>
                <div style={{fontFamily:'var(--f-display)', fontSize:22, fontWeight:600, color:'white', marginTop:4, letterSpacing:'-0.01em'}}>{v}</div>
                <div style={{fontSize:10, color:c, marginTop:3}}>{d}</div>
              </div>
            ))}
          </div>

          {/* Chart */}
          <div style={{marginTop:18, padding:14, background:'rgba(0,0,0,0.3)', borderRadius:12, border:'1px solid rgba(255,255,255,0.06)'}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span style={{fontSize:11, color:'rgba(255,255,255,0.55)', fontFamily:'var(--f-mono)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Clientes / día</span>
              <div style={{display:'flex', gap:6}}>
                {['7d','30d','90d'].map((p,i)=>(
                  <span key={p} style={{padding:'3px 8px', borderRadius:5, fontSize:10, fontFamily:'var(--f-mono)',
                    background:i===1?'rgba(124,58,237,0.25)':'transparent', color:i===1?'var(--brand-200)':'rgba(255,255,255,0.5)',
                    border:i===1?'1px solid rgba(124,58,237,0.4)':'none'}}>{p}</span>
                ))}
              </div>
            </div>
            <svg viewBox="0 0 300 80" style={{width:'100%', marginTop:10, display:'block'}}>
              <defs>
                <linearGradient id="ar" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--brand-400)" stopOpacity="0.6"/>
                  <stop offset="100%" stopColor="var(--brand-400)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0 60 L25 55 L50 50 L75 42 L100 38 L125 30 L150 35 L175 25 L200 18 L225 22 L250 12 L275 8 L300 5 L300 80 L0 80 Z" fill="url(#ar)" />
              <path d="M0 60 L25 55 L50 50 L75 42 L100 38 L125 30 L150 35 L175 25 L200 18 L225 22 L250 12 L275 8 L300 5" fill="none" stroke="var(--brand-300)" strokeWidth="1.6"/>
            </svg>
          </div>

          {/* Recent affiliates */}
          <div style={{marginTop:14}}>
            <div style={{fontSize:11, color:'rgba(255,255,255,0.55)', fontFamily:'var(--f-mono)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:8}}>Top vendedores</div>
            {[
              ['Paula G.', '184 clientes', '$32,400'],
              ['Luis A.',  '142 clientes', '$28,100'],
              ['Sofía P.', '128 clientes', '$24,800'],
            ].map(([n, c, v], i) => (
              <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderBottom:i<2?'1px solid rgba(255,255,255,0.04)':'none'}}>
                <span style={{width:24, height:24, borderRadius:999, background:'linear-gradient(135deg, var(--brand-400), var(--brand-700))', display:'flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:600}}>{n[0]}</span>
                <span style={{fontSize:12.5, flex:1}}>{n}</span>
                <span style={{fontSize:11, color:'rgba(255,255,255,0.55)', fontFamily:'var(--f-mono)'}}>{c}</span>
                <span style={{fontSize:12, color:'var(--emerald-400)', fontWeight:600, fontFamily:'var(--f-mono)'}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .portal-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </div>
  );
}

function AffiliateShowcase() {
  const Icons = window.Icons || {};
  return (
    <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:32, alignItems:'stretch'}} className="portal-grid">
      <div>
        <div className="display display-md" style={{margin:0}}>
          Tu negocio, tu página,<br/>tus clientes. <em style={{fontStyle:'italic', fontWeight:500}}>Solo tuyos.</em>
        </div>
        <p style={{marginTop:14, fontSize:16, color:'var(--ink-mute)', maxWidth:460}}>
          Cuando entras a tu portal ves tus números, no los de nadie más. Sin distracciones.
        </p>
        <ul style={{margin:'28px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:14}}>
          {[
            [Icons.Globe, 'Tu enlace para compartir', 'Cópialo y mándalo a tu lista, a redes, a quien quieras.'],
            [Icons.Users, 'Lista de clientes capturados', 'Cada vez que alguien deja sus datos en tu página, te llega aquí.'],
            [Icons.Target, 'Activa campañas Meta', 'Elige geo y presupuesto. Sube tu comprobante. Listo.'],
            [Icons.Phone, 'Atajo a tu WhatsApp', 'Un botón para responderle directo al cliente desde el portal.'],
          ].map(([I, t, s], i) => (
            <li key={i} style={{display:'flex', gap:12}}>
              <span style={{width:36, height:36, borderRadius:10, background:'rgba(124,58,237,0.1)', color:'var(--brand-600)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                {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>

      {/* Affiliate dashboard mock */}
      <div style={{
        background:'linear-gradient(180deg, #0B0816, #1a1233)', color:'white',
        borderRadius:22, padding:22, position:'relative', overflow:'hidden',
        boxShadow:'0 40px 80px -30px rgba(11,8,22,0.4)',
      }}>
        <div aria-hidden="true" style={{position:'absolute', top:-100, right:-50, width:280, height:280, borderRadius:'50%', background:'radial-gradient(circle, rgba(16,185,129,0.3), transparent 70%)', filter:'blur(40px)'}} />
        <div style={{position:'relative'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingBottom:14, borderBottom:'1px solid rgba(255,255,255,0.06)'}}>
            <div style={{display:'flex', alignItems:'center', gap:10}}>
              <span style={{width:26, height:26, 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:12}}>P</span>
              <div>
                <div style={{fontFamily:'var(--f-display)', fontWeight:600, fontSize:13.5}}>Paula G.</div>
                <div style={{fontFamily:'var(--f-mono)', fontSize:9.5, color:'rgba(255,255,255,0.5)'}}>paula.kbeauty-latam.com</div>
              </div>
            </div>
            <span style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.5)', letterSpacing:'0.1em'}}>PORTAL VENDEDOR</span>
          </div>

          {/* link box */}
          <div style={{marginTop:14, padding:'12px 14px', 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', gap:10}}>
            <div>
              <div style={{fontSize:10, color:'var(--brand-300)', fontFamily:'var(--f-mono)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Tu enlace</div>
              <div style={{fontSize:12.5, fontFamily:'var(--f-mono)', color:'white', marginTop:2}}>paula.kbeauty-latam.com</div>
            </div>
            <button style={{padding:'7px 12px', background:'var(--brand-500)', borderRadius:8, fontSize:11, fontWeight:600, color:'white'}}>Copiar</button>
          </div>

          <div style={{marginTop:14, display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            {[
              ['Clientes este mes', '47', 'var(--brand-300)'],
              ['Conversaciones IA', '184', 'var(--emerald-400)'],
            ].map(([k,v,c], i) => (
              <div key={i} style={{padding:'12px 14px', background:'rgba(255,255,255,0.04)', borderRadius:10, border:'1px solid rgba(255,255,255,0.06)'}}>
                <div style={{fontSize:10, color:'rgba(255,255,255,0.55)', fontFamily:'var(--f-mono)', letterSpacing:'0.06em', textTransform:'uppercase'}}>{k}</div>
                <div style={{fontFamily:'var(--f-display)', fontSize:24, fontWeight:600, color: c, marginTop:4, letterSpacing:'-0.01em'}}>{v}</div>
              </div>
            ))}
          </div>

          {/* recent leads */}
          <div style={{marginTop:14}}>
            <div style={{fontSize:11, color:'rgba(255,255,255,0.55)', fontFamily:'var(--f-mono)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:8}}>Clientes recientes</div>
            {[
              ['María L.', '+52 442 ··· 0192', 'Querétaro', '2 min'],
              ['Andrea P.', '+52 33 ··· 4421', 'Guadalajara', '14 min'],
              ['Iván C.',   '+52 55 ··· 7785', 'CDMX', '1h'],
            ].map(([n, p, c, t], i) => (
              <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'9px 0', borderBottom:i<2?'1px solid rgba(255,255,255,0.04)':'none'}}>
                <span style={{width:24, height:24, borderRadius:999, background:'rgba(124,58,237,0.18)', color:'var(--brand-300)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                  {Icons.User && <Icons.User size={12} />}
                </span>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:12.5}}>{n}</div>
                  <div style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.5)'}}>{p} · {c}</div>
                </div>
                <span style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.5)'}}>{t}</span>
                <button style={{padding:'5px 10px', borderRadius:6, background:'var(--emerald-500)', color:'white', fontSize:11, fontWeight:600, display:'flex', alignItems:'center', gap:5}}>
                  {Icons.Whatsapp && <Icons.Whatsapp size={11}/>} Responder
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Portals = Portals;