/* VE GAMERZ — About. */
const { Button, Eyebrow, Badge } = window.VEGAMERZDesignSystem_63bcb5;
const AB = window.VG_DATA;
const AS = window.VG;

function AboutHero() {
  const { wrap, Reveal, LogoMark } = AS;
  return (
    <section style={{ padding: '52px 0 40px', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(520px 340px at 78% 20%,rgba(0,229,255,.12),transparent 70%)' }} />
      <div style={{ ...wrap }}>
        <div className="vg-about-hero" style={{ display: 'grid', gridTemplateColumns: '1.3fr .7fr', gap: 40, alignItems: 'center' }}>
          <div>
            <Reveal><div style={{ marginBottom: 16 }}><Eyebrow>01 · The Story</Eyebrow></div></Reveal>
            <Reveal delay={80}>
              <h1 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 'clamp(34px,6vw,62px)', textTransform: 'uppercase', letterSpacing: '-.01em', lineHeight: 1.02, margin: 0, textWrap: 'balance' }}>
                One Controller. <em style={{ fontStyle: 'normal', color: 'var(--c-primary)' }}>One Growing Squad.</em>
              </h1>
            </Reveal>
            <Reveal delay={150}>
              <p style={{ color: 'var(--c-muted)', fontSize: 18, lineHeight: 1.7, marginTop: 20, maxWidth: '56ch', textWrap: 'pretty' }}>
                VE GAMERZ started the way most good things do — with one person, one game, and a mic that was way too cheap. No studio, no team, just honest gameplay uploaded for anyone who wanted to watch. The wins, the losses, the clutches that made it all worth it.
              </p>
            </Reveal>
            <Reveal delay={220}>
              <p style={{ color: 'var(--c-muted)', fontSize: 16, lineHeight: 1.7, marginTop: 16, maxWidth: '56ch', textWrap: 'pretty' }}>
                What turned it into something bigger wasn't a viral moment — it was the community. The people in the comments, the live chats, the game nights. This isn't a brand shouting at an audience. It's a squad, and you're already part of it.
              </p>
            </Reveal>
            <Reveal delay={300}>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 28 }}>
                <Button variant="youtube" icon="▶" href={AB.YOUTUBE}>Watch on YouTube</Button>
                <Button variant="ghost" onClick={() => location.hash = '#/membership'}>Join the Squad</Button>
              </div>
            </Reveal>
          </div>
          <Reveal delay={160}>
            <div style={{ position: 'relative', aspectRatio: '1', clipPath: 'polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))', overflow: 'hidden', border: '1px solid var(--c-line-strong)', boxShadow: 'var(--glow-md)' }}>
              <img src="assets/logo.jpg" alt="VE GAMERZ mascot logo" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Timeline() {
  const { wrap, Reveal, SectionHead } = AS;
  return (
    <section style={{ padding: '48px 0', borderTop: '1px solid var(--c-line)' }}>
      <div style={{ ...wrap }}>
        <SectionHead eyebrow="02 · The Journey" title="The Gaming Journey" sub="From a single upload to a daily community stop — every year leveled us up." />
        <ol style={{ listStyle: 'none', margin: 0, padding: 0, position: 'relative' }}>
          <div aria-hidden="true" className="vg-timeline-spine" style={{ position: 'absolute', left: 19, top: 8, bottom: 8, width: 2, background: 'linear-gradient(var(--c-line-strong),transparent)' }} />
          {AB.TIMELINE.map((t, i) => (
            <li key={t.year}>
              <Reveal delay={i * 60}>
                <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 20, padding: '14px 0' }}>
                  <div style={{ position: 'relative', zIndex: 1 }}>
                    <span style={{ display: 'grid', placeItems: 'center', width: 40, height: 40, clipPath: 'polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)', background: 'var(--c-card)', border: '1px solid var(--c-line-strong)', boxShadow: 'var(--glow-sm)', fontFamily: 'var(--f-data)', fontSize: 11, fontWeight: 700, color: 'var(--c-glow)' }}>{i + 1}</span>
                  </div>
                  <div style={{ paddingBottom: 8 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
                      <span style={{ fontFamily: 'var(--f-data)', fontSize: 13, fontWeight: 700, color: 'var(--c-primary)', letterSpacing: '.14em' }}>{t.year}</span>
                      <h3 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 20, textTransform: 'uppercase', letterSpacing: '-.01em', margin: 0 }}>{t.title}</h3>
                    </div>
                    <p style={{ color: 'var(--c-muted)', fontSize: 15, lineHeight: 1.65, margin: '8px 0 0', maxWidth: '62ch' }}>{t.text}</p>
                  </div>
                </div>
              </Reveal>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function MissionValues() {
  const { wrap, Reveal, SectionHead, Panel } = AS;
  return (
    <section style={{ padding: '48px 0', borderTop: '1px solid var(--c-line)' }}>
      <div style={{ ...wrap }}>
        <div className="vg-about-hero" style={{ display: 'grid', gridTemplateColumns: '.9fr 1.1fr', gap: 40, alignItems: 'start' }}>
          <div>
            <SectionHead eyebrow="03 · Mission" title="Why We Do This" sub="" style={{ marginBottom: 18 }} />
            <p style={{ color: 'var(--c-muted)', fontSize: 17, lineHeight: 1.7, margin: 0, maxWidth: '48ch', textWrap: 'pretty' }}>
              To make gaming content that actually helps you get better and feels like hanging out with friends. Real gameplay, honest guides, and a community where everyone levels up together — no gatekeeping, no ego, just good games and good people.
            </p>
            <div style={{ marginTop: 22, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <Badge>Play</Badge><Badge>Create</Badge><Badge>Dominate</Badge>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 18 }}>
            {AB.VALUES.map((v, i) => (
              <Reveal key={v.title} delay={i * 70}>
                <Panel hover style={{ height: '100%' }}>
                  <div style={{ fontFamily: 'var(--f-data)', color: 'var(--c-primary)', fontSize: 13, marginBottom: 12 }}>◢</div>
                  <h3 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 17, textTransform: 'uppercase', letterSpacing: '-.01em', margin: '0 0 8px' }}>{v.title}</h3>
                  <p style={{ color: 'var(--c-muted)', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{v.text}</p>
                </Panel>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FutureGoals() {
  const { wrap, Reveal, SectionHead } = AS;
  return (
    <section style={{ padding: '48px 0', borderTop: '1px solid var(--c-line)' }}>
      <div style={{ ...wrap }}>
        <SectionHead eyebrow="04 · What's Next" title="Future Goals" sub="Where the squad is headed. Every milestone is one we hit together." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(230px,1fr))', gap: 20 }}>
          {AB.GOALS.map((g, i) => (
            <Reveal key={g.label} delay={i * 80}>
              <div style={{ position: 'relative', background: 'var(--c-card)', border: '1px solid var(--c-line)', borderTop: '2px solid var(--c-primary)', clipPath: 'polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))', padding: '26px 24px' }}>
                <div style={{ fontFamily: 'var(--f-data)', fontWeight: 700, fontSize: 'clamp(30px,4vw,42px)', color: 'var(--c-glow)', textShadow: '0 0 20px rgba(102,247,255,.4)', lineHeight: 1 }}>{g.metric}</div>
                <div style={{ fontFamily: 'var(--f-body)', color: 'var(--c-muted)', fontSize: 15, marginTop: 12, maxWidth: '30ch' }}>{g.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function GamingPassion() {
  const { wrap, Reveal } = AS;
  return (
    <section style={{ padding: '52px 0 20px', borderTop: '1px solid var(--c-line)' }}>
      <div style={{ ...wrap }}>
        <Reveal>
          <div style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(32px,5vw,56px)', 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>05 · The Passion</Eyebrow></div>
            <blockquote style={{ margin: 0, fontFamily: 'var(--f-display)', fontWeight: 600, fontSize: 'clamp(22px,3.6vw,34px)', textTransform: 'uppercase', letterSpacing: '-.01em', lineHeight: 1.15, maxWidth: '22ch', textWrap: 'balance' }}>
              "It was never about going viral. It's about the games we love and the squad we play them with."
            </blockquote>
            <p style={{ color: 'var(--c-muted)', fontSize: 16, lineHeight: 1.7, marginTop: 20, maxWidth: '58ch', textWrap: 'pretty' }}>
              Gaming is the reason any of this exists. The late-night ranked grinds, the clutch that made the whole lobby lose it, the community game nights that run way too long — that's the passion behind every upload. As long as there are games worth playing and a squad worth playing them with, VE GAMERZ keeps going.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 26 }}>
              <Button variant="youtube" icon="▶" href={AB.YOUTUBE}>Watch the Latest</Button>
              <Button variant="ghost" onClick={() => location.hash = '#/videos'}>Browse Videos</Button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function AboutScreen() {
  return (
    <main>
      <AboutHero /><Timeline /><MissionValues /><FutureGoals /><GamingPassion />
    </main>
  );
}
window.AboutScreen = AboutScreen;