// Home page — dark hero + burgundy stats + cream pilar + dark app section

// Inline SVG icons
const Icons = {
  School: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 22V10l8-5 8 5v12" />
      <path d="M9 22v-6h6v6" />
      <path d="M12 3v2" />
      <path d="M12 5l3 1.5V4L12 5z" fill="currentColor" />
    </svg>
  ),
  People: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="9" cy="8" r="3" />
      <circle cx="17" cy="9" r="2.4" />
      <path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6" />
      <path d="M14.5 14.5c1.7-1 5.5-.5 6.5 4" />
    </svg>
  ),
  Whistle: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="9" cy="8" r="3" />
      <path d="M5 21c0-3 1.5-6.5 5-7.5" />
      <path d="M16 8v6" />
      <path d="M13 14h6l-2 6h-2z" />
    </svg>
  ),
  Trophy: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 4h10v4a5 5 0 0 1-10 0V4z" />
      <path d="M7 6H4v2a3 3 0 0 0 3 3" />
      <path d="M17 6h3v2a3 3 0 0 1-3 3" />
      <path d="M10 14h4v3h-4z" />
      <path d="M8 21h8" />
      <path d="M10 21l1-4M14 21l-1-4" />
    </svg>
  ),
  Clipboard: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="4" width="12" height="17" rx="1.5" />
      <path d="M9 4V2.5h6V4" />
      <line x1="9" y1="10" x2="15" y2="10" />
      <line x1="9" y1="13" x2="15" y2="13" />
      <line x1="9" y1="16" x2="13" y2="16" />
    </svg>
  ),
  Coach: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="8" r="4" />
      <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" />
      <path d="M8 5h8" />
    </svg>
  ),
  Chart: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="13" width="4" height="8" />
      <rect x="10" y="9" width="4" height="12" />
      <rect x="17" y="5" width="4" height="16" />
    </svg>
  ),
  Handshake: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 13l4-4 4 1 2.5-1.5L16 11l4-4" />
      <path d="M9.5 12.5l-2.5 2.5a1.5 1.5 0 0 0 2.12 2.12l1.5-1.5" />
      <path d="M11 14l1.5-1.5a1.5 1.5 0 0 1 2.12 2.12L13 16.24" />
      <path d="M13 16.24l-.74.74a1.5 1.5 0 0 0 2.12 2.12L16 18" />
      <path d="M15.5 18.5a1.5 1.5 0 0 0 2.12 0L19 17" />
    </svg>
  ),
  UserIcon: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="9" r="4" />
      <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" />
    </svg>
  ),
  Calendar: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="16" rx="2" />
      <line x1="3" y1="10" x2="21" y2="10" />
      <line x1="8" y1="3" x2="8" y2="7" />
      <line x1="16" y1="3" x2="16" y2="7" />
    </svg>
  ),
  History: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12a9 9 0 1 0 3-6.7" />
      <polyline points="3,4 3,9 8,9" />
      <polyline points="12,8 12,12 15,14" />
    </svg>
  ),
  Pathway: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
      <polyline points="16 7 22 7 22 13" />
    </svg>
  ),
};

function CourtArt({ className = "", style = {} }) {
  // Subtle basketball half-court outlines, faint
  return (
    <svg className={className} style={style} viewBox="0 0 400 600" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <circle cx="200" cy="300" r="70" opacity="0.5" />
      <circle cx="200" cy="300" r="2" fill="currentColor" />
      <rect x="120" y="430" width="160" height="170" opacity="0.5" />
      <path d="M120 430 L120 460 A80 80 0 0 0 280 460 L280 430" opacity="0.5" />
      <line x1="0" y1="600" x2="400" y2="600" />
      <line x1="180" y1="430" x2="180" y2="600" opacity="0.4" />
      <line x1="220" y1="430" x2="220" y2="600" opacity="0.4" />
    </svg>
  );
}

function Home() {
  const [currentPhoto, setCurrentPhoto] = React.useState(1);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setCurrentPhoto((prev) => (prev % 7) + 1);
    }, 2000);
    return () => clearInterval(timer);
  }, []);

  return (
    <main className="page-enter" data-screen-label="Home">
      {/* HERO */}
      <section className="surface-dark" style={{ position: "relative", overflow: "hidden", paddingTop: 110, paddingBottom: 0 }}>
        {/* Subtle court line decorations */}
        <CourtArt style={{ position: "absolute", left: -120, top: 0, height: "100%", width: 400, color: "rgba(244,240,229,0.10)" }} />
        <CourtArt style={{ position: "absolute", right: -120, top: 0, height: "100%", width: 400, color: "rgba(244,240,229,0.06)", transform: "scaleX(-1)" }} />

        <div className="container" style={{ position: "relative" }}>
          {/* Background Watermark Logo - Higher visibility */}
          <img 
            src="src/assets/logoputih.png" 
            alt="" 
            style={{ 
              position: "absolute", 
              left: "-15%", 
              top: "-15%", 
              width: "900px", 
              opacity: 0.15, 
              pointerEvents: "none", 
              zIndex: 0
            }} 
          />
          <div style={{ 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 540px), 1fr))", 
            gap: "clamp(40px, 8vw, 80px)", 
            alignItems: "center", 
            paddingTop: "clamp(20px, 5vw, 40px)", 
            paddingBottom: "clamp(40px, 8vw, 60px)", 
            position: "relative", 
            zIndex: 1 
          }} className="hero-grid">
            <div>
              <Reveal>
                <h1 className="hero-display" style={{ margin: 0, fontSize: "clamp(72px, 11vw, 168px)", lineHeight: 0.88 }}>
                  <span style={{ color: "var(--burgundy)" }}>GH GAMBIT</span><br />
                  <span style={{ color: "var(--cream)" }}>SCHOOL<br />DEVELOPMENT</span>
                </h1>
              </Reveal>

              <Reveal delay={120}>
                <p style={{ marginTop: 28, fontSize: 17, color: "var(--teal)", maxWidth: 540, lineHeight: 1.5, fontWeight: 500 }}>
                  Program Pengembangan Basket Sekolah<br />oleh GH Gambit Basketball Club
                </p>
              </Reveal>

              <Reveal delay={180}>
                <div style={{ marginTop: 18, paddingLeft: 18, borderLeft: "2px solid var(--burgundy)", maxWidth: 620 }}>
                  <p style={{ margin: 0, fontSize: 15, color: "rgba(244,240,229,0.85)", lineHeight: 1.65 }}>
                    GH Gambit adalah klub basket modern yang hadir dengan sistem pelatihan segar, berbasis data, dan terbebas dari cara-cara lama yang kaku. Kami membawa standar pembinaan profesional ini langsung ke sekolah Anda, di mana setiap siswa mendapatkan fasilitas digital yang sama dengan pemain klub kami—termasuk akses penuh ke <span style={{ color: "var(--teal)", fontWeight: 600 }}>GH Gambit Stats App</span> untuk memantau statistik pertandingan, kehadiran, dan profil perkembangan secara personal.
                  </p>
                </div>
              </Reveal>

              <Reveal delay={240}>
                <div style={{ 
                  marginTop: 36, 
                  display: "flex", 
                  gap: 12, 
                  flexWrap: "wrap",
                  width: "100%"
                }}>
                  <Button variant="primary" to="/program">Lihat Program</Button>
                  <Button variant="outline" to="/partnership">Ajukan Kerja Sama</Button>
                </div>
              </Reveal>
            </div>

            <div style={{ position: "relative" }}>
              <Reveal delay={120} className="reveal-from-left">
                <div style={{ 
                  position: "relative", 
                  aspectRatio: "1 / 1", 
                  width: "100%", 
                  minHeight: "clamp(320px, 70vw, 580px)", 
                  borderRadius: 12, 
                  overflow: "hidden", 
                  background: "var(--ink-2)", 
                  boxShadow: "0 20px 80px -20px rgba(0,0,0,0.6)" 
                }}>
                  {/* Slideshow: foto halaman utama 1-7 */}
                  {[1, 2, 3, 4, 5, 6, 7].map((num) => (
                    <img
                      key={num}
                      src={`src/assets/foto halaman utama ${num}.jpeg`}
                      alt={`Hero ${num}`}
                      style={{
                        position: "absolute",
                        inset: 0,
                        width: "100%",
                        height: "100%",
                        objectFit: "contain",
                        opacity: currentPhoto === num ? 1 : 0,
                        transition: "opacity 1000ms ease-in-out",
                      }}
                    />
                  ))}
                  {/* Subtle gradient overlay edge */}
                  <div style={{ position: "absolute", inset: 0, pointerEvents: "none", background: "linear-gradient(90deg, rgba(15,15,15,0.3) 0%, transparent 30%, transparent 100%)" }}></div>
                </div>
              </Reveal>

              {/* Vertical right-side label */}
              <div style={{ position: "absolute", right: -18, top: "50%", transform: "translateY(-50%) rotate(0deg)", display: "flex", flexDirection: "column", gap: 10, zIndex: 10 }} className="vertical-marks">
                {["DISCIPLINE", "DEVELOPMENT", "EXCELLENCE"].map((w) => (
                  <span key={w} style={{ 
                    fontSize: 10, 
                    letterSpacing: "0.22em", 
                    color: "var(--ink)", 
                    background: "var(--teal)",
                    padding: "6px 14px",
                    fontWeight: 800, 
                    fontFamily: "var(--sans)", 
                    textAlign: "right",
                    borderRadius: "4px",
                    boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
                  }}>{w}</span>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* STATS BURGUNDY BAND */}
        <div className="surface-burgundy" style={{ marginTop: 0, padding: "10px 0" }}>
          <div className="container">
            <div style={{ 
              display: "grid", 
              gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))", 
              gap: 0 
            }} className="stat-band">
              {[
                { Icon: Icons.Whistle, k: "PROFESSIONAL", l: "Coaching Standards", sub: "Bersertifikasi & Berpengalaman" },
                { Icon: Icons.Clipboard, k: "STRUCTURED", l: "Curriculum Based", sub: "Materi Latihan Terukur" },
                { Icon: Icons.Chart, k: "MEASURABLE", l: "Progress Tracking", sub: "Monitoring via Aplikasi" },
                { Icon: Icons.Handshake, k: "SUSTAINABLE", l: "School Partnership", sub: "Kolaborasi Jangka Panjang" },
              ].map((s, i) => (
                <div key={i} className="cell">
                  <div className="icon"><s.Icon /></div>
                  <div>
                    <div className="k" style={{ fontSize: 24, letterSpacing: "0.04em" }}>{s.k}</div>
                    <div className="l" style={{ marginTop: 2 }}>{s.l}</div>
                    <div className="sub" style={{ opacity: 0.6 }}>{s.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <style>{`
          .reveal-from-left { opacity: 0; transform: translateX(-60px); transition: all 1.2s cubic-bezier(.2,.7,.2,1); }
          .reveal-from-left.in { opacity: 1; transform: translateX(0); }

          @media (max-width: 980px) {
            .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .vertical-marks { display: none; }
          }
        `}</style>
      </section>

      {/* PILAR PROGRAM */}
      <section className="section" style={{ paddingTop: 110, paddingBottom: 110, position: "relative", overflow: "hidden" }}>
        <CourtArt style={{ position: "absolute", right: -100, top: 60, width: 360, height: 460, color: "var(--line-strong)", opacity: 0.4 }} />
        <div className="container" style={{ position: "relative" }}>
          <div style={{ 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 480px), 1fr))", 
            gap: "clamp(30px, 6vw, 60px)", 
            alignItems: "end", 
            marginBottom: "clamp(40px, 8vw, 60px)" 
          }} className="pilar-head">
            <Reveal>
              <div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 20 }}>
                  <span style={{ width: 28, height: 2, background: "var(--burgundy)" }}></span>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--burgundy)", fontWeight: 700 }}>PILAR PROGRAM</span>
                </div>
                <h2 className="h1" style={{ margin: 0, fontFamily: "var(--display-alt)", fontWeight: 800, fontSize: "clamp(36px, 5.5vw, 60px)", lineHeight: 1.08, letterSpacing: "-0.02em" }}>
                  Membawa Standar Modern ke Dalam Basket Sekolah
                </h2>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: "var(--fg-muted)" }}>
                Program kami dirancang komprehensif untuk memastikan pembinaan berjalan efektif, terukur, dan memberi dampak jangka panjang bagi sekolah dan siswa.
              </p>
            </Reveal>
          </div>

          <div style={{ 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 280px), 1fr))", 
            gap: 18 
          }} className="pilar-grid">
            {[
              { num: "01", Icon: Icons.Clipboard, title: "Kurikulum Elit Terukur", desc: "Membawa kurikulum pembinaan GH Gambit Basketball Club yang disesuaikan dengan kebutuhan sekolah." },
              { num: "02", Icon: Icons.Coach, title: "Pelatih Aktif Kompetisi", desc: "Staf pelatih profesional yang ditugaskan memegang tim ekskul sekolah dan aktif membawa tim berkompetisi di berbagai turnamen." },
              { num: "03", Icon: Icons.Chart, title: "Sistem Penilaian Dual-Metode", desc: "Pemantauan perkembangan pemain melalui Data Kuantitatif (Stats Pertandingan untuk SMP/SMA) dan Data Kualitatif (Evaluasi Teknik & Karakter untuk semua level)." },
              { num: "04", Icon: Icons.Pathway, title: "Dukungan Prestasi Sekolah", desc: "Membawa tim sekolah ke level kompetisi yang lebih tinggi melalui sistem pembinaan yang terukur dan berorientasi pada prestasi." },
            ].map((p, i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="pillar-card">
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <span className="num">{p.num}</span>
                  </div>
                  <div className="icon-circle"><p.Icon /></div>
                  <h3>{p.title}</h3>
                  <p>{p.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 1100px) { .pilar-grid { grid-template-columns: 1fr 1fr !important; } .pilar-head { grid-template-columns: 1fr !important; gap: 24px !important; } }
          @media (max-width: 560px) { .pilar-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* APP MOBILE SECTION */}
      <section className="surface-dark" style={{ paddingTop: 110, paddingBottom: 110, position: "relative", overflow: "hidden" }}>
        <CourtArt style={{ position: "absolute", right: -160, bottom: -120, width: 460, height: 580, color: "rgba(244,240,229,0.08)" }} />
        <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="app-grid">
            <div>
              <Reveal>
                <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 20 }}>
                  <span style={{ width: 28, height: 2, background: "var(--teal)" }}></span>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)", fontWeight: 700 }}>SISTEM TERINTEGRASI</span>
                </div>
                <h2 className="h1" style={{ margin: 0, fontFamily: "var(--display-alt)", fontWeight: 800, fontSize: "clamp(40px, 6vw, 64px)", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
                  GH Gambit<br />Stats Mobile App
                </h2>
              </Reveal>

              <Reveal delay={100}>
                <p style={{ marginTop: 22, fontSize: 16, color: "rgba(244,240,229,0.78)", lineHeight: 1.6, maxWidth: 520 }}>
                  Monitoring latihan dan kehadiran pemain kini lebih mudah, akurat, dan transparan melalui aplikasi mobile kami.
                </p>
              </Reveal>

              <Reveal delay={160}>
                <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 18 }}>
                  {[
                    { Icon: Icons.Calendar, t: "Monitoring & Absensi Digital", d: "Pencatatan kehadiran mandiri atau via pelatih yang akurat, transparan, dan mudah dipantau sekolah." },
                    { Icon: Icons.Chart, t: "Penilaian Kuantitatif (Data)", d: "Input statistik (PTS, REB, AST) real-time via scoreboard digital (Diterapkan sesuai kebutuhan usia pembinaan)." },
                    { Icon: Icons.Clipboard, t: "Penilaian Kualitatif (Expert)", d: "Evaluasi mendalam pelatih terhadap Technical Skill, Decision Making, dan Positioning pemain." },
                  ].map((f, i) => (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "56px 1fr", gap: 18, alignItems: "start" }}>
                      <div style={{ width: 50, height: 50, borderRadius: "50%", border: "1.5px solid var(--teal)", color: "var(--teal)", display: "grid", placeItems: "center" }}>
                        <f.Icon />
                      </div>
                      <div>
                        <p style={{ margin: 0, fontWeight: 600, fontSize: 15, color: "var(--cream)" }}>{f.t}</p>
                        <p style={{ margin: "4px 0 0", fontSize: 13, color: "rgba(244,240,229,0.68)", lineHeight: 1.55, maxWidth: 380 }}>{f.d}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </Reveal>

              <Reveal delay={220}>
                <div style={{ marginTop: 32 }}>
                  <Button variant="teal" to="/app">Lihat Aplikasi</Button>
                </div>
              </Reveal>
            </div>

            {/* 3 overlapping phones */}
            <div style={{ position: "relative", minHeight: 600, display: "flex", justifyContent: "center", alignItems: "center" }}>
              <Reveal delay={120}>
                <div style={{ position: "relative", display: "flex", gap: 0, transform: "scale(0.9)", transformOrigin: "center", justifyContent: "center" }} className="phones-stack">
                  <div style={{ transform: "translateY(40px) translateX(60px) rotate(0deg)", zIndex: 1, opacity: 0.85 }}>
                    <window.MobileScreenMockup variant="login" imageUrl="src/assets/halaman-login.jpg" />
                  </div>
                  <div style={{ transform: "translateY(0) translateX(0) rotate(0deg)", zIndex: 3, marginLeft: -130 }}>
                    <window.MobileScreenMockup variant="home" imageUrl="src/assets/halaman utaman pemain.jpg" />
                  </div>
                  <div style={{ transform: "translateY(40px) translateX(-60px) rotate(0deg)", zIndex: 1, opacity: 0.85, marginLeft: -130 }}>
                    <window.MobileScreenMockup variant="attendance" imageUrl="src/assets/halaman-rekap-absensi.jpg" />
                  </div>
                </div>
              </Reveal>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 1100px) {
            .app-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
            .phones-stack { transform: scale(0.7) !important; }
          }
          @media (max-width: 700px) {
            .phones-stack > div:nth-child(1), .phones-stack > div:nth-child(3) { display: none; }
            .phones-stack > div:nth-child(2) { margin-left: 0 !important; transform: none !important; }
          }
        `}</style>
      </section>

      {/* PATHWAY (kept from earlier design) */}
      <section className="section" style={{ position: "relative" }}>
        <span className="watermark" style={{ fontSize: "clamp(180px, 28vw, 460px)", left: "-30px", top: "-30px", color: "var(--burgundy)" }}>04</span>
        <div className="container" style={{ position: "relative" }}>
          <Reveal>
            <SectionTitle 
              eyebrow="Development Journey" 
              number="04" 
              title="Membangun Budaya Juara di Lingkungan Sekolah." 
              description="Fokus utama kami adalah membawa tim sekolah mencapai level kompetisi yang lebih tinggi melalui sistem pembinaan yang terukur. Kami berkomitmen memberikan apresiasi bagi siswa yang menunjukkan dedikasi luar biasa melalui dukungan akses ke ekosistem basket yang lebih luas guna menunjang masa depan dan prestasi mereka." 
            />
          </Reveal>

          <div className="pathway" style={{ marginTop: 80 }}>
            {[
              ["Analisis &", "Evaluasi Program"],
              ["Implementasi", "Kurikulum Sekolah"],
              ["Monitoring", "& Data Progres"],
              ["Persiapan", "Tim Sekolah"],
              ["Peningkatan", "Prestasi Ekskul"],
              ["Jalur", "Apresiasi Siswa"],
            ].map(([t1, t2], i) => (
              <div key={i} className={`pathway-step ${i >= 2 && i <= 4 ? "active" : ""}`}>
                <div className="dot"></div>
                <div>
                  <p className="num">STEP / 0{i + 1}</p>
                  <p className="ttl">{t1}<br />{t2}</p>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 56, padding: 28, border: "1px solid var(--teal-deep)", background: "var(--teal-soft)", display: "flex", gap: 18, alignItems: "flex-start", borderRadius: 14 }}>
            <span style={{ flex: "0 0 auto", width: 28, height: 28, border: "1px solid var(--teal-deep)", color: "var(--teal-deep)", 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-deep)", fontWeight: 700 }}>IMPORTANT NOTE</p>
              <p style={{ margin: "8px 0 0", fontSize: 15, color: "var(--fg)", lineHeight: 1.65 }}>
                Kesempatan beasiswa tidak diberikan secara otomatis. Beasiswa hanya diberikan kepada pemain terpilih yang memenuhi standar pengembangan klub dan direkomendasikan oleh staff pelatih.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* COMPETITION POSITIONING */}
      <section className="surface-burgundy section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(180px, 28vw, 460px)", right: "-40px", top: "-30px", color: "var(--cream)", opacity: 0.10 }}>05</span>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }} className="about-grid">
            <Reveal>
              <div style={{ display: "flex", gap: 14, marginBottom: 18 }}>
                <span className="mono" style={{ fontSize: 12, letterSpacing: "0.22em", color: "var(--cream)", opacity: 0.7 }}>05 / COMPETITION</span>
              </div>
              <h2 className="h1" style={{ margin: 0, fontFamily: "var(--display-alt)", fontWeight: 800, fontSize: "clamp(36px, 5vw, 60px)", letterSpacing: "-0.02em" }}>
                Aktif dalam<br />Lingkungan Basket<br />
                <span style={{ color: "var(--cream)", opacity: 0.6 }}>Kompetitif.</span>
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: "rgba(244,240,229,0.88)" }}>
                GH Gambit Basketball Club bukan hanya tempat latihan, tetapi juga klub basket yang aktif membangun pemain melalui pengalaman kompetisi.
                Klub mempersiapkan tim untuk mengikuti kejuaraan tingkat kota, regional, hingga turnamen pilihan tingkat nasional agar pemain mendapatkan pengalaman bertanding yang nyata.
              </p>
              <p style={{ marginTop: 18, fontSize: 14, lineHeight: 1.7, color: "rgba(244,240,229,0.7)", fontStyle: "italic" }}>
                GH Gambit Basketball Club aktif dalam ekosistem basket Kota Depok dan berpartisipasi dalam berbagai kompetisi tingkat kota, turnamen lokal, serta turnamen pilihan tingkat nasional.
              </p>
            </Reveal>
          </div>

          <div style={{ 
            marginTop: 72, 
            borderTop: "1px solid rgba(244,240,229,0.18)", 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 200px), 1fr))" 
          }} className="comp-grid">
            {[
              "Kejuaraan Kota Depok",
              "Turnamen Lokal",
              "Kompetisi Regional",
              "Turnamen Tingkat Nasional",
              "Pengembangan Jangka Panjang",
            ].map((c, i) => (
              <div key={i} style={{ padding: "28px 22px", borderRight: i < 4 ? "1px solid rgba(244,240,229,0.18)" : "none" }} className="comp-cell">
                <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--cream)", opacity: 0.6 }}>0{i + 1}</p>
                <p style={{ margin: "14px 0 0", fontSize: 16, lineHeight: 1.3, color: "var(--cream)", fontWeight: 500 }}>{c}</p>
              </div>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .comp-grid { grid-template-columns: 1fr 1fr !important; }
            .comp-grid .comp-cell { border-right: 1px solid rgba(244,240,229,0.18) !important; border-bottom: 1px solid rgba(244,240,229,0.18); }
            .comp-grid .comp-cell:nth-child(2n) { border-right: none !important; }
          }
        `}</style>
      </section>

      {/* MARKAS PUSAT SECTION */}
      <section className="surface-cream section" style={{ position: "relative", overflow: "hidden", borderTop: "1px solid var(--line)" }}>
        <CourtArt style={{ position: "absolute", left: -100, top: -60, width: 360, height: 460, color: "var(--line-strong)", opacity: 0.3 }} />
        <div className="container" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="about-grid">
            <Reveal>
              <div style={{ position: "relative", borderRadius: 18, overflow: "hidden", border: "1px solid var(--line-strong)", boxShadow: "0 24px 60px -18px rgba(26,26,26,0.12)", height: 400 }}>
                <iframe 
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.04673327514!2d106.7906234!3d-6.3879711!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69e9369b7f8219%3A0xe906f184b1362236!2sGelora%20Hady%20Depok!5e0!3m2!1sen!2sid!4v1778928896410!5m2!1sen!2sid" 
                  width="100%" 
                  height="100%" 
                  style={{ border: 0, filter: "grayscale(0.2) contrast(1.1)" }} 
                  allowFullScreen="" 
                  loading="lazy" 
                  referrerPolicy="no-referrer-when-downgrade"
                ></iframe>
              </div>
            </Reveal>

            <Reveal delay={120}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 20 }}>
                <span style={{ width: 28, height: 2, background: "var(--teal)" }}></span>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal-deep)", fontWeight: 700 }}>MARKAS PUSAT</span>
              </div>
              <h2 className="h1" style={{ margin: "0 0 24px 0", fontFamily: "var(--display-alt)", fontWeight: 800, fontSize: "clamp(32px, 5vw, 56px)", letterSpacing: "-0.01em", lineHeight: 1.1 }}>
                Fasilitas Latihan Sendiri di <span style={{ color: "var(--burgundy)" }}>Gelora Hady.</span>
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--fg-muted)", margin: 0 }}>
                Berbeda dengan klub lain, GH Gambit memiliki markas latihan sendiri di <strong style={{ color: "var(--fg)" }}>Gelora Hady Depok</strong>. Ini adalah pusat ekosistem kami, tempat para pemain klub mengasah teknik mereka setiap hari di lapangan yang didesain khusus untuk pengembangan basket profesional.
              </p>
              <div style={{ marginTop: 32, display: "flex", gap: 16, alignItems: "center" }}>
                <Button variant="primary" href="https://maps.app.goo.gl/ZCxHBaHVf2J2UoU27" target="_blank">Lihat Lokasi di Maps</Button>
                <div style={{ borderLeft: "1px solid var(--line-strong)", paddingLeft: 16 }}>
                  <p className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--fg-muted)", margin: 0 }}>LOKASI</p>
                  <p style={{ fontSize: 14, fontWeight: 600, color: "var(--fg)", margin: "4px 0 0 0" }}>Kota Depok, Jawa Barat</p>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* CTA STRIP */}
      <section className="section" style={{ paddingTop: 100, paddingBottom: 100, position: "relative", borderTop: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "center" }} className="about-grid">
            <Reveal>
              <h2 className="h1" style={{ margin: 0, fontFamily: "var(--display-alt)", fontWeight: 800, fontSize: "clamp(36px, 5.5vw, 64px)", letterSpacing: "-0.02em", lineHeight: 1.05 }}>
                Mari bangun program basket sekolah yang <span style={{ color: "var(--burgundy)" }}>lebih profesional.</span>
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 16, color: "var(--fg-muted)", lineHeight: 1.65, maxWidth: 420 }}>
                Tim kami siap berdiskusi mengenai kebutuhan sekolah Anda — jadwal latihan, jumlah siswa, target kompetisi, dan kerja sama jangka panjang.
              </p>
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 12 }}>
                <Button variant="primary" href="https://wa.me/6281398699869" target="_blank">Hubungi via WhatsApp</Button>
                <Button variant="outline" to="/partnership">Lihat Skema Kerja Sama</Button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Home = Home;