// HomePage.jsx — hero + highlights. Three hero variants via tweaks.

const HomePage = () => {
  const tweaks = useTweaks();
  useReveal();
  return (
    <>
      <HeroSection />
      <EventStripSection />
      <MeetTeamTeaser />
      <SeasonShelfSection />
      {window.featureEnabled && window.featureEnabled('merch') && <MerchTeaser />}
      <AppCalloutSection />
      <InstaTeaser />
    </>
  );
};

// --------- Season shelf (GC/RGC/Calls tallies) ---------
const SeasonShelfSection = () => {
  const store = useEventsStore();
  const done = store.events.filter(e => e.done);

  // Latest season with done comps
  const years = Array.from(new Set(done.map(e => String(e.year || '')))).filter(Boolean);
  years.sort((a, b) => Number(b) - Number(a));
  const season = years[0];
  const seasonDone = season ? done.filter(e => String(e.year) === season) : [];

  const meats = ['chicken','ribs','pork','brisket'];
  let gc = 0, rgc = 0, calls = 0, rookie = 0;
  seasonDone.forEach(e => {
    const t = window.tierFor && window.tierFor(e.place, 'overall');
    if (t) {
      if (t.tier === 'gc') gc++;
      else if (t.tier === 'rgc') rgc++;
      else if (t.tier === 'call') calls++;
      else if (t.tier === 'rookie') { gc++; rookie++; }
    }
    if (e.results) {
      meats.forEach(m => {
        const r = e.results[m];
        if (!r) return;
        const mt = window.tierFor && window.tierFor(r.place, 'meat');
        if (mt && mt.tier === 'call') calls++;
      });
    }
  });

  const empty = seasonDone.length === 0;

  return (
    <section className="section" style={{ background: 'var(--wbbq-black)' }}>
      <div className="wrap">
        <div className="reveal" style={{ display: 'flex', alignItems: 'baseline', gap: 20, flexWrap: 'wrap', marginBottom: 24 }}>
          <div className="eyebrow" style={{ color: 'var(--wbbq-flame)' }}>◉ The Shelf</div>
          <h2 className="section-title" style={{ margin: 0 }}>
            {season || '—'} On The <span className="accent">Board.</span>
          </h2>
          <div style={{ flex: 1, minWidth: 80, height: 2, background: 'repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px)' }} />
          <a href="#/trophies" className="btn btn-ghost" style={{ whiteSpace: 'nowrap' }}>View The Shelf →</a>
        </div>

        {empty ? (
          <div className="reveal" style={{ padding: 40, textAlign: 'center', border: '2px dashed var(--border)', background: 'var(--wbbq-ink)', color: 'var(--fg2)' }}>
            Season starts soon. The shelf is hungry.
          </div>
        ) : (
          <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20 }}>
            {[
              { n: gc,    label: 'Grand Champion',          color: 'var(--wbbq-flame)', sub: rookie ? `incl. ${rookie} rookie` : null },
              { n: rgc,   label: 'Reserve Grand Champion',  color: 'var(--wbbq-slime)', sub: null },
              { n: calls, label: 'Calls',                    color: 'var(--wbbq-blue)',  sub: 'overall 3–10 + per-meat' },
            ].map(t => (
              <div key={t.label} style={{
                background: 'var(--wbbq-ink)', borderTop: `4px solid ${t.color}`,
                padding: '24px 22px',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, color: t.color, lineHeight: 0.95 }}>{t.n}</div>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg2)', fontWeight: 800, marginTop: 8 }}>{t.label}</div>
                {t.sub && <div style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--fg3)', marginTop: 4, textTransform: 'uppercase' }}>{t.sub}</div>}
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

// --------- Hero variants ---------

const HeroSection = () => {
  const tweaks = useTweaks();
  if (tweaks.heroVariant === 'marquee') return <HeroMarquee />;
  if (tweaks.heroVariant === 'abduction') return <HeroAbduction />;
  return <HeroPoster />;
};

// 1) POSTER — giant wordmark, mascots breaking out, tape, halftone
const HeroPoster = () => {
  const tweaks = useTweaks();
  const [scroll, setScroll] = useState(0);
  useEffect(() => {
    const onScroll = () => setScroll(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <section className="scanlines" style={{
      position: 'relative', overflow: 'hidden', minHeight: '92vh',
      padding: '80px 24px 140px',
      background: 'radial-gradient(1200px 600px at 15% 10%, rgba(59,176,227,0.10), transparent 60%), radial-gradient(900px 500px at 90% 85%, rgba(255,122,26,0.14), transparent 65%), var(--wbbq-black)',
      display: 'flex', alignItems: 'center',
    }}>
      <div className="halftone" style={{ position: 'absolute', inset: 0, opacity: 0.5, zIndex: 0 }} />
      <div className="wrap" style={{ zIndex: 2 }}>
        <div className="eyebrow" style={{ marginBottom: 20, display: 'flex', gap: 14, alignItems: 'center' }}>
          <span style={{ display: 'inline-block', width: 36, height: 2, background: 'var(--wbbq-flame)' }}></span>
          COMPETITION BBQ · EASTERN CT · EST. SOMETIME
        </div>
        <div style={{ position: 'relative', display: 'inline-block' }}>
          <img src={`${window.ASSETS}brand/wordmark.png`} alt="WARPED BBQ" style={{
            width: 'min(980px, 92vw)', display: 'block',
            transform: `translateY(${scroll * -0.1}px)`,
            animation: 'chalk-jitter 4s ease-in-out infinite',
          }} />
          {/* Mascots breaking out */}
          <img className="hero-poster-flame" src={`${window.ASSETS}mascots/flame.svg`} alt="" style={{
            position: 'absolute', height: 280, right: '-6%', bottom: '-70px', pointerEvents: 'none',
            animation: 'wiggle 4s ease-in-out infinite, flicker 5s linear infinite',
            transform: `translateY(${scroll * 0.2}px)`,
          }} />
          <img className="hero-poster-ufo" src={`${window.ASSETS}mascots/ufo.svg`} alt="" style={{
            position: 'absolute', height: 110, left: '58%', top: '-80px',
            animation: 'hover-drift 7s ease-in-out infinite',
            filter: 'drop-shadow(0 0 22px rgba(181,238,28,0.5))',
            transform: `translateY(${scroll * -0.25}px) rotate(-8deg)`,
          }} />
          <img className="hero-poster-pig" src={`${window.ASSETS}mascots/pig.svg`} alt="" style={{
            position: 'absolute', height: 160, left: '-8%', bottom: '-60px',
            animation: 'wiggle 5s ease-in-out infinite reverse',
            transform: `translateY(${scroll * 0.15}px) rotate(-6deg)`,
          }} />
          {/* Tape accents */}
          <div className="tape" style={{ top: -12, left: 60, transform: 'rotate(-8deg)' }}></div>
          <div className="tape" style={{ bottom: -14, right: 180, transform: 'rotate(6deg)', background: 'rgba(59,176,227,0.7)' }}></div>
        </div>
        <div style={{
          marginTop: 90, maxWidth: 560, fontSize: 20, lineHeight: 1.55, color: 'var(--fg1)',
          fontWeight: 500,
        }}>
          {tweaks.tagline}
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 34, flexWrap: 'wrap' }}>
          <a href="#/events" className="btn btn-primary">Next Comp →</a>
          <a href="#/team" className="btn btn-ghost">Meet The Team</a>
          <a href="#/app" className="btn" style={{ background: 'var(--wbbq-slime)', color: 'var(--wbbq-black)', boxShadow: '6px 6px 0 var(--wbbq-blood)' }}>Sausage Calc</a>
        </div>
      </div>
    </section>
  );
};

// 2) MARQUEE — retro theater marquee framing the wordmark
const HeroMarquee = () => {
  const tweaks = useTweaks();
  const nowShowing = ['PIG w/ PISTOL', 'BBQ FROM BEYOND', 'SMOKE RING IX', 'FLAME THE MOVIE', 'ABDUCTED BY PITMASTERS'];
  return (
    <section className="scanlines" style={{
      position: 'relative', overflow: 'hidden', minHeight: '92vh',
      padding: '60px 24px 100px',
      background: 'radial-gradient(900px 500px at 50% 30%, rgba(255,122,26,0.10), transparent 65%), var(--wbbq-black)',
      display: 'flex', alignItems: 'center',
    }}>
      <div className="wrap" style={{ zIndex: 2 }}>
        {/* Marquee bulb frame */}
        <div style={{
          position: 'relative',
          border: '6px solid var(--wbbq-flame)',
          padding: '60px 32px 48px',
          background: 'linear-gradient(180deg, rgba(11,11,12,0.5), rgba(11,11,12,0.9))',
          boxShadow: '10px 10px 0 var(--wbbq-blue), inset 0 0 60px rgba(255,122,26,0.15)',
        }}>
          {/* Bulbs */}
          {Array.from({ length: 24 }).map((_, i) => {
            const horizontal = i < 12;
            const idx = i % 12;
            const pos = (idx + 0.5) * (100 / 12);
            const style = horizontal
              ? { top: -10, left: `${pos}%` }
              : { bottom: -10, left: `${pos}%` };
            return <div key={i} style={{
              position: 'absolute', ...style,
              width: 14, height: 14, borderRadius: '50%',
              background: 'var(--wbbq-flame-hot)',
              boxShadow: '0 0 12px rgba(255,178,26,0.9)',
              animation: `flicker ${2 + (i % 5) * 0.3}s linear infinite`,
            }} />;
          })}
          <div className="eyebrow" style={{ marginBottom: 12, color: 'var(--wbbq-blue)' }}>★ NOW PLAYING · ONE NIGHT ONLY ★</div>
          <img src={`${window.ASSETS}brand/wordmark.png`} alt="WARPED BBQ" style={{
            width: 'min(880px, 85vw)', display: 'block', margin: '0 auto',
            animation: 'chalk-jitter 5s ease-in-out infinite',
          }} />
          <div style={{ textAlign: 'center', marginTop: 24, fontFamily: 'var(--font-display)', fontSize: 20, letterSpacing: '0.08em', color: 'var(--wbbq-flame)' }}>
            {tweaks.tagline}
          </div>
        </div>
        {/* Marquee ticker */}
        <div style={{
          marginTop: 32, overflow: 'hidden',
          border: '3px solid var(--wbbq-bone)',
          background: 'var(--wbbq-ink)',
          padding: '14px 0',
        }}>
          <div style={{ display: 'flex', gap: 40, animation: 'marquee 30s linear infinite', whiteSpace: 'nowrap', width: 'max-content' }}>
            {[...nowShowing, ...nowShowing, ...nowShowing].map((s, i) => (
              <span key={i} style={{ fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '0.1em', color: i % 2 ? 'var(--wbbq-flame)' : 'var(--wbbq-bone)' }}>
                ★ {s}
              </span>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="#/events" className="btn btn-primary">Get Tickets →</a>
          {window.featureEnabled && window.featureEnabled('merch') && (
            <a href="#/merch" className="btn btn-ghost">Shop The Drop</a>
          )}
        </div>
      </div>
    </section>
  );
};

// 3) ABDUCTION — UFO beaming up the wordmark; pig flees in horror
const HeroAbduction = () => {
  const tweaks = useTweaks();
  return (
    <section className="scanlines" style={{
      position: 'relative', overflow: 'hidden', minHeight: '95vh',
      padding: '40px 24px 140px',
      background: 'radial-gradient(600px 300px at 50% 8%, rgba(181,238,28,0.18), transparent 65%), var(--wbbq-black)',
    }}>
      {/* UFO at top */}
      <img src={`${window.ASSETS}mascots/ufo.svg`} alt="" style={{
        position: 'absolute', top: 40, left: '50%', transform: 'translateX(-50%)',
        height: 200, zIndex: 3,
        filter: 'drop-shadow(0 0 40px rgba(181,238,28,0.7))',
        animation: 'hover-drift 5s ease-in-out infinite',
      }} />
      {/* Tractor beam */}
      <div style={{
        position: 'absolute', top: 180, left: '50%',
        transform: 'translateX(-50%)',
        width: '80vw', maxWidth: 900, height: '70vh',
        background: 'linear-gradient(180deg, rgba(181,238,28,0.45) 0%, rgba(181,238,28,0.15) 40%, transparent 90%)',
        clipPath: 'polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%)',
        animation: 'beam-pulse 2s ease-in-out infinite',
        transformOrigin: 'top',
        zIndex: 1,
      }} />
      <div className="wrap" style={{ zIndex: 2, position: 'relative', paddingTop: '18vh' }}>
        <img src={`${window.ASSETS}brand/wordmark.png`} alt="WARPED BBQ" style={{
          width: 'min(960px, 92vw)', display: 'block', margin: '0 auto',
          animation: 'chalk-jitter 3s ease-in-out infinite',
          filter: 'drop-shadow(0 0 30px rgba(59,176,227,0.5))',
        }} />
        <div style={{
          textAlign: 'center', marginTop: 30, fontSize: 22,
          fontFamily: 'var(--font-display)', letterSpacing: '0.06em',
          color: 'var(--wbbq-bone)', textTransform: 'uppercase',
        }}>
          Abducted by Pitmasters
        </div>
        <div style={{ textAlign: 'center', marginTop: 14, color: 'var(--fg2)', maxWidth: 520, margin: '14px auto 0' }}>
          {tweaks.tagline}
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="#/events" className="btn btn-primary">Next Comp →</a>
          <a href="#/team" className="btn btn-ghost">Meet The Team</a>
        </div>
      </div>
      {/* Pig fleeing across bottom */}
      <img src={`${window.ASSETS}mascots/pig.svg`} alt="" style={{
        position: 'absolute', bottom: 30, left: -200,
        height: 150, zIndex: 4,
        animation: 'pig-run 14s linear infinite',
      }} />
    </section>
  );
};

// --------- Event strip marquee ---------
const EventStripSection = () => {
  const events = [
    'APR 25 · HARPOON NEW ENGLAND BBQ CHAMPIONSHIP · WINDSOR VT',
    'MAY 17 · SMOKE ON THE WATER · MYSTIC CT',
    'JUN 14 · PIG ISLAND NE · NEW HAVEN CT',
    'JUL 04 · BACKYARDS BEST · NORWICH CT',
    'AUG 23 · HARVEST FEST INVITATIONAL · WOODSTOCK CT',
  ];
  return (
    <section style={{
      background: 'var(--wbbq-flame)',
      borderTop: '3px solid var(--wbbq-black)',
      borderBottom: '3px solid var(--wbbq-black)',
      padding: '18px 0',
      overflow: 'hidden',
      position: 'relative',
      zIndex: 3,
    }}>
      <div style={{ display: 'flex', gap: 50, animation: 'marquee 40s linear infinite', whiteSpace: 'nowrap', width: 'max-content' }}>
        {[...events, ...events, ...events].map((e, i) => (
          <span key={i} style={{
            fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '0.08em',
            color: 'var(--wbbq-black)',
          }}>
            ● {e}
          </span>
        ))}
      </div>
    </section>
  );
};

// --------- Meet team teaser ---------
const MeetTeamTeaser = () => (
  <section className="section">
    <div className="wrap split-2" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 60, alignItems: 'center' }}>
      <div className="reveal">
        <div className="eyebrow">Ch. 01 · The Crew</div>
        <h2 className="section-title" style={{ marginTop: 12 }}>Two Humans.<br/><span className="accent">One Pit.</span><br/>Zero Mercy.</h2>
        <div className="dashed-rule" />
        <p style={{ color: 'var(--fg2)', fontSize: 17, maxWidth: 480 }}>
          Adam runs the fire. Jess runs Adam. Between them they've butchered more
          competition cuts than we're legally allowed to count. The pig never
          complains twice.
        </p>
        <a href="#/team" className="btn btn-ghost" style={{ marginTop: 20 }}>Meet Them →</a>
      </div>
      <div className="reveal" style={{ position: 'relative', minHeight: 380 }}>
        <div className="poster-card team-teaser-card" style={{ position: 'absolute', top: 0, left: 20, width: 240, rotate: '-3deg', zIndex: 2 }}>
          <img src={`${window.ASSETS}mascots/robot-monkey.svg`} alt="Adam" style={{ width: '100%' }} />
          <div className="eyebrow" style={{ color: 'var(--wbbq-blue)', marginTop: 10 }}>Pitmaster</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--wbbq-bone)', marginTop: 4 }}>Adam</div>
        </div>
        <div className="poster-card team-teaser-card" style={{ position: 'absolute', top: 40, right: 20, width: 240, rotate: '4deg', zIndex: 1 }}>
          <img src={`${window.ASSETS}mascots/robot-cat-fish.svg`} alt="Jess" style={{ width: '100%' }} />
          <div className="eyebrow" style={{ color: 'var(--wbbq-blue)', marginTop: 10 }}>Chief Of Operations</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--wbbq-bone)', marginTop: 4 }}>Jessica</div>
        </div>
      </div>
    </div>
  </section>
);

// --------- Merch teaser ---------
const MerchTeaser = () => (
  <section className="section" style={{ background: 'var(--wbbq-ink)', borderTop: '3px solid var(--wbbq-flame)', borderBottom: '3px solid var(--wbbq-flame)' }}>
    <div className="halftone-orange" style={{ position: 'absolute', inset: 0, opacity: 0.4, zIndex: 0 }} />
    <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 20 }}>
        <div className="reveal">
          <div className="eyebrow">Ch. 02 · Merch</div>
          <h2 className="section-title" style={{ marginTop: 12 }}>Wear The <span className="blue">Pig.</span></h2>
        </div>
        <a href="#/merch" className="btn btn-primary">Shop Drop →</a>
      </div>
      <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 28 }}>
        {[
          { name: 'Pig With Pistol Tee', price: '$32', mascot: 'pig.svg', rot: '-2deg' },
          { name: 'Flame Dude Hoodie', price: '$68', mascot: 'flame.svg', rot: '1.5deg' },
          { name: 'UFO Trucker Hat', price: '$28', mascot: 'ufo.svg', rot: '-1deg' },
          { name: 'Robot Monkey Tee', price: '$34', mascot: 'robot-monkey.svg', rot: '2deg' },
        ].map((m, i) => (
          <div key={i} className="poster-card reveal" style={{ rotate: m.rot }}>
            <div style={{ aspectRatio: '1/1', background: 'var(--wbbq-black)', display: 'grid', placeItems: 'center', border: '3px solid var(--wbbq-ash)', padding: 20 }}>
              <img src={`${window.ASSETS}mascots/${m.mascot}`} alt="" style={{ maxHeight: '88%', objectFit: 'contain' }} />
            </div>
            <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, letterSpacing: '0.04em' }}>{m.name}</div>
              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--wbbq-flame)', fontSize: 15 }}>{m.price}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// --------- Sausage Calculator callout ---------
const AppCalloutSection = () => (
  <section className="section">
    <div className="wrap">
      <div className="zine-card split-2" style={{
        padding: '48px 40px',
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', gap: 40, alignItems: 'center',
      }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--wbbq-slime)' }}>Ch. 03 · The App</div>
          <h2 className="section-title" style={{ marginTop: 12 }}>Sausage<br/><span className="slime">Calculator.</span></h2>
          <p style={{ color: 'var(--fg2)', fontSize: 17, marginTop: 16, maxWidth: 520 }}>
            Grind it. Mix it. Stuff it. Do the math so you don't have to. Available on iOS and on the web.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 22, flexWrap: 'wrap' }}>
            <a href="https://apps.apple.com/us/app/sausage-calculator/id6752734430" target="_blank" rel="noreferrer">
              <img src={`${window.ASSETS}badges/app-store-badge.svg`} alt="Download on the App Store" style={{ height: 52 }} />
            </a>
            <a href="https://sausagecalculator.warpedbbq.com" target="_blank" rel="noreferrer" className="btn btn-slime">Use On Web →</a>
          </div>
        </div>
        <div style={{ position: 'relative', width: 260, height: 260, display: 'grid', placeItems: 'center', justifySelf: 'center' }}>
          <div style={{
            position: 'absolute', inset: 0, background: 'var(--wbbq-slime)',
            clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)',
            animation: 'wiggle 6s ease-in-out infinite',
            filter: 'drop-shadow(0 0 30px rgba(181,238,28,0.6))',
          }} />
          <div style={{
            position: 'relative', zIndex: 1,
            fontFamily: 'var(--font-display)', fontSize: 40,
            color: 'var(--wbbq-black)', textAlign: 'center', lineHeight: 0.9, padding: 10,
          }}>PORK<br/>MATH</div>
        </div>
      </div>
    </div>
  </section>
);

// --------- Instagram teaser ---------
const InstaTeaser = () => (
  <section className="section" style={{ paddingBottom: 60 }}>
    <div className="wrap">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 20 }}>
        <div className="reveal">
          <div className="eyebrow">Ch. 04 · Transmissions</div>
          <h2 className="section-title" style={{ marginTop: 12 }}>Live From <span className="accent">The Pit.</span></h2>
        </div>
        <a href="https://instagram.com/warpedbbq" target="_blank" rel="noreferrer" className="btn btn-ghost">@warpedbbq ↗</a>
      </div>
      <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12 }}>
        {[
          { c: '#0B0B0C', tag: 'BRISKET 14HR' },
          { c: '#151517', tag: 'RIB PRESENTATION' },
          { c: '#1E1F22', tag: 'PIT AT 4AM' },
          { c: '#0B0B0C', tag: 'JESS DIALING IN' },
          { c: '#151517', tag: 'SCORED A 180' },
          { c: '#1E1F22', tag: 'CRACKED COMP BOX' },
        ].map((p, i) => (
          <div key={i} className="reveal" style={{
            aspectRatio: '1/1', background: p.c,
            border: '2px solid var(--border)',
            position: 'relative', overflow: 'hidden',
            transition: 'transform 220ms var(--ease-snap), border-color 220ms',
            cursor: 'pointer',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = 'translate(-2px,-2px) rotate(-0.5deg)'; e.currentTarget.style.borderColor = 'var(--wbbq-flame)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = 'translate(0,0) rotate(0)'; e.currentTarget.style.borderColor = 'var(--border)'; }}
          >
            <div className="halftone" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
            <img src={`${window.ASSETS}mascots/${['pig.svg','flame.svg','ufo.svg','robot-monkey.svg','robot-cat-fish.svg','pig.svg'][i]}`} alt="" style={{
              position: 'absolute', inset: 0, margin: 'auto', height: '55%', filter: 'grayscale(0.3)',
            }} />
            <div style={{
              position: 'absolute', bottom: 10, left: 10,
              fontFamily: 'var(--font-mono)', fontSize: 10,
              background: 'rgba(0,0,0,0.7)', padding: '4px 8px',
              color: 'var(--wbbq-flame)',
            }}>#{p.tag}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.HomePage = HomePage;