function Program() {
  const scrollToSection = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 100;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  const sections = [
    {
      num: "01",
      title: "Standar Klub Profesional",
      kind: "text",
      body: "Kami membawa standar pembinaan GH Gambit Basketball Club ke sekolah Anda. Program ini bukan sekadar ekstrakurikuler biasa, melainkan sistem pengembangan atlet yang terstruktur mulai dari fundamental hingga kesiapan kompetisi.",
    },
    {
      num: "02",
      title: "Kurikulum Elit Terstruktur",
      kind: "list",
      items: [
        "Materi latihan identik dengan kurikulum klub",
        "Fundamental skill & decision-making",
        "Shooting & Ball Handling development",
        "Konsep permainan modern & spacing",
        "Defense system & Rebounding",
        "Scrimmage & Game simulation rutin",
      ],
    },
    {
      num: "03",
      title: "Monitoring Berbasis Data",
      kind: "text",
      body: "Setiap pemain dipantau melalui Sistem Penilaian Dual-Metode. Kami menggabungkan Data Kuantitatif (Statistik pertandingan real-time yang diterapkan sesuai kebutuhan usia pembinaan) dan Data Kualitatif (Evaluasi mendalam pelatih mengenai teknik dan karakter untuk semua level).",
    },
    {
      num: "04",
      title: "Persiapan Tim Sekolah",
      kind: "text",
      body: "Kami membantu sekolah membangun tim yang kompetitif melalui pelatih aktif yang memegang tim ekskul sekolah, merancang strategi tim, dan mendampingi siswa berkompetisi di berbagai turnamen sekolah.",
    },
    {
      num: "05",
      title: "Akses Digital Penuh",
      kind: "text",
      body: "Sama seperti pemain klub kami, siswa ekskul mendapatkan akun login pribadi untuk memantau rekap absensi, melihat riwayat latihan, dan mengecek 'Stats Card' pribadi mereka kapan saja.",
    },
    {
      num: "06",
      title: "Jalur Prestasi (Pathway)",
      kind: "text",
      body: "Siswa berpotensi memiliki jalur prioritas untuk bergabung ke GH Gambit Basketball Club, berpeluang masuk ke roster utama turnamen nasional, dan mendapatkan beasiswa klub.",
    },
    {
      num: "07",
      title: "Evaluasi Berkala",
      kind: "text",
      body: "Laporan perkembangan diberikan secara rutin kepada sekolah dan orang tua, memastikan progres setiap siswa terpantau dengan standar kepelatihan yang tinggi.",
    },
  ];

  return (
    <main className="page-enter" data-screen-label="Program">
      <PageHeader
        number="02"
        eyebrow="Detail Program"
        title="Pengembangan Basket Sekolah yang Lebih Profesional."
        subtitle="GH Gambit School Development dirancang untuk membantu sekolah mengembangkan kegiatan ekstrakurikuler basket menjadi program pembinaan yang lebih terstruktur, berkualitas, dan berorientasi pada perkembangan pemain."
      />

      {/* Sections list */}
      <section className="section" style={{ paddingTop: 60, position: "relative" }}>
        <div className="container">
          <div style={{ 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 1fr))", 
            gap: "clamp(30px, 6vw, 60px)" 
          }} className="prog-grid">
            {/* Sticky sidebar */}
            <aside style={{ position: "sticky", top: 120, alignSelf: "start", height: "fit-content" }} className="prog-aside">
              <p className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)", marginBottom: 16 }}>OUTLINE</p>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, borderTop: "1px solid var(--line)" }}>
                {sections.map((s) => (
                  <li key={s.num} style={{ borderBottom: "1px solid var(--line)" }}>
                    <a 
                      href={`#sec-${s.num}`} 
                      onClick={scrollToSection(`sec-${s.num}`)}
                      style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", color: "var(--fg)", opacity: 0.78, fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase" }}
                    >
                      <span>{s.title}</span>
                      <span className="mono" style={{ color: "var(--teal)" }}>{s.num}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </aside>

            {/* Section bodies */}
            <div style={{ display: "flex", flexDirection: "column", gap: 56 }}>
              {sections.map((s, i) => (
                <Reveal key={s.num} delay={i * 60}>
                  <article id={`sec-${s.num}`} style={{ borderTop: "1px solid var(--line)", paddingTop: 36 }}>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 18, marginBottom: 18 }}>
                      <span className="display" style={{ fontSize: 60, lineHeight: 0.9, color: "transparent", WebkitTextStroke: "1px var(--teal)" }}>{s.num}</span>
                      <h2 className="h1" style={{ margin: 0 }}>{s.title}</h2>
                    </div>
                    {s.kind === "text" && (
                      <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: "var(--fg-muted)", maxWidth: 720 }}>{s.body}</p>
                    )}
                    {s.kind === "list" && (
                      <div style={{ 
                        display: "grid", 
                        gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 320px), 1fr))", 
                        gap: 0, 
                        marginTop: 8 
                      }} className="prog-list">
                        {s.items.map((it, j) => (
                          <div key={j} style={{ display: "grid", gridTemplateColumns: "44px 1fr", alignItems: "center", padding: "16px 0", borderBottom: "1px solid var(--line)" }}>
                            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)" }}>{String(j + 1).padStart(2, "0")}</span>
                            <span style={{ fontSize: 15, color: "var(--fg)" }}>{it}</span>
                          </div>
                        ))}
                      </div>
                    )}
                  </article>
                </Reveal>
              ))}
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .prog-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
            .prog-aside { position: relative !important; top: auto !important; }
            .prog-list { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* APP CTA STRIP */}
      <section style={{ padding: "80px 0", borderTop: "1px solid var(--line)", background: "var(--bg-elev)", position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(140px, 22vw, 320px)", right: "-30px", top: "-40px", color: "var(--teal)", opacity: 0.10 }}>APP</span>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center" }} className="app-cta-strip">
            <div style={{ width: 64, height: 64, border: "1px solid var(--teal)", display: "grid", placeItems: "center", color: "var(--teal)" }}>
              <svg width="22" height="32" viewBox="0 0 22 32" fill="none" stroke="currentColor" strokeWidth="1.4">
                <rect x="1" y="1" width="20" height="30" rx="3" />
                <line x1="9" y1="27" x2="13" y2="27" />
                <line x1="1" y1="5" x2="21" y2="5" />
              </svg>
            </div>
            <div>
              <p className="mono" style={{ margin: 0, fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)" }}>MONITORING KEHADIRAN PEMAIN</p>
              <h3 className="h2" style={{ margin: "8px 0 0" }}>Pelajari lebih lanjut tentang sistem digital pendukung program ini.</h3>
              <p style={{ margin: "10px 0 0", fontSize: 14, color: "var(--fg-muted)", maxWidth: 640 }}>
                Pemain dapat memperoleh akses ke GH Gambit Stats Mobile App untuk melihat rekap attendance bulanan dan riwayat kehadiran mereka.
              </p>
            </div>
            <div>
              <Button variant="teal" to="/app">Lihat GH Gambit Stats Mobile App</Button>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .app-cta-strip { grid-template-columns: 1fr !important; gap: 20px !important; }
          }
        `}</style>
      </section>

      {/* Closing CTA */}
      <section className="surface-cream section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(180px, 26vw, 420px)", right: "-30px", bottom: "-40px", color: "var(--ink)" }}>JOIN</span>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "center" }} className="about-grid">
            <Reveal>
              <h2 className="hero-display" style={{ margin: 0, color: "var(--ink)", fontSize: "clamp(40px, 6vw, 76px)" }}>
                Siap membawa <span style={{ color: "var(--burgundy)" }}>program ini</span> ke sekolah Anda?
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 16, color: "var(--fg-muted)", lineHeight: 1.6 }}>
                Setiap sekolah berbeda. Mari berdiskusi mengenai kebutuhan latihan, jadwal, dan target pengembangan tim.
              </p>
              <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Button variant="primary" to="/partnership">Lihat Kerja Sama</Button>
                <Button variant="outline-dark" to="/contact">Hubungi Kami</Button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Program = Program;