/* global React, MJ, HeroCanvas, HeroWidgets, HeroTerminal, Magnet, Counter */
const { useState, useEffect, useRef } = React;

/* ============== NAV ============== */
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#top" 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>UKM LDK · Universitas Dipa Makassar</small>
          </div>
        </a>
        <div className="nav-links">
          <a href="#tentang">Tentang</a>
          <a href="#aktivitas">Aktivitas</a>
          <a href="#galeri">Galeri</a>
          <a href="#misi">Visi &amp; Misi</a>
          <a href="#faq">FAQ</a>
          <a href="#kuesioner" className="btn btn-primary" style={{padding:'10px 18px', fontSize:14}}>
            Isi Interest Card
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ============== HERO ============== */
function Hero() {
  return (
    <section id="top" className="hero">
      <HeroCanvas />
      <div className="hero-orb hero-orb-1"></div>
      <div className="hero-orb hero-orb-2"></div>
      <div className="hero-seal" aria-hidden="true">
        <img src="assets/logo-mj.png" alt="" />
      </div>
      <HeroWidgets />

      <div className="wrap hero-inner">
        <HeroTerminal />

        <div className="hero-meta reveal delay-1">
          <span className="badge"><span className="dot live"></span>LEMBAGA DAKWAH KAMPUS · SEJAK 1995</span>
          <span className="hero-loc">Universitas Dipa Makassar</span>
        </div>

        <h1 className="hero-title reveal delay-2">
          Belajar bareng. <br/>
          Bertumbuh bareng. <br/>
          <span className="hero-accent">Bergerak bareng.</span>
        </h1>

        <p className="hero-lede reveal delay-3">
          <b>Majelis Jihad</b> — Majelis Kajian Mahasiswa Dipanegara — adalah UKM Lembaga Dakwah Kampus
          Universitas Dipa Makassar yang dibentuk pada <b>tahun 1995</b>, berfokus pada pembinaan dan pergerakan islami.
          Komunitas yang bukan cuma organisasi, tapi <span className="italic-serif">amanah</span>.
        </p>

        <div className="hero-cta reveal delay-4">
          <Magnet>
            <a href="#kuesioner" className="btn btn-primary">
              Kenali potensimu <span className="btn-arrow">→</span>
            </a>
          </Magnet>
          <Magnet strength={0.15}>
            <a href="#tentang" className="btn btn-ghost">
              Kenapa MJ ada
            </a>
          </Magnet>
        </div>

        <div className="hero-stats reveal delay-5">
          <Stat n={MJ.usia} unit="tahun" label={`Berkhidmat sejak ${MJ.tahunBerdiri}`} />
          <Stat n={8} unit="aktivitas" label="Kajian, halaqoh, mabit, sosial" />
          <Stat n={5} unit="misi" label="Arah gerak organisasi" />
          <StatText val="Terbuka" unit="kaderisasi" label="Mahasiswa muslim UNDIPA" />
        </div>
      </div>
    </section>
  );
}

function Stat({ n, unit, label }) {
  return (
    <div className="stat">
      <div className="stat-top">
        <span className="stat-n"><Counter to={n} /></span>
        <span className="stat-unit">{unit}</span>
      </div>
      <div className="stat-label">{label}</div>
    </div>
  );
}

function StatText({ val, unit, label }) {
  return (
    <div className="stat">
      <div className="stat-top">
        <span className="stat-n" style={{fontSize:'clamp(26px,3.6vw,40px)'}}>{val}</span>
        <span className="stat-unit">{unit}</span>
      </div>
      <div className="stat-label">{label}</div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Stat, StatText });