/* VE GAMERZ — Membership (all tiers free; CTAs link to YouTube / Instagram). */
const { Button, Eyebrow, Badge, TierCard } = window.VEGAMERZDesignSystem_63bcb5;
const MD = window.VG_DATA;
const MS = window.VG;
const goOut = (href) => window.open(href, '_blank', 'noopener');

function Tiers() {
  const { wrap, Reveal, SectionHead } = MS;
  return (
    <section style={{ padding: '40px 0 10px' }}>
      <div style={{ ...wrap }}>
        <SectionHead eyebrow="Membership" title="Join the Squad" sub="Three tiers, all completely free. Each one is just a way to plug in deeper — subscribe, follow, and show up. That's it." align="center" style={{ marginInline: 'auto' }} />
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 30 }}><Badge variant="new">Every tier is free — always</Badge></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(270px,1fr))', gap: 24, alignItems: 'stretch' }}>
          {MD.TIERS.map((t, i) => (
            <Reveal key={t.name} delay={i * 90} style={{ display: 'flex' }}>
              <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
                <div style={{ fontFamily: 'var(--f-data)', fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--c-dim)', marginBottom: 10, textAlign: 'center' }}>// {t.tag}</div>
                <TierCard name={t.name} price={t.price} features={t.features} ribbon={t.ribbon} featured={t.featured} ctaLabel={t.ctaLabel} ctaVariant={t.ctaVariant} onCta={() => goOut(t.href)} style={{ height: '100%' }} />
                <p style={{ color: 'var(--c-muted)', fontSize: 13, lineHeight: 1.55, margin: '14px 6px 0', textAlign: 'center' }}>{t.blurb}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PerkRow({ items }) {
  const { Panel } = MS;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 18 }}>
      {items.map((p, i) => (
        <MS.Reveal key={p.t} delay={i * 70}>
          <Panel hover style={{ height: '100%' }}>
            <div style={{ color: 'var(--c-primary)', fontFamily: 'var(--f-data)', fontSize: 14, marginBottom: 12 }}>◢</div>
            <h3 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 17, textTransform: 'uppercase', letterSpacing: '-.01em', margin: '0 0 8px' }}>{p.t}</h3>
            <p style={{ color: 'var(--c-muted)', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{p.d}</p>
          </Panel>
        </MS.Reveal>
      ))}
    </div>
  );
}

function EarlyAccess() {
  const { wrap, SectionHead } = MS;
  return (
    <section style={{ padding: '48px 0', borderTop: '1px solid var(--c-line)', marginTop: 30 }}>
      <div style={{ ...wrap }}>
        <SectionHead eyebrow="What You Unlock" title="Perks & Early Access" sub="The more you plug in, the more you get. None of it costs a thing." />
        <PerkRow items={[
          { t: 'Early Clips', d: 'Members see new clips and announcements first, before they hit the main feed.' },
          { t: 'Vote on Games', d: 'You decide what we play next. Polls go up every week and the squad picks the lineup.' },
          { t: 'Members-Only Streams', d: 'Community streams and game nights where the squad plays together, not just watches.' },
          { t: 'Shoutouts', d: 'Show up, get seen. Active members get shoutouts in videos and community posts.' }
        ]} />
      </div>
    </section>
  );
}

function CommunityBenefits() {
  const { wrap, Reveal, Panel } = MS;
  return (
    <section style={{ padding: '48px 0', borderTop: '1px solid var(--c-line)' }}>
      <div style={{ ...wrap }}>
        <div className="vg-about-hero" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div style={{ marginBottom: 16 }}><Eyebrow>The Community</Eyebrow></div>
            <h2 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 'clamp(26px,4vw,40px)', textTransform: 'uppercase', letterSpacing: '-.01em', lineHeight: 1.05, margin: 0, textWrap: 'balance' }}>More Than a Sub Count</h2>
            <p style={{ color: 'var(--c-muted)', fontSize: 16, lineHeight: 1.7, marginTop: 16, maxWidth: '48ch', textWrap: 'pretty' }}>
              The squad hangs out across YouTube and Instagram — live chats, community posts, game-night lobbies, and clip drops. Following in both places is how you never miss a beat and how you get pulled into the action.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 26 }}>
              <Button variant="youtube" icon="▶" href={MD.YOUTUBE}>Subscribe on YouTube</Button>
              <Button variant="ghost" href={MD.INSTAGRAM}>Follow on Instagram</Button>
            </div>
          </div>
          <div style={{ display: 'grid', gap: 16 }}>
            {[
              { n: 'Weekly', l: 'Community game nights' },
              { n: 'First', l: 'Access to clips & news' },
              { n: '9.1K', l: 'And counting in the squad' }
            ].map((s, i) => (
              <Reveal key={s.l} delay={i * 80}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 20, background: 'var(--c-card)', border: '1px solid var(--c-line)', borderLeft: '2px solid var(--c-primary)', clipPath: 'polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)', padding: '18px 22px' }}>
                  <span style={{ fontFamily: 'var(--f-data)', fontWeight: 700, fontSize: 28, color: 'var(--c-glow)', textShadow: '0 0 16px rgba(102,247,255,.35)', minWidth: 96 }}>{s.n}</span>
                  <span style={{ color: 'var(--c-muted)', fontSize: 15 }}>{s.l}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function JoinCta() {
  const { wrap, Reveal } = MS;
  return (
    <section style={{ padding: '52px 0 20px', borderTop: '1px solid var(--c-line)' }}>
      <div style={{ ...wrap }}>
        <Reveal>
          <div style={{ textAlign: 'center', padding: 'clamp(36px,6vw,60px) 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))' }}>
            <h2 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 'clamp(28px,5vw,46px)', textTransform: 'uppercase', letterSpacing: '-.01em', lineHeight: 1.02, margin: '0 auto', maxWidth: '16ch' }}>Ready to Rank Up With the Squad?</h2>
            <p style={{ color: 'var(--c-muted)', fontSize: 17, lineHeight: 1.6, margin: '16px auto 0', maxWidth: '50ch' }}>Pick your tier — or just hit subscribe and follow. Either way, you're in.</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginTop: 30 }}>
              <Button variant="youtube" icon="▶" href={MD.YOUTUBE}>Subscribe on YouTube</Button>
              <Button variant="primary" href={MD.INSTAGRAM}>Follow on Instagram</Button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function MembershipScreen() {
  return (
    <main style={{ padding: '20px 0 0' }}>
      <Tiers /><EarlyAccess /><CommunityBenefits /><JoinCta />
    </main>
  );
}
window.MembershipScreen = MembershipScreen;