function History() {
  return (
    <main className="page-enter" data-screen-label="History">
      <PageHeader
        number="04"
        eyebrow="Sejarah & Prestasi Klub"
        title="Sejarah & Prestasi Klub."
        subtitle="Dibangun melalui latihan, kompetisi, kerja sama tim, dan pengembangan pemain yang berkelanjutan."
      />

      {/* Intro */}
      <section className="section" style={{ paddingTop: 60 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60, alignItems: "start" }} className="about-grid">
            <Reveal>
              <p className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal)", marginBottom: 16 }}>OVERVIEW</p>
              <h2 className="h1" style={{ margin: 0 }}>
                Perjalanan dibangun<br />
                dari <span style={{ color: "var(--burgundy)" }}>kerja keras</span>.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7, color: "var(--fg-muted)" }}>
                Meskipun tergolong klub baru, GH Gambit membawa standar baru dalam kualitas pembinaan.
                Fokus kami bukan pada berapa lama kami sudah berdiri, melainkan pada seberapa cepat dan terukur kami membantu pemain mencapai level terbaik mereka melalui sistem yang lebih adaptif, efisien, dan profesional.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Trophy section on cream */}
      <section className="surface-cream section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(220px, 36vw, 560px)", left: "-40px", top: "-40px", color: "var(--ink)" }}>QUALITY</span>
        <span className="watermark" style={{ fontSize: "clamp(180px, 28vw, 460px)", right: "-40px", bottom: "-40px", color: "var(--burgundy)" }}>SYSTEM</span>

        <div className="container" style={{ position: "relative" }}>
          <Reveal>
            <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 24 }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--teal-deep)" }}>ACHIEVEMENTS & MILESTONES</span>
              <span style={{ flex: 1, height: 1, background: "var(--line-dark)" }}></span>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--fg-muted)" }}>FOCUS ON PROCESS</span>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <h2 className="h1" style={{ margin: 0, color: "var(--burgundy)", maxWidth: 900 }}>
              Kualitas Lebih Utama<br />dari Sekadar Kuantitas.
            </h2>
          </Reveal>

          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="trophy-grid">
            {window.TROPHIES.map((t, i) => (
              <Reveal key={t.id} delay={i * 60}>
                <TrophyCard trophy={t} idx={i} />
              </Reveal>
            ))}
          </div>
        </div>

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

      {/* Timeline */}
      <section className="section" style={{ position: "relative", overflow: "hidden" }}>
        <span className="watermark" style={{ fontSize: "clamp(180px, 28vw, 440px)", right: "-40px", top: "20px", color: "var(--fg)" }}>JOURNEY</span>
        <div className="container" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }} className="about-grid">
            <Reveal>
              <div style={{ position: "sticky", top: 120 }} className="tl-aside">
                <SectionTitle eyebrow="Timeline" number="04A" title="Perjalanan Klub." description="Beberapa milestone penting dalam pengembangan GH Gambit Basketball Club hingga saat ini." />
              </div>
            </Reveal>

            <Reveal delay={120}>
              <div style={{ paddingLeft: 0 }}>
                <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                  {window.TIMELINE.map((t, i) => (
                    <li key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr", gap: 24, padding: "26px 0", borderTop: "1px solid var(--line)" }} className="tl-row">
                      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                        <span className="display" style={{ fontSize: 36, color: i === window.TIMELINE.length - 1 ? "var(--teal)" : "var(--fg)" }}>{t.year}</span>
                        <span style={{ width: 24, height: 1, background: i === window.TIMELINE.length - 1 ? "var(--teal)" : "var(--line-strong)" }}></span>
                      </div>
                      <div>
                        <h3 className="h3" style={{ margin: 0, color: "var(--fg)" }}>{t.title}</h3>
                        <p style={{ margin: "10px 0 0", fontSize: 15, lineHeight: 1.65, color: "var(--fg-muted)" }}>{t.text}</p>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          </div>
        </div>

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

      {/* Closing */}
      <section className="surface-burgundy section" style={{ position: "relative", overflow: "hidden" }}>
        <div className="court-lines" aria-hidden="true" style={{ opacity: 0.6 }}></div>
        <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, fontSize: "clamp(40px, 6vw, 76px)" }}>
                Bagian terbaiknya<br />
                <span style={{ color: "var(--fg)", opacity: 0.6 }}>masih akan datang.</span>
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ margin: 0, fontSize: 16, color: "rgba(244,240,229,0.85)", lineHeight: 1.6 }}>
                Setiap musim adalah kesempatan baru untuk membangun pemain, memperkuat tim, dan menumbuhkan budaya basket yang lebih sehat.
              </p>
              <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Button variant="cream" to="/partnership">Ajukan Kerja Sama</Button>
                <Button variant="outline" to="/coaches">Lihat Staff Pelatih</Button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

window.History = History;