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

function AcademyPage({ setPage }) {
  const { Photo } = NASite;
  const { ACADEMY_SERVICES } = NA_DATA;
  return (
    <main>
      <div className="page-head">
        <div className="wrap">
          <div className="crumb">Athletic Academy CIC / Schools</div>
          <h1>For schools.</h1>
          <p className="lede">Athletic Academy CIC is the community arm of Nottingham Athletic. We partner with primary and secondary schools across Nottingham — coaching, mentoring, and structured enrichment, all delivered by qualified, club-trained staff.</p>
        </div>
      </div>

      <section className="section">
        <div className="wrap">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {ACADEMY_SERVICES.map((s, i) => (
              <div key={i} className="card card-pad">
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 12 }}>
                  <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 32, color: 'var(--na-navy-600)', letterSpacing: '-0.02em' }} className="tabular">0{i + 1}</span>
                  <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 22, letterSpacing: '-0.01em', margin: 0 }}>{s.t}</h3>
                </div>
                <p className="ink-soft" style={{ fontSize: 15, lineHeight: 1.55, margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-navy">
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>For school trusts &amp; heads</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(32px, 4vw, 56px)', letterSpacing: '-0.02em', margin: '12px 0 20px', color: '#fff', lineHeight: 1.05 }}>
              Inter-school leagues — properly run.
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.75)', lineHeight: 1.5, marginBottom: 24 }}>
              We design, schedule, and officiate inter-school basketball competitions on behalf of trusts — drawing on the American student-athlete model. Your pupils compete for their school AND have a route into the club.
            </p>
            <button className="btn btn-accent btn-lg" onClick={() => setPage('contact')}>Talk to Matt →</button>
          </div>
          <div style={{ background: '#0f1d33', borderRadius: 'var(--radius)', padding: 28, border: '1px solid rgba(255,255,255,0.08)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              {[
                { l: 'Schools partnered', v: '12+', s: 'across Nottingham' },
                { l: 'Pupils reached', v: '1,400', s: 'in school year 25/26' },
                { l: 'Y6 transition cohort', v: '85', s: 'across 6 schools' },
                { l: 'Founded', v: '2024', s: 'CIC since launch' },
              ].map((b, i) => (
                <div key={i}>
                  <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)', fontWeight: 600 }}>{b.l}</div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 44, color: 'var(--na-yellow)', letterSpacing: '-0.02em', margin: '8px 0 4px' }} className="tabular">{b.v}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>{b.s}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function TravelTeamsPage({ setPage }) {
  const { TRAVEL_COMPETITIONS, TRAVEL_TIMELINE } = NA_DATA;
  const [status, setStatus] = useState('idle'); // 'idle' | 'sending' | 'sent' | 'error'
  const [errMsg, setErrMsg] = useState('');
  const initial = {
    // Player
    full_name: '', dob: '', position: '', height_cm: '', nationality: '',
    // Contact
    email: '', phone: '',
    parent_name: '', parent_email: '', parent_phone: '',
    emergency_name: '', emergency_phone: '',
    // Playing
    age_group: 'Senior / open age',
    competition_id: 'any',
    existing_club: '',
    playing_history: '',
    // Notes
    medical: '',
    notes: '',
    // Consent
    consent: false,
  };
  const [form, setForm] = useState(initial);
  const [hp, setHp] = useState(''); // honeypot — must stay empty
  const startedAt = React.useRef(Date.now());
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  // Compute under-18 status from DOB. Used to mark parent / emergency fields required.
  const isUnder18 = (() => {
    if (!form.dob) return false;
    const dob = new Date(form.dob);
    if (isNaN(dob)) return false;
    const today = new Date();
    let age = today.getFullYear() - dob.getFullYear();
    const m = today.getMonth() - dob.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) age--;
    return age < 18;
  })();

  // Surface only competitions still open for applications in the selector.
  const openCompetitions = TRAVEL_COMPETITIONS.filter(c => c.status === 'open');

  const submit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    setErrMsg('');
    // Spam guard — silently succeed without writing if it trips.
    if (naSupabase.looksLikeSpam({ honeypot: hp, startedAt: startedAt.current })) {
      setStatus('sent');
      return;
    }
    const parts = form.full_name.trim().split(/\s+/);
    const first_name = parts[0] || '';
    const last_name = parts.length > 1 ? parts.slice(1).join(' ') : '';
    const ageMap = { 'Senior / open age': 'senior', 'U23': 'u23', 'U18': 'u18', 'U16': 'u16', 'U14': 'u14' };

    // Pack the extended fields into the `message` column so they're preserved
    // in the coach app without needing a DB schema change. Coaches see this as
    // a structured block they can copy out.
    const messageLines = [
      '--- Travel teams application ---',
      `Date of birth: ${form.dob || '—'} ${isUnder18 ? '(Under 18)' : ''}`.trim(),
      form.position       ? `Position: ${form.position}` : null,
      form.height_cm      ? `Height: ${form.height_cm} cm` : null,
      form.nationality    ? `Nationality / passport country: ${form.nationality}` : null,
      form.phone          ? `Player phone: ${form.phone}` : null,
      isUnder18 && form.parent_name  ? `Parent / guardian: ${form.parent_name}` : null,
      isUnder18 && form.parent_email ? `Parent / guardian email: ${form.parent_email}` : null,
      isUnder18 && form.parent_phone ? `Parent / guardian phone: ${form.parent_phone}` : null,
      form.emergency_name  ? `Emergency contact: ${form.emergency_name}` : null,
      form.emergency_phone ? `Emergency phone: ${form.emergency_phone}` : null,
      form.playing_history ? `\nPlaying history / level:\n${form.playing_history.trim()}` : null,
      form.medical         ? `\nMedical / dietary:\n${form.medical.trim()}` : null,
      form.notes           ? `\nAnything else:\n${form.notes.trim()}` : null,
    ].filter(Boolean).join('\n');

    try {
      await naSupabase.submitEnquiry({
        source: 'travel_team',
        // 'any' = open to any tour; otherwise pin to a specific competition.
        competition_id: form.competition_id === 'any' ? null : form.competition_id,
        first_name,
        last_name,
        email: form.email.trim(),
        phone: form.phone.trim(),
        age_group: ageMap[form.age_group] || form.age_group,
        existing_club: form.existing_club.trim(),
        message: messageLines,
      });
      setStatus('sent');
    } catch (err) {
      console.warn('submitEnquiry failed:', err);
      setErrMsg(err.message || 'Could not send. Try again or email admin@nottinghamathletic.com.');
      setStatus('error');
    }
  };

  const sent = status === 'sent';
  const sending = status === 'sending';
  const reset = () => {
    setStatus('idle');
    setForm(initial);
  };

  // Which competition was picked (for the success message).
  const picked = form.competition_id === 'any'
    ? null
    : TRAVEL_COMPETITIONS.find(c => c.id === form.competition_id);

  return (
    <main>
      <div className="page-head">
        <div className="wrap">
          <div className="crumb">Programme / Travel teams</div>
          <h1>Travel teams.</h1>
          <p className="lede">Nottingham Athletic aims to be a mainstay programme in the EYBL — the European Youth Basketball League — for all age groups. Alongside our domestic squads, we enter travel teams into European competition. Register interest below and a coach will be in touch about selection.</p>
        </div>
      </div>

      {/* Competitions list — cards for each upcoming tour */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
            <div>
              <div className="eyebrow eyebrow-orange">What we're entering</div>
              <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(28px, 3.4vw, 40px)', letterSpacing: '-0.02em', margin: '8px 0 0' }}>
                Our European programme
              </h2>
            </div>
            <a href="#register" className="btn btn-ghost" style={{ alignSelf: 'flex-end' }}>Register interest →</a>
          </div>

          <div className="grid" style={{ gridTemplateColumns: 'repeat(1, 1fr)', gap: 20 }}>
            {TRAVEL_COMPETITIONS.map((c, i) => (
              <div key={c.id} className="card card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'relative' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
                  <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mute)', fontWeight: 700 }} className="tabular">
                    Tour 0{i + 1} · {c.when}
                  </div>
                  {c.status === 'open' ? (
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 5,
                      padding: '3px 9px', borderRadius: 999, fontSize: 11, fontWeight: 700,
                      background: 'var(--na-green-100)', color: 'var(--na-green-700)',
                      textTransform: 'uppercase', letterSpacing: '0.05em',
                    }}>Open for applications</span>
                  ) : c.status === 'planned' ? (
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 5,
                      padding: '3px 9px', borderRadius: 999, fontSize: 11, fontWeight: 700,
                      background: 'var(--na-amber-100, #fef3c7)', color: 'var(--na-amber-700, #92600a)',
                      textTransform: 'uppercase', letterSpacing: '0.05em',
                    }}>Planned · {c.when}</span>
                  ) : (
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 5,
                      padding: '3px 9px', borderRadius: 999, fontSize: 11, fontWeight: 700,
                      background: 'var(--surface-2)', color: 'var(--ink-mute)',
                      textTransform: 'uppercase', letterSpacing: '0.05em',
                      border: '1px solid var(--line)',
                    }}>Roster locked</span>
                  )}
                </div>

                <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 24, letterSpacing: '-0.015em', margin: 0, lineHeight: 1.15 }}>
                  {c.name}
                </h3>

                <p className="ink-soft" style={{ fontSize: 14, lineHeight: 1.55, margin: 0 }}>{c.blurb}</p>

                <div className="grid" style={{ gridTemplateColumns: '1fr 1fr 1fr', gap: 16, paddingTop: 14, borderTop: '1px solid var(--line)', marginTop: 'auto' }}>
                  <div>
                    <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mute)', fontWeight: 600 }}>Dates</div>
                    <div className="tabular" style={{ fontSize: 13, fontWeight: 600, marginTop: 3 }}>{c.dates.replace(/ \d{4}$/, '')}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mute)', fontWeight: 600 }}>Location</div>
                    <div style={{ fontSize: 13, fontWeight: 600, marginTop: 3 }}>{c.location}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mute)', fontWeight: 600 }}>Eligible</div>
                    <div style={{ fontSize: 13, fontWeight: 600, marginTop: 3 }}>{c.eligibility}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Travel teams WhatsApp community — always visible on the page */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap" style={{ maxWidth: 760 }}>
          <a
            className="wa-card"
            href="https://chat.whatsapp.com/K3vReMuglKrItv6I0MjeV7"
            target="_blank"
            rel="noopener noreferrer"
          >
            <div className="wa-card-icon" aria-hidden="true">
              <svg viewBox="0 0 32 32" width="22" height="22" fill="currentColor">
                <path d="M16 3C8.82 3 3 8.82 3 16c0 2.3.6 4.46 1.65 6.34L3 29l6.84-1.79A12.94 12.94 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3zm0 23.4c-2 0-3.9-.54-5.55-1.5l-.4-.24-4.06 1.06 1.08-3.95-.26-.4A10.4 10.4 0 1 1 26.4 16 10.42 10.42 0 0 1 16 26.4zm5.7-7.78c-.31-.16-1.84-.91-2.13-1.01-.28-.1-.49-.16-.7.16-.2.31-.8 1.01-.98 1.22-.18.2-.36.23-.67.08-.31-.16-1.32-.49-2.51-1.55-.93-.83-1.55-1.86-1.73-2.17-.18-.31-.02-.48.14-.63.14-.14.31-.36.47-.55.16-.2.21-.31.31-.52.1-.21.05-.39-.03-.55-.08-.16-.7-1.69-.96-2.31-.25-.6-.51-.52-.7-.53l-.6-.01c-.2 0-.55.08-.83.39-.28.31-1.09 1.06-1.09 2.59 0 1.53 1.11 3 1.27 3.21.16.2 2.19 3.34 5.31 4.68.74.32 1.32.51 1.78.65.75.24 1.43.21 1.97.13.6-.09 1.84-.75 2.1-1.48.26-.73.26-1.35.18-1.48-.07-.13-.27-.21-.58-.36z"/>
              </svg>
            </div>
            <div className="wa-card-body">
              <div className="ink-mute" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>International announcements · WhatsApp community</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 4 }}>Join the travel teams community.</div>
              <p className="ink-soft" style={{ fontSize: 13.5, lineHeight: 1.5, margin: '8px 0 0' }}>
                Be the first to know about upcoming trips abroad — sign-up forms, letters, and exclusive early-bird rates, straight to your phone.
              </p>
            </div>
            <div className="wa-card-arrow" aria-hidden="true">→</div>
          </a>
        </div>
      </section>

      {/* Register-interest form */}
      <section className="section" id="register">
        <div className="wrap" style={{ maxWidth: 760 }}>
          <form className="trial-card" onSubmit={submit}>
            <div className="eyebrow eyebrow-orange">Register interest</div>
            <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 28, letterSpacing: '-0.01em', margin: '8px 0 8px' }}>
              Apply for travel teams.
            </h3>
            <p className="ink-soft" style={{ fontSize: 14, marginTop: 0, marginBottom: 24, lineHeight: 1.5 }}>
              One application covers every open tour. Submissions land with the coaches in the Nottingham Athletic coach app — selection details follow by email. Junior applicants: parent / guardian details are required.
            </p>

            {sent ? (
              <div style={{ padding: '20px 0', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 600, letterSpacing: '-0.01em' }}>Thanks. You're on the list.</div>
                <p className="ink-soft" style={{ fontSize: 15, marginTop: 8, lineHeight: 1.5 }}>
                  {picked
                    ? <>We'll be in touch about <b style={{ color: 'var(--ink)' }}>{picked.short}</b> and any other tours that fit your age group.</>
                    : <>We'll be in touch about whichever tours fit your age group.</>}
                </p>

                {/* Travel teams WhatsApp community — surfaced right after applying */}
                <a
                  className="wa-card"
                  href="https://chat.whatsapp.com/K3vReMuglKrItv6I0MjeV7"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ marginTop: 24, textAlign: 'left' }}
                >
                  <div className="wa-card-icon" aria-hidden="true">
                    <svg viewBox="0 0 32 32" width="22" height="22" fill="currentColor">
                      <path d="M16 3C8.82 3 3 8.82 3 16c0 2.3.6 4.46 1.65 6.34L3 29l6.84-1.79A12.94 12.94 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3zm0 23.4c-2 0-3.9-.54-5.55-1.5l-.4-.24-4.06 1.06 1.08-3.95-.26-.4A10.4 10.4 0 1 1 26.4 16 10.42 10.42 0 0 1 16 26.4zm5.7-7.78c-.31-.16-1.84-.91-2.13-1.01-.28-.1-.49-.16-.7.16-.2.31-.8 1.01-.98 1.22-.18.2-.36.23-.67.08-.31-.16-1.32-.49-2.51-1.55-.93-.83-1.55-1.86-1.73-2.17-.18-.31-.02-.48.14-.63.14-.14.31-.36.47-.55.16-.2.21-.31.31-.52.1-.21.05-.39-.03-.55-.08-.16-.7-1.69-.96-2.31-.25-.6-.51-.52-.7-.53l-.6-.01c-.2 0-.55.08-.83.39-.28.31-1.09 1.06-1.09 2.59 0 1.53 1.11 3 1.27 3.21.16.2 2.19 3.34 5.31 4.68.74.32 1.32.51 1.78.65.75.24 1.43.21 1.97.13.6-.09 1.84-.75 2.1-1.48.26-.73.26-1.35.18-1.48-.07-.13-.27-.21-.58-.36z"/>
                    </svg>
                  </div>
                  <div className="wa-card-body">
                    <div className="ink-mute" style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600 }}>Next step · WhatsApp group</div>
                    <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 4 }}>Join the travel teams community.</div>
                    <p className="ink-soft" style={{ fontSize: 13, lineHeight: 1.5, margin: '6px 0 0' }}>
                      Be the first to get sign-up forms, letters, and exclusive early-bird rates for upcoming trips abroad.
                    </p>
                  </div>
                  <div className="wa-card-arrow" aria-hidden="true">→</div>
                </a>

                <button type="button" className="btn btn-soft" onClick={reset} style={{ marginTop: 16 }}>Submit another →</button>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                {/* Honeypot — hidden from humans, bots fill it. Leave empty. */}
                <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', top: 'auto', width: 1, height: 1, overflow: 'hidden' }}>
                  <label>Company<input type="text" tabIndex="-1" autoComplete="off" value={hp} onChange={e => setHp(e.target.value)} /></label>
                </div>
                {/* PLAYER */}
                <div>
                  <div className="eyebrow mb-3">Player</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="field"><label>Player full name</label><input required value={form.full_name} onChange={e => set('full_name', e.target.value)} disabled={sending} /></div>
                    <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                      <div className="field"><label>Date of birth</label><input type="date" required value={form.dob} onChange={e => set('dob', e.target.value)} disabled={sending} /></div>
                      <div className="field"><label>Nationality / passport country</label><input placeholder="e.g. British" value={form.nationality} onChange={e => set('nationality', e.target.value)} disabled={sending} /></div>
                    </div>
                    <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                      <div className="field"><label>Position</label>
                        <select value={form.position} onChange={e => set('position', e.target.value)} disabled={sending}>
                          <option value="">Select…</option>
                          <option>Point guard</option>
                          <option>Shooting guard</option>
                          <option>Small forward</option>
                          <option>Power forward</option>
                          <option>Centre</option>
                          <option>Wing</option>
                          <option>Versatile</option>
                        </select>
                      </div>
                      <div className="field"><label>Height (cm) — optional</label><input type="number" min="120" max="230" value={form.height_cm} onChange={e => set('height_cm', e.target.value)} disabled={sending} /></div>
                    </div>
                  </div>
                </div>

                {/* CONTACT */}
                <div>
                  <div className="eyebrow mb-3">Contact</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                      <div className="field"><label>Email</label><input type="email" required value={form.email} onChange={e => set('email', e.target.value)} disabled={sending} /></div>
                      <div className="field"><label>Phone</label><input type="tel" required value={form.phone} onChange={e => set('phone', e.target.value)} disabled={sending} /></div>
                    </div>

                    {isUnder18 && (
                      <div className="card card-pad" style={{ background: 'var(--surface-2)', borderStyle: 'dashed' }}>
                        <div className="eyebrow" style={{ marginBottom: 8 }}>Parent / guardian — required for under 18s</div>
                        <div className="field" style={{ marginBottom: 12 }}><label>Parent / guardian full name</label><input required={isUnder18} value={form.parent_name} onChange={e => set('parent_name', e.target.value)} disabled={sending} /></div>
                        <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                          <div className="field"><label>Parent / guardian email</label><input type="email" required={isUnder18} value={form.parent_email} onChange={e => set('parent_email', e.target.value)} disabled={sending} /></div>
                          <div className="field"><label>Parent / guardian phone</label><input type="tel" required={isUnder18} value={form.parent_phone} onChange={e => set('parent_phone', e.target.value)} disabled={sending} /></div>
                        </div>
                      </div>
                    )}

                    <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                      <div className="field"><label>Emergency contact name{isUnder18 && <span style={{ color: '#b91c1c' }}> *</span>}</label><input required={isUnder18} value={form.emergency_name} onChange={e => set('emergency_name', e.target.value)} disabled={sending} /></div>
                      <div className="field"><label>Emergency contact phone{isUnder18 && <span style={{ color: '#b91c1c' }}> *</span>}</label><input type="tel" required={isUnder18} value={form.emergency_phone} onChange={e => set('emergency_phone', e.target.value)} disabled={sending} /></div>
                    </div>
                  </div>
                </div>

                {/* PLAYING */}
                <div>
                  <div className="eyebrow mb-3">Playing</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                      <div className="field"><label>Age group</label>
                        <select value={form.age_group} onChange={e => set('age_group', e.target.value)} disabled={sending}>
                          <option>Senior / open age</option><option>U23</option><option>U18</option><option>U16</option><option>U14</option>
                        </select>
                      </div>
                      <div className="field"><label>Preferred competition</label>
                        <select value={form.competition_id} onChange={e => set('competition_id', e.target.value)} disabled={sending}>
                          <option value="any">Open to any tour</option>
                          {openCompetitions.map(c => <option key={c.id} value={c.id}>{c.short}</option>)}
                        </select>
                      </div>
                    </div>
                    <div className="field"><label>Existing club / level</label><input placeholder="e.g. Nottingham Athletic U18, county, NBL D3" value={form.existing_club} onChange={e => set('existing_club', e.target.value)} disabled={sending} /></div>
                    <div className="field"><label>Playing history — clubs, years, achievements</label><textarea rows="3" value={form.playing_history} onChange={e => set('playing_history', e.target.value)} disabled={sending} /></div>
                  </div>
                </div>

                {/* NOTES */}
                <div>
                  <div className="eyebrow mb-3">Anything we should know</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="field"><label>Medical / dietary / mobility</label><textarea rows="2" value={form.medical} onChange={e => set('medical', e.target.value)} disabled={sending} /></div>
                    <div className="field"><label>Anything else</label><textarea rows="2" value={form.notes} onChange={e => set('notes', e.target.value)} disabled={sending} /></div>
                  </div>
                </div>

                <label className="consent-row">
                  <input type="checkbox" required checked={form.consent} onChange={e => set('consent', e.target.checked)} disabled={sending} />
                  <span>I confirm the details above are accurate and {isUnder18 ? 'I am the parent / guardian giving consent for my child to apply for travel teams selection' : 'I am happy for the coaches to contact me about selection'}. Stored in the Nottingham Athletic coach app (Supabase).</span>
                </label>

                {status === 'error' && (
                  <div role="alert" style={{ fontSize: 13, color: 'var(--na-red-700)', background: 'var(--na-red-100)', padding: '10px 12px', borderRadius: 'var(--radius-sm)', border: '1px solid var(--na-red-200)' }}>
                    {errMsg}
                  </div>
                )}

                <button type="submit" className="btn btn-accent btn-lg" disabled={sending} style={{ alignSelf: 'flex-start' }}>
                  {sending ? 'Sending…' : <>Submit application →</>}
                </button>
              </div>
            )}
          </form>
        </div>
      </section>
    </main>
  );
}

window.AcademyPage = AcademyPage;
window.TravelTeamsPage = TravelTeamsPage;
