// About Us page
function AboutPage() {
  const { go } = CTSCShell.useNav();
  const { data } = CTSCStore.useStore();
  const fedCount = data.federations.length;
  const sascoc = data.federations.filter(f => f.sascoc).length;

  return (
    <div className="fade-in">
      {/* hero */}
      <section className="tx-topo" style={{ background: 'linear-gradient(180deg,var(--navy),var(--navy2))', color: '#fff' }}>
        <div className="wrap" style={{ padding: '64px 32px 58px', display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="eyebrow gold" style={{ color: 'var(--gold)' }}>About the Council</div>
            <h1 style={{ fontSize: 52, lineHeight: 1, fontWeight: 900, letterSpacing: '-.02em', margin: '18px 0 20px' }}>
              The governing home of<br />Cape sport.
            </h1>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: '#bcd0de', maxWidth: 480, margin: 0 }}>
              The Cape Town Sport Council is the recognised umbrella body coordinating organised sport across the Cape Metro — bringing federations, clubs, coaches and communities under one constitution since 2000.
            </p>
          </div>
          <img src="assets/sport-administration.png" alt="Cape Town Sport Council — sport administration"
            style={{ width: '100%', borderRadius: 8, border: '1px solid #2c557a', display: 'block', boxShadow: '0 18px 44px rgba(6,25,42,.34)' }} />
        </div>
      </section>

      {/* mission / vision */}
      <div className="wrap" style={{ padding: '56px 32px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 }}>
          {[
            ['Our mission', 'To develop, coordinate and represent organised sport across Cape Town — championing good governance, transformation and access so that every community can play, compete and belong.', 'var(--navy)'],
            ['Our vision', 'A united, well-governed sporting city where talent from every neighbourhood has a clear path from the township field to the national stage.', 'var(--gold)'],
          ].map(([h, body, c]) => (
            <div key={h} className="card" style={{ padding: 30, borderTop: '4px solid ' + c }}>
              <div className="eyebrow" style={{ color: c === 'var(--gold)' ? 'var(--gold-d)' : 'var(--ocean)' }}>{h}</div>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--text)', margin: '16px 0 0', fontWeight: 500 }}>{body}</p>
            </div>
          ))}
        </div>
      </div>

      {/* what we do */}
      <div className="wrap" style={{ padding: '56px 32px 0' }}>
        <div className="sech"><h2>What the Council does</h2></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }} className="stagger">
          {[
            ['◎', 'Affiliation & governance', `Recognising and supporting ${fedCount} affiliated federations, with ${sascoc} carrying SASCOC alignment.`],
            ['⤴', 'Transformation', 'Tracking representation of women, youth and athletes with disabilities across every code.'],
            ['★', 'Heroes & recognition', 'Honouring the athletes and administrators who carry the city\u2019s colours.'],
            ['⚑', 'Events & development', 'Listing fixtures, coaching courses and fundraising that grow the game at grassroots.'],
          ].map(([ic, h, body], i) => (
            <div key={h} className="card" style={{ padding: 22, borderTop: '3px solid var(--navy)', animationDelay: i * 40 + 'ms' }}>
              <div style={{ width: 40, height: 40, borderRadius: 6, background: 'var(--sky-tint)', border: '1px solid var(--sky-soft)', display: 'grid', placeItems: 'center', color: 'var(--navy)', fontSize: 20, marginBottom: 14 }}>{ic}</div>
              <h3 style={{ fontSize: 16, fontWeight: 900, margin: '0 0 7px', lineHeight: 1.2 }}>{h}</h3>
              <p style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.55, margin: 0 }}>{body}</p>
            </div>
          ))}
        </div>
      </div>

      {/* exco */}
      <div className="wrap" style={{ padding: '56px 32px 0' }}>
        <div className="sech"><h2>Executive Committee</h2><span style={{ fontSize: 13, color: 'var(--muted)', fontWeight: 700 }}>Office bearers &amp; commissions</span></div>

        {/* office bearers */}
        <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--ocean)', textTransform: 'uppercase', letterSpacing: '.1em', marginBottom: 14 }}>Office bearers</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 14, marginBottom: 34 }} className="stagger">
          {[
            ['Junaid Baig', 'Chairperson', true],
            ['Nicole Alcock', 'Vice-Chairperson', false],
            ['Bennett Bailey', 'Vice-Chairperson', false],
            ['Janine du Toit', 'Secretary', false],
            ['Farouk Meyer', 'Treasurer', false],
          ].map(([name, role, lead], i) => (
            <div key={name} className="card" style={{ padding: '22px 18px', textAlign: 'center', borderTop: '3px solid ' + (lead ? 'var(--gold)' : 'var(--navy)'), animationDelay: i * 40 + 'ms' }}>
              <div style={{ width: 60, height: 60, borderRadius: '50%', margin: '0 auto 13px', background: lead ? 'linear-gradient(140deg,var(--gold),var(--gold-d))' : 'linear-gradient(140deg,#2a6cb3,#0c4594)', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 19, letterSpacing: '.02em' }}>
                {name.split(' ').filter(w => w[0] === w[0].toUpperCase()).map(w => w[0]).slice(0, 2).join('')}
              </div>
              <div style={{ fontSize: 15, fontWeight: 900, color: 'var(--navy)', lineHeight: 1.2 }}>{name}</div>
              <div style={{ fontSize: 12.5, color: 'var(--muted)', fontWeight: 700, marginTop: 4 }}>{role}</div>
            </div>
          ))}
        </div>

        {/* commission chairs */}
        <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--ocean)', textTransform: 'uppercase', letterSpacing: '.1em', marginBottom: 14 }}>Commission chairs</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 14 }} className="stagger">
          {[
            ['Lolene Lawrence', 'Women & Girls Commission'],
            ['Kevin Johnson', 'Coaching Commission'],
            ['Sibongile Bango', 'Transformation Commission'],
            ['Henry Arnold', 'Rural Sport Commission'],
            ['Sandra Freeks', 'Safeguarding Commission'],
          ].map(([name, role], i) => (
            <div key={name} className="card" style={{ padding: '20px 16px', display: 'flex', flexDirection: 'column', gap: 10, borderTop: '3px solid var(--sky)', animationDelay: i * 40 + 'ms' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', flex: '0 0 auto', background: 'var(--sky-tint)', border: '1px solid var(--sky-soft)', color: 'var(--navy)', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 14 }}>
                  {name.split(' ').map(w => w[0]).slice(0, 2).join('')}
                </div>
                <div style={{ fontSize: 14.5, fontWeight: 900, color: 'var(--navy)', lineHeight: 1.15 }}>{name}</div>
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--muted)', fontWeight: 700, lineHeight: 1.35 }}>{role} · Chair</div>
            </div>
          ))}
        </div>
      </div>

      {/* history */}
      <div className="wrap" style={{ padding: '56px 32px 0' }}>
        <div className="sech"><h2>Our story</h2><span style={{ fontSize: 13, color: 'var(--muted)', fontWeight: 700 }}>Est. 2000</span></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0 }}>
          {[
            ['2000', 'Founded', 'Federations unite to form a single coordinating council for Cape Town sport.'],
            ['2008', 'SASCOC alignment', 'Codes begin formal affiliation pathways to the national olympic structure.'],
            ['2016', 'Transformation focus', 'Representation reporting becomes a standing requirement for affiliates.'],
            ['2026', 'Digital council', 'Federations, heroes, events and reporting move onto one shared platform.'],
          ].map(([yr, h, body], i) => (
            <div key={yr} style={{ position: 'relative', padding: '0 16px' }}>
              <div style={{ height: 3, background: 'var(--sky-soft)', position: 'relative', marginBottom: 18 }}>
                <div style={{ width: 13, height: 13, borderRadius: '50%', background: 'var(--navy)', border: '3px solid var(--paper)', boxShadow: '0 0 0 2px var(--sky)', position: 'absolute', left: 0, top: -5 }}></div>
              </div>
              <div style={{ fontSize: 24, fontWeight: 900, color: 'var(--navy)', letterSpacing: '-.02em', lineHeight: 1 }}>{yr}</div>
              <div style={{ fontSize: 14, fontWeight: 800, margin: '6px 0 6px' }}>{h}</div>
              <p style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.55, margin: 0, paddingRight: 14 }}>{body}</p>
            </div>
          ))}
        </div>
      </div>

      {/* values */}
      <div className="wrap" style={{ padding: '56px 32px 0' }}>
        <div className="sech"><h2>What we stand for</h2></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
          {[
            ['Good governance', 'Transparent affiliation, clear approvals and accountable administration in every code.'],
            ['Access for all', 'Sport that reaches every suburb, township and school across the Cape Metro.'],
            ['Built by community', 'Volunteers, clubs and academies are the real engine of Cape sport — we back them.'],
          ].map(([h, body]) => (
            <div key={h} className="card" style={{ padding: 24, borderTop: '3px solid var(--gold)' }}>
              <h3 style={{ fontSize: 18, fontWeight: 900, margin: '0 0 8px', lineHeight: 1.2 }}>{h}</h3>
              <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.6, margin: 0 }}>{body}</p>
            </div>
          ))}
        </div>
      </div>

      {/* contact CTA */}
      <div className="wrap" style={{ padding: '56px 32px 0' }}>
        <div className="tx-topo" style={{ background: 'linear-gradient(120deg,var(--navy),var(--ocean))', borderRadius: 12, overflow: 'hidden', padding: '40px 44px', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 30 }}>
          <div>
            <h2 style={{ fontSize: 28, fontWeight: 900, margin: '0 0 8px' }}>Work with the Council</h2>
            <p style={{ margin: 0, color: '#cfe1ec', fontSize: 15.5, maxWidth: 540 }}>Affiliate your federation, list your events, or reach the council team at the Athlone Sports Precinct — info@ctsc.org.za · +27 21 000 0000.</p>
          </div>
          <button className="btn btn-gold btn-lg" onClick={() => go('federations')}>Explore Federations</button>
        </div>
      </div>
    </div>
  );
}
window.AboutPage = AboutPage;