// Sport Heroes / Hall of Fame + hero profile
function HeroesPage() {
  const { go } = CTSCShell.useNav();
  const { data } = CTSCStore.useStore();
  const { Avatar } = CTSCShell;
  const [sport, setSport] = React.useState('All');
  const approved = data.heroes.filter(h => h.status === 'Approved');
  const sports = ['All', ...Array.from(new Set(approved.map(h => h.sport)))];
  const list = approved.filter(h => sport === 'All' || h.sport === sport);

  return (
    <div className="fade-in">
      <section style={{ background: 'linear-gradient(180deg,var(--navy),var(--navy2))', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div className="wrap" style={{ padding: '50px 32px' }}>
          <div className="eyebrow gold" style={{ color: 'var(--gold)' }}>Hall of Fame</div>
          <h1 style={{ fontSize: 48, fontWeight: 900, margin: '14px 0 8px', letterSpacing: '-.02em' }}>Sport Heroes of Cape Town</h1>
          <p style={{ fontSize: 16.5, color: '#bcd0de', maxWidth: 600, margin: 0, lineHeight: 1.5 }}>Honouring the athletes who carried the city's colours — inducted and celebrated by their federations. Federation admins can nominate and update profiles.</p>
        </div>
      </section>
      <div className="wrap" style={{ padding: '26px 32px 0' }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
          {sports.map(s => <button key={s} className={'chip' + (sport === s ? ' active' : '')} onClick={() => setSport(s)}>{s}</button>)}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }} className="stagger">
          {list.map((h, i) => (
            <button key={h.id} className="card card-hover" onClick={() => go('hero', { id: h.id })}
              style={{ textAlign: 'left', overflow: 'hidden', animationDelay: i * 35 + 'ms' }}>
              <div style={{ position: 'relative', height: 180, background: 'linear-gradient(140deg,#2a6cb3,#0c4594)' }}>
                {h.photo && <img src={h.photo} alt={h.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
                {!h.photo && <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '52%', background: '#08315f', clipPath: 'polygon(0 70%,25% 30%,50% 55%,75% 20%,100% 50%,100% 100%,0 100%)', opacity: .6 }}></div>}
                <span style={{ position: 'absolute', top: 14, left: 14, background: 'var(--gold)', color: 'var(--navy)', fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.06em', padding: '5px 10px', borderRadius: 4 }}>{h.sport}</span>
                <div style={{ position: 'absolute', left: 18, bottom: -26 }}><Avatar name={h.name} size={64} src={h.photo} /></div>
              </div>
              <div style={{ padding: '34px 18px 18px' }}>
                <div style={{ fontSize: 18, fontWeight: 800 }}>{h.name}</div>
                <div style={{ fontSize: 13, color: 'var(--ocean)', fontWeight: 700, margin: '3px 0 8px' }}>{h.achievement}</div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', fontWeight: 600 }}>Inducted {h.inducted} · {h.era}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function HeroDetail({ id }) {
  const { go } = CTSCShell.useNav();
  const { data } = CTSCStore.useStore();
  const { Avatar } = CTSCShell;
  const { fedName } = CTSCStore;
  const h = data.heroes.find(x => x.id === id);
  if (!h) return <PageHead title="Hero not found" sub="" />;
  return (
    <div className="fade-in">
      <section style={{ background: 'linear-gradient(180deg,var(--navy),var(--navy2))', color: '#fff' }}>
        <div className="wrap" style={{ padding: '28px 32px 44px' }}>
          <button onClick={() => go('heroes')} style={{ color: '#8fb0c4', fontSize: 13, fontWeight: 700, marginBottom: 26 }}>‹ Hall of Fame</button>
          <div style={{ display: 'flex', gap: 26, alignItems: 'center' }}>
            <Avatar name={h.name} size={104} src={h.photo} />
            <div>
              <span className="badge badge-pending" style={{ background: 'rgba(255,255,255,.12)', color: 'var(--gold)' }}>{h.sport}</span>
              <h1 style={{ fontSize: 44, fontWeight: 900, margin: '12px 0 6px', letterSpacing: '-.02em' }}>{h.name}</h1>
              <div style={{ fontSize: 16, color: 'var(--gold)', fontWeight: 700 }}>{h.achievement}</div>
            </div>
          </div>
        </div>
      </section>
      <div className="wrap" style={{ padding: '40px 32px 0', display: 'grid', gridTemplateColumns: '1fr 300px', gap: 40, alignItems: 'start' }}>
        <div>
          <h3 style={{ fontSize: 20, fontWeight: 900, margin: '0 0 12px' }}>Biography</h3>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: '#3c4f5a', margin: 0 }}>{h.bio}</p>
        </div>
        <aside className="card" style={{ padding: 22 }}>
          <h4 style={{ fontSize: 13, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.08em', margin: '0 0 14px' }}>Induction Record</h4>
          <Row k="Sport" v={h.sport} />
          <Row k="Federation" v={fedName(data, h.fedId)} />
          <Row k="Active era" v={h.era} />
          <Row k="Inducted" v={h.inducted} />
          <button className="btn btn-ghost btn-sm" style={{ width: '100%', marginTop: 16, justifyContent: 'center' }} onClick={() => go('federation', { id: h.fedId })}>View federation ›</button>
        </aside>
      </div>
    </div>
  );
}
window.HeroesPage = HeroesPage;
window.HeroDetail = HeroDetail;