function Coaches() {
  const head = window.COACHES.find((c) => c.isHeadCoach);
  const staff = window.COACHES.filter((c) => !c.isHeadCoach);

  return (
    <main className="page-enter" data-screen-label="Coaches">
      <PageHeader
        number="03"
        eyebrow="Staff Pelatih"
        title="Staff Pelatih"
        subtitle="Dipimpin oleh pelatih yang berkomitmen membangun fundamental, disiplin, budaya tim, dan pengembangan pemain jangka panjang."
      />

      {/* Head Coach */}
      <section className="section" style={{ paddingTop: 40, paddingBottom: 80, position: "relative" }}>
        <div className="container">
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 28 }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal-deep)", fontWeight: 700 }}>KETUA PROGRAM GH GAMBIT SCHOOL DEVELOPMENT</span>
            <span style={{ flex: 1, height: 1, background: "var(--line)" }}></span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>NO. 01</span>
          </div>
          <Reveal>
            <CoachCard coach={head} large={true} />
          </Reveal>
        </div>
      </section>

      {/* Staff grid */}
      <section style={{ paddingBottom: 120, position: "relative" }}>
        <div className="container">
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 28 }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)" }}>SUPPORTING STAFF</span>
            <span style={{ flex: 1, height: 1, background: "var(--line)" }}></span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>{staff.length} PELATIH</span>
          </div>
          <div style={{ 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))", 
            gap: 20 
          }} className="coach-grid">
            {staff.map((c, i) => (
              <Reveal key={c.id} delay={i * 50}>
                <CoachCard coach={c} />
              </Reveal>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 1100px) { .coach-grid { grid-template-columns: repeat(3, 1fr) !important; } }
          @media (max-width: 800px) { .coach-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width: 500px) { .coach-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* Coaching philosophy / closing */}
      <section className="surface-cream section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(160px, 24vw, 380px)", left: "-30px", bottom: "-30px", color: "var(--ink)" }}>STAFF</span>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 480px), 1fr))", 
            gap: "clamp(40px, 8vw, 80px)", 
            alignItems: "center" 
          }} className="about-grid">
            <Reveal>
              <SectionTitle eyebrow="Coaching Approach" number="03A" title="Budaya Latihan adalah Aset Klub." invert={true} />
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: "var(--fg-muted)" }}>
                Setiap pelatih GH Gambit bekerja dalam satu sistem pembinaan yang sama — berbasis fundamental, disiplin, dan pengembangan jangka panjang.
                Hal ini memastikan kualitas latihan yang konsisten di setiap sekolah, kelompok usia, dan kategori pemain.
              </p>
              <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Button variant="primary" to="/partnership">Ajukan Kerja Sama</Button>
                <Button variant="outline-dark" to="/contact">Konsultasi Program</Button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Coaches = Coaches;