/* ================= INNER PAGES ================= */
const { useState } = React;

function JoinBand() {
  return (
    <section className="section section--tight">
      <div className="wrap">
        <div className="ctab">
          <div>
            <Eyebrow id="Gratis & terbuka untuk semua" en="Join Us" light />
            <h2 className="h2" style={{ marginTop: 16 }}>Siap bergerak bersama<br />Gajah Muda Nusantara?</h2>
          </div>
          <div className="ctab__act">
            <p style={{ marginBottom: 8 }}>Pendaftaran terbuka untuk WNI usia 17–40 tahun.</p>
            <a className="btn btn--onred btn--lg" href="daftar.html">Daftar Sekarang <Arrow /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- TENTANG ---------------- */
function TentangPage() {
  return (
    <React.Fragment>
      <PageHero eyebrow="Tentang Kami" en="About Us"
        title={<>Rumah bagi anak muda yang ingin <em className="serif-it">membuat perubahan</em>.</>}
        sub="Mengenal lebih dekat siapa kami, apa yang kami perjuangkan, dan perjalanan gerakan ini." />

      <section className="section">
        <div className="wrap about__grid">
          <div className="about__media">
            <Placeholder label="foto: kebersamaan anggota GMN" />
            <div className="about__chip"><b>5</b><span>tahun bergerak bersama anak muda Nusantara</span></div>
          </div>
          <div>
            <Eyebrow id="Kisah Kami" en="Our Story" />
            <h2 className="h2" style={{ marginTop: 18 }}>Lahir dari keberanian generasi muda.</h2>
            <p className="lead" style={{ marginTop: 18 }}>
              Gajah Muda Nusantara lahir dari keyakinan bahwa masa depan Indonesia ditentukan oleh
              keberanian generasi mudanya. Kami menghimpun pelajar, mahasiswa, dan pekerja muda dari
              Sabang sampai Merauke untuk belajar, berorganisasi, dan bergerak bersama.
            </p>
            <p className="lead" style={{ marginTop: 14 }}>
              Sebagai ormas kepemudaan di bawah naungan Partai Solidaritas Indonesia, kami percaya
              politik yang sehat dimulai dari anak muda yang melek isu, berani jujur, dan mau turun
              ke akar rumput.
            </p>
          </div>
        </div>
      </section>

      <section className="section about" style={{ paddingTop: 0, background: "transparent" }}>
        <div className="wrap">
          <div className="vm vm--row">
            <div className="vm__card">
              <h3><i>VISI</i> Visi</h3>
              <p>Mewujudkan generasi muda Indonesia yang berintegritas, melek politik, dan menjadi
                penggerak perubahan menuju bangsa yang adil dan terbuka.</p>
            </div>
            <div className="vm__card">
              <h3><i>MISI</i> Misi</h3>
              <ul className="vm__list">
                <li>Membangun kesadaran politik dan kebangsaan anak muda lintas daerah.</li>
                <li>Mencetak kader pemimpin muda yang bersih dan kompeten.</li>
                <li>Mendorong aksi sosial, ekonomi, dan literasi digital di akar rumput.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--cream)" }}>
        <div className="wrap">
          <div className="shead"><div className="shead__t">
            <Eyebrow id="Nilai-Nilai" en="Our Values" />
            <h2 className="h2">Empat nilai yang kami pegang.</h2>
          </div></div>
          <div className="values">
            {GMN.values.map(([t, d], i) => (
              <div className="value" key={t}>
                <span className="value__n">0{i + 1}</span>
                <h3 className="h3">{t}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="shead"><div className="shead__t">
            <Eyebrow id="Perjalanan" en="Timeline" />
            <h2 className="h2">Dari deklarasi hingga<br />gerakan nasional.</h2>
          </div></div>
          <div className="timeline">
            {GMN.timeline.map(([year, title, desc]) => (
              <div className="tl" key={year}>
                <div className="tl__year">{year}</div>
                <div className="tl__body"><h3 className="h3">{title}</h3><p>{desc}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <JoinBand />
    </React.Fragment>
  );
}

/* ---------------- PROGRAM ---------------- */
function ProgramPage() {
  return (
    <React.Fragment>
      <PageHero eyebrow="Program & Kegiatan" en="Our Programs"
        title={<>Enam pilar gerakan,<br /><em className="serif-it">satu tujuan</em> bersama.</>}
        sub="Dari sekolah politik hingga aksi hijau — ruang bagi setiap anak muda untuk berkontribusi." />

      <section className="section">
        <div className="wrap">
          <div className="progd__grid">
            {GMN.programs.map(([num, cat, title, desc, detail, audience], i) => (
              <article className="progd" key={num}>
                <div className="progd__media"><Placeholder red={i % 2 === 1} label={"foto: " + cat.toLowerCase()} /></div>
                <div className="progd__body">
                  <span className="num">{num} / {cat}</span>
                  <div className="progd__head">
                    <div className="prog__ic"><ProgIcon i={i} /></div>
                    <h3 className="h3">{title}</h3>
                  </div>
                  <p>{detail}</p>
                  <div className="progd__meta"><span>Untuk</span>{audience}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--cream)" }}>
        <div className="wrap">
          <div className="shead"><div className="shead__t">
            <Eyebrow id="Agenda Mendatang" en="Upcoming" />
            <h2 className="h2">Catat tanggalnya,<br />ikut bergerak.</h2>
          </div>
          <a className="btn btn--ghost" href="daftar.html">Jadi anggota <Arrow /></a>
          </div>
          <div className="agenda">
            {GMN.agenda.map(([date, title, place]) => (
              <div className="agenda__row" key={title}>
                <div className="agenda__date">{date}</div>
                <div className="agenda__title">{title}</div>
                <div className="agenda__place">{place}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <JoinBand />
    </React.Fragment>
  );
}

/* ---------------- GALERI ---------------- */
function GaleriPage() {
  const cats = ["Semua", "Aksi Sosial", "Pendidikan", "Kebudayaan", "Lingkungan"];
  const [active, setActive] = useState("Semua");
  const items = GMN.gallery.filter((g) => active === "Semua" || g[3] === active);
  return (
    <React.Fragment>
      <PageHero eyebrow="Galeri" en="Gallery"
        title={<>Wajah gerakan dari <em className="serif-it">penjuru Nusantara</em>.</>}
        sub="Dokumentasi kegiatan, aksi, dan kebersamaan kader GMN di berbagai daerah." />
      <section className="section">
        <div className="wrap">
          <div className="chips">
            {cats.map((c) => (
              <button key={c} className={"chip" + (active === c ? " is-active" : "")} onClick={() => setActive(c)}>{c}</button>
            ))}
          </div>
          <div className="gal__grid" style={{ marginTop: 28 }}>
            {items.map(([cls, label, place], i) => (
              <Placeholder key={label + place} className={active === "Semua" ? cls : ""} red={i % 3 === 0} label={label + " · " + place} />
            ))}
          </div>
        </div>
      </section>
      <JoinBand />
    </React.Fragment>
  );
}

/* ---------------- BERITA ---------------- */
function BeritaPage() {
  const [feat, ...rest] = GMN.news;
  return (
    <React.Fragment>
      <PageHero eyebrow="Berita & Kabar" en="News"
        title={<>Kabar terbaru<br />dari <em className="serif-it">gerakan</em>.</>}
        sub="Liputan kegiatan, aksi, dan capaian Gajah Muda Nusantara di seluruh cabang." />
      <section className="section">
        <div className="wrap">
          <a className="feature" href="#/berita">
            <div className="feature__media"><Placeholder red label="foto: liputan utama" /></div>
            <div className="feature__body">
              <div className="news__meta"><span className="news__cat">{feat[0]}</span><span>•</span><span>{feat[1]}</span></div>
              <h2 className="h2" style={{ marginTop: 16 }}>{feat[2]}</h2>
              <p className="lead" style={{ marginTop: 16 }}>{feat[3]}</p>
              <span className="more" style={{ marginTop: 20 }}>Baca selengkapnya <Arrow /></span>
            </div>
          </a>
          <div className="news__grid" style={{ marginTop: 40 }}>
            {rest.map(([cat, date, title, excerpt], i) => (
              <a className="news__card" key={i} href="#/berita">
                <Placeholder red={i % 3 === 1} label="foto: liputan kegiatan" />
                <div className="news__body">
                  <div className="news__meta"><span className="news__cat">{cat}</span><span>•</span><span>{date}</span></div>
                  <h3>{title}</h3>
                  <p>{excerpt}</p>
                  <span className="more">Baca selengkapnya <Arrow /></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
      <JoinBand />
    </React.Fragment>
  );
}

/* ---------------- PENGURUS ---------------- */
function PengurusPage() {
  return (
    <React.Fragment>
      <PageHero eyebrow="Pengurus" en="Our People"
        title={<>Oleh anak muda, untuk <em className="serif-it">anak muda</em>.</>}
        sub="Struktur kepengurusan dewan pimpinan pusat Gajah Muda Nusantara periode 2024–2028." />
      <section className="section">
        <div className="wrap">
          <div className="shead"><div className="shead__t">
            <Eyebrow id="Dewan Pimpinan Pusat" en="Central Board" />
            <h2 className="h2">Pengurus inti.</h2>
          </div></div>
          <div className="lead__grid">
            {GMN.leaders.map(([name, role, bio], i) => (
              <article className="lead__card" key={name}>
                <Placeholder red={i % 2 === 1} label="potret pengurus" />
                <h3>{name}</h3>
                <div className="lead__role">{role}</div>
                <p>{bio}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
      <section className="section" style={{ background: "var(--cream)" }}>
        <div className="wrap">
          <div className="shead"><div className="shead__t">
            <Eyebrow id="Struktur Bidang" en="Divisions" />
            <h2 className="h2">Empat bidang kerja.</h2>
          </div></div>
          <div className="bidang">
            {GMN.bidang.map(([name, desc], i) => (
              <div className="bidang__card" key={name}>
                <span className="bidang__n">0{i + 1}</span>
                <div><h3 className="h3">{name}</h3><p>{desc}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <JoinBand />
    </React.Fragment>
  );
}

/* ---------------- KONTAK ---------------- */
function KontakPage() {
  const [sent, setSent] = useState(false);
  return (
    <React.Fragment>
      <PageHero eyebrow="Kontak" en="Contact"
        title={<>Mari <em className="serif-it">terhubung</em>.</>}
        sub="Punya pertanyaan, usulan kerja sama, atau ingin tahu cabang terdekat? Hubungi kami." />
      <section className="section">
        <div className="wrap contact">
          <div className="contact__info">
            <Eyebrow id="Informasi" en="Reach Us" />
            <h2 className="h2" style={{ marginTop: 16 }}>Sekretariat Nasional</h2>
            <ul className="contact__list">
              {GMN.contact.map(([label, val]) => (
                <li key={label}><span>{label}</span>{val}</li>
              ))}
            </ul>
            <div className="contact__map"><Placeholder label="peta lokasi sekretariat" /></div>
            <div className="contact__social">
              {["Instagram", "TikTok", "X / Twitter", "YouTube"].map((s) => (
                <a key={s} href="#" className="contact__soc">{s}</a>
              ))}
            </div>
          </div>
          <div className="contact__form card">
            {sent ? (
              <div className="contact__sent">
                <div className="tick"><svg width="34" height="34" viewBox="0 0 40 40" fill="none"><path d="M10 21l6 6 14-15" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" /></svg></div>
                <h3 className="h3" style={{ marginTop: 18 }}>Pesan terkirim!</h3>
                <p style={{ marginTop: 10 }}>Terima kasih sudah menghubungi kami. Tim kami akan membalas secepatnya.</p>
                <button className="btn btn--ghost" style={{ marginTop: 22 }} onClick={() => setSent(false)}>Kirim pesan lain</button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <h3 className="h3">Kirim pesan</h3>
                <p style={{ margin: "8px 0 22px", fontSize: 15 }}>Isi formulir, kami balas via email.</p>
                <div className="fgrid">
                  <div className="field"><label>Nama lengkap *</label><input className="input" required placeholder="Nama kamu" /></div>
                  <div className="field"><label>Email *</label><input className="input" required type="email" placeholder="nama@email.com" /></div>
                  <div className="field field--full"><label>Subjek *</label><input className="input" required placeholder="Perihal pesan" /></div>
                  <div className="field field--full"><label>Pesan *</label><textarea className="textarea" required placeholder="Tulis pesanmu di sini"></textarea></div>
                </div>
                <button type="submit" className="btn btn--primary btn--lg" style={{ marginTop: 22 }}>Kirim Pesan <Arrow /></button>
              </form>
            )}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { TentangPage, ProgramPage, GaleriPage, BeritaPage, PengurusPage, KontakPage });