// StickersPage.jsx — the collectible sticker series. Registry lives in
// shared/data/stickersData.js; images in shared/assets/mascots/stickers/web/.
// Released stickers show full art + collector mark; unreleased ones render as
// mystery silhouettes until someone flips their `released` flag post-comp.

const STICKER_IMG_BASE = () => `${window.ASSETS}mascots/stickers/web/${(window.STICKERS || {}).year || ''}/`;

const StickerCard = ({ item, color, rot }) => {
  const revealed = item.released || item.announced;
  return (
    <div className="reveal" style={{ rotate: rot, textAlign: 'center' }}>
      <div style={{
        position: 'relative', padding: 10,
        transition: 'transform 220ms var(--ease-snap)',
      }}
      onMouseEnter={(e) => { if (revealed) e.currentTarget.style.transform = 'scale(1.05) rotate(2deg)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; }}
      >
        <img
          src={`${STICKER_IMG_BASE()}${item.img}`}
          alt={revealed ? `${item.name} sticker` : 'Unreleased mystery sticker'}
          loading="lazy"
          style={{
            width: '100%', maxWidth: 240, aspectRatio: '1/1', objectFit: 'contain',
            filter: revealed ? 'drop-shadow(0 10px 24px rgba(0,0,0,0.55))' : 'brightness(0) opacity(0.55)',
            transition: 'filter 300ms',
          }}
        />
        {!revealed && (
          <div style={{
            position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
            fontFamily: 'var(--font-display)', fontSize: 54, color, opacity: 0.9,
            textShadow: '0 2px 12px rgba(0,0,0,0.8)',
          }}>?</div>
        )}
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg3)', letterSpacing: '0.1em' }}>
        No.{item.no}
      </div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, letterSpacing: '0.08em', color: revealed ? 'var(--wbbq-bone)' : 'var(--fg3)', textTransform: 'uppercase', marginTop: 2 }}>
        {revealed ? item.name : 'CLASSIFIED'}
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: item.released ? color : (item.upcoming ? 'var(--wbbq-flame)' : 'var(--fg3)'), marginTop: 4, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        {item.released
          ? (item.droppedAt ? `dropped · ${item.droppedAt}` : 'in the wild')
          : (item.upcoming || 'drops at an upcoming comp')}
      </div>
    </div>
  );
};

const SeriesSection = ({ series, items }) => {
  const revealedCount = items.filter(i => i.released).length;
  return (
    <section className="section" style={{ paddingTop: 40 }}>
      <div className="wrap">
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap', borderBottom: `3px solid ${series.color}`, paddingBottom: 14, marginBottom: 30 }}>
          <h2 className="section-title" style={{ fontSize: 'clamp(1.6rem, 4vw, 2.6rem)', margin: 0 }}>
            <span style={{ color: series.color }}>Series {series.n}</span> · {series.title}
          </h2>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg3)', letterSpacing: '0.1em' }}>
            {revealedCount}/{items.length} REVEALED
          </span>
        </div>
        <p style={{ color: 'var(--fg2)', fontSize: 15, maxWidth: 640, marginTop: -12, marginBottom: 30 }}>{series.blurb}</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24 }}>
          {items.map((item, i) => (
            <StickerCard key={`${item.series}-${item.no}`} item={item} color={series.color} rot={`${((i % 3) - 1) * 1.2}deg`} />
          ))}
        </div>
      </div>
    </section>
  );
};

const HowItWorksStep = ({ n, title, children }) => (
  <div className="reveal" style={{ background: 'var(--wbbq-ink)', border: '2px solid var(--border)', padding: 24, position: 'relative' }}>
    <div style={{
      position: 'absolute', top: -16, left: 18,
      fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--wbbq-black)',
      background: 'var(--wbbq-flame)', padding: '2px 12px',
    }}>{n}</div>
    <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16, letterSpacing: '0.08em', color: 'var(--wbbq-bone)', textTransform: 'uppercase', margin: '10px 0 10px' }}>{title}</h3>
    <p style={{ color: 'var(--fg2)', fontSize: 14, margin: 0, lineHeight: 1.6 }}>{children}</p>
  </div>
);

const StickersPage = () => {
  useReveal();
  const data = window.STICKERS || { year: '', series: [], items: [] };
  const totalRevealed = data.items.filter(i => i.released).length;

  return (
    <>
      <PageHero
        eyebrow="Free At Every Comp"
        title={<>Collect The <span style={{ color: 'var(--wbbq-flame)' }}>Whole Crew.</span></>}
        subtitle={`The ${data.year} WARPED BBQ sticker series. A new one drops at every competition we cook — find our tent, say hi, take a sticker. That's it. That's the whole deal.`}
        mascot="ufo.svg"
      />

      {/* How it works */}
      <section className="section">
        <div className="wrap">
          <div className="eyebrow">◉ How It Works</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 28, marginTop: 30 }}>
            <HowItWorksStep n="1" title="We show up. So do you.">
              Every competition we cook, we bring <em>one new sticker design</em> — and that's the only place to get it.
              Check the <a href="#/events" style={{ color: 'var(--wbbq-flame)' }}>schedule</a> and come find the WARPED BBQ tent.
            </HowItWorksStep>
            <HowItWorksStep n="2" title="Read the fine print.">
              Every sticker carries its collector mark: <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--wbbq-slime)' }}>{data.year} · S1 · No.4</span> —
              the season, the series, and its number in the drop order. Same character shows up across
              series, so you can chase a full series <em>or</em> every version of your favorite.
            </HowItWorksStep>
            <HowItWorksStep n="3" title="Collect 'em all. If you can.">
              We don't announce how many are in a series. Grayed-out mystery slots below fill in as the season
              rolls on. Missed a comp? That sticker might come back around... or it might not. 🛸
            </HowItWorksStep>
          </div>
        </div>
      </section>

      {/* Season progress strip */}
      <section>
        <div className="wrap" style={{ padding: '0 20px' }}>
          <div style={{
            background: 'var(--wbbq-ink)', border: '2px dashed var(--border)',
            padding: '16px 20px', display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--wbbq-bone)' }}>
              {data.year} Season · <span style={{ color: 'var(--wbbq-flame)' }}>{totalRevealed}</span> of ??? released
            </div>
            <a href="#/events" className="btn" style={{
              fontFamily: 'var(--font-display)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
              textDecoration: 'none', padding: '10px 18px',
              background: 'var(--wbbq-flame)', color: 'var(--wbbq-black)', border: '2px solid var(--wbbq-flame)',
              boxShadow: '4px 4px 0 var(--wbbq-blue)',
            }}>Next Comp →</a>
          </div>
        </div>
      </section>

      {/* Series grids */}
      {data.series.map(s => (
        <SeriesSection key={s.n} series={s} items={data.items.filter(i => i.series === s.n)} />
      ))}

      {/* Collector rules / lore */}
      <section className="section">
        <div className="wrap" style={{ maxWidth: 780 }}>
          <div className="eyebrow">◉ The Rules Of The Hunt</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'grid', gap: 14 }}>
            {[
              ['FREE.', 'Stickers are handed out, never sold. Find us, say hi, done.'],
              ['ONE DESIGN PER COMP.', 'The reveal order IS the comp schedule. Number 1 dropped first. You get the idea.'],
              ['WHILE SUPPLIES LAST.', 'We print a stack per comp. When the stack is gone, it’s gone.'],
              ['NO SPOILERS.', 'Unreleased designs stay classified. Even the silhouettes are on a need-to-know basis.'],
              ['TRADE FREELY.', 'Doubles are for trading. Playground rules apply.'],
            ].map(([k, v]) => (
              <li key={k} style={{ display: 'flex', gap: 14, alignItems: 'baseline', borderLeft: '3px solid var(--wbbq-flame)', paddingLeft: 16 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: '0.1em', color: 'var(--wbbq-flame)', whiteSpace: 'nowrap' }}>{k}</span>
                <span style={{ color: 'var(--fg2)', fontSize: 14 }}>{v}</span>
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 40, padding: 24, background: 'var(--wbbq-ink)', border: '2px solid var(--wbbq-slime)', textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--wbbq-slime)', marginBottom: 8 }}>
              Got the whole series?
            </div>
            <p style={{ color: 'var(--fg2)', fontSize: 14, margin: 0 }}>
              Show us your collection at a comp or tag <a href="https://instagram.com/warpedbbq" target="_blank" rel="noreferrer" style={{ color: 'var(--wbbq-flame)' }}>@warpedbbq</a>.
              Completed-set holders get bragging rights and first crack at whatever we cook up next. 🔥
            </p>
          </div>
        </div>
      </section>
    </>
  );
};

window.StickersPage = StickersPage;