/* global React, MJ */
const { useState: useStateP2 } = React;

/* ============== AKTIVITAS MJ (hal. 6 dokumen pengenalan) ==============
   Delapan aktivitas disebut apa adanya di dokumen. Deskripsi di bawah
   menjelaskan bentuk kegiatannya — jadwal & jam TIDAK dicantumkan
   karena belum ada sumbernya.
   ==================================================================== */
const AKTIVITAS = [
  {
    n: "01",
    name: "Kajian Rutin",
    foto: "assets/foto/halaqoh-ikhwan.jpg",
    fotoAlt: "Peserta kajian menyimak materi di masjid kampus",
    kind: "Keilmuan",
    output: "Pemahaman yang jernih",
    body: "Forum kajian berkala yang jadi denyut utama MJ — ruang menuntut ilmu bersama, mendalami aqidah dan syariat Islam sesuai Al-Qur'an dan As-Sunnah.",
    chips: ["Terbuka untuk umum", "Aqidah & syariat", "Rutin"],
    color: "accent",
    flagship: true
  },
  {
    n: "02",
    name: "Muslimah Islamic Talks",
    foto: "assets/foto/muslimah-islamic-talks.jpg",
    fotoAlt: "Forum kajian muslimah",
    kind: "Keilmuan · Akhwat",
    output: "Ruang khusus muslimah",
    body: "Forum kajian yang dikhususkan bagi mahasiswi muslimah — membahas tema yang dekat dengan keseharian akhwat di kampus, dalam suasana yang nyaman dan saling menguatkan.",
    chips: ["Khusus akhwat", "Tema keseharian", "Diskusi"],
    color: "accent"
  },
  {
    n: "03",
    name: "Pembinaan / Halaqoh",
    foto: "assets/foto/kajian-akhwat.jpg",
    fotoAlt: "Halaqoh kelompok kecil",
    kind: "Kaderisasi",
    output: "Pembinaan berkelanjutan",
    body: "Pembinaan dalam kelompok kecil — inti dari proses kaderisasi MJ. Di sinilah anggota dibina secara berkelanjutan hingga lahir pemahaman yang jernih terhadap aqidah dan syariat Islam.",
    chips: ["Kelompok kecil", "Berkelanjutan", "Inti kaderisasi"],
    color: "accent",
    flagship: true
  },
  {
    n: "04",
    name: "Mabit",
    foto: "assets/foto/mabit-akhwat.jpg",
    fotoAlt: "Kebersamaan peserta mabit",
    kind: "Ruhiyah",
    output: "Penguatan ruhiyah",
    body: "Malam bina iman dan taqwa — menginap bersama untuk mendekatkan diri kepada Allah, memperkuat ruhiyah, sekaligus mempererat ukhuwah antaranggota.",
    chips: ["Menginap", "Qiyamul lail", "Ukhuwah"],
    color: "primary"
  },
  {
    n: "05",
    name: "Event Ikhwan–Akhwat",
    foto: "assets/foto/rihlah-akhwat.jpg",
    fotoAlt: "Kegiatan bersama di luar kampus",
    kind: "Ukhuwah",
    output: "Kebersamaan terjaga",
    body: "Kegiatan bersama yang dirancang dengan tetap menjaga adab dan batasan syar'i — ruang bagi seluruh anggota MJ untuk saling mengenal dan bekerja sama.",
    chips: ["Adab terjaga", "Seluruh anggota", "Kolaboratif"],
    color: "primary"
  },
  {
    n: "06",
    name: "Bakti Sosial",
    foto: "assets/foto/baksos-ikhwan.jpg",
    fotoAlt: "Penggalangan dana bakti sosial",
    kind: "Pengabdian",
    output: "Manfaat nyata",
    body: "Turun langsung ke masyarakat. Wujud nyata bahwa Islam hadir sebagai solusi — bukan sekadar identitas — dan bahwa ilmu yang dipelajari berujung pada amal.",
    chips: ["Turun ke masyarakat", "Amal nyata", "Sosial"],
    color: "primary"
  },
  {
    n: "07",
    name: "Gerakan Kampus",
    kind: "Dakwah",
    output: "Islam hadir di kampus",
    body: "Menghidupkan spirit dakwah di lingkungan kampus — memastikan nilai Islam ikut mewarnai aktivitas intra kampus, dari akademik sampai organisasi.",
    chips: ["Intra kampus", "Syiar", "Kolaborasi lembaga"],
    color: "primary"
  },
  {
    n: "08",
    name: "Konten Dakwah & Sport",
    foto: "assets/foto/sport-akhwat.jpg",
    fotoAlt: "Kegiatan olahraga bersama",
    kind: "Media & Jasmani",
    output: "Dakwah & badan sehat",
    body: "Dakwah lewat konten digital agar pesan Islam menjangkau lebih luas, ditambah kegiatan olahraga bersama — karena badan yang sehat menopang ibadah dan gerak dakwah.",
    chips: ["Konten digital", "Olahraga bersama", "Syiar online"],
    color: "primary"
  }
];

function ProgramSection() {
  const [active, setActive] = useStateP2(0);

  React.useEffect(() => {
    const targets = document.querySelectorAll('.cta-deadline');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.3 });
    targets.forEach(t => io.observe(t));
    return () => io.disconnect();
  }, []);

  return (
    <section id="aktivitas" className="timeline">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">02 — Aktivitas MJ</span>
          <h2>Delapan ruang untuk <span className="italic-serif">bertumbuh</span> bersama.</h2>
          <p className="lede">
            Dari kajian dan halaqoh, mabit, sampai bakti sosial dan konten dakwah — aktivitas MJ dirancang
            agar anggota tumbuh utuh: ilmunya, ruhiyahnya, ukhuwahnya, dan amalnya.
          </p>
        </div>

        <div className="phase-rail reveal" role="tablist">
          {AKTIVITAS.map((p, i) => (
            <button
              key={p.n}
              role="tab"
              aria-selected={active === i}
              className={"phase-pill " + (active === i ? "is-active " : "") + (p.color === 'accent' ? 'is-accent' : '')}
              onClick={() => setActive(i)}
            >
              <span className="phase-pill-n">{p.n}</span>
              <span className="phase-pill-name">{p.name}</span>
            </button>
          ))}
        </div>

        <div className="phase-card reveal">
          <div className="phase-card-l">
            <div className="phase-card-meta">
              <span className="badge"><span className="dot"></span>AKTIVITAS {AKTIVITAS[active].n}</span>
              <span className="phase-month">{AKTIVITAS[active].kind}</span>
            </div>
            <h3 className="phase-card-title">{AKTIVITAS[active].name}</h3>
            <p className="phase-card-body">{AKTIVITAS[active].body}</p>
            <div className="phase-chips">
              {AKTIVITAS[active].chips.map(c => <span key={c} className="phase-chip">{c}</span>)}
            </div>
          </div>
          <div className="phase-card-r">
            {AKTIVITAS[active].foto && (
              <figure className="aktivitas-foto">
                <img src={AKTIVITAS[active].foto} alt={AKTIVITAS[active].fotoAlt}
                     loading="lazy" decoding="async" />
              </figure>
            )}
            <div className="phase-output-label">Yang dibangun</div>
            <div className="phase-output">{AKTIVITAS[active].output}</div>
            {AKTIVITAS[active].flagship && (
              <div className="phase-flag">
                <div className="phase-flag-mark">★</div>
                <div>
                  <div className="phase-flag-title">Agenda inti</div>
                  <div className="phase-flag-sub">Tulang punggung pembinaan di MJ.</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}


/* ============== GALERI — dokumentasi kegiatan ==============
   Sumber foto: dokumen resmi "Pengenalan Majelis Jihad" (hal. 3-7).
   Keterangan dibuat netral & deskriptif; tanggal/lokasi tidak
   dicantumkan karena tidak tertulis di dokumen.
   ========================================================== */
const GALERI = [
  { src: "assets/foto/kajian-akhwat.jpg",          cap: "Halaqoh akhwat",          cls: "is-wide" },
  { src: "assets/foto/halaqoh-ikhwan.jpg",         cap: "Kajian ikhwan" },
  { src: "assets/foto/sport-akhwat.jpg",           cap: "Sport",                   cls: "is-tall" },
  { src: "assets/foto/muslimah-islamic-talks.jpg", cap: "Muslimah Islamic Talks" },
  { src: "assets/foto/mabit-akhwat.jpg",           cap: "Kebersamaan mabit",       cls: "is-wide" },
  { src: "assets/foto/pembinaan-ikhwan.jpg",       cap: "Pembinaan kelompok kecil" },
  { src: "assets/foto/rihlah-akhwat.jpg",          cap: "Kegiatan luar kampus",    cls: "is-tall" },
  { src: "assets/foto/baksos-ikhwan.jpg",          cap: "Bakti sosial" },
];

function GaleriSection() {
  return (
    <section id="galeri" className="pain" style={{paddingTop:'96px'}}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Dokumentasi</span>
          <h2>Yang terjadi <span className="italic-serif">di lapangan.</span></h2>
          <p className="lede">
            Bukan konsep di atas kertas — ini potongan keseharian MJ: halaqoh di masjid kampus,
            kajian muslimah, mabit, olahraga bareng, sampai turun menggalang bantuan.
          </p>
        </div>
        <div className="galeri-grid reveal delay-1">
          {GALERI.map((g, i) => (
            <figure key={i} className={"galeri-item " + (g.cls || "")}>
              <img src={g.src} alt={g.cap} loading="lazy" decoding="async" />
              <figcaption className="galeri-cap">{g.cap}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== VISI & MISI (hal. 4–5) ============== */
function MisiSection() {
  return (
    <section id="misi" className="mentor">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">03 — Visi &amp; Misi</span>
          <h2>Arah gerak <span className="italic-serif">Majelis Jihad.</span></h2>
        </div>

        <div className="pain-promise reveal" style={{marginTop:0, marginBottom:'56px'}}>
          <div className="pain-promise-label">Visi</div>
          <p className="pain-promise-text">
            Sebagai sarana dan wahana pengembangan <b>kreativitas dan keilmuan</b> mahasiswa muslim
            serta memperkuat <span className="italic-serif">aqidah, akhlak, dan ukhuwah islamiyah</span>.
          </p>
        </div>

        <div className="section-head reveal" style={{marginBottom:'38px'}}>
          <span className="eyebrow muted">Lima misi</span>
        </div>

        <div className="mentor-grid">
          {MJ.misi.map((m, i) => (
            <div key={i} className={"mentor-card lift reveal delay-" + (i+1) + " mentor-" + (i % 2 === 0 ? "emerald" : "amber")}>
              <div className="mentor-id">MISI 0{i+1}</div>
              <div className="divisi-icon">{["◈","◇","◆","◉","★"][i]}</div>
              <div className="mentor-name" style={{fontSize:'19px', lineHeight:1.3}}>{m}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProgramSection, GaleriSection, MisiSection });