function CoachProfile({ slug }) {
  const coach = window.COACHES.find((c) => c.slug === slug);
  if (!coach) {
    return (
      <main className="page-enter">
        <PageHeader number="03" eyebrow="Coach Not Found" title="Pelatih tidak ditemukan." subtitle="Halaman pelatih yang Anda cari tidak tersedia." />
        <section className="section">
          <div className="container">
            <Button variant="primary" to="/coaches">Kembali ke Staff Pelatih</Button>
          </div>
        </section>
      </main>
    );
  }

  const idx = window.COACHES.findIndex((c) => c.slug === slug);
  const next = window.COACHES[(idx + 1) % window.COACHES.length];
  const prev = window.COACHES[(idx - 1 + window.COACHES.length) % window.COACHES.length];

  return (
    <main className="page-enter" data-screen-label={`Coach / ${coach.name}`}>
      {/* HERO */}
      <section style={{ position: "relative", paddingTop: 140, paddingBottom: 80, overflow: "hidden" }}>
        <div className="court-lines" aria-hidden="true"></div>
        <span className="watermark" style={{ fontSize: "clamp(220px, 36vw, 560px)", right: "-60px", top: "40px", color: coach.isHeadCoach ? "var(--burgundy)" : "var(--fg)", opacity: 0.10 }}>
          {coach.number}
        </span>
        <div className="container" style={{ position: "relative" }}>
          {/* breadcrumb */}
          <Reveal>
            <div style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--fg-muted)", marginBottom: 36 }}>
              <a href="#/coaches" style={{ color: "var(--burgundy)", fontWeight: 600 }}>Staff Pelatih</a>
              <span>/</span>
              <span>{coach.name}</span>
            </div>
          </Reveal>

          <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 60, alignItems: "end" }} className="profile-grid">
            <Reveal>
              <div style={{ position: "relative" }}>
                <CoachPortrait name={coach.name} number={coach.number} head={true} imageUrl={coach.imageUrl} />
                <div style={{ position: "absolute", bottom: -20, left: -20, background: "var(--burgundy)", padding: "14px 18px", display: "flex", alignItems: "center", gap: 12 }}>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--fg)" }}>NO.</span>
                  <span className="display" style={{ fontSize: 24, color: "var(--fg)" }}>{coach.number}</span>
                </div>
              </div>
            </Reveal>

            <Reveal delay={120}>
              <div>
                <div style={{ display: "flex", gap: 14, alignItems: "baseline", marginBottom: 18 }}>
                  <EditorialLabel>{coach.isHeadCoach ? "Ketua Program" : "Staff Pelatih"}</EditorialLabel>
                </div>
                <h1 className="hero-display" style={{ margin: 0, fontSize: "clamp(48px, 7vw, 100px)" }}>{coach.name}</h1>
                <p style={{ margin: "20px 0 0", fontSize: 17, color: "var(--fg)", letterSpacing: "0.04em" }}>{coach.role}</p>

                <div style={{ marginTop: 32, display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {coach.specialization.map((s, i) => (
                    <span key={i} style={{ fontSize: 11, letterSpacing: "0.16em", padding: "8px 14px", border: "1px solid var(--line-strong)", color: "var(--fg)", textTransform: "uppercase" }}>
                      {s}
                    </span>
                  ))}
                </div>

                <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <Button variant="outline" to="/coaches">← Kembali ke Staff Pelatih</Button>
                  <Button variant="primary" to="/partnership">Diskusikan Program Sekolah</Button>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .profile-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
          }
        `}</style>
      </section>

      {/* BIO + PHILOSOPHY */}
      <section className="section" style={{ paddingTop: 80, position: "relative" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60 }} className="about-grid">
            <Reveal>
              <div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 20 }}>
                  <span className="display" style={{ fontSize: 40, color: "transparent", WebkitTextStroke: "1px var(--teal)" }}>BIO</span>
                  <span style={{ flex: 1, height: 1, background: "var(--line)" }}></span>
                </div>
                <p style={{ margin: 0, fontSize: 17, lineHeight: 1.75, color: "var(--fg)" }}>{coach.biography}</p>
              </div>
            </Reveal>

            <Reveal delay={120}>
              <div style={{ background: "var(--bg-elev)", padding: 32, border: "1px solid var(--line-strong)", position: "relative" }}>
                <p className="mono" style={{ margin: 0, fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)" }}>COACHING PHILOSOPHY</p>
                <p style={{ margin: "22px 0 0", fontSize: 22, lineHeight: 1.5, color: "var(--fg)", fontStyle: "italic" }}>
                  <span style={{ fontFamily: "var(--display)", fontSize: 56, color: "var(--burgundy)", lineHeight: 0.4, verticalAlign: "-0.1em", marginRight: 6 }}>“</span>
                  {coach.philosophy}
                  <span style={{ fontFamily: "var(--display)", fontSize: 56, color: "var(--burgundy)", lineHeight: 0.4, verticalAlign: "-0.5em", marginLeft: 6 }}>”</span>
                </p>
                <p style={{ marginTop: 28, fontSize: 11, letterSpacing: "0.22em", color: "var(--fg-muted)", textTransform: "uppercase" }}>— {coach.name}</p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* HIGHLIGHTS */}
      <section className="surface-cream section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(160px, 24vw, 360px)", right: "-30px", top: "-30px", color: "var(--ink)" }}>HIGHLIGHTS</span>
        <div className="container" style={{ position: "relative" }}>
          <Reveal>
            <SectionTitle eyebrow="Experience Highlights" number="A1" title="Kontribusi & Tanggung Jawab." invert={true} />
          </Reveal>

          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0 }} className="hl-grid">
            {coach.highlights.map((h, i) => (
              <Reveal key={i} delay={i * 50}>
                <div style={{ display: "grid", gridTemplateColumns: "60px 1fr", padding: "24px 0", borderTop: "1px solid var(--line-dark)", alignItems: "start" }}>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal-deep)" }}>{String(i + 1).padStart(2, "0")}</span>
                  <p style={{ margin: 0, fontSize: 17, color: "var(--ink)", lineHeight: 1.5 }}>{h}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 800px) { .hl-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* PREV / NEXT */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 120, borderTop: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="pn-grid">
            <a href={`#/coaches/${prev.slug}`} className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 12, textDecoration: "none" }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)" }}>← PREVIOUS COACH</span>
              <span className="h2" style={{ color: "var(--fg)" }}>{prev.name}</span>
              <span style={{ fontSize: 13, color: "var(--fg-muted)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{prev.role}</span>
            </a>
            <a href={`#/coaches/${next.slug}`} className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 12, textDecoration: "none", textAlign: "right", alignItems: "flex-end" }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)" }}>NEXT COACH →</span>
              <span className="h2" style={{ color: "var(--fg)" }}>{next.name}</span>
              <span style={{ fontSize: 13, color: "var(--fg-muted)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{next.role}</span>
            </a>
          </div>
        </div>
        <style>{`
          @media (max-width: 700px) { .pn-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </main>
  );
}

window.CoachProfile = CoachProfile;