/* global React */
function Hero() {
  const [name, setName] = React.useState('paula');
  const Icons = window.Icons || {};

  React.useEffect(() => {
    const names = ['paula', 'luis', 'mariana', 'diego', 'sofia', 'andres', 'valeria'];
    let i = 0;
    const id = setInterval(() => { i = (i + 1) % names.length; setName(names[i]); }, 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="top" className="section section--dark" style={{paddingTop: 130, paddingBottom: 70, overflow:'hidden', position:'relative'}}>
      {/* Aurora bg */}
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, pointerEvents:'none',
        background: `
          radial-gradient(900px 520px at 8% 0%, color-mix(in oklab, var(--brand-500) 55%, transparent), transparent 60%),
          radial-gradient(720px 480px at 96% 18%, color-mix(in oklab, var(--brand-700) 70%, transparent), transparent 60%),
          radial-gradient(1100px 600px at 60% 110%, color-mix(in oklab, var(--brand-600) 45%, transparent), transparent 65%)
        `,
        opacity: 0.6,
      }} />
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, pointerEvents:'none',
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%)',
      }} />
      <FloatingOrbs />

      <div className="container" style={{position:'relative', display:'grid', gridTemplateColumns:'1.1fr 0.9fr', gap:56, alignItems:'center'}}>
        <div className="reveal visible">
          <div className="pill" style={{marginBottom:22}}>
            <span className="pill-dot" style={{background:'var(--emerald-400)'}} />
            BOBAX · La plataforma de tu red
          </div>

          <h1 className="display hero-h1" style={{margin:0, color:'white', fontSize:'clamp(32px, 4.6vw, 58px)', lineHeight:1.04, letterSpacing:'-0.022em', fontWeight:600}}>
            <span style={{display:'block', whiteSpace:'nowrap'}}>Todos los negocios</span>
            <span style={{display:'block', whiteSpace:'nowrap', color:'rgba(255,255,255,0.55)'}}>necesitan tecnología.</span>
            <span style={{display:'block', whiteSpace:'nowrap',
              background:'linear-gradient(90deg, var(--brand-300), var(--brand-400))',
              WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
            }}>Tu network marketing</span>
            <em style={{display:'block', whiteSpace:'nowrap', fontStyle:'italic', fontWeight:500, color:'white'}}>no es la excepción.</em>
          </h1>

          <p style={{marginTop:24, maxWidth:540, fontSize:18, lineHeight:1.55, color:'rgba(255,255,255,0.78)'}}>
            <strong style={{color:'white', fontWeight:600}}>BOBAX</strong> le da a tu red las herramientas
            que todo negocio moderno tiene: <strong style={{color:'white', fontWeight:600}}>páginas web replicadas, campañas
            de Meta diseñadas por nuestro equipo, biblioteca de contenido y academia interna</strong> —
            todo en una sola plataforma.
          </p>

          <div style={{marginTop:30, display:'flex', gap:12, flexWrap:'wrap'}}>
            <a href="#book" data-book-call className="btn btn-primary" style={{padding:'16px 26px', fontSize:16}}>
              Quiero escalar mi red
              {Icons.ArrowRight && <Icons.ArrowRight size={18} />}
            </a>
            <a href="#how" className="btn btn-ghost" style={{padding:'16px 22px', fontSize:16, borderColor:'rgba(255,255,255,0.25)'}}>
              {Icons.Play && <Icons.Play size={14} />} Cómo funciona
            </a>
          </div>

          {/* Pillars chip row */}
          <div className="reveal" style={{marginTop:36, display:'flex', flexWrap:'wrap', gap:8}}>
            {[
              [Icons.Globe, 'Páginas replicadas'],
              [Icons.Target, 'Tráfico con Meta'],
              [Icons.Layers, 'Biblioteca de contenido'],
              [Icons.Layout, 'Academia interna'],
              [Icons.Bot, 'IA en WhatsApp · opcional'],
            ].map(([I, t], i) => (
              <span key={i} style={{
                display:'inline-flex', alignItems:'center', gap:8,
                padding:'7px 13px', borderRadius:999,
                background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.1)',
                color:'rgba(255,255,255,0.85)', fontSize:12.5, fontWeight:500,
              }}>
                <span style={{color:'var(--brand-300)'}}>{I && <I size={14}/>}</span>
                {t}
              </span>
            ))}
          </div>
        </div>

        <HeroShowcase name={name} />
      </div>

      <style>{`
        @media (max-width: 980px) {
          section#top .container { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 720px) {
          section#top { padding-top: 110px !important; padding-bottom: 56px !important; }
          .hero-showcase { min-height: 420px !important; }
          .hero-showcase .phone-wrap { transform: scale(0.85); transform-origin: center; }
          .hero-showcase .float-card { display: none !important; }
          .hero-h1 { font-size: clamp(28px, 8.4vw, 44px) !important; }
        }
        @media (max-width: 420px) {
          .hero-h1 span, .hero-h1 em { white-space: normal !important; }
        }
      `}</style>
    </section>
  );
}

function FloatingOrbs() {
  return (
    <div aria-hidden="true" style={{position:'absolute', inset:0, pointerEvents:'none', overflow:'hidden'}}>
      <span style={orb(80, 12, 'var(--brand-500)', '22s', '0s')} />
      <span style={orb(120, 70, 'var(--brand-700)', '28s', '-6s')} />
      <span style={orb(50, 40, 'var(--brand-300)', '18s', '-3s', 0.6)} />
      <span style={orb(30, 85, 'var(--brand-400)', '24s', '-10s', 0.7)} />
      <style>{`@keyframes drift { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(30px, -20px); } }`}</style>
    </div>
  );
}
function orb(x, y, color, dur, delay, scale=1) {
  return {
    position:'absolute', left:`${x}%`, top:`${y}%`,
    width: 140*scale, height: 140*scale, borderRadius:'50%',
    background:`radial-gradient(circle, ${color} 0%, transparent 70%)`,
    filter: 'blur(30px)', opacity: 0.5,
    animation: `drift ${dur} ease-in-out ${delay} infinite`,
  };
}

function HeroShowcase({ name }) {
  const Icons = window.Icons || {};
  const display = name[0].toUpperCase() + name.slice(1);

  return (
    <div className="hero-showcase" style={{position:'relative', minHeight: 540}}>
      <div aria-hidden="true" style={{
        position:'absolute', inset:'-10% -20%', borderRadius:'50%',
        background:'radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--brand-500) 35%, transparent), transparent 65%)',
        filter:'blur(40px)', zIndex:0,
      }} />

      <div className="phone-wrap" style={{position:'relative', zIndex:2, display:'flex', justifyContent:'center'}}>
        <div style={{
          width: 280, height: 580, borderRadius: 44, padding: 12,
          background:'linear-gradient(180deg, #2a2a4a, #0a0a18)',
          border:'1px solid rgba(255,255,255,0.1)',
          boxShadow:'0 60px 120px -40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 60px 0 color-mix(in oklab, var(--brand-500) 25%, transparent)',
          position:'relative',
        }}>
          <div style={{position:'absolute', top:18, left:'50%', transform:'translateX(-50%)', width:100, height:24, borderRadius:999, background:'#000', zIndex:3}} />
          <div style={{width:'100%', height:'100%', borderRadius:32, overflow:'hidden', background:'#0B0816', position:'relative'}}>
            <div style={{height: 180, position:'relative', backgroundImage:`linear-gradient(135deg, color-mix(in oklab, var(--brand-700) 80%, #000) 0%, color-mix(in oklab, var(--brand-500) 80%, #ed5dd6) 100%)`}}>
              <div style={{position:'absolute', inset:'20% 25%', borderRadius:18, background:'rgba(255,255,255,0.16)', backdropFilter:'blur(4px)'}} />
              <div style={{position:'absolute', top:14, left:14, fontFamily:'var(--f-mono)', fontSize:9, color:'rgba(255,255,255,0.65)', letterSpacing:'0.14em', textTransform:'uppercase'}}>tu marca</div>
              <div style={{position:'absolute', top:8, right:14, padding:'3px 7px', background:'rgba(16,185,129,0.18)', border:'1px solid rgba(52,210,155,0.4)', color:'var(--emerald-400)', fontFamily:'var(--f-mono)', fontSize:8, letterSpacing:'0.1em', borderRadius:5}}>LIVE</div>
            </div>
            <div style={{padding:'20px 16px', color:'white'}}>
              <div style={{fontFamily:'var(--f-display)', fontSize:22, fontWeight:600, letterSpacing:'-0.01em', lineHeight:1.1}}>
                Conoce con <span style={{color:'var(--brand-300)'}}>{display}</span>
              </div>
              <div style={{fontSize:11, color:'rgba(255,255,255,0.6)', marginTop:8, lineHeight:1.4}}>
                Tu red, tu negocio. Atención personalizada por WhatsApp.
              </div>
              <div style={{marginTop:18, display:'flex', flexDirection:'column', gap:8}}>
                <div style={{height:34, background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:8, padding:'0 10px', display:'flex', alignItems:'center', fontSize:10.5, color:'rgba(255,255,255,0.45)'}}>Tu nombre</div>
                <div style={{height:34, background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:8, padding:'0 10px', display:'flex', alignItems:'center', fontSize:10.5, color:'rgba(255,255,255,0.45)'}}>+52 ___ ___ ____</div>
                <div style={{height:36, background:'var(--brand-500)', borderRadius:8, display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:600, gap:6}}>
                  {Icons.Whatsapp && <Icons.Whatsapp size={14} />} Hablar con {display}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <FloatCard style={{top:'4%', left:'-2%'}} delay="0s">
        <div style={{width:38, height:38, borderRadius:10, background:'rgba(124,58,237,0.18)', color:'var(--brand-300)', display:'flex', alignItems:'center', justifyContent:'center'}}>
          {Icons.Globe && <Icons.Globe size={20} />}
        </div>
        <div>
          <div style={{fontSize:12, fontWeight:600, color:'white'}}>Página replicada</div>
          <div style={{fontSize:10, fontFamily:'var(--f-mono)', color:'var(--brand-300)', marginTop:2}}>{name}.tumarca.com</div>
        </div>
      </FloatCard>

      <FloatCard style={{top:'45%', right:'-6%'}} delay="-1s">
        <div style={{width:38, height:38, borderRadius:10, background:'rgba(16,185,129,0.18)', color:'var(--emerald-400)', display:'flex', alignItems:'center', justifyContent:'center'}}>
          {Icons.Target && <Icons.Target size={20} />}
        </div>
        <div>
          <div style={{fontSize:12, fontWeight:600, color:'white'}}>Campaña activa</div>
          <div style={{fontSize:10, fontFamily:'var(--f-mono)', color:'rgba(255,255,255,0.5)', marginTop:2}}>Meta · CDMX</div>
        </div>
      </FloatCard>

      <FloatCard style={{bottom:'4%', left:'-8%'}} delay="-2s">
        <div style={{width:38, height:38, borderRadius:10, background:'rgba(124,58,237,0.18)', color:'var(--brand-300)', display:'flex', alignItems:'center', justifyContent:'center'}}>
          {Icons.Trending && <Icons.Trending size={20} />}
        </div>
        <div>
          <div style={{fontSize:12, fontWeight:600, color:'white'}}>+12 clientes hoy</div>
          <div style={{fontSize:10, fontFamily:'var(--f-mono)', color:'rgba(255,255,255,0.5)', marginTop:2}}>tráfico real</div>
        </div>
      </FloatCard>
    </div>
  );
}

function FloatCard({ children, style, delay }) {
  return (
    <div className="float-card" style={{
      position:'absolute', background:'rgba(20,17,43,0.85)',
      border:'1px solid rgba(255,255,255,0.08)', borderRadius:14, padding:'12px 14px',
      display:'flex', alignItems:'center', gap:12,
      backdropFilter:'blur(10px)', boxShadow:'0 24px 50px -20px rgba(0,0,0,0.7)',
      animation:`float-card 6s ease-in-out ${delay} infinite`, zIndex: 3, ...style,
    }}>
      {children}
      <style>{`@keyframes float-card { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }`}</style>
    </div>
  );
}

window.Hero = Hero;