// gacha-arena.jsx — Gacha (pokeball opening) + Arena (leaderboard, flex)

function Gacha({ onCatch }) {
  const [state, setState] = React.useState('idle');  // idle | spinning | revealed | revealedMulti
  const [prize, setPrize] = React.useState(null);
  const [multiPrizes, setMultiPrizes] = React.useState([]);
  const [pulls, setPulls] = React.useState(127);
  const [activeBanner, setActiveBanner] = React.useState(null);

  function rollOne(tier, banner) {
    const r = Math.random();
    let pool;
    if (tier === 'basic') {
      pool = POKEDEX.filter(e => e.rarity === 'common' || (e.rarity === 'uncommon' && r > 0.7));
    } else if (tier === 'great') {
      pool = POKEDEX.filter(e => ['uncommon', 'rare'].includes(e.rarity) || (e.rarity === 'epic' && r > 0.85));
    } else {
      pool = POKEDEX.filter(e => ['rare', 'epic'].includes(e.rarity) || (e.rarity === 'legendary' && r > 0.6));
    }
    // Seasonal banner: 50% chance the prize is a featured creature
    if (banner && banner.featured && Math.random() < 0.5) {
      const ids = banner.featured;
      const f = POKEDEX[ids[Math.floor(Math.random() * ids.length)] - 1];
      if (f) return f;
    }
    return pool[Math.floor(Math.random() * pool.length)];
  }

  function pull(tier, banner) {
    if (state !== 'idle') return;
    setState('spinning');
    setActiveBanner(banner);
    const win = rollOne(tier, banner);
    setPrize(win);
    setTimeout(() => {
      setState('revealed');
      onCatch(win);
      setPulls(p => p + 1);
    }, 2000);
  }

  function pullX10(tier, banner) {
    if (state !== 'idle') return;
    setState('spinning');
    setActiveBanner(banner);
    const wins = Array.from({ length: 10 }, () => rollOne(tier, banner));
    // Guarantee at least one rare+ in 10-pull
    const hasRare = wins.some(w => ['rare', 'epic', 'legendary'].includes(w.rarity));
    if (!hasRare) {
      const rarePool = POKEDEX.filter(e => ['rare', 'epic', 'legendary'].includes(e.rarity));
      wins[9] = rarePool[Math.floor(Math.random() * rarePool.length)];
    }
    setMultiPrizes(wins);
    setTimeout(() => {
      setState('revealedMulti');
      wins.forEach(onCatch);
      setPulls(p => p + 10);
    }, 2200);
  }

  function close() {
    setState('idle');
    setPrize(null);
    setMultiPrizes([]);
    setActiveBanner(null);
  }

  const tiers = [
    { id: 'basic', name: 'POKEBALL',  cost: 0.05, color: 'var(--pd-red)', white: 'var(--pd-paper)', beam: ['#ff5a3c', '#ffce3a'],
      rates: [
        { r: 'common', pct: '60%' }, { r: 'uncommon', pct: '30%' },
        { r: 'rare', pct: '8%' }, { r: 'epic', pct: '1.8%' }, { r: 'legendary', pct: '0.2%' }
      ] },
    { id: 'great', name: 'GREAT BALL', cost: 0.20, color: 'var(--pd-blue)', white: 'var(--pd-paper)', beam: ['#4361ee', '#5ad8ff'],
      rates: [
        { r: 'common', pct: '5%' }, { r: 'uncommon', pct: '50%' },
        { r: 'rare', pct: '32%' }, { r: 'epic', pct: '12%' }, { r: 'legendary', pct: '1%' }
      ] },
    { id: 'ultra', name: 'ULTRA BALL', cost: 0.80, color: '#1a1d3a', white: 'var(--pd-yellow)', beam: ['#ffce3a', '#a259ff'],
      rates: [
        { r: 'common', pct: '—' }, { r: 'uncommon', pct: '8%' },
        { r: 'rare', pct: '47%' }, { r: 'epic', pct: '37%' }, { r: 'legendary', pct: '8%' }
      ] },
  ];

  function fmtCost(c) { return c < 1 ? c.toFixed(2) : c.toFixed(1); }

  return (
    <section id="gacha" className="section" style={{ position: 'relative', overflow: 'hidden' }}>
      <GradientOrbs orbs={[
        { color: '#a259ff', size: 360, x: '85%', y: '15%', delay: 0 },
        { color: '#ffce3a', size: 280, x: '10%', y: '70%', delay: 2 },
      ]}/>
      <div className="pd-wrap" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="section-label">Gacha</div>
          <div className="row between" style={{ alignItems: 'flex-end', marginBottom: 28, flexWrap: 'wrap', gap: 20 }}>
            <h2 className="pd-h2" style={{ margin: 0, color: 'var(--pd-paper)', maxWidth: 700 }}>
              ROLL THE BALL.<br/>
              <Shimmer color="#ffce3a" from="#fff">CATCH WHAT'S INSIDE.</Shimmer>
            </h2>
            <p style={{ fontSize: 16, color: 'rgba(241,233,210,.7)', maxWidth: 440 }}>
              Open Pokeballs from the web or our <span style={{color:'var(--pd-cyan)'}}>@PokeDexBot</span> on Telegram.
              Every roll mints you the underlying creature token, instantly tradable on pump.fun.
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {tiers.map((tier, i) => {
            const x10Cost = tier.cost * 9; // 10% discount: pay 9, get 10
            return (
            <Reveal key={tier.id} delay={i * 0.1}>
              <TiltCard max={6}>
                <BeamBorder color={tier.beam[0]} color2={tier.beam[1]} duration={4 + i}>
                  <div style={{ padding: 24, textAlign: 'center', height: '100%' }}>
                    <div className="col center" style={{ gap: 14, marginBottom: 18 }}>
                      <Pokeball size={120} red={tier.color} white={tier.white} />
                      <div>
                        <div className="pixel" style={{ fontSize: 14, color: 'var(--pd-paper)' }}>{tier.name}</div>
                        <div className="mono" style={{ fontSize: 16, color: 'var(--pd-yellow)', marginTop: 4 }}>{fmtCost(tier.cost)} SOL</div>
                      </div>
                      <RateTable rates={tier.rates} />
                    </div>
                    <Magnetic>
                      <button className="pd-btn" style={{ width: '100%' }} onClick={() => pull(tier.id)}>
                        ◉ ROLL ×1 · {fmtCost(tier.cost)} SOL
                      </button>
                    </Magnetic>
                    <button
                      className="pd-btn pd-btn--yellow pd-btn--sm"
                      style={{ width: '100%', marginTop: 8, position: 'relative' }}
                      onClick={() => pullX10(tier.id)}
                    >
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
                        <span>◉◉◉ ROLL ×10</span>
                        <span style={{
                          fontSize: 9, padding: '2px 6px',
                          background: 'var(--pd-red)', color: '#fff', borderRadius: 2,
                          letterSpacing: '.08em',
                        }}>−10%</span>
                      </span>
                    </button>
                    <div className="mono" style={{ fontSize: 11, color: 'rgba(241,233,210,.55)', marginTop: 6 }}>
                      <s>{fmtCost(tier.cost * 10)}</s>{'  '}
                      <span style={{ color: 'var(--pd-green)' }}>{fmtCost(x10Cost)} SOL</span>
                      <span style={{ opacity: .6 }}> · 1 rare+ guaranteed</span>
                    </div>
                  </div>
                </BeamBorder>
              </TiltCard>
            </Reveal>
            );
          })}
        </div>

        {/* Seasonal banners */}
        <SeasonalBanners onPull={pull} onPullX10={pullX10} />

        <div className="pd-card pd-card--dark" style={{ marginTop: 28, padding: 20 }}>
          <div className="row between" style={{ flexWrap: 'wrap', gap: 20, alignItems: 'center' }}>
            <div className="row" style={{ gap: 24, alignItems: 'center' }}>
              <div className="pixel" style={{ fontSize: 12, color: 'var(--pd-cyan)', letterSpacing: '.14em' }}>
                @PokeDexBot
              </div>
              <span style={{ fontSize: 14, color: 'rgba(241,233,210,.7)' }}>
                Open balls right inside Telegram. Auto-deposits to your wallet.
              </span>
            </div>
            <div className="row" style={{ gap: 10 }}>
              <span className="pd-chip" style={{ color: 'var(--pd-green)' }}>
                <span className="pulse-dot"></span> {pulls.toLocaleString()} PULLS TODAY
              </span>
              <button className="pd-btn pd-btn--sm pd-btn--ghost">JOIN TG ↗</button>
            </div>
          </div>
        </div>
      </div>

      {/* Reveal overlay */}
      {state !== 'idle' && (
        <div style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,.88)', zIndex: 200,
          display: 'grid', placeItems: 'center', padding: 20, overflowY: 'auto',
        }}>
          {state === 'spinning' ? (
            <div className="col center" style={{ gap: 30 }}>
              <Pokeball size={200} shake red="var(--pd-red)" white="var(--pd-paper)" />
              <div className="pixel" style={{ fontSize: 14, color: 'var(--pd-yellow)', letterSpacing: '.2em' }}>
                ROLLING<span style={{ animation: 'float 1s infinite' }}>...</span>
              </div>
            </div>
          ) : state === 'revealed' ? (
            <div className="pd-card pd-card--dark" style={{ padding: 40, textAlign: 'center', maxWidth: 460 }}>
              <div className="pixel" style={{ fontSize: 11, color: 'var(--pd-yellow)', letterSpacing: '.18em', marginBottom: 10 }}>
                ★ {prize.rarity.toUpperCase()} ★
              </div>
              <div className="pixel" style={{ fontSize: 20, color: 'var(--pd-paper)', marginBottom: 14 }}>
                YOU CAUGHT
              </div>
              <div className="pd-card" style={{
                background: `linear-gradient(135deg, ${prize.types[0].color}, ${prize.types[1]?.color || prize.types[0].color})`,
                padding: 24, marginBottom: 18,
              }}>
                <div className="mono" style={{ fontSize: 16, color: '#14172b', textAlign: 'left' }}>
                  #{String(prize.n).padStart(3, '0')}
                </div>
                <div className="center" style={{ display: 'flex', margin: '8px 0 14px' }}>
                  <Sprite seed={prize.seed} n={prize.n} primary={prize.types[0].color} secondary={prize.types[1]?.color} size={90} />
                </div>
                <div className="pixel" style={{ fontSize: 18, color: '#14172b' }}>
                  {prize.name.toUpperCase()}
                </div>
              </div>
              <div className="row" style={{ gap: 10 }}>
                <button className="pd-btn pd-btn--yellow" style={{ flex: 1 }} onClick={close}>
                  ★ ADD TO DEX
                </button>
                <button className="pd-btn pd-btn--ghost pd-btn--sm" onClick={close}>SHARE</button>
              </div>
            </div>
          ) : (
            <MultiReveal prizes={multiPrizes} onClose={close} />
          )}
        </div>
      )}
    </section>
  );
}

function Arena({ caught }) {
  const leaders = [
    { rank: 1, name: '◉ wojak.sol',     score: 14820, dex: 142, color: 'var(--pd-yellow)' },
    { rank: 2, name: '◉ punk7745.sol',  score: 13990, dex: 138, color: 'var(--pd-paper)'  },
    { rank: 3, name: '◉ moonboy.sol',   score: 12440, dex: 121, color: 'var(--pd-paper)'  },
    { rank: 4, name: '◉ koroko.sol',    score: 11620, dex: 118, color: 'var(--pd-paper)'  },
    { rank: 5, name: '◉ degenape.sol',  score: 10810, dex: 102, color: 'var(--pd-paper)'  },
    { rank: 6, name: '◉ flippy.sol',    score:  9820, dex:  96, color: 'var(--pd-paper)'  },
    { rank: 7, name: '◉ sersh.sol',     score:  9210, dex:  87, color: 'var(--pd-paper)'  },
    { rank: 8, name: '◉ jpeg.sol',      score:  8740, dex:  82, color: 'var(--pd-paper)'  },
  ];

  // YOUR flex card
  const yourTop = POKEDEX.filter(e => caught.has(e.n)).slice(0, 12);

  return (
    <section id="arena" className="section grid-bg">
      <div className="pd-wrap">
        <div className="section-label">Arena & Flex</div>
        <div className="row between" style={{ alignItems: 'flex-end', marginBottom: 28, flexWrap: 'wrap', gap: 20 }}>
          <h2 className="pd-h2" style={{ margin: 0, color: 'var(--pd-paper)' }}>
            COLLECT. <span style={{ color: 'var(--pd-pink)' }}>COMPETE.</span> CASH OUT.
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(241,233,210,.7)', maxWidth: 460 }}>
            Weekly tournaments, on-chain leaderboards, and Dex flex pages you can post anywhere.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 24 }}>
          {/* Leaderboard */}
          <div className="pd-card pd-card--dark" style={{ padding: 0, overflow: 'hidden' }}>
            <div className="row between" style={{ padding: '16px 22px', borderBottom: '3px solid var(--pd-line)' }}>
              <span className="pixel" style={{ fontSize: 12, color: 'var(--pd-yellow)', letterSpacing: '.16em' }}>SEASON 1 · WEEK 3</span>
              <span className="mono" style={{ fontSize: 13, color: 'rgba(241,233,210,.55)' }}>PRIZE: 142 SOL</span>
            </div>
            <div className="col" style={{ padding: '4px 12px' }}>
              {leaders.map(l => (
                <div key={l.rank} className="row between" style={{
                  padding: '12px 10px',
                  borderBottom: '1px dashed rgba(241,233,210,.12)',
                  alignItems: 'center',
                  background: l.rank === 1 ? 'rgba(255,206,58,.06)' : 'transparent',
                }}>
                  <div className="row" style={{ gap: 16, alignItems: 'center' }}>
                    <span className="pixel" style={{ fontSize: 14, color: l.color, minWidth: 28 }}>
                      {l.rank <= 3 ? ['1st', '2nd', '3rd'][l.rank-1] : `#${l.rank}`}
                    </span>
                    <span className="mono" style={{ fontSize: 15, color: 'var(--pd-paper)' }}>{l.name}</span>
                  </div>
                  <div className="row" style={{ gap: 26, alignItems: 'center' }}>
                    <span className="mono" style={{ fontSize: 14, color: 'rgba(241,233,210,.65)' }}>{l.dex}/151</span>
                    <span className="mono" style={{ fontSize: 16, color: 'var(--pd-yellow)' }}>{l.score.toLocaleString()}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Your flex card */}
          <div className="pd-card" style={{
            padding: 24, position: 'relative',
            background: 'linear-gradient(135deg, #f1e9d2, #e0d3a8)',
          }}>
            <div style={{
              position: 'absolute', top: 14, right: 14,
              padding: '6px 10px', background: 'var(--pd-line)', color: 'var(--pd-yellow)',
              fontFamily: 'var(--pd-pixel)', fontSize: 9, letterSpacing: '.14em',
            }}>
              SHARE ↗
            </div>
            <div className="pixel" style={{ fontSize: 11, color: 'var(--pd-red)', letterSpacing: '.14em', marginBottom: 4 }}>
              YOUR POKEDEX
            </div>
            <div className="pixel" style={{ fontSize: 24, color: '#14172b', marginBottom: 4 }}>
              0xy0u.sol
            </div>
            <div className="row" style={{ gap: 16, marginBottom: 18 }}>
              <FlexStat k="CAUGHT"   v={`${caught.size}/151`} />
              <FlexStat k="VALUE"    v="◎ 4.82" />
              <FlexStat k="WINS"     v="34" />
              <FlexStat k="RANK"     v="#412" />
            </div>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6,
            }}>
              {(yourTop.length > 0 ? yourTop : POKEDEX.slice(0, 12)).map(e => (
                <div key={e.n} className="center" style={{
                  display: 'flex',
                  aspectRatio: '1',
                  background: 'rgba(20,23,43,.06)',
                  border: '2px solid var(--pd-line)',
                  padding: 4,
                }}>
                  <Sprite seed={e.seed} n={e.n} primary={e.types[0].color} secondary={e.types[1]?.color} size={28} />
                </div>
              ))}
            </div>
            <div className="mono" style={{ fontSize: 13, color: '#14172b', marginTop: 16, opacity: .6, textAlign: 'center' }}>
              pokedex.fun/0xy0u.sol
            </div>
          </div>
        </div>

        {/* Roadmap strip */}
        <div className="pd-card pd-card--dark" style={{ marginTop: 28, padding: 28 }}>
          <div className="pixel" style={{ fontSize: 12, color: 'var(--pd-yellow)', letterSpacing: '.16em', marginBottom: 20 }}>ROADMAP · GEN 1</div>
          <div className="row" style={{ gap: 0, position: 'relative' }}>
            {[
              { p: 'Q2 26', t: 'GENESIS', d: '$POKEDEX launches on pump.fun. First 50 creature pairs go live.' },
              { p: 'Q3 26', t: 'BATTLE',  d: 'Battle system, EXP, tournaments. Telegram gacha bot.' },
              { p: 'Q4 26', t: 'BREED',   d: 'Breeding (NFT eggs), evolutions, type rebalance.' },
              { p: 'Q1 27', t: 'GEN 2',   d: 'Another 100 creatures. Cross-gen tournaments. Mobile app.' },
            ].map((s, i, A) => (
              <div key={s.p} style={{ flex: 1, position: 'relative', paddingRight: i < A.length - 1 ? 20 : 0 }}>
                <div className="row" style={{ gap: 12, alignItems: 'center', marginBottom: 12 }}>
                  <div style={{
                    width: 16, height: 16, background: i < 1 ? 'var(--pd-green)' : 'var(--pd-line)',
                    border: '3px solid var(--pd-paper)', borderRadius: '50%',
                  }} />
                  {i < A.length - 1 && (
                    <div style={{ flex: 1, height: 3, background: i < 1 ? 'var(--pd-green)' : 'rgba(241,233,210,.18)' }} />
                  )}
                </div>
                <div className="mono" style={{ fontSize: 13, color: 'var(--pd-yellow)' }}>{s.p}</div>
                <div className="pixel" style={{ fontSize: 13, color: 'var(--pd-paper)', marginTop: 4 }}>{s.t}</div>
                <div style={{ fontSize: 13, color: 'rgba(241,233,210,.65)', marginTop: 8, lineHeight: 1.5 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Gacha, Arena });

function FlexStat({ k, v }) {
  return (
    <div className="col" style={{ gap: 2 }}>
      <span className="pixel" style={{ fontSize: 8, color: 'rgba(20,23,43,.55)', letterSpacing: '.12em' }}>{k}</span>
      <span className="pixel" style={{ fontSize: 14, color: '#14172b' }}>{v}</span>
    </div>
  );
}

const RATE_COLORS = {
  common: '#f1e9d2',
  uncommon: '#62c46b',
  rare: '#5ad8ff',
  epic: '#a259ff',
  legendary: '#ffce3a',
};

function RateTable({ rates }) {
  return (
    <div className="col" style={{ gap: 4, width: '100%', padding: '0 4px' }}>
      {rates.map(({ r, pct }) => (
        <div key={r} className="row between" style={{
          padding: '4px 8px',
          background: 'rgba(0,0,0,.25)',
          border: '1px solid rgba(255,255,255,.08)',
          borderRadius: 2,
          alignItems: 'center',
        }}>
          <div className="row" style={{ gap: 8, alignItems: 'center' }}>
            <span style={{
              width: 8, height: 8,
              background: RATE_COLORS[r],
              border: '1px solid rgba(0,0,0,.4)',
              boxShadow: r === 'legendary' ? '0 0 8px var(--pd-yellow)' : 'none',
            }} />
            <span className="pixel" style={{ fontSize: 8, color: 'var(--pd-paper)', letterSpacing: '.1em' }}>
              {r.toUpperCase()}
            </span>
          </div>
          <span className="mono" style={{
            fontSize: 12,
            color: pct === '—' ? 'rgba(241,233,210,.3)' : 'var(--pd-paper)',
            fontVariantNumeric: 'tabular-nums',
          }}>{pct}</span>
        </div>
      ))}
    </div>
  );
}

function MultiReveal({ prizes, onClose }) {
  const [shown, setShown] = React.useState(0);
  React.useEffect(() => {
    if (shown >= prizes.length) return;
    const t = setTimeout(() => setShown(s => s + 1), 180);
    return () => clearTimeout(t);
  }, [shown, prizes.length]);

  const allShown = shown >= prizes.length;
  const summary = prizes.reduce((acc, p) => { acc[p.rarity] = (acc[p.rarity] || 0) + 1; return acc; }, {});
  const rarityColor = {
    common: 'var(--pd-paper)',
    uncommon: 'var(--pd-green)',
    rare: 'var(--pd-cyan)',
    epic: 'var(--pd-purple)',
    legendary: 'var(--pd-yellow)',
  };

  return (
    <div className="pd-card pd-card--dark" style={{
      padding: 30, maxWidth: 720, width: '100%',
    }}>
      <div className="row between" style={{ alignItems: 'baseline', marginBottom: 20 }}>
        <div>
          <div className="pixel" style={{ fontSize: 11, color: 'var(--pd-yellow)', letterSpacing: '.18em', marginBottom: 6 }}>
            ★ ×10 PULL ★
          </div>
          <div className="pixel" style={{ fontSize: 20, color: 'var(--pd-paper)' }}>
            YOU CAUGHT 10 CREATURES
          </div>
        </div>
        <button onClick={onClose} className="pd-chip" style={{ cursor: 'pointer', color: 'var(--pd-paper)' }}>✕ CLOSE</button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
        {prizes.map((p, i) => {
          const visible = i < shown;
          const primary = p.types[0].color;
          const secondary = p.types[1]?.color;
          return (
            <div key={i} style={{
              background: visible
                ? `linear-gradient(135deg, ${primary}, ${secondary || primary})`
                : '#1a1d3a',
              border: `3px solid ${visible && p.rarity === 'legendary' ? 'var(--pd-yellow)' : 'var(--pd-line)'}`,
              padding: 10,
              aspectRatio: '0.75',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              transform: visible ? 'scale(1)' : 'scale(0.7)',
              opacity: visible ? 1 : 0.15,
              transition: 'transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s, background .25s',
              boxShadow: visible && p.rarity === 'legendary' ? '0 0 16px var(--pd-yellow)' : 'none',
            }}>
              <div className="mono" style={{ fontSize: 10, color: visible ? '#14172b' : 'transparent' }}>
                #{String(p.n).padStart(3, '0')}
              </div>
              <div className="center" style={{ display: 'flex', flex: 1 }}>
                {visible && <Sprite seed={p.seed} n={p.n} primary={primary} secondary={secondary} size={32} />}
              </div>
              <div className="pixel" style={{
                fontSize: 7, textAlign: 'center', color: visible ? '#14172b' : 'transparent',
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }}>
                {visible ? p.name.toUpperCase() : '???'}
              </div>
            </div>
          );
        })}
      </div>

      <div className="row" style={{ gap: 16, marginTop: 22, flexWrap: 'wrap', justifyContent: 'center' }}>
        {Object.entries(summary).map(([rarity, count]) => (
          <div key={rarity} className="row" style={{ gap: 6, alignItems: 'center' }}>
            <span style={{ width: 10, height: 10, background: rarityColor[rarity], border: '2px solid var(--pd-line)' }} />
            <span className="pixel" style={{ fontSize: 10, color: 'var(--pd-paper)' }}>
              {rarity.toUpperCase()} ×{count}
            </span>
          </div>
        ))}
      </div>

      {allShown && (
        <div className="row" style={{ gap: 10, marginTop: 22 }}>
          <button className="pd-btn pd-btn--yellow" style={{ flex: 1 }} onClick={onClose}>★ ADD ALL TO DEX</button>
          <button className="pd-btn pd-btn--ghost pd-btn--sm" onClick={onClose}>SHARE</button>
        </div>
      )}
    </div>
  );
}

function SeasonalBanners({ onPull, onPullX10 }) {
  const banners = [
    {
      id: 'electric',
      title: 'STORM SEASON',
      sub: 'Volt-type rates 2× · Limited 7 days',
      gradient: 'linear-gradient(135deg, #ffce3a 0%, #ff5a3c 50%, #a259ff 100%)',
      featured: [25, 26, 100, 101, 125, 135, 145],
      ends: '6d 22h',
      tag: 'NEW',
      tagColor: 'var(--pd-red)',
      tier: 'great',
    },
    {
      id: 'mythic',
      title: 'LEGEND OF MEW',
      sub: 'Mythic boost · 5× legendary rate',
      gradient: 'linear-gradient(135deg, #ff7ab6 0%, #a259ff 50%, #4361ee 100%)',
      featured: [150, 151, 144, 145, 146, 149],
      ends: '3d 04h',
      tag: 'LIMITED',
      tagColor: 'var(--pd-yellow)',
      tier: 'ultra',
    },
    {
      id: 'starter',
      title: 'STARTER FEST',
      sub: 'Original 9 starters · 4× rate',
      gradient: 'linear-gradient(135deg, #62c46b 0%, #4aa6ff 50%, #ff5a3c 100%)',
      featured: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      ends: '11d 08h',
      tag: 'F2P FRIENDLY',
      tagColor: 'var(--pd-cyan)',
      tier: 'basic',
    },
  ];

  return (
    <div style={{ marginTop: 36 }}>
      <Reveal>
        <div className="row between" style={{ alignItems: 'flex-end', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
          <div>
            <div className="pixel" style={{ fontSize: 11, color: 'var(--pd-yellow)', letterSpacing: '.16em', marginBottom: 6 }}>
              ▼ SEASONAL BANNERS ▼
            </div>
            <div className="pixel" style={{ fontSize: 22, color: 'var(--pd-paper)' }}>
              LIMITED-TIME PULLS
            </div>
          </div>
          <span className="mono" style={{ fontSize: 13, color: 'rgba(241,233,210,.6)' }}>
            New banners every Friday · Featured creatures pull at boosted rates
          </span>
        </div>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {banners.map((b, i) => (
          <Reveal key={b.id} delay={i * 0.08}>
            <BannerCard banner={b} onPull={() => onPull(b.tier, b)} onPullX10={() => onPullX10(b.tier, b)} />
          </Reveal>
        ))}
      </div>
    </div>
  );
}

function BannerCard({ banner, onPull, onPullX10 }) {
  const featuredEntries = banner.featured
    .map(id => POKEDEX[id - 1])
    .filter(Boolean)
    .slice(0, 4);

  return (
    <TiltCard max={5}>
      <div className="pd-card" style={{
        background: banner.gradient,
        padding: 0,
        overflow: 'hidden',
        position: 'relative',
      }}>
        <Sparkles count={18} color="rgba(255,255,255,.7)" />

        <div className="row between" style={{ padding: '14px 18px 8px', position: 'relative', zIndex: 2 }}>
          <span className="pixel" style={{
            fontSize: 9, padding: '4px 8px', background: banner.tagColor,
            color: '#14172b', letterSpacing: '.14em',
          }}>
            ★ {banner.tag}
          </span>
          <div className="row" style={{ gap: 6, alignItems: 'center' }}>
            <span className="pulse-dot" />
            <span className="mono" style={{ fontSize: 12, color: '#14172b', fontWeight: 600 }}>
              ENDS {banner.ends}
            </span>
          </div>
        </div>

        <div style={{ padding: '6px 18px 12px', position: 'relative', zIndex: 2 }}>
          <div className="pixel" style={{
            fontSize: 18, color: '#14172b',
            textShadow: '2px 2px 0 rgba(255,255,255,.5)',
          }}>
            {banner.title}
          </div>
          <div className="mono" style={{ fontSize: 13, color: 'rgba(20,23,43,.78)', marginTop: 4 }}>
            {banner.sub}
          </div>
        </div>

        <div className="row" style={{
          gap: 6, padding: '8px 18px', background: 'rgba(255,255,255,.3)',
          borderTop: '3px solid var(--pd-line)',
          borderBottom: '3px solid var(--pd-line)',
          minHeight: 80, alignItems: 'center', justifyContent: 'center',
          position: 'relative', zIndex: 2,
        }}>
          {featuredEntries.map(e => (
            <div key={e.n} className="center" style={{
              display: 'flex',
              width: 64, height: 64,
              background: 'rgba(20,23,43,.18)',
              border: '2px solid var(--pd-line)',
              flexShrink: 0,
            }}>
              <Sprite seed={e.seed} n={e.n} primary={e.types[0].color} secondary={e.types[1]?.color} size={28} />
            </div>
          ))}
          {banner.featured.length > 4 && (
            <div className="pixel center" style={{
              display: 'flex',
              width: 64, height: 64,
              fontSize: 11, color: '#14172b',
              background: 'rgba(255,255,255,.5)',
              border: '2px solid var(--pd-line)',
            }}>
              +{banner.featured.length - 4}
            </div>
          )}
        </div>

        <div style={{ padding: '14px 18px 18px', position: 'relative', zIndex: 2 }}>
          <button className="pd-btn" style={{ width: '100%' }} onClick={onPull}>
            ◉ PULL ×1
          </button>
          <button className="pd-btn pd-btn--yellow pd-btn--sm" style={{ width: '100%', marginTop: 6 }} onClick={onPullX10}>
            ◉◉◉ PULL ×10 · −10%
          </button>
        </div>
      </div>
    </TiltCard>
  );
}