/* The Coaches — full LOGIC coaching staff page. */
function CoachesPage() {
  const pillars = [
    ["On-Court", "Skill work, footwork and game reps — taught with detail, not just drilled."],
    ["Off-Court", "Speed, agility and movement habits that protect young bodies and build athletes."],
    ["In-Class", "Basketball IQ, film and character — how to think the game, and carry it past the gym."]];
  return (
    <React.Fragment>
      <TeamCrumb current="The Coaches" />
      <section data-screen-label="The Coaches" style={{ padding: "32px 0 28px" }}>
        <div className="container">
          <SectionHead
            eyebrow="Our people"
            title={<span>The <span style={{ color: "var(--c-red)" }}>Coaches.</span></span>}
            kicker="LOGIC is carried by coaches, educators, athletes, mentors and the young leaders coming up behind them — people who teach the game the way they wish they'd been taught." />
        </div>
      </section>
      <section style={{ padding: "0 0 56px" }}>
        <div className="container">
          <figure style={{ margin: 0, borderRadius: "var(--radius-card)", overflow: "hidden", background: "#0a0a0a" }}>
            <img src="assets/coaches-staff-2026.jpg" alt="The London LOGIC Basketball coaching staff in red team polos, standing and kneeling on the gym floor" style={{ width: "100%", height: "auto", display: "block" }} />
          </figure>
          <div className="mono" style={{ marginTop: 12, fontSize: 11, color: "var(--c-ink-soft)" }}>London LOGIC coaching staff · Summer 2026</div>
        </div>
      </section>
      <section data-screen-label="Coach Dan" style={{ padding: "0 0 80px" }}>
        <div className="container">
          <div style={{ paddingBottom: 12, borderBottom: "2px solid var(--c-red)" }}>
            <Eyebrow color="var(--c-red)">Lead Development Coach</Eyebrow>
          </div>
          <div className="dan-grid" style={{ marginTop: 28, display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr)", gap: "clamp(16px, 2.4vw, 32px)", alignItems: "start" }}>
            <img src="assets/coach-dan.jpg" alt="Coach Dan in a red London LOGIC polo, arms crossed" style={{ width: "100%", aspectRatio: "4 / 5", objectFit: "cover", objectPosition: "center 25%", display: "block", borderRadius: "var(--radius-card)" }} />
            <img src="assets/coach-dan-group.jpg" alt="Coach Dan holding a basketball at centre court with LOGIC staff and athletes" style={{ width: "100%", aspectRatio: "4 / 5", objectFit: "cover", objectPosition: "center 45%", display: "block", borderRadius: "var(--radius-card)" }} />
            <div>
              <h2 className="display" style={{ margin: 0, fontSize: "clamp(40px, 4.6vw, 68px)", lineHeight: 0.95 }}>Coach <span style={{ color: "var(--c-red)" }}>Dan.</span></h2>
              <p style={{ margin: "18px 0 0", fontSize: 16.5, lineHeight: 1.6, color: "var(--c-ink-soft)", maxWidth: "44ch", textWrap: "pretty" }}>A teacher at Matthews Hall — the school that hosts our program — Dan is Coach AD's right-hand man behind every LOGIC camp. He works alongside AD on curriculum development — helping build the drills, progressions and session plans that shape each week — and supports athlete assessment, tracking where every player starts and how far they grow. Off the court, he helps AD keep camp running: schedules, groups, equipment and the day-to-day logistics that let coaches focus on coaching.</p>
              <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 10 }}>
                {["Curriculum development", "Athlete assessment", "Camp logistics"].map((r) =>
                <div key={r} className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", paddingTop: 10, borderTop: "1px solid var(--c-line)" }}>{r}</div>
                )}
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .dan-grid { grid-template-columns: 1fr 1fr !important; } .dan-grid > div { grid-column: 1 / -1; } }`}</style>
      </section>
      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <div style={{ paddingBottom: 12, borderBottom: "2px solid var(--c-red)" }}>
            <Eyebrow color="var(--c-red)">How we coach</Eyebrow>
          </div>
          <div className="coaches-pillars" style={{ marginTop: 24, display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "clamp(18px, 3vw, 40px)" }}>
            {pillars.map(([t, d]) =>
            <div key={t}>
              <div className="display" style={{ fontSize: "clamp(26px, 2.6vw, 36px)", lineHeight: 1 }}>{t}</div>
              <p style={{ margin: "12px 0 0", fontSize: 16, lineHeight: 1.6, color: "var(--c-ink-soft)", maxWidth: "36ch", textWrap: "pretty" }}>{d}</p>
            </div>
            )}
          </div>
          <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Btn to="about" kind="primary">Meet the founder</Btn>
            <Btn to="coach-apply" kind="ghost">Join the staff</Btn>
          </div>
        </div>
        <style>{`@media (max-width: 800px) { .coaches-pillars { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </React.Fragment>);
}
window.CoachesPage = CoachesPage;