/* VE GAMERZ — Home. No fabricated video rows or community section:
   Hero (3D crystal) · real stat strip · subscribe/follow CTA. */
const { Button, Eyebrow } = window.VEGAMERZDesignSystem_63bcb5;
const { wrap, Reveal, StatCounter } = window.VG;
const HD = window.VG_DATA;

/* Static, styled hero used for reduced-motion / no-WebGL — also the 3D fallback. */
function HeroFallback({ showEmblem = true }) {
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 55% at 68% 46%,rgba(0,229,255,.20),transparent 70%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: ['linear-gradient(transparent 96%,rgba(0,229,255,.06) 96%) 0 0/100% 40px', 'linear-gradient(90deg,transparent 96%,rgba(0,229,255,.06) 96%) 0 0/40px 100%'].join(','), maskImage: 'radial-gradient(70% 70% at 68% 55%,#000,transparent 80%)', WebkitMaskImage: 'radial-gradient(70% 70% at 68% 55%,#000,transparent 80%)' }} />
      {showEmblem ? (
        <div className="vg-hero-emblem" style={{ position: 'absolute', top: '50%', right: 'clamp(4%,10%,14%)', transform: 'translateY(-50%)', width: 'clamp(220px,32vw,400px)', aspectRatio: '1', clipPath: 'polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)', overflow: 'hidden', border: '1px solid var(--c-line-strong)', boxShadow: 'var(--glow-lg)' }}>
          <img src="assets/logo.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      ) : null}
    </div>
  );
}
window.VGHeroFallback = HeroFallback;

function HeroStage() {
  const Hero3D = window.Hero3D;
  return (
    <section style={{ position: 'relative', overflow: 'hidden', minHeight: 'min(88vh,760px)', display: 'flex', alignItems: 'center', padding: '72px 0' }}>
      <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
        {Hero3D ? <Hero3D /> : <HeroFallback />}
      </div>
      <div style={{ position: 'relative', zIndex: 2, width: '100%', padding: '0 var(--wrap-pad)', boxSizing: 'border-box' }}>
        <div style={{ maxWidth: 'min(660px,92%)' }}>
          <Reveal><div style={{ marginBottom: 16 }}><Eyebrow>Cyber Gaming · Creator Branding</Eyebrow></div></Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 'clamp(40px,7.4vw,80px)', textTransform: 'uppercase', letterSpacing: '.005em', lineHeight: 0.98, margin: 0, maxWidth: '10ch' }}>
              Play. Create. <em style={{ fontStyle: 'normal', color: 'var(--c-primary)', textShadow: '0 0 30px rgba(0,229,255,.55)' }}>Dominate.</em>
            </h1>
          </Reveal>
          <Reveal delay={150}>
            <p style={{ color: 'var(--c-muted)', fontSize: 'clamp(16px,2.2vw,19px)', lineHeight: 1.6, maxWidth: '46ch', marginTop: 22, textWrap: 'pretty' }}>
              Entertaining gameplay and pro-level guides, dropping on YouTube every week. Welcome to the squad.
            </p>
          </Reveal>
          <Reveal delay={220}>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'center', marginTop: 32 }}>
              <Button variant="youtube" icon="▶" href={HD.YOUTUBE}>Watch on YouTube</Button>
              <Button variant="ghost" onClick={() => location.hash = '#/membership'}>Join the Squad</Button>
            </div>
          </Reveal>
          <Reveal delay={300}>
            <div style={{ display: 'flex', gap: 10, marginTop: 30, fontFamily: 'var(--f-data)', fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--c-dim)', alignItems: 'center' }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--c-success)', boxShadow: '0 0 10px var(--c-success)' }} />
              New drops weekly · Drag the emblem
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function StatStrip() {
  return (
    <section style={{ padding: '10px 0 44px' }}>
      <div style={{ ...wrap, display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(190px,1fr))', gap: 20 }}>
        {HD.STATS.map((s, i) => (
          <Reveal key={s.label} delay={i * 70}><StatCounter value={s.value} suffix={s.suffix} decimals={s.decimals || 0} label={s.label} /></Reveal>
        ))}
      </div>
    </section>
  );
}

function JoinBand() {
  return (
    <section style={{ padding: '52px 0 20px', borderTop: '1px solid var(--c-line)' }}>
      <div style={{ ...wrap }}>
        <Reveal>
          <div style={{ position: 'relative', overflow: 'hidden', textAlign: 'center', padding: 'clamp(36px,6vw,64px) 24px', background: 'radial-gradient(80% 120% at 50% 0%,rgba(0,229,255,.14),transparent 65%), var(--c-bg-2)', border: '1px solid var(--c-line-strong)', clipPath: 'polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))' }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}><Eyebrow>Join the Squad</Eyebrow></div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 'clamp(28px,5vw,48px)', textTransform: 'uppercase', letterSpacing: '-.01em', lineHeight: 1.02, margin: '0 auto', maxWidth: '18ch' }}>Never Miss a Drop From VE GAMERZ</h2>
            <p style={{ color: 'var(--c-muted)', fontSize: 17, lineHeight: 1.6, margin: '16px auto 0', maxWidth: '52ch' }}>Subscribe on YouTube and follow the behind-the-scenes on Instagram — that's all it takes to be part of the squad.</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginTop: 30 }}>
              <Button variant="youtube" icon="▶" href={HD.YOUTUBE}>Subscribe on YouTube</Button>
              <Button variant="primary" href={HD.INSTAGRAM}>Follow on Instagram</Button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomeScreen() {
  return (
    <main>
      <HeroStage />
      <StatStrip />
      <JoinBand />
    </main>
  );
}
window.HomeScreen = HomeScreen;