function AppPage() {
  const featuresRef = React.useRef(null);

  const scrollToFeatures = (e) => {
    e.preventDefault();
    if (featuresRef.current) {
      const top = featuresRef.current.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  const FEATURES = [
    { num: "01", title: "Login Akses Pemain", desc: "Pemain yang mendapatkan akun dapat login ke aplikasi untuk mengakses informasi dasar terkait kehadiran mereka." },
    { num: "02", title: "Halaman Utama Pemain", desc: "Pemain dapat melihat halaman utama yang menampilkan ringkasan akun dan akses cepat ke data attendance." },
    { num: "03", title: "Attendance Bulanan", desc: "Pemain dapat melihat rekap kehadiran bulanan untuk membantu memantau konsistensi mereka selama mengikuti program." },
    { num: "04", title: "Riwayat Kehadiran", desc: "Pemain dapat melihat riwayat attendance selama mengikuti kegiatan ekskul basket." },
    { num: "05", title: "Monitoring yang Lebih Rapi", desc: "Aplikasi mendukung sistem monitoring yang lebih tertata dan menjadi bagian dari pendekatan pembinaan yang modern." },
  ];

  return (
    <main className="page-enter" data-screen-label="App">
      {/* HERO */}
      <section style={{ position: "relative", paddingTop: 160, paddingBottom: 100, overflow: "hidden", background: "linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%)" }}>
        <div className="court-lines" aria-hidden="true"></div>
        <div className="hero-arena" aria-hidden="true">
          <div className="arc a1"></div>
          <div className="arc a2"></div>
        </div>
        <span className="watermark" style={{ fontSize: "clamp(220px, 36vw, 560px)", right: "-30px", top: "60px", color: "var(--teal)", opacity: 0.08 }}>APP</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="app-hero-grid">
            <div>
              <Reveal>
                <div style={{ display: "flex", alignItems: "baseline", gap: 18, marginBottom: 22 }}>
                  <span className="mono" style={{ fontSize: 12, letterSpacing: "0.22em", color: "var(--teal)" }}>APP / 01</span>
                  <span style={{ width: 28, height: 1, background: "var(--teal)" }}></span>
                  <EditorialLabel>Digital Support System</EditorialLabel>
                </div>
              </Reveal>

              <Reveal delay={80}>
                <h1 className="hero-display" style={{ margin: 0, fontSize: "clamp(48px, 8.5vw, 120px)", maxWidth: 760 }}>
                  GH Gambit<br />
                  <span style={{ color: "var(--teal)" }}>Stats.</span> Mobile App.
                </h1>
              </Reveal>

              <Reveal delay={160}>
                <p style={{ margin: "26px 0 0", fontSize: 17, lineHeight: 1.65, color: "var(--fg)", maxWidth: 580 }}>
                  Standar Digital Klub untuk Sekolah. Setiap siswa mendapatkan <span style={{ color: "var(--burgundy)", fontWeight: 600 }}>Akses yang Sama</span> seperti pemain klub profesional kami.
                </p>
                <p style={{ margin: "16px 0 0", fontSize: 15, lineHeight: 1.7, color: "var(--fg-muted)", maxWidth: 600 }}>
                  GH Gambit Stats Mobile App bukan sekadar aplikasi absensi. Melalui platform ini, siswa ekskul mendapatkan ekosistem digital penuh: mulai dari akses login pribadi, rekap kehadiran, hingga pemantauan statistik pertandingan yang mendalam—fasilitas yang identik dengan yang dinikmati oleh pemain di GH Gambit Basketball Club.
                </p>
              </Reveal>

              <Reveal delay={240}>
                <div style={{ marginTop: 36, display: "flex", gap: 14, flexWrap: "wrap" }}>
                  <a className="btn btn-primary" href="#features" onClick={scrollToFeatures}>
                    <span>Lihat Fitur Aplikasi</span><span className="arrow" aria-hidden="true">↓</span>
                  </a>
                  <Button variant="outline" to="/contact">Diskusikan Program</Button>
                </div>
              </Reveal>

              <Reveal delay={320}>
              <div style={{ 
                marginTop: 48, 
                display: "grid", 
                gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 160px), 1fr))", 
                gap: 0, 
                borderTop: "1px solid var(--line)" 
              }}>
                  {[
                    ["LOGIN", "Akses Pemain"],
                    ["ATTENDANCE", "Bulanan & Harian"],
                    ["HISTORY", "Riwayat Lengkap"],
                  ].map(([k, l], i) => (
                    <div key={i} style={{ padding: "20px 18px", borderRight: i < 2 ? "1px solid var(--line)" : "none" }}>
                      <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--teal)" }}>{k}</p>
                      <p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--fg)" }}>{l}</p>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>

            {/* Hero phone */}
            <div style={{ display: "flex", justifyContent: "center", position: "relative" }}>
              <Reveal delay={120}>
                <div style={{ position: "relative" }}>
                  <span className="display" style={{ position: "absolute", top: -40, left: -80, fontSize: 200, lineHeight: 0.85, color: "transparent", WebkitTextStroke: "1px var(--burgundy)", opacity: 0.4, pointerEvents: "none" }}>01</span>
                  <window.MobileScreenMockup variant="home" imageUrl="src/assets/halaman utaman pemain.jpg" />
                </div>
              </Reveal>
            </div>
          </div>
        </div>

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

      {/* ABOUT */}
      <section className="section" style={{ position: "relative" }}>
        <span className="watermark" style={{ fontSize: "clamp(160px, 26vw, 420px)", left: "-30px", top: "-30px", color: "var(--fg)" }}>02</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="About the App" number="02" title="Aplikasi Pendukung untuk Monitoring Pemain." />
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: "var(--fg-muted)" }}>
                Dalam GH Gambit School Development, pemain ekskul dapat memperoleh akses ke GH Gambit Stats Mobile App sebagai salah satu sarana monitoring kehadiran. Aplikasi ini membantu pemain melihat rekap attendance mereka secara lebih rapi, sementara pihak sekolah dan pelatih tetap dapat menggunakan sistem absensi yang fleksibel sesuai kebutuhan.
              </p>

              <ul className="bullets" style={{ marginTop: 28 }}>
                {[
                  "Akses login untuk pemain",
                  "Rekap attendance bulanan",
                  "Riwayat kehadiran selama program",
                  "Mendukung monitoring yang lebih rapi",
                  "Menjadi nilai tambah pembinaan modern",
                ].map((it, i) => (
                  <li key={i}><span>{it}</span></li>
                ))}
              </ul>

              <div style={{ marginTop: 28, padding: 20, border: "1px dashed var(--line-strong)", display: "flex", gap: 16, alignItems: "flex-start" }}>
                <span style={{ flex: "0 0 auto", width: 26, height: 26, border: "1px solid var(--teal)", color: "var(--teal)", display: "grid", placeItems: "center", fontFamily: "var(--mono)", fontSize: 11 }}>i</span>
                <p style={{ margin: 0, fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.6 }}>
                  Penggunaan aplikasi disesuaikan dengan ketentuan sekolah dan kondisi siswa. Untuk siswa yang belum memiliki HP, absensi tetap dapat dibantu oleh pelatih.
                </p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* KEY FEATURES */}
      <section ref={featuresRef} id="features" className="surface-cream section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(180px, 28vw, 460px)", right: "-40px", bottom: "-40px", color: "var(--ink)" }}>03</span>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 56 }} className="about-grid">
            <Reveal>
              <SectionTitle eyebrow="Key Features" number="03" title="Fitur Utama GH Gambit Stats Mobile App." invert={true} />
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.65, color: "var(--fg-muted)" }}>
                Aplikasi ini dirancang untuk mendukung monitoring pemain secara sederhana, jelas, dan relevan dengan kebutuhan program basket sekolah.
              </p>
            </Reveal>
          </div>

          <div style={{ 
            display: "grid", 
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 200px), 1fr))", 
            gap: 16 
          }} className="feat-grid">
            {FEATURES.map((f, i) => (
              <Reveal key={f.num} delay={i * 60}>
                <div className="card-cream" style={{ padding: 24, minHeight: 240, display: "flex", flexDirection: "column", gap: 16 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal-deep)" }}>FT / {f.num}</span>
                    {/* mini icon */}
                    <span style={{ width: 24, height: 24, border: "1px solid var(--teal-deep)", display: "grid", placeItems: "center", color: "var(--teal-deep)" }}>
                      {i === 0 && (<svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="7" cy="5" r="3" /><path d="M2 13 C2 9.5 4.5 8 7 8 C9.5 8 12 9.5 12 13" /></svg>)}
                      {i === 1 && (<svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="2" y="2" width="10" height="10" /><line x1="2" y1="6" x2="12" y2="6" /></svg>)}
                      {i === 2 && (<svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="2" y="3" width="10" height="9" /><line x1="2" y1="6" x2="12" y2="6" /><line x1="5" y1="1" x2="5" y2="4" /><line x1="9" y1="1" x2="9" y2="4" /></svg>)}
                      {i === 3 && (<svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 7 A5 5 0 1 0 7 2" /><polyline points="2,2 2,7 7,7" /></svg>)}
                      {i === 4 && (<svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><polyline points="2,10 5,7 8,9 12,4" /></svg>)}
                    </span>
                  </div>
                  <h3 className="h3" style={{ margin: 0, color: "var(--ink)" }}>{f.title}</h3>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "var(--fg-muted)" }}>{f.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

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

      {/* MOBILE PREVIEW */}
      <section className="section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(180px, 28vw, 460px)", left: "-40px", bottom: "-40px", color: "var(--fg)" }}>04</span>
        <div className="container" style={{ position: "relative" }}>
          <Reveal>
            <SectionTitle eyebrow="Preview" number="04" title="Preview Tampilan Aplikasi." description="Berikut adalah tampilan nyata dari GH Gambit Stats Mobile App yang digunakan oleh pemain dan pelatih." />
          </Reveal>

          <div style={{ marginTop: 72, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 60, justifyItems: "center" }} className="preview-grid">
            {[
              { v: "login", title: "Login Access", desc: "Halaman login untuk pemain mengakses akun GH Gambit Stats Mobile App.", img: "src/assets/halaman-login.jpg" },
              { v: "home", title: "Halaman Utama Pemain", desc: "Halaman utama pemain yang menampilkan ringkasan akun dan akses ke menu attendance.", img: "src/assets/halaman utaman pemain.jpg" },
              { v: "session", title: "Proses Absensi", desc: "Tampilan saat pemain masuk ke room session untuk melakukan proses absensi mandiri.", img: "src/assets/halaman-room-session.jpg" },
              { v: "attendance", title: "Rekap Absensi Pemain", desc: "Halaman attendance untuk melihat rekap kehadiran pemain secara bulanan dan keseluruhan.", img: "src/assets/halaman-rekap-absensi.jpg" },
              { v: "coach", title: "Monitoring Pelatih", desc: "Tampilan pelatih untuk memantau daftar hadir per sesi dan melakukan input manual untuk pemain.", img: "src/assets/halaman-pelatih-lihat-daftar-hadir-per-session.jpg" },
            ].map((s, i) => (
              <Reveal key={s.v} delay={i * 120}>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 26, maxWidth: 340 }}>
                  <window.MobileScreenMockup variant={s.v} imageUrl={s.img} label={`SCREEN / 0${i + 1}`} />
                  <div style={{ textAlign: "center" }}>
                    <h3 className="h3" style={{ margin: 0, color: "var(--fg)" }}>{s.title}</h3>
                    <p style={{ margin: "10px 0 0", fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.55 }}>{s.desc}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

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

      {/* DUAL EVALUATION SYSTEM SECTION */}
      <section className="section" style={{ background: "var(--ink)", color: "var(--cream)", position: "relative", overflow: "hidden", borderTop: "1px solid rgba(244,240,229,0.1)" }}>
        <CourtArt style={{ position: "absolute", left: -100, bottom: -100, width: 400, height: 400, color: "rgba(244,240,229,0.05)" }} />
        <div className="container" style={{ position: "relative" }}>
          <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 }}>PLAYER EVALUATION SYSTEM</span>
            </div>
            <h2 className="h1" style={{ margin: 0, color: "var(--cream)", fontSize: "clamp(32px, 5vw, 48px)", lineHeight: 1.1, maxWidth: 900 }}>
              Sistem Penilaian Dual-Metode:<br />
              <span style={{ color: "var(--teal)" }}>Kuantitatif & Kualitatif.</span>
            </h2>
          </Reveal>

          <div style={{ marginTop: 60, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "start" }} className="stats-comparison-grid">
            {/* Quantitative */}
            <Reveal delay={100}>
              <div style={{ padding: 32, background: "rgba(255,255,255,0.03)", borderRadius: 24, border: "1px solid rgba(244,240,229,0.1)" }}>
                <p className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--teal)", marginBottom: 16 }}>01 / DATA KUANTITATIF (COMPETITIVE LEVEL)</p>
                <h3 className="h3" style={{ margin: "0 0 16px 0", color: "var(--cream)" }}>Real-Time Scrimmage Stats</h3>
                <p style={{ fontSize: 15, color: "rgba(244,240,229,0.72)", lineHeight: 1.6, margin: 0 }}>
                  Diterapkan pada level pembinaan yang membutuhkan data kompetitif (SMP/SMA). Pelatih menginput statistik melalui <strong style={{ color: "var(--teal)" }}>Digital Scoreboard</strong> yang menghasilkan Box Score lengkap:
                </p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 16 }}>
                  {["POS", "MINS", "PTS", "FG", "FG%", "2P", "2P%", "3P", "3P%", "FT", "FT%", "OFF", "DEF", "REB", "AST", "TO", "STL", "BLK", "BLKR", "PF", "FLS ON", "+/-", "INDEX"].map(v => (
                    <span key={v} style={{ fontSize: 9, padding: "4px 8px", background: "rgba(20,184,166,0.15)", color: "var(--teal)", borderRadius: 4, fontWeight: 700, fontFamily: "var(--mono)" }}>{v}</span>
                  ))}
                </div>
                <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  <div style={{ borderRadius: 12, overflow: "hidden", border: "1px solid rgba(255,255,255,0.05)" }}>
                    <img src="src/assets/tampilan scoreboard input stats.jpg" alt="Input" style={{ width: "100%", height: "auto", display: "block" }} />
                    <p style={{ fontSize: 10, textAlign: "center", padding: "8px 0", background: "rgba(0,0,0,0.3)", color: "rgba(255,255,255,0.4)" }}>INPUT PROCESS</p>
                  </div>
                  <div style={{ borderRadius: 12, overflow: "hidden", border: "1px solid rgba(255,255,255,0.05)" }}>
                    <img src="src/assets/tampilan statistic pemain.png" alt="Output" style={{ width: "100%", height: "auto", display: "block" }} />
                    <p style={{ fontSize: 10, textAlign: "center", padding: "8px 0", background: "rgba(0,0,0,0.3)", color: "rgba(255,255,255,0.4)" }}>PLAYER REPORT OUTPUT</p>
                  </div>
                </div>
              </div>
            </Reveal>

            {/* Qualitative */}
            <Reveal delay={200}>
              <div style={{ padding: 32, background: "rgba(255,255,255,0.03)", borderRadius: 24, border: "1px solid rgba(244,240,229,0.1)" }}>
                <p className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--burgundy-soft)", marginBottom: 16 }}>02 / DATA KUALITATIF (ALL LEVELS)</p>
                <h3 className="h3" style={{ margin: "0 0 16px 0", color: "var(--cream)" }}>Professional Coaching Assessment</h3>
                <p style={{ fontSize: 15, color: "rgba(244,240,229,0.72)", lineHeight: 1.6, margin: 0 }}>
                  Berupa catatan evaluasi mendalam dari pelatih. Penilaian ini bersifat fundamental dan diterapkan di seluruh level pembinaan (SD/SMP/SMA) untuk membentuk karakter dan teknik dasar:
                </p>
                
                <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 14 }}>
                  {[
                    { label: "Technical Skill", desc: "Detail teknik dasar: Shooting form, Footwork, & Ball Handling." },
                    { label: "Decision Making", desc: "Kecerdasan membaca situasi (Game IQ) & pemilihan opsi serangan." },
                    { label: "Positioning (IQ)", desc: "Kesadaran posisi tanpa bola (Off-ball movement) & Defensive rotation." },
                    { label: "Work Ethic", desc: "Kedisiplinan, semangat latihan, & sikap dalam tim." }
                  ].map(item => (
                    <div key={item.label} style={{ padding: 18, background: "rgba(255,255,255,0.04)", borderRadius: 12, border: "1px solid rgba(255,255,255,0.03)" }}>
                      <p style={{ margin: 0, fontWeight: 700, color: "var(--teal)", fontSize: 14 }}>{item.label}</p>
                      <p style={{ margin: "4px 0 0 0", fontSize: 13, color: "rgba(244,240,229,0.6)" }}>{item.desc}</p>
                    </div>
                  ))}
                </div>

                <div style={{ marginTop: 28, padding: 20, border: "1px dashed var(--teal)", borderRadius: 16, background: "rgba(20,184,166,0.05)" }}>
                  <p style={{ margin: 0, fontSize: 13, fontStyle: "italic", color: "var(--cream)", lineHeight: 1.6 }}>
                    "Penilaian kualitatif memastikan bahwa setiap pemain tidak hanya tumbuh secara statistik, tetapi juga memiliki fundamental dan mentalitas yang benar sebagai seorang atlet."
                  </p>
                </div>
              </div>
            </Reveal>
          </div>
        </div>

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

      {/* APP USE IN SCHOOL PROGRAM */}
      <section className="surface-burgundy section" style={{ position: "relative", overflow: "hidden" }}>
        <div className="court-lines" aria-hidden="true" style={{ opacity: 0.5 }}></div>
        <span className="watermark" style={{ fontSize: "clamp(180px, 28vw, 460px)", right: "-40px", top: "-30px", color: "var(--fg)", opacity: 0.10 }}>05</span>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 60 }} className="about-grid">
            <Reveal>
              <div style={{ display: "flex", gap: 14, marginBottom: 18 }}>
                <span className="mono" style={{ fontSize: 12, letterSpacing: "0.22em", color: "var(--fg)", opacity: 0.7 }}>05 / IN SCHOOL</span>
              </div>
              <h2 className="h1" style={{ margin: 0 }}>
                Peran Aplikasi<br />dalam <span style={{ color: "var(--fg)", opacity: 0.6 }}>Program Sekolah.</span>
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: "rgba(244,240,229,0.88)" }}>
                GH Gambit Stats Mobile App menjadi salah satu dukungan digital dalam GH Gambit School Development. Aplikasi ini membantu pemain melihat data kehadiran mereka sendiri, sementara pelatih dan sekolah tetap dapat menjalankan sistem absensi yang fleksibel sesuai kebutuhan.
              </p>
            </Reveal>
          </div>

          <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid rgba(244,240,229,0.18)" }} className="role-grid">
            {[
              { num: "01", t: "Untuk Pemain", d: "Pemain dapat melihat rekap attendance mereka melalui akun aplikasi." },
              { num: "02", t: "Untuk Pelatih", d: "Pelatih tetap dapat membantu proses absensi, terutama untuk siswa yang belum memiliki HP." },
              { num: "03", t: "Untuk Sekolah", d: "Sekolah dapat memperoleh rekap kehadiran yang lebih tertata sebagai bagian dari monitoring kegiatan ekskul." },
              { num: "04", t: "Fleksibel", d: "Sistem aplikasi tidak harus dipaksakan ke semua siswa. Implementasinya dapat menyesuaikan usia, kebijakan sekolah, dan kebutuhan program." },
            ].map((c, i) => (
              <Reveal key={c.num} delay={i * 60}>
                <div style={{ padding: "32px 22px", borderRight: i < 3 ? "1px solid rgba(244,240,229,0.18)" : "none", height: "100%", display: "flex", flexDirection: "column", gap: 16 }} className="role-cell">
                  <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--fg)", opacity: 0.7 }}>ROLE / {c.num}</span>
                  <h3 className="h3" style={{ margin: 0 }}>{c.t}</h3>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "rgba(244,240,229,0.85)" }}>{c.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

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

      {/* ATTENDANCE FLOW */}
      <section className="section" style={{ position: "relative" }}>
        <span className="watermark" style={{ fontSize: "clamp(180px, 26vw, 420px)", left: "-30px", top: "10px", color: "var(--fg)" }}>FLOW</span>
        <div className="container" style={{ position: "relative" }}>
          <Reveal>
            <SectionTitle eyebrow="Attendance Flow" number="06" title="Alur Monitoring Kehadiran." description="Berikut contoh alur bagaimana attendance pemain dapat dimonitor melalui program GH Gambit School Development dan GH Gambit Stats Mobile App." />
          </Reveal>

          <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr", gap: 0 }}>
            {[
              { t: "Sesi Ekskul Berlangsung", d: "Kegiatan latihan basket sekolah dilaksanakan sesuai jadwal." },
              { t: "Proses Absensi Pemain", d: "Kehadiran pemain dapat dicatat melalui scan QR atau dibantu oleh pelatih." },
              { t: "Data Kehadiran Tercatat", d: "Attendance pemain didokumentasikan untuk keperluan monitoring." },
              { t: "Pemain Melihat Rekap", d: "Pemain yang memiliki akses aplikasi dapat login dan melihat rekap kehadiran mereka." },
              { t: "Rekap untuk Sekolah", d: "Jika dibutuhkan, data attendance dapat dirangkum menjadi laporan bulanan bagi pihak sekolah." },
            ].map((s, i) => (
              <Reveal key={i} delay={i * 80}>
                <div style={{ display: "grid", gridTemplateColumns: "120px 80px 1fr", gap: 24, padding: "28px 0", borderTop: "1px solid var(--line)", alignItems: "start" }} className="flow-row">
                  <span className="display" style={{ fontSize: 42, color: "transparent", WebkitTextStroke: "1px var(--teal)", lineHeight: 1 }}>0{i + 1}</span>
                  <div style={{ position: "relative", height: "100%", display: "flex", justifyContent: "center", paddingTop: 10 }}>
                    <span style={{ width: 12, height: 12, borderRadius: "50%", background: "var(--teal)", marginTop: 2, boxShadow: "0 0 0 5px rgba(20,184,166,0.18)" }}></span>
                  </div>
                  <div>
                    <h3 className="h2" style={{ margin: 0 }}>{s.t}</h3>
                    <p style={{ margin: "10px 0 0", fontSize: 15, lineHeight: 1.65, color: "var(--fg-muted)", maxWidth: 720 }}>{s.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>

          <div style={{ marginTop: 36, padding: 24, border: "1px dashed var(--line-strong)", display: "flex", gap: 16, alignItems: "flex-start" }}>
            <span style={{ flex: "0 0 auto", width: 26, height: 26, border: "1px solid var(--teal)", color: "var(--teal)", display: "grid", placeItems: "center", fontFamily: "var(--mono)", fontSize: 11 }}>!</span>
            <p style={{ margin: 0, fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.65 }}>
              Alur ini bersifat fleksibel dan dapat disesuaikan dengan ketentuan sekolah, usia siswa, serta kondisi implementasi di lapangan.
            </p>
          </div>
        </div>

        <style>{`
          @media (max-width: 700px) {
            .flow-row { grid-template-columns: 50px 1fr !important; }
            .flow-row > div:nth-child(2) { display: none; }
          }
        `}</style>
      </section>

      {/* CTA */}
      <section className="surface-cream section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(160px, 26vw, 420px)", right: "-30px", bottom: "-40px", color: "var(--burgundy)" }}>READY</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)" }}>
                Ingin mengenal program dan <span style={{ color: "var(--burgundy)" }}>sistemnya</span> lebih lanjut?
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 16, color: "var(--fg-muted)", lineHeight: 1.65 }}>
                GH Gambit School Development tidak hanya menawarkan pembinaan basket, tetapi juga dukungan monitoring yang membantu kegiatan ekskul menjadi lebih tertata, modern, dan profesional.
              </p>
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 12 }}>
                <Button variant="primary" to="/partnership">Lihat Bentuk Kerja Sama</Button>
                <Button variant="outline-dark" href="https://wa.me/6281398699869" target="_blank">Hubungi via WhatsApp</Button>
              </div>
              <div style={{ marginTop: 24, paddingTop: 24, borderTop: "1px solid var(--line-dark)", display: "flex", flexDirection: "column", gap: 6 }}>
                <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>WHATSAPP · 0813 9869 9869</p>
                <p className="mono" style={{ margin: 0, fontSize: 10, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>EMAIL · ghgambit.basketball@gmail.com</p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

window.AppPage = AppPage;