/* global React, NA_DATA, NASite */
const { useState } = React;

// ============== COACHES PAGE ==============
function CoachesPage() {
  const { Photo } = NASite;
  const { COACHES } = NA_DATA;
  return (
    <main>
      <div className="page-head">
        <div className="wrap">
          <div className="crumb">Club / Coaches</div>
          <h1>The coaching staff.</h1>
          <p className="lede">A lead coach for every squad, plus a director keeping the standard consistent across the club. Trained, accredited, and on the floor every week.</p>
        </div>
      </div>
      <section className="section">
        <div className="wrap">
          <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {COACHES.map((c, i) => (
              <div className="coach-card" key={c.id}>
                {c.photo
                  ? <Photo src={c.photo} tag={c.role} focal="center 30%" />
                  : <Photo variant={`photo-v${(i % 6) + 1}`} tag={c.role} />}
                <div className="coach-body">
                  <div className="role">{c.role}</div>
                  <h3 style={{ marginTop: 8 }}>{c.name}</h3>
                  <p className="bio">{c.bio}</p>
                  <div className="ink-mute" style={{ fontSize: 12, marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--line)', letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>
                    {c.stats}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ============== ABOUT PAGE ==============
function AboutPage({ setPage }) {
  const { Photo } = NASite;
  const { STAFF, COACHES } = NA_DATA;
  const founder = COACHES.find(c => c.id === 'c0');
  return (
    <main>
      <div className="page-head">
        <div className="wrap">
          <div className="crumb">Club / About</div>
          <h1>A Nottingham basketball club.</h1>
          <p className="lede">Founded in 2024 by Matt Parker. One organisation, two arms — Nottingham Athletic the basketball club, and Athletic Academy CIC the schools-and-community programme. A growing membership, eight squads, a growing number of school partners — and bigger plans beyond basketball.</p>
        </div>
      </div>

      <section className="section">
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <Photo variant="photo-v2" tag="Melbourne Park" style={{ aspectRatio: '4/5' }} />
          <div className="text-col">
            <div className="eyebrow mb-4">The club</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.02em', margin: '0 0 24px' }}>
              Train hard. Travel far. Play for each other.
            </h2>
            <p>Nottingham Athletic was built to give players in Nottingham a serious, well-organised place to develop their game. Eleven teams from U12 through to a senior side competing in the National Basketball League — training and playing across different parts of the city.</p>
            <p>The kit, the coaching standard, the fixtures list — they hang together because someone is paying attention. We operate as a proper club, with a long-term plan.</p>
            <p>Our players come from across the East Midlands and beyond. Some are coming up through our youth pathway. Some have moved to Nottingham specifically to play here. All of them have to earn their spot.</p>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <div className="bignum-strip">
            {[
              { l: 'Teams', v: '11', s: 'U12 → Senior' },
              { l: 'Players', v: '65', s: 'across the club' },
              { l: 'Sessions / week', v: '11', s: 'training + match' },
              { l: 'Permanent venues', v: '3', s: 'across Nottingham' },
            ].map((b, i) => (
              <div key={i}>
                <div className="stat-label" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mute)', fontWeight: 600 }}>{b.l}</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 56, letterSpacing: '-0.02em', lineHeight: 1, margin: '12px 0 8px' }} className="tabular">{b.v}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{b.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginBottom: 40 }}>
            <div>
              <div className="eyebrow mb-4">Founder & Director</div>
              <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.02em', margin: '0 0 16px' }}>
                The person behind the club.
              </h2>
              <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: '38ch', margin: 0 }}>
                One organisation. Two arms. Built and run from Nottingham.
              </p>
            </div>
            <div />
          </div>
          {founder && (
            <div className="person-card" style={{ maxWidth: 720 }}>
              {founder.photo
                ? <Photo src={founder.photo} tag="Founder" focal="center 30%" />
                : <Photo variant="photo-v2" tag="Founder" />}
              <div className="person-body">
                <div className="role">{founder.role}</div>
                <h3>{founder.name}</h3>
                <p className="bio">{founder.bio}</p>
                <div className="person-foot">
                  Contact · <a href="mailto:admin@nottinghamathletic.com">admin@nottinghamathletic.com</a>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      <section className="section section-deep">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginBottom: 40 }}>
            <div>
              <div className="eyebrow mb-4">Club staff</div>
              <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.02em', margin: '0 0 16px' }}>
                Welfare, safeguarding & support.
              </h2>
              <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: '40ch', margin: 0 }}>
                The people you can speak to directly — about anything from a fixture question to a serious concern. More profiles will be added as roles are confirmed.
                {' '}<a onClick={() => setPage('coaches')} style={{ color: 'var(--ink)', textDecoration: 'underline', cursor: 'pointer' }}>Meet the coaching team →</a>
              </p>
            </div>
            <div />
          </div>
          <div className="staff-grid">
            {STAFF.map(p => (
              p.placeholder ? (
                <div className="staff-card staff-placeholder" key={p.id}>
                  <div className="staff-photo" aria-hidden="true">
                    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.5" width="42" height="42">
                      <circle cx="32" cy="24" r="10" />
                      <path d="M12 56c0-11 9-18 20-18s20 7 20 18" />
                    </svg>
                  </div>
                  <div className="staff-body">
                    <div className="role">{p.role}</div>
                    <h3>Profile coming soon</h3>
                    <p className="bio">A new staff member will be announced here.</p>
                  </div>
                </div>
              ) : (
                <div className="staff-card" key={p.id}>
                  <Photo src={p.photo} tag={p.role.split(' ')[0]} focal="center 25%" className="staff-photo" />
                  <div className="staff-body">
                    <div className="role">{p.role}</div>
                    <h3>{p.name}</h3>
                    <p className="bio">{p.bio}</p>
                    <div className="staff-foot">
                      <a href={`mailto:${p.email}`}>{p.email}</a>
                    </div>
                  </div>
                </div>
              )
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="eyebrow mb-4">How we operate</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.02em', margin: 0 }}>
              The standard, in plain English.
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {[
              { t: 'You earn your spot, and you keep earning it.', d: 'Trials each season. Roster reviews mid-year. Effort and attendance are the floor; talent is the ceiling.' },
              { t: 'One coach per squad, and a director above them.', d: 'Continuity matters. A squad has one head coach who knows every player, plus assistants — not a rotating cast.' },
              { t: 'We play in real venues, on a real schedule.', d: 'We operate across multiple venues in Nottingham, with a long-term ambition to settle into a home of our own. Fixtures published a season ahead.' },
              { t: 'We tell players the truth.', d: 'Honest feedback at trials, in reviews, and after games. No false hope, no ghosting.' },
            ].map((p, i) => (
              <div key={i} style={{ paddingBottom: 20, borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 22, letterSpacing: '-0.01em' }}>{p.t}</div>
                <div style={{ fontSize: 15, color: 'var(--ink-soft)', marginTop: 6, lineHeight: 1.5, maxWidth: '60ch' }}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="eyebrow mb-4">Club documents</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.02em', margin: '0 0 16px' }}>
              The paperwork, on the record.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: '38ch', margin: 0 }}>
              Policies, governance and welfare documents. If you need something that isn't here, email{' '}
              <a href="mailto:admin@nottinghamathletic.com" style={{ color: 'var(--ink)', textDecoration: 'underline' }}>admin@nottinghamathletic.com</a>.
            </p>
          </div>
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            {[
              { t: 'Safeguarding Policy',                 c: 'Welfare' },
              { t: 'Code of Conduct — Players & Parents', c: 'Welfare' },
              { t: 'Equality, Diversity & Inclusion',     c: 'Welfare' },
              { t: 'Concussion & Injury Protocol',        c: 'Medical' },
              { t: 'Club Constitution',                   c: 'Governance' },
              { t: 'Privacy & Data Policy',               c: 'Governance' },
            ].map((doc, i, arr) => (
              <a
                key={i}
                href="#"
                onClick={(e) => e.preventDefault()}
                className="doc-row"
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'auto 1fr auto auto',
                  alignItems: 'center',
                  gap: 20,
                  padding: '18px 24px',
                  borderBottom: i < arr.length - 1 ? '1px solid var(--line)' : 'none',
                  textDecoration: 'none',
                  color: 'inherit',
                }}
              >
                <div style={{
                  width: 40, height: 48,
                  background: 'var(--surface-3)',
                  border: '1px solid var(--line)',
                  borderRadius: 4,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 10,
                  letterSpacing: '0.04em', color: 'var(--ink-mute)',
                  flexShrink: 0,
                }}>PDF</div>
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 17, letterSpacing: '-0.005em' }}>{doc.t}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 3 }}>PDF · {doc.c}</div>
                </div>
                <span className="pill pill-outline" style={{ whiteSpace: 'nowrap' }}>{doc.c}</span>
                <span aria-hidden="true" style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 32, height: 32, borderRadius: 999,
                  background: 'var(--surface-3)', color: 'var(--ink)',
                  fontSize: 14, fontWeight: 600,
                }}>↓</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-navy">
        <div className="wrap text-center">
          <img src="assets/crest-with-ball.png" alt="" style={{ height: 96, margin: '0 auto 24px', filter: 'brightness(0) invert(1)', opacity: 0.92 }} />
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(36px, 5vw, 64px)', letterSpacing: '-0.02em', margin: '0 0 16px', color: '#fff', maxWidth: '20ch', marginInline: 'auto' }}>
            One badge. One club.
          </h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', maxWidth: '52ch', margin: '0 auto 32px' }}>
            From the U14s on a Saturday morning to senior men under the Friday-night lights — they all wear the same crest, and they all answer to the same standard.
          </p>
          <div className="flex gap-3" style={{ justifyContent: 'center' }}>
            <button className="btn btn-accent btn-lg" onClick={() => setPage('teams')}>See the teams</button>
            <button className="btn btn-soft btn-lg" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.25)' }} onClick={() => setPage('contact')}>Contact the club</button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ============== SPONSORS PAGE ==============
function SponsorsPage({ setPage }) {
  const { SPONSORS } = NA_DATA;
  return (
    <main>
      <div className="page-head">
        <div className="wrap">
          <div className="crumb">Club / Sponsors</div>
          <h1>Partners of the club.</h1>
          <p className="lede">A handful of partners we work with closely. They make this club run — and we put their name on the kit, in the gym, and at every home tip-off.</p>
        </div>
      </div>

      <section className="section">
        <div className="wrap">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {SPONSORS.map((s, i) => (
              <div key={i} className="card" style={{ padding: 0, overflow: 'hidden' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr auto', gap: 0, alignItems: 'stretch' }}>
                  <div style={{ background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32, borderRight: '1px solid var(--line)' }}>
                    <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 32, letterSpacing: '-0.02em', color: 'var(--na-navy-600)', textAlign: 'center' }}>
                      {s.name}
                    </div>
                  </div>
                  <div style={{ padding: '28px 32px' }}>
                    <div className="eyebrow eyebrow-orange" style={{ color: 'var(--accent)' }}>{s.tag}</div>
                    <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 28, letterSpacing: '-0.01em', margin: '8px 0 8px' }}>{s.name}</h2>
                    <p className="ink-soft" style={{ fontSize: 15, margin: 0, maxWidth: '60ch' }}>
                      {s.tag === 'Principal partner' && 'Heronridge backs the club at every level — from senior kit to the youngest squad. The principal partner of Nottingham Athletic since 2024.'}
                      {s.tag === 'Performance partner' && 'Causality Health supports player performance and recovery, with on-site clinic time across all our squads.'}
                      {s.tag === 'Strength & conditioning' && 'Edwards Performance runs S&C across the senior and U23 squads — and provides programmes for the youth pathway.'}
                      {s.tag === 'Recovery partner' && 'RecoverPro provides post-game recovery for the senior squad and travel kit on away weekends.'}
                    </p>
                  </div>
                  <div style={{ padding: 24, display: 'flex', alignItems: 'center', borderLeft: '1px solid var(--line)' }}>
                    <button className="btn btn-soft">Visit →</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-deep">
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="eyebrow mb-4">Become a partner</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.02em', margin: '0 0 16px' }}>
              Put your name behind a serious club.
            </h2>
            <p style={{ fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.5, marginBottom: 24 }}>
              We work with a small set of partners — local first. Match-night branding, kit placement, gym signage, content collaborations. Tiers from a youth-squad kit sponsor up to principal partnership.
            </p>
            <button className="btn btn-accent" onClick={() => setPage('contact')}>Talk to us</button>
          </div>
          <div className="card card-pad">
            <div className="eyebrow mb-4">Partnership tiers</div>
            {[
              { t: 'Principal', d: 'Front-of-jersey, all squads. Premium match-night placement.' },
              { t: 'Performance', d: 'Specialist category — health, S&C, nutrition. Practical involvement.' },
              { t: 'Squad sponsor', d: 'A specific squad. Back-of-jersey or kit placement.' },
              { t: 'Match-night', d: 'Single fixture or a season of home matches.' },
            ].map((t, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24, padding: '16px 0', borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 18, letterSpacing: '-0.01em' }}>{t.t}</div>
                  <div className="ink-soft" style={{ fontSize: 13, marginTop: 4, maxWidth: '38ch' }}>{t.d}</div>
                </div>
                <span className="pill pill-outline">On request</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

window.CoachesPage = CoachesPage;
window.AboutPage = AboutPage;
window.SponsorsPage = SponsorsPage;