// TeamPage.jsx
const TeamPage = () => {
  useReveal();
  const rosterStore = useRosterStore();
  const members = rosterStore.roster;
  return (
    <>
      <PageHero eyebrow="Dossier" title={<>The <span style={{ color: 'var(--wbbq-flame)' }}>Crew.</span></>} subtitle="Two humans. One pit. A cast of mascots with unresolved legal status." mascot="robot-monkey.svg" />
      <section className="section">
        <div className="wrap" style={{ display: 'grid', gap: 80 }}>
          {members.map((m, i) => (
            <div key={m.name} className="reveal split-2" style={{
              display: 'grid',
              gridTemplateColumns: i % 2 === 0 ? '360px 1fr' : '1fr 360px',
              gap: 48, alignItems: 'center',
            }}>
              {i % 2 === 0 && <MemberPortrait m={m} />}
              <div>
                <div className="eyebrow" style={{ color: m.color }}>No. 0{i+1} · {m.role}</div>
                <h2 className="section-title" style={{ marginTop: 12, fontSize: 'clamp(2rem, 4.5vw, 3.4rem)' }}>{m.name}</h2>
                <div className="dashed-rule" />
                <p style={{ fontSize: 17, color: 'var(--fg2)', maxWidth: 520 }}>{m.blurb}</p>
                <div style={{ display: 'flex', gap: 16, marginTop: 24, flexWrap: 'wrap' }}>
                  {m.stats.map(([k, v]) => (
                    <div key={k} style={{
                      border: '2px solid var(--border)', padding: '10px 16px',
                      minWidth: 110,
                    }}>
                      <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg3)', fontWeight: 800 }}>{k}</div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: m.color, marginTop: 4 }}>{v}</div>
                    </div>
                  ))}
                </div>
              </div>
              {i % 2 === 1 && <MemberPortrait m={m} />}
            </div>
          ))}
        </div>
      </section>
      <section className="section" style={{ background: 'var(--wbbq-ink)', borderTop: '3px solid var(--wbbq-blue)', borderBottom: '3px solid var(--wbbq-blue)' }}>
        <div className="wrap">
          <div className="eyebrow">Supporting Cast</div>
          <h2 className="section-title" style={{ marginTop: 10 }}>The <span className="accent">Mascots.</span></h2>
          <p style={{ color: 'var(--fg2)', maxWidth: 600, marginTop: 12 }}>
            Unpaid. Non-union. Frequently armed. These characters appear on shirts, stickers, and in the occasional fever dream.
          </p>
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 20 }}>
            {[
              { name: 'PIG', file: 'pig.svg', tag: 'The Victim', color: 'var(--wbbq-pig)' },
              { name: 'FLAME', file: 'flame.svg', tag: 'The Enabler', color: 'var(--wbbq-flame)' },
              { name: 'UFO', file: 'ufo.svg', tag: 'The Accomplice', color: 'var(--wbbq-slime)' },
              { name: 'ROBO-MONK', file: 'robot-monkey.svg', tag: 'The Muscle', color: 'var(--wbbq-flame-hot)' },
              { name: 'ROBO-CAT', file: 'robot-cat-fish.svg', tag: 'The Brains', color: 'var(--wbbq-blue)' },
            ].map((m) => (
              <div key={m.name} className="poster-card reveal" style={{ textAlign: 'center' }}>
                <div style={{ aspectRatio: '1/1', background: 'var(--wbbq-black)', display: 'grid', placeItems: 'center', padding: 18, border: '3px solid var(--wbbq-ash)' }}>
                  <img src={`${window.ASSETS}mascots/${m.file}`} alt={m.name} style={{ maxHeight: '85%' }} />
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: m.color, marginTop: 12 }}>{m.name}</div>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg3)', fontWeight: 800, marginTop: 4 }}>{m.tag}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

const MemberPortrait = ({ m }) => (
  <div className="member-portrait-wrap" style={{ position: 'relative' }}>
    <div className="poster-card" style={{ padding: 20, border: `3px solid ${m.color}`, boxShadow: `8px 8px 0 ${m.color}` }}>
      <div style={{ aspectRatio: '3/4', background: 'var(--wbbq-black)', display: 'grid', placeItems: 'center', padding: 20, border: '3px solid var(--wbbq-ash)', position: 'relative', overflow: 'hidden' }}>
        <div className="halftone" style={{ position: 'absolute', inset: 0, opacity: 0.3 }} />
        <img src={`${window.ASSETS}mascots/${m.mascot}`} alt={m.name} style={{ maxHeight: '90%', position: 'relative', zIndex: 1 }} />
      </div>
      <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
        <div>
          <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg3)', fontWeight: 800 }}>WARPED BBQ · NO. 0{m.stats ? '1' : '2'}</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--wbbq-bone)', marginTop: 4 }}>{m.name.split(' ')[0]}</div>
        </div>
        <img src={`${window.ASSETS}brand/qr-code.png`} alt="" style={{ width: 48, height: 48, opacity: 0.9 }} onError={(e) => e.target.style.display='none'} />
      </div>
    </div>
  </div>
);

window.TeamPage = TeamPage;