/* VE GAMERZ — Videos. No fabricated video cards, no search/filter chrome.
   Honest channel page: everything lives on YouTube. */
const { Button, Eyebrow } = window.VEGAMERZDesignSystem_63bcb5;
const VD = window.VG_DATA;
const VS = window.VG;

function VideosScreen() {
  const { wrap, SectionHead, Reveal, StatCounter } = VS;
  return (
    <main style={{ padding: '40px 0 20px' }}>
      <div style={{ ...wrap }}>
        <SectionHead eyebrow="Library" title="All Uploads" sub="Every VE GAMERZ video lives on the YouTube channel. Subscribe so you never miss a new drop." />
        <Reveal>
          <div style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(32px,5vw,60px)', background: 'radial-gradient(70% 130% at 100% 0%,rgba(0,229,255,.12),transparent 60%), 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={{ marginBottom: 16 }}><Eyebrow>On YouTube</Eyebrow></div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 'clamp(26px,4vw,42px)', textTransform: 'uppercase', letterSpacing: '-.01em', lineHeight: 1.04, margin: 0, maxWidth: '20ch', textWrap: 'balance' }}>Watch Every Drop on the Channel</h2>
            <p style={{ color: 'var(--c-muted)', fontSize: 17, lineHeight: 1.65, marginTop: 16, maxWidth: '54ch', textWrap: 'pretty' }}>
              Gameplay, guides, and squad moments — all of it is up on YouTube. Head over, hit subscribe, and turn on the bell for every new upload.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 28 }}>
              <Button variant="youtube" icon="▶" href={VD.YOUTUBE}>Watch on YouTube</Button>
              <Button variant="ghost" href={VD.INSTAGRAM}>Follow on Instagram</Button>
            </div>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(190px,1fr))', gap: 20, marginTop: 28 }}>
          {VD.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>
      </div>
    </main>
  );
}
window.VideosScreen = VideosScreen;