function Partnership() {
  return (
    <main className="page-enter" data-screen-label="Partnership">
      <PageHeader
        number="05"
        eyebrow="Kerja Sama Sekolah"
        title="Kerja Sama Sekolah."
        subtitle="Proposal pengembangan basket sekolah yang disesuaikan dengan kebutuhan masing-masing sekolah."
      />

      {/* Intro */}
      <section className="section" style={{ paddingTop: 40, paddingBottom: 60 }}>
        <div className="container">
          <div style={{ 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 420px), 1fr))", 
            gap: "clamp(30px, 6vw, 60px)", 
            alignItems: "start" 
          }} className="about-grid">
            <Reveal>
              <p className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)", marginBottom: 16 }}>COMMITMENT</p>
              <h2 className="h1" style={{ margin: 0 }}>
                Fokus pada<br />
                <span style={{ color: "var(--burgundy)" }}>Prestasi Siswa & Sekolah</span>.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: "var(--fg-muted)" }}>
                Tujuan utama kami adalah membangun program basket sekolah yang mandiri, berkarakter, dan berprestasi. Kami percaya bahwa melalui manajemen ekskul yang profesional, sekolah dapat melahirkan siswa-atlet yang disiplin dan unggul di lapangan maupun di kelas.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Main Partnership Card */}
      <section style={{ paddingBottom: 100, position: "relative" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "center" }}>
            <Reveal style={{ width: "100%", maxWidth: 800 }}>
              <PartnershipCard partnership={window.PARTNERSHIPS[0]} highlight={true} />
            </Reveal>
          </div>

          <Reveal delay={300}>
            <div style={{ marginTop: 36, padding: 24, border: "1px dashed var(--line-strong)", display: "flex", gap: 18, alignItems: "flex-start" }}>
              <span style={{ flex: "0 0 auto", width: 28, height: 28, border: "1px solid var(--teal)", color: "var(--teal)", display: "grid", placeItems: "center", fontFamily: "var(--mono)", fontSize: 12 }}>i</span>
              <p style={{ margin: 0, fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.65 }}>
                <strong style={{ color: "var(--fg)", fontWeight: 600 }}>Catatan kerja sama.</strong>{" "}
                Rencana kerja sama disesuaikan berdasarkan lokasi sekolah, jumlah siswa, jadwal latihan, kebutuhan pelatih, dan target kompetisi.
              </p>
            </div>
          </Reveal>
        </div>

        <style>{`
          @media (max-width: 1000px) { .part-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* SCHOLARSHIP SECTION */}
      <section className="surface-cream section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(220px, 36vw, 560px)", right: "-60px", top: "-40px", color: "var(--ink)" }}>SCHOLARSHIP</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: "start" 
          }} className="about-grid">
            <Reveal>
              <SectionTitle eyebrow="Student Success" number="05A" title="Apresiasi & Jalur Prestasi Siswa." invert={true} />
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: "var(--fg-muted)" }}>
                Kami menghargai setiap dedikasi siswa dalam mengikuti program basket sekolah. Sebagai bentuk dukungan tambahan, siswa yang menunjukkan progres luar biasa akan mendapatkan akses ke ekosistem basket yang lebih luas untuk mendukung masa depan mereka sebagai atlet maupun pribadi yang unggul.
              </p>

              <div className="surface-dark" style={{ marginTop: 28, padding: 24, display: "flex", gap: 16, borderRadius: 14 }}>
                <span style={{ flex: "0 0 auto", width: 28, height: 28, border: "1px solid var(--teal)", color: "var(--teal)", display: "grid", placeItems: "center", fontFamily: "var(--mono)", fontSize: 12, fontWeight: 700, borderRadius: 999 }}>!</span>
                <div>
                  <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--teal)", fontWeight: 700 }}>IMPORTANT</p>
                  <p style={{ margin: "8px 0 0", fontSize: 15, lineHeight: 1.65 }}>
                    Kami berkomitmen membawa tim sekolah mencapai level kompetisi yang lebih tinggi melalui sistem pembinaan yang terukur, pengembangan karakter yang kuat, dan pemantauan perkembangan individu agar siswa dapat mencapai potensi maksimal di dalam maupun di luar lapangan.
                  </p>
                </div>
              </div>
            </Reveal>
          </div>

          <div style={{ 
            marginTop: 64, 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 240px), 1fr))", 
            gap: 16 
          }} className="sch-grid">
            {[
              "Peluang bergabung dengan GH Gambit Basketball Club",
              "Pembebasan biaya bulanan klub untuk pemain terpilih",
              "Akses lingkungan latihan kompetitif",
              "Pengalaman mengikuti turnamen",
              "Jalur pengembangan atlet jangka panjang",
            ].map((b, i) => (
              <Reveal key={i} delay={i * 60}>
                <div style={{ padding: 24, background: "#FBF8EF", border: "1px solid var(--line-dark)", minHeight: 200, display: "flex", flexDirection: "column", gap: 18 }}>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal-deep)" }}>BENEFIT / {String(i + 1).padStart(2, "0")}</span>
                  <p style={{ margin: 0, fontSize: 15, lineHeight: 1.5, color: "var(--ink)", fontWeight: 500 }}>{b}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

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

      {/* DIGITAL SUPPORT STRIP */}
      <section style={{ padding: "100px 0", position: "relative", overflow: "hidden", borderTop: "1px solid var(--line)" }}>
        <span className="watermark" style={{ fontSize: "clamp(160px, 24vw, 360px)", left: "-30px", bottom: "-40px", color: "var(--teal)", opacity: 0.08 }}>DIGITAL</span>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 60, alignItems: "center" }} className="dig-grid">
            <Reveal>
              <div>
                <div style={{ display: "flex", gap: 14, alignItems: "baseline", marginBottom: 18 }}>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)" }}>05C / DIGITAL SUPPORT</span>
                </div>
                <h2 className="h1" style={{ margin: 0 }}>
                  Dukungan Digital untuk<br />
                  <span style={{ color: "var(--teal)" }}>Monitoring Pemain.</span>
                </h2>
                <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: "var(--fg-muted)", maxWidth: 560 }}>
                  Program ini didukung oleh <strong style={{ color: "var(--fg)", fontWeight: 600 }}>Sistem Penilaian Dual-Metode</strong>. Siswa mendapatkan evaluasi Kualitatif (Teknik & Karakter) secara rutin, serta Data Kuantitatif (Box Score Scrimmage) khusus untuk level SMP/SMA melalui GH Gambit Stats Mobile App.
                </p>
                <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <Button variant="teal" to="/app">Lihat Detail Aplikasi</Button>
                  <Button variant="outline" to="/program">Detail Program</Button>
                </div>
              </div>
            </Reveal>

            <Reveal delay={120}>
              <div style={{ display: "flex", justifyContent: "center" }}>
                <window.MobileScreenMockup variant="attendance" imageUrl="src/assets/halaman-rekap-absensi.jpg" label="STATS / ATTENDANCE" />
              </div>
            </Reveal>
          </div>
        </div>

        <style>{`
          @media (max-width: 1000px) {
            .dig-grid { grid-template-columns: 1fr !important; gap: 60px !important; }
          }
        `}</style>
      </section>

      {/* PREMIUM CTA BLOCK */}
      <section className="surface-burgundy section" style={{ position: "relative", overflow: "hidden", paddingTop: 120, paddingBottom: 120 }}>
        <div className="court-lines" aria-hidden="true" style={{ opacity: 0.5 }}></div>
        <span className="watermark" style={{ fontSize: "clamp(160px, 26vw, 420px)", right: "-30px", bottom: "-40px", color: "var(--fg)", opacity: 0.10 }}>BUILD</span>

        <div className="container" style={{ position: "relative" }}>
          <Reveal>
            <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 22 }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--fg)", opacity: 0.7 }}>05B / READY?</span>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="hero-display" style={{ margin: 0, fontSize: "clamp(44px, 8vw, 108px)", maxWidth: 1100 }}>
              Mari Bangun Program Basket Sekolah yang Lebih Profesional.
            </h2>
          </Reveal>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, marginTop: 56, alignItems: "start" }} className="cta-grid">
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: "rgba(244,240,229,0.88)" }}>
                GH Gambit School Development dirancang untuk sekolah yang ingin memiliki program basket lebih dari sekadar ekstrakurikuler biasa.
                Kami membantu sekolah membangun lingkungan basket yang terstruktur melalui pelatihan profesional, pembinaan pemain, disiplin, dan jalur pengembangan yang jelas.
              </p>
            </Reveal>

            <Reveal delay={180}>
              <div style={{ background: "var(--ink)", padding: 28, color: "var(--fg)" }}>
                <p className="mono" style={{ margin: 0, fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)" }}>HUBUNGI TIM</p>
                <div style={{ marginTop: 22, paddingTop: 22, borderTop: "1px solid var(--line)" }}>
                  <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>WHATSAPP</p>
                  <p className="display" style={{ margin: "6px 0 0", fontSize: 28 }}>0813 9869 9869</p>
                </div>
                <div style={{ marginTop: 22, paddingTop: 22, borderTop: "1px solid var(--line)" }}>
                  <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>EMAIL</p>
                  <p style={{ margin: "6px 0 0", fontSize: 16, wordBreak: "break-all" }}>ghgambit.basketball@gmail.com</p>
                </div>
                <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 12 }}>
                  <Button variant="teal" href="https://wa.me/6281398699869" target="_blank">Hubungi via WhatsApp</Button>
                  <Button variant="outline" href="mailto:ghgambit.basketball@gmail.com">Kirim Email</Button>
                </div>
              </div>
            </Reveal>
          </div>
        </div>

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

window.Partnership = Partnership;