/* ================= HOME PAGE ================= */

function Hero() {
  return (
    <section className="hero">
      <div className="hero__grid"></div>
      <div className="wrap hero__in">
        <div>
          <Eyebrow id="Ormas Kepemudaan" en="PSI" light />
          <h1 className="display">
            Gajah Muda<br />Nusantara, <em className="serif-it">bergerak</em><br />untuk Indonesia.
          </h1>
          <p className="hero__lead">
            Wadah anak muda lintas daerah di bawah naungan Partai Solidaritas Indonesia — berani,
            terbuka, dan progresif. Tempat ide berubah jadi aksi nyata.
          </p>
          <div className="hero__cta">
            <a className="btn btn--onred btn--lg" href="daftar.html">Daftar Anggota <Arrow /></a>
            <a className="btn btn--ghost-light btn--lg" href="#/tentang">Kenali Kami</a>
          </div>
        </div>
        <div className="hero__art">
          <div className="hero__badge">
            <b>2026</b>
            <small>Gerakan kebangsaan anak muda Nusantara</small>
          </div>
          <Placeholder className="a1" red label="foto: aksi lapangan" />
          <Placeholder className="a2" label="foto: kegiatan anggota" />
        </div>
      </div>
      <div className="statbar">
        <div className="wrap statbar__in">
          {GMN.stats.map(([n, l]) => (
            <div className="stat tnum" key={l}><b>{n}</b><span>{l}</span></div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const words = ["Solidaritas", "Keberanian", "Kebangsaan", "Gotong Royong", "Anak Muda", "Demokrasi", "Nusantara"];
  const row = [...words, ...words];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {row.map((w, i) => <span key={i}>{w}</span>)}
      </div>
    </div>
  );
}

function AboutPreview() {
  return (
    <section className="section about">
      <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="Tentang Kami" en="About Us" />
          <h2 className="h2" style={{ marginTop: 18 }}>
            Rumah bagi anak muda yang ingin <span className="serif-it">membuat perubahan</span>.
          </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>
          <div className="vm">
            <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>
          <a className="btn btn--ghost" href="#/tentang" style={{ marginTop: 26 }}>Pelajari tentang kami <Arrow /></a>
        </div>
      </div>
    </section>
  );
}

function ProgramPreview() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="shead">
          <div className="shead__t">
            <Eyebrow id="Program & Kegiatan" en="Our Programs" />
            <h2 className="h2">Enam pilar gerakan,<br />satu tujuan bersama.</h2>
          </div>
          <a className="btn btn--ghost" href="#/program">Lihat semua program <Arrow /></a>
        </div>
        <div className="prog__grid">
          {GMN.programs.slice(0, 4).map(([num, cat, title, desc], i) => (
            <a className="prog__card" key={num} href="#/program">
              <span className="num">{num} / {cat}</span>
              <div className="prog__ic"><ProgIcon i={i} /></div>
              <h3 className="h3">{title}</h3>
              <p>{desc}</p>
              <span className="more">Selengkapnya <Arrow /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function GalleryPreview() {
  return (
    <section className="section gal">
      <div className="wrap">
        <div className="shead">
          <div className="shead__t">
            <Eyebrow id="Galeri" en="In Action" light />
            <h2 className="h2">Wajah-wajah gerakan,<br />dari seluruh penjuru Nusantara.</h2>
          </div>
          <a className="btn btn--ghost-light" href="#/galeri">Buka galeri <Arrow /></a>
        </div>
        <div className="gal__grid">
          {GMN.gallery.slice(0, 7).map(([cls, label, place], i) => (
            <Placeholder key={i} className={cls} red={i % 3 === 0} label={label + " · " + place} />
          ))}
        </div>
      </div>
    </section>
  );
}

function NewsPreview() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="shead">
          <div className="shead__t">
            <Eyebrow id="Berita & Kabar" en="Latest News" />
            <h2 className="h2">Kabar terbaru dari gerakan.</h2>
          </div>
          <a className="btn btn--ghost" href="#/berita">Semua berita <Arrow /></a>
        </div>
        <div className="news__grid">
          {GMN.news.slice(0, 3).map(([cat, date, title, excerpt], i) => (
            <a className="news__card" key={i} href="#/berita">
              <Placeholder red={i === 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>
  );
}

function LeadersPreview() {
  return (
    <section className="section" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div className="shead">
          <div className="shead__t">
            <Eyebrow id="Pengurus" en="Our People" />
            <h2 className="h2">Digerakkan oleh anak muda,<br />untuk anak muda.</h2>
          </div>
          <a className="btn btn--ghost" href="#/pengurus">Lihat pengurus <Arrow /></a>
        </div>
        <div className="lead__grid">
          {GMN.leaders.slice(0, 4).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>
  );
}

function Testimoni() {
  return (
    <section className="section testi">
      <div className="wrap">
        <div className="shead">
          <div className="shead__t">
            <Eyebrow id="Cerita Anggota" en="Member Stories" />
            <h2 className="h2">Kenapa mereka memilih bergerak bersama.</h2>
          </div>
        </div>
        <div className="testi__grid">
          {GMN.testi.map(([quote, name, role], i) => (
            <figure className="testi__card" key={name}>
              <div className="q">“</div>
              <blockquote>{quote}</blockquote>
              <figcaption className="testi__who">
                <Placeholder red={i % 2 === 0} label="" />
                <div><b>{name}</b><span>{role}</span></div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function JoinCTA() {
  return (
    <section className="section" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div className="shead">
          <div className="shead__t">
            <Eyebrow id="Cara Bergabung" en="How to Join" />
            <h2 className="h2">Empat langkah jadi bagian<br />dari gerakan.</h2>
          </div>
        </div>
        <div className="steps__grid">
          {GMN.steps.map(([t, d], i) => (
            <div className="step" key={i}><h3>{t}</h3><p>{d}</p></div>
          ))}
        </div>
        <div className="ctab" style={{ marginTop: "clamp(48px,6vw,72px)" }}>
          <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>
  );
}

function HomePage() {
  return (
    <React.Fragment>
      <Hero />
      <Marquee />
      <AboutPreview />
      <ProgramPreview />
      <GalleryPreview />
      <NewsPreview />
      <LeadersPreview />
      <Testimoni />
      <JoinCTA />
    </React.Fragment>
  );
}

window.HomePage = HomePage;