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

  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);
  }, []);

  const Icons = window.Icons || {};

  return (
    <section id="top" className="section section--dark" style={{paddingTop: 130, paddingBottom: 80, 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,
      }} />
      {/* Grid */}
      <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%)',
      }} />
      {/* Floating ambient orbs */}
      <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)'}} />
            Para líderes y vendedores que quieren crecer su red
          </div>

          <h1 className="display display-xl" style={{margin:0, color:'white'}}>
            Tu propia <br/>
            <span style={{
              background:'linear-gradient(90deg, var(--brand-300), var(--brand-400))',
              WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
            }}>página web</span>,<br/>
            con tu nombre,<br/>
            <em style={{fontStyle:'italic', fontWeight:500, color:'rgba(255,255,255,0.72)'}}>vendiendo sola.</em>
          </h1>

          <p style={{marginTop:24, maxWidth:540, fontSize:19, lineHeight:1.55, color:'rgba(255,255,255,0.74)'}}>
            BOBAX es la plataforma que le da a cada persona de tu equipo su propia página web —
            con su nombre, su WhatsApp y sus clientes. Tú diseñas una vez, BOBAX la copia para todos.
          </p>

          <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
            <a href="#book" data-book-call className="btn btn-primary" style={{padding:'16px 26px', fontSize:16}}>
              Quiero mi página web
              {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} />} Ver cómo funciona
            </a>
          </div>

          {/* Trust strip */}
          <div className="reveal-stagger reveal visible" style={{marginTop:44, display:'flex', flexWrap:'wrap', gap:'18px 36px', alignItems:'center'}}>
            {[
              ['+800', 'vendedoras activas'],
              ['+50,000', 'clientes contactados'],
              ['24/7', 'venta automática'],
              ['Sin código', 'tú no programas nada'],
            ].map(([k, v], i) => (
              <div key={i} style={{display:'flex', flexDirection:'column'}}>
                <span style={{fontFamily:'var(--f-display)', fontSize:22, color:'white', fontWeight:600, letterSpacing:'-0.02em'}}>{k}</span>
                <span style={{fontSize:12, color:'rgba(255,255,255,0.55)', letterSpacing:'0.01em', marginTop:2}}>{v}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Right — interactive hero showcase */}
        <HeroShowcase name={name} />
      </div>

      {/* Scroll hint */}
      <div className="container" style={{marginTop:60, position:'relative'}}>
        <a href="#how" style={{display:'inline-flex', alignItems:'center', gap:10, fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)'}}>
          {Icons.ArrowDown && <Icons.ArrowDown size={14} />} Mira cómo se ve por dentro
        </a>
      </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; }
        }
      `}</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% { transform: translate(0, 0); }
          50% { transform: translate(30px, -20px); }
          100% { transform: translate(0, 0); }
        }
      `}</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 }) {
  // A clean stylized device + a sparkle network around
  const Icons = window.Icons || {};
  const display = name[0].toUpperCase() + name.slice(1);

  return (
    <div className="hero-showcase" style={{position:'relative', minHeight: 540}}>
      {/* Big circular orb backdrop */}
      <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,
      }} />

      {/* Phone */}
      <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'}}>
            {/* Stock-like header image */}
            <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%)`,
            }}>
              {/* Subtle product blob */}
              <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'}}>K-Beauty · LATAM</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}}>
                Productos coreanos auténticos. 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>

      {/* Floating cards around the phone */}
      <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 creada</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.Whatsapp && <Icons.Whatsapp size={20} />}
        </div>
        <div>
          <div style={{fontSize:12, fontWeight:600, color:'white'}}>Cliente nuevo</div>
          <div style={{fontSize:10, fontFamily:'var(--f-mono)', color:'rgba(255,255,255,0.5)', marginTop:2}}>María L. · Querétaro</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}}>vía Meta Ads</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;