// economy.jsx — Two ways to play (Free vs Holder) + Economy flow diagram

function PlayerTiers() {
  const tiers = [
    {
      key: 'free',
      tag: 'FREE TRAINER',
      sub: 'No wallet? No tokens? Still in.',
      color: 'var(--pd-cyan)',
      bg: 'linear-gradient(160deg, #1a2654, #0f1a3a)',
      can: [
        ['◉ Grind matches', 'PvE + low-tier PvP, no stake required'],
        ['◉ Level up creatures', 'Borrowed roster, full progression'],
        ['◉ Enter free tournaments', 'Daily + weekly free brackets'],
        ['◉ Win Pokemon tokens', 'Top-3 in free tournaments → real tokens dropped to your wallet'],
        ['◉ Pull free gacha', 'One free pull per day, drops fragments → mint tokens'],
      ],
      cant: [
        ['✕ No staking', 'Can\'t wager tokens (you don\'t hold them)'],
        ['✕ Limited gacha', 'No Great/Ultra balls until you hold'],
        ['✕ Capped tournament prizes', 'Free bracket pools smaller than holder brackets'],
      ],
      cta: 'PLAY FREE',
    },
    {
      key: 'holder',
      tag: 'HOLDER TRAINER',
      sub: 'You hold creature tokens. You hold the keys.',
      color: 'var(--pd-yellow)',
      bg: 'linear-gradient(160deg, #2a1f0e, #1a1408)',
      glow: true,
      can: [
        ['◉ Everything Free does', 'plus all of below'],
        ['◉ Stake creatures in battle', 'Wager creature tokens 1-on-1, winner takes pool'],
        ['◉ Full gacha access', 'Pokeball / Great / Ultra tiers, 10× rolls'],
        ['◉ Holder-only tournaments', '10× larger prize pools, exclusive brackets'],
        ['◉ Earn $POKEDEX rewards', 'Trade-fee revenue share auto-streams to holders'],
        ['◉ Flex on-chain', 'Public dex page, badge, leaderboard eligible'],
      ],
      cant: [],
      cta: 'BUY ON PUMP.FUN',
    },
  ];

  return (
    <section id="players" className="section grid-bg" style={{ position: 'relative', overflow: 'hidden' }}>
      <GradientOrbs orbs={[
        { color: '#5ad8ff', size: 360, x: '15%', y: '30%', delay: 0 },
        { color: '#ffce3a', size: 360, x: '85%', y: '70%', delay: 2 },
      ]}/>
      <div className="pd-wrap" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="row between" style={{ alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 20 }}>
            <div>
              <div className="section-label">Two Ways In</div>
              <h2 className="pd-h2" style={{ margin: 0, color: 'var(--pd-paper)', maxWidth: 720 }}>
                PLAY FREE.<br/>
                <span style={{ color: 'var(--pd-yellow)' }}>WIN REAL TOKENS.</span>
              </h2>
            </div>
            <p style={{ fontSize: 16, color: 'rgba(241,233,210,.7)', maxWidth: 440, margin: 0 }}>
              Two account tiers. Free players grind their way up — top tournament finishers earn actual Pokemon tokens. No wallet needed to start; full economy unlocked when you do.
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, alignItems: 'stretch' }}>
          {tiers.map((tier, i) => (
            <Reveal key={tier.key} delay={i * 0.12}>
              <TiltCard max={5} scale={1}>
                <div className="pd-card pd-card--dark" style={{
                  padding: 28,
                  background: tier.bg,
                  height: '100%',
                  position: 'relative',
                  boxShadow: tier.glow
                    ? '6px 6px 0 0 #050615, 0 0 32px rgba(255,206,58,.25)'
                    : '6px 6px 0 0 #050615',
                }}>
                  <div className="row between" style={{ marginBottom: 18, alignItems: 'center' }}>
                    <span className="pixel" style={{
                      fontSize: 11, letterSpacing: '.16em', color: tier.color,
                      padding: '6px 10px',
                      border: `2px solid ${tier.color}`,
                    }}>
                      {tier.tag}
                    </span>
                    {tier.glow && (
                      <span className="pd-chip" style={{ color: 'var(--pd-yellow)', fontSize: 8 }}>
                        ★ FULL ACCESS
                      </span>
                    )}
                  </div>

                  <p style={{ fontSize: 17, color: 'var(--pd-paper)', marginTop: 0, marginBottom: 22, lineHeight: 1.4 }}>
                    {tier.sub}
                  </p>

                  <div className="col" style={{ gap: 12 }}>
                    {tier.can.map(([head, desc]) => (
                      <div key={head} className="row" style={{ gap: 14, alignItems: 'flex-start' }}>
                        <div style={{ minWidth: 4, marginTop: 8, height: 4, background: tier.color, borderRadius: 2 }} />
                        <div>
                          <div className="pixel" style={{ fontSize: 11, color: 'var(--pd-paper)', marginBottom: 4 }}>
                            {head.replace(/^◉\s/, '').toUpperCase()}
                          </div>
                          <div style={{ fontSize: 13.5, color: 'rgba(241,233,210,.65)', lineHeight: 1.45 }}>{desc}</div>
                        </div>
                      </div>
                    ))}
                    {tier.cant.map(([head, desc]) => (
                      <div key={head} className="row" style={{ gap: 14, alignItems: 'flex-start', opacity: .55 }}>
                        <div style={{ minWidth: 4, marginTop: 8, height: 4, background: 'var(--pd-down)', borderRadius: 2 }} />
                        <div>
                          <div className="pixel" style={{ fontSize: 11, color: 'rgba(241,233,210,.55)', marginBottom: 4, textDecoration: 'line-through' }}>
                            {head.replace(/^✕\s/, '').toUpperCase()}
                          </div>
                          <div style={{ fontSize: 13.5, color: 'rgba(241,233,210,.45)' }}>{desc}</div>
                        </div>
                      </div>
                    ))}
                  </div>

                  <div style={{ marginTop: 26 }}>
                    <button className={`pd-btn ${tier.glow ? 'pd-btn--yellow' : 'pd-btn--ghost'}`} style={{ width: '100%' }}>
                      {tier.cta}
                    </button>
                  </div>
                </div>
              </TiltCard>
            </Reveal>
          ))}
        </div>

        {/* Flow arrow */}
        <Reveal>
          <div style={{ marginTop: 40, position: 'relative' }}>
            <EconomyFlow />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function EconomyFlow() {
  const steps = [
    { n: '01', tag: 'START FREE',        d: 'Sign in with email or Telegram. No wallet.', color: 'var(--pd-cyan)' },
    { n: '02', tag: 'GRIND',             d: 'PvE matches, daily quests, free gacha pulls.', color: 'var(--pd-paper)' },
    { n: '03', tag: 'TOURNAMENT',        d: 'Enter free brackets. Top 3 win Pokemon tokens.', color: 'var(--pd-pink)' },
    { n: '04', tag: 'BECOME A HOLDER',   d: 'Tokens land in your wallet. Now you can stake.', color: 'var(--pd-yellow)' },
    { n: '05', tag: 'STAKE & FLEX',      d: 'Wager battles, ultra gacha, dex revenue share.', color: 'var(--pd-green)' },
  ];

  return (
    <div className="pd-card pd-card--dark" style={{ padding: 28 }}>
      <div className="row between" style={{ marginBottom: 22, alignItems: 'baseline', flexWrap: 'wrap', gap: 12 }}>
        <span className="pixel" style={{ fontSize: 12, color: 'var(--pd-yellow)', letterSpacing: '.16em' }}>
          THE GRIND-TO-HOLD PATH
        </span>
        <span className="mono" style={{ fontSize: 13, color: 'rgba(241,233,210,.55)' }}>
          Average free→holder: ~14 days · 2.4 hrs grinding
        </span>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, position: 'relative',
      }}>
        {steps.map((s, i) => (
          <div key={s.n} style={{ position: 'relative', paddingRight: i < steps.length - 1 ? 12 : 0 }}>
            <div className="row" style={{ gap: 8, alignItems: 'center', marginBottom: 14 }}>
              <div style={{
                width: 36, height: 36,
                background: s.color, color: '#14172b',
                border: '3px solid var(--pd-line)',
                fontFamily: 'var(--pd-pixel)', fontSize: 11,
                display: 'grid', placeItems: 'center',
                flexShrink: 0,
              }}>{s.n}</div>
              {i < steps.length - 1 && (
                <div style={{
                  flex: 1, height: 0,
                  borderTop: '3px dashed rgba(241,233,210,.25)',
                  position: 'relative',
                }}>
                  <span style={{
                    position: 'absolute', right: -3, top: -10,
                    color: 'rgba(241,233,210,.4)', fontSize: 18,
                  }}>›</span>
                </div>
              )}
            </div>
            <div className="pixel" style={{ fontSize: 11, color: s.color, marginBottom: 6, letterSpacing: '.08em' }}>
              {s.tag}
            </div>
            <div style={{ fontSize: 13, color: 'rgba(241,233,210,.65)', lineHeight: 1.45, paddingRight: 14 }}>
              {s.d}
            </div>
          </div>
        ))}
      </div>

      {/* Numbers row */}
      <div style={{
        marginTop: 28, paddingTop: 22, borderTop: '2px dashed rgba(241,233,210,.15)',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
      }}>
        {[
          { k: 'TOKENS PAID TO F2P /WK', v: '8,420', s: 'across all tournaments', c: 'var(--pd-cyan)' },
          { k: 'F2P → HOLDER CONVERSION', v: '23%',  s: 'within first 30 days', c: 'var(--pd-pink)' },
          { k: 'MIN STAKE',  v: '0.05 SOL',  s: 'lowest bracket', c: 'var(--pd-paper)' },
          { k: 'MAX PRIZE POOL', v: '142 SOL', s: 'weekly Ultra tournament', c: 'var(--pd-yellow)' },
        ].map(s => (
          <div key={s.k} className="col" style={{ gap: 4 }}>
            <span className="pixel" style={{ fontSize: 9, color: 'rgba(241,233,210,.5)', letterSpacing: '.12em' }}>{s.k}</span>
            <span className="mono" style={{ fontSize: 24, color: s.c }}>{s.v}</span>
            <span style={{ fontSize: 12, color: 'rgba(241,233,210,.45)' }}>{s.s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Tournament breakdown (replaces "Next Tournament" mini card in battle) ────
function TournamentsLineup() {
  const tournaments = [
    {
      tag: 'FREE BRACKET',
      title: 'DAILY CUP',
      time: 'EVERY 6H',
      next: '02:14:33',
      entry: 'FREE',
      prize: '50 $POKEDEX + creature drops',
      slots: '1024 / 1024',
      color: 'var(--pd-cyan)',
      tier: 'free',
    },
    {
      tag: 'STAKED',
      title: 'BLUE LEAGUE',
      time: 'WEEKLY · WED',
      next: '4d 11h',
      entry: '0.10 SOL',
      prize: '28 SOL pool + 1 Epic mint',
      slots: '842 / 1024',
      color: 'var(--pd-blue-2)',
      tier: 'staked',
    },
    {
      tag: 'STAKED · HOLDER ONLY',
      title: 'GOLD LEAGUE',
      time: 'WEEKLY · SAT',
      next: '6d 02h',
      entry: '1.0 SOL · 3 creatures',
      prize: '142 SOL + 1 LEGENDARY',
      slots: '320 / 512',
      color: 'var(--pd-yellow)',
      tier: 'holder',
    },
  ];

  return (
    <section id="tournaments" className="section" style={{ position: 'relative' }}>
      <div className="pd-wrap">
        <Reveal>
          <div className="row between" style={{ alignItems: 'flex-end', marginBottom: 28, flexWrap: 'wrap', gap: 20 }}>
            <div>
              <div className="section-label">Tournaments</div>
              <h2 className="pd-h2" style={{ margin: 0, color: 'var(--pd-paper)' }}>
                FOUR BRACKETS. <span style={{ color: 'var(--pd-red)' }}>ONE CHAMPION.</span>
              </h2>
            </div>
            <p style={{ fontSize: 16, color: 'rgba(241,233,210,.7)', maxWidth: 440 }}>
              Free, staked, holder-only. Every bracket pays out creature tokens — even the free one. Climb the ladder.
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {tournaments.map((tn, i) => (
            <Reveal key={tn.title} delay={i * 0.1}>
              <TiltCard max={5}>
                <BeamBorder
                  color={tn.color}
                  color2={tn.tier === 'holder' ? '#ff5a3c' : 'var(--pd-cyan)'}
                  duration={5 + i}
                >
                  <div style={{ padding: 24, height: '100%' }}>
                    <div className="row between" style={{ marginBottom: 12, alignItems: 'center' }}>
                      <span className="pd-chip" style={{ color: tn.color, fontSize: 8 }}>{tn.tag}</span>
                      <span className="pulse-dot" />
                    </div>
                    <div className="pixel" style={{ fontSize: 22, color: 'var(--pd-paper)', marginBottom: 4 }}>
                      {tn.title}
                    </div>
                    <div className="mono" style={{ fontSize: 13, color: 'rgba(241,233,210,.55)', marginBottom: 16 }}>
                      {tn.time}
                    </div>

                    <div className="col" style={{ gap: 10, marginBottom: 20 }}>
                      <KV k="STARTS IN" v={tn.next} color={tn.color} />
                      <KV k="ENTRY"      v={tn.entry} />
                      <KV k="PRIZE"      v={tn.prize} highlight />
                      <KV k="SLOTS"      v={tn.slots} />
                    </div>

                    <button className={`pd-btn ${tn.tier === 'holder' ? 'pd-btn--yellow' : ''}`} style={{ width: '100%' }}>
                      {tn.tier === 'holder' ? '★ ENTER (HOLDER)' : tn.tier === 'free' ? '▶ JOIN FREE' : '◎ STAKE & ENTER'}
                    </button>
                  </div>
                </BeamBorder>
              </TiltCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function KV({ k, v, color, highlight }) {
  return (
    <div className="row between" style={{ alignItems: 'baseline' }}>
      <span className="pixel" style={{ fontSize: 9, color: 'rgba(241,233,210,.5)', letterSpacing: '.12em' }}>{k}</span>
      <span className="mono" style={{
        fontSize: highlight ? 15 : 14,
        color: color || (highlight ? 'var(--pd-yellow)' : 'var(--pd-paper)'),
        textAlign: 'right',
        maxWidth: '60%',
        lineHeight: 1.2,
      }}>{v}</span>
    </div>
  );
}

Object.assign(window, { PlayerTiers, TournamentsLineup });