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

/* ============== KENAPA MJ ADA (hal. 3 dokumen pengenalan) ============== */
const ALASAN = [
  {
    id: 1,
    quote: "Kampus modern menantang cara pandang. Yang goyah bukan cuma nilai — tapi keyakinan.",
    title: "Menguatkan identitas muslim",
    body: "MJ hadir untuk menguatkan identitas dan keyakinan muslim di tengah tantangan kampus modern.",
    metric: "Identitas",
    metricLabel: "yang tidak ikut arus"
  },
  {
    id: 2,
    quote: "Mau belajar Islam lebih serius, tapi bingung mulai dari mana dan dengan siapa.",
    title: "Wadah belajar & bertumbuh",
    body: "Mewadahi mahasiswa untuk belajar dan bertumbuh dalam Islam sesuai Al-Qur'an dan As-Sunnah.",
    metric: "Al-Qur'an",
    metricLabel: "& As-Sunnah sebagai rujukan"
  },
  {
    id: 3,
    quote: "Bertahan sendirian itu berat. Yang bikin istiqamah biasanya bukan niat — tapi teman.",
    title: "Lingkungan yang menguatkan",
    body: "Membangun lingkungan yang aman, suportif, dan penuh ukhuwah agar teman-teman bisa saling menguatkan.",
    metric: "Ukhuwah",
    metricLabel: "aman & suportif"
  },
  {
    id: 4,
    quote: "Islam sering berhenti jadi identitas di KTP, tidak sampai jadi cara menjalani hari.",
    title: "Islam sebagai nilai & sistem hidup",
    body: "Menjadikan Islam sebagai nilai dan sistem hidup yang mewarnai setiap sisi kehidupan mahasiswa — baik aktivitas intra kampus (akademik, organisasi) maupun ekstra kampus (komunitas, sosial, keluarga).",
    metric: "Intra & ekstra",
    metricLabel: "kampus sekaligus"
  },
  {
    id: 5,
    quote: "Dakwah kampus bukan sekadar acara. Ia harus terasa sebagai jawaban.",
    title: "Menghidupkan spirit dakwah kampus",
    body: "Menghidupkan spirit dakwah kampus agar Islam hadir sebagai solusi, bukan sekadar identitas.",
    metric: "Solusi",
    metricLabel: "bukan sekadar identitas"
  }
];

function TentangSection() {
  const [active, setActive] = useStateT2(0);
  return (
    <section id="tentang" className="pain">
      <CodeRain />
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">01 — Tentang Majelis Jihad</span>
          <h2>Bukan cuma organisasi. <span className="italic-serif">Tapi amanah.</span></h2>
          <p className="lede">
            Majelis Jihad — atau Majelis Kajian Mahasiswa Dipa, yang lebih dikenal dengan sebutan <b>MJ</b> —
            merupakan UKM Lembaga Dakwah Kampus yang dibentuk pada <b>tahun 1995</b>, berfokus pada pembinaan
            dan pergerakan islami. Tempat belajar bareng, bertumbuh bareng, dan bergerak bareng menuju ridho Allah.
          </p>
        </div>

        <div className="value-row reveal delay-1">
          <div className="value-cell">
            <div className="value-cell-k">Nama lengkap</div>
            <div className="value-cell-v">Majelis Kajian Mahasiswa Dipanegara</div>
            <div className="value-cell-s">Dikenal dengan sebutan MJ</div>
          </div>
          <div className="value-cell">
            <div className="value-cell-k">Bentuk</div>
            <div className="value-cell-v">UKM Lembaga Dakwah Kampus</div>
            <div className="value-cell-s">Universitas Dipa Makassar</div>
          </div>
          <div className="value-cell">
            <div className="value-cell-k">Dibentuk</div>
            <div className="value-cell-v">Tahun 1995</div>
            <div className="value-cell-s">{MJ.usia} tahun berkhidmat di kampus</div>
          </div>
          <div className="value-cell">
            <div className="value-cell-k">Fokus</div>
            <div className="value-cell-v">Pembinaan &amp; pergerakan islami</div>
            <div className="value-cell-s">Belajar, bertumbuh, dan bergerak bareng</div>
          </div>
        </div>

        <div className="section-head reveal" style={{marginTop:'96px'}}>
          <span className="eyebrow">Kenapa MJ ada?</span>
          <h2>Lima alasan <span className="italic-serif">kami berdiri</span> di kampus ini.</h2>
        </div>

        <div className="pain-grid reveal delay-1">
          <div className="pain-tabs">
            {ALASAN.map((p, i) => (
              <button
                key={p.id}
                className={"pain-tab " + (i === active ? "is-active" : "")}
                onClick={() => setActive(i)}
              >
                <span className="pain-tab-num">0{p.id}</span>
                <span className="pain-tab-title">{p.title}</span>
                <span className="pain-tab-arrow">→</span>
              </button>
            ))}
          </div>

          <div className="pain-detail">
            <div className="pain-quote-mark">"</div>
            <p className="pain-quote">{ALASAN[active].quote}</p>
            <div className="pain-divider" />
            <h3 className="pain-title">{ALASAN[active].title}</h3>
            <p className="pain-body">{ALASAN[active].body}</p>
            <div className="pain-metric">
              <div className="pain-metric-num">{ALASAN[active].metric}</div>
              <div className="pain-metric-label">{ALASAN[active].metricLabel}</div>
            </div>
          </div>
        </div>

        <div className="pain-promise reveal delay-2">
          <div className="pain-promise-label">Prinsip kami</div>
          <p className="pain-promise-text">
            <span className="italic-serif">"Berfikir cemerlang &amp; ideologis,</span> jalan baru menuju <b>kebangkitan hakiki</b>."
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TentangSection });