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

/* ============== GABUNG — pengantar sebelum kuesioner ==============
   Harapan untuk anggota baru (hal. 7 dokumen pengenalan).
   Formulir sesungguhnya ada di KuesionerSection.
   ================================================================ */
function GabungSection() {
  return (
    <section id="gabung" className="mentor">
      <div className="wrap">
        <div className="gabung-band reveal">
          <div className="gabung-l">
            <span className="eyebrow">Ahlan wa sahlan</span>
            <h2 style={{marginTop:'14px'}}>
              Jadikan MJ <span className="italic-serif">rumah iman,</span><br/>bukan sekadar organisasi.
            </h2>
            <p className="cta-lede" style={{marginTop:'18px'}}>
              Terbuka untuk seluruh mahasiswa muslim Universitas Dipa Makassar. Kenali dulu minat dan
              arahmu lewat <b>Student Interest Card</b> di bawah — pengurus akan menghubungimu
              dengan info kegiatan yang paling sesuai.
            </p>
            <Magnet>
              <a href="#kuesioner" className="btn btn-primary" style={{marginTop:'26px'}}>
                Isi Student Interest Card <span className="btn-arrow">→</span>
              </a>
            </Magnet>
          </div>
          <div className="gabung-r">
            <div className="gabung-r-label">Harapan kami untuk anggota baru</div>
            <ul className="cta-perks">
              {MJ.harapan.map((h, i) => (
                <li key={i}><span className="cta-check">{i + 1}</span> {h}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== FAQ ==============
   Jawaban disusun HANYA dari dokumen pengenalan MJ.
   Pertanyaan soal jadwal/biaya/sekretariat sengaja tidak dibuat
   karena datanya belum ada — jangan mengarang.
   ================================= */
const FAQS = [
  {
    q: "Apa itu Majelis Jihad?",
    a: "Majelis Jihad — atau Majelis Kajian Mahasiswa Dipa, yang lebih dikenal dengan sebutan MJ — merupakan UKM Lembaga Dakwah Kampus Universitas Dipa Makassar yang dibentuk pada tahun 1995, berfokus pada pembinaan dan pergerakan islami."
  },
  {
    q: "Siapa saja yang boleh bergabung?",
    a: "MJ terbuka bagi mahasiswa muslim Universitas Dipa Makassar yang ingin belajar dan bertumbuh dalam Islam. Yang kami harapkan bukan level keagamaan tertentu, melainkan kemauan untuk aktif dan bertumbuh bersama."
  },
  {
    q: "Saya masih awam soal agama, apakah tetap boleh ikut?",
    a: "Boleh. MJ hadir justru untuk mewadahi mahasiswa belajar dan bertumbuh dalam Islam sesuai Al-Qur'an dan As-Sunnah, di lingkungan yang aman, suportif, dan penuh ukhuwah agar teman-teman bisa saling menguatkan."
  },
  {
    q: "Kegiatannya apa saja?",
    a: "Kajian Rutin, Muslimah Islamic Talks, Pembinaan/Halaqoh, Mabit, Event Ikhwan-Akhwat, Bakti Sosial, Gerakan Kampus, Konten Dakwah, dan Sport."
  },
  {
    q: "Apakah kegiatan MJ mengganggu kuliah?",
    a: "MJ adalah UKM di lingkungan kampus, dan salah satu alasan kami ada adalah agar nilai Islam justru mewarnai aktivitas intra kampus — termasuk akademik dan organisasi. Untuk jadwal kegiatan terbaru, silakan pantau Instagram " + "@ukmldkmajelisjihad" + " atau hubungi pengurus."
  },
  {
    q: "Ada kegiatan khusus muslimah?",
    a: "Ada. Muslimah Islamic Talks adalah forum kajian yang dikhususkan bagi mahasiswi muslimah. Selain itu ada pula Event Ikhwan-Akhwat yang dirancang dengan tetap menjaga adab dan batasan syar'i."
  },
  {
    q: "Bagaimana cara mendaftar?",
    a: "Isi Student Interest Card di halaman ini — kami akan menghubungimu dengan info kegiatan yang sesuai minatmu. Bisa juga langsung hubungi pengurus lewat direct message Instagram @ukmldkmajelisjihad."
  }
];

function FAQSection() {
  const [open, setOpen] = useStateR(0);
  return (
    <section id="faq" className="faq">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">05 — FAQ</span>
          <h2>Pertanyaan yang <span className="italic-serif">sering</span> ditanyakan.</h2>
        </div>
        <div className="faq-list reveal delay-1">
          {FAQS.map((f, i) => (
            <div key={i} className={"faq-item " + (open === i ? "is-open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle">{open === i ? '−' : '+'}</span>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== FOOTER ============== */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-inner">
        <div className="footer-brand">
          <div className="brand">
            <div className="brand-mark brand-logo">
              <img src="assets/logo-mj.png" alt="Logo Majelis Jihad" />
            </div>
            <div className="brand-text">
              Majelis Jihad
              <small>Majelis Kajian Mahasiswa Dipanegara</small>
            </div>
          </div>
          <p className="footer-tag">Belajar bareng, bertumbuh bareng, bergerak bareng menuju ridho Allah.</p>

          <div className="lembaga-lockup">
            <div className="lembaga-label">Unit Kegiatan Mahasiswa di</div>
            <div className="lembaga-row">
              <img src="assets/logo-undipa.png" alt="Logo Universitas Dipa Makassar" loading="lazy" />
              <div className="lembaga-teks">
                Universitas Dipa Makassar
                <small>UNDIPA · Makassar, Sulawesi Selatan</small>
              </div>
            </div>
          </div>
        </div>
        <div className="footer-cols">
          <div>
            <h4>Jelajahi</h4>
            <a href="#tentang">Tentang MJ</a>
            <a href="#aktivitas">Aktivitas</a>
            <a href="#misi">Visi &amp; Misi</a>
            <a href="#gabung">Gabung MJ</a>
          </div>
          <div>
            <h4>Terhubung</h4>
            <a href={MJ.instagramUrl} target="_blank" rel="noopener noreferrer">Instagram · {MJ.instagram}</a>
            <a href="#kuesioner">Student Interest Card</a>
          </div>
          <div>
            <h4>Lokasi</h4>
            <a>UKM LDK Majelis Jihad</a>
            <a>Universitas Dipa Makassar</a>
            <a>Makassar, Sulawesi Selatan</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <div className="wrap footer-bottom-inner">
          <span>© {new Date().getFullYear()} UKM LDK Majelis Jihad · Universitas Dipa Makassar</span>
          <span>Berdiri {MJ.tahunBerdiri}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { GabungSection, FAQSection, Footer });