/* Sections part 1: Nav, Hero, Stats, Tentang, Kegiatan */
const { useState: uS1, useEffect: uE1 } = React;

/* ---------------- NAV ---------------- */
const Nav = () => {
  const [scrolled, setScrolled] = uS1(false);
  const [open, setOpen] = uS1(false);
  const [active, setActive] = uS1("");
  const route = useRoute();
  const onHome = route.type === "home";
  const solid = scrolled || !onHome;
  uE1(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    // scroll spy
    const ids = ["tentang", "pengurus", "kegiatan", "testimoni", "edukasi", "kontak"];
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); }),
      { rootMargin: "-45% 0px -50% 0px" }
    );
    ids.forEach((id) => { const el = document.getElementById(id); if (el) io.observe(el); });
    return () => { window.removeEventListener("scroll", onScroll); io.disconnect(); };
  }, [onHome]);
  const go = (e, id) => {
    e.preventDefault(); setOpen(false);
    if (!onHome) { navigate(""); setTimeout(() => document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }), 140); }
    else document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };
  const home = (e) => { e.preventDefault(); setOpen(false); navigate(""); };
  return (
    <>
      <header className={`nav ${solid ? "solid" : "top"}`}>
        <div className="wrap">
          <a className="nav-brand" href="#" onClick={home}>
            <div className="nav-logo"><img src="assets/logo.png" alt="Logo Perwatusi DPD Riau" /></div>
            <div className="nav-word"><b>PERWATUSI</b><span>DPD Riau</span></div>
          </a>
          <nav className="nav-links">
            {SITE.nav.map((n) => (
              <a key={n.id} href={`#${n.id}`} onClick={(e) => go(e, n.id)} className={active === n.id ? "active" : ""}>{n.label}</a>
            ))}
          </nav>
          <div className="nav-actions">
            <a className="btn btn-gold" href="#kontak" onClick={(e) => go(e, "kontak")}>Gabung Komunitas</a>
            <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(true)}><span></span></button>
          </div>
        </div>
      </header>
      <div className={`drawer ${open ? "open" : ""}`} onClick={() => setOpen(false)}>
        <div className="drawer-panel" onClick={(e) => e.stopPropagation()}>
          <div className="nav-brand" style={{ marginBottom: 22 }}>
            <div className="nav-logo"><img src="assets/logo.png" alt="" /></div>
            <div className="nav-word"><b style={{ color: "var(--green-900)" }}>PERWATUSI</b><span style={{ color: "var(--green-600)" }}>DPD Riau</span></div>
          </div>
          {SITE.nav.map((n) => <a key={n.id} href={`#${n.id}`} onClick={(e) => go(e, n.id)}>{n.label}</a>)}
          <a className="btn btn-gold" style={{ marginTop: 22 }} href="#kontak" onClick={(e) => go(e, "kontak")}>Gabung Komunitas</a>
        </div>
      </div>
    </>
  );
};

/* ---------------- HERO ---------------- */
const Hero = () => {
  const go = (e, id) => { e.preventDefault(); document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); };
  return (
    <section className="hero" id="top">
      <div className="hero-deco">
        <div className="hero-glow"></div>
        <div className="hero-ring" style={{ width: 620, height: 620, right: -180, bottom: -220 }}></div>
        <div className="hero-ring" style={{ width: 420, height: 420, right: -80, bottom: -120 }}></div>
      </div>
      <div className="wrap hero-grid">
        <div className="hero-text">
          <img className="hero-watermark" src="assets/logo.png" alt="" aria-hidden="true" />
          <Reveal className="hero-tag"><b>RIAU</b> Perkumpulan Warga Tulang Sehat Indonesia</Reveal>
          <Reveal as="h1" delay={1}>Kuatkan Tulang,<br />Sehatkan Badan <span className="accent">Huu Haa</span></Reveal>
          <Reveal as="p" className="hero-lead" delay={2}>
            DPD Perwatusi Riau hadir mendampingi keluarga Riau untuk memahami, mencegah, dan menjaga kesehatan tulang — dari remaja hingga lansia.
          </Reveal>
          <Reveal className="hero-cta" delay={2}>
            <a className="btn btn-gold" href="#edukasi" onClick={(e) => go(e, "edukasi")}>Mulai Edukasi <Icon name="arrow" /></a>
            <a className="btn btn-ghost-light" href="#kegiatan" onClick={(e) => go(e, "kegiatan")}>Lihat Kegiatan</a>
          </Reveal>
          <Reveal className="hero-trust" delay={3}>
            <div className="avs">
              <span>R</span><span>D</span><span>L</span>
            </div>
            Dipercaya 1.200+ warga Riau untuk hidup lebih sehat
          </Reveal>
        </div>
        <div className="hero-visual-spacer" aria-hidden="true"></div>
      </div>
      <div className="hero-figure">
        <img src="assets/lucky_l.png" alt="Lucky Kartika Sari, SE." />
      </div>
      <div className="hero-fade"></div>
      <div className="hero-figure-name">
        <b>Lucky Kartika Sari, SE.</b>
        <span>Ketua DPD Perwatusi Riau</span>
      </div>
    </section>
  );
};

/* ---------------- STATS ---------------- */
const Stats = () => (
  <section className="stats tight">
    <div className="wrap">
      {SITE.stats.map((s, i) => (
        <Reveal key={i} className="stat" delay={i + 1}>
          <b><CountUp value={s.n} /><span className="u">{s.u}</span></b>
          <span>{s.label}</span>
        </Reveal>
      ))}
    </div>
  </section>
);

/* ---------------- TENTANG ---------------- */
const Tentang = () => (
  <section className="section" id="tentang">
    <div className="wrap about-grid">
      <Reveal className="about-visual">
        <div className="about-dots"></div>
        <div className="about-img"><Placeholder icon="users" label="Foto tim Perwatusi Riau" /></div>
        <div className="about-badge">
          <b>2024</b>
          <span>Tahun berdirinya DPD Perwatusi Riau</span>
        </div>
      </Reveal>
      <div>
        <Reveal as="div" className="section-head">
          <span className="eyebrow">Tentang Kami</span>
          <h2>Sahabat tulang sehat bagi setiap keluarga di Riau</h2>
          <p>Perwatusi (Perkumpulan Warga Tulang Sehat Indonesia) DPD Riau adalah komunitas nirlaba yang bergerak di bidang edukasi dan pencegahan gangguan kesehatan tulang, khususnya osteoporosis.</p>
        </Reveal>
        <div className="vm-cards">
          {SITE.visiMisi.map((v, i) => (
            <Reveal key={i} className="vm-card" delay={i + 1}>
              <div className="ic"><Icon name={v.icon} /></div>
              <div><h4>{v.title}</h4><p>{v.text}</p></div>
            </Reveal>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ---------------- PENGURUS ---------------- */
const Pengurus = () => {
  const groups = SITE.pengurus;
  if (!groups || groups.length === 0) return null;
  return (
    <section className="section" id="pengurus">
      <div className="wrap">
        <Reveal as="div" className="section-head center">
          <span className="eyebrow center">Kepengurusan</span>
          <h2>Mereka yang menggerakkan Perwatusi Riau</h2>
          <p style={{ marginBottom: 12 }}>Dewan Pengurus DPD Perwatusi Riau — individu berdedikasi yang hadir untuk kesehatan tulang masyarakat Riau.</p>
        </Reveal>
        {groups.map((g, gi) => (
          <Reveal key={g.group} className="pengurus-group" delay={gi + 1}>
            <h4 className="pengurus-group-label">{g.group}</h4>
            <div className="pengurus-track">
              {g.members.map((m, mi) => (
                <div className="pengurus-card" key={mi}>
                  <div className="pengurus-photo">
                    {m.photo
                      ? <img src={m.photo} alt={m.name} />
                      : <Placeholder icon="users" label={m.name} />}
                  </div>
                  <div className="pengurus-info">
                    <b>{m.name}</b>
                    <span>{m.jabatan}</span>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

/* ---------------- KEGIATAN ---------------- */
const Kegiatan = () => {
  const [f, setF] = uS1("Semua");
  const list = f === "Semua" ? SITE.kegiatan : SITE.kegiatan.filter((k) => k.filter === f);
  const pg = usePaged(list, 6, [f]);
  const changePage = (n) => { pg.setPage(n); document.getElementById("kegiatan")?.scrollIntoView({ behavior: "smooth" }); };
  return (
    <section className="section wash" id="kegiatan">
      <div className="wrap">
        <Reveal as="div" className="section-head">
          <span className="eyebrow">Kegiatan</span>
          <h2>Aksi nyata untuk Riau yang bertulang sehat</h2>
          <p>Dari skrining gratis hingga senam bersama — kegiatan rutin kami terbuka untuk seluruh warga.</p>
        </Reveal>
        <Reveal className="tabs">
          {SITE.kegiatanFilters.map((t) => (
            <button key={t} className={`tab ${f === t ? "active" : ""}`} onClick={() => setF(t)}>{t}</button>
          ))}
        </Reveal>
        <div className="kegiatan-grid">
          {pg.pageItems.map((k, i) => (
            <Reveal as="a" key={k.title} className="keg-card" delay={(i % 3) + 1} href={`#!/kegiatan/${slugify(k.title)}`} onClick={(e) => { e.preventDefault(); navigate("kegiatan/" + slugify(k.title)); }}>
              <div className="keg-media">
                <Media media={k.hero} label={k.title} />
                <span className="keg-cat">{k.cat}</span>
                <div className="keg-date"><b>{k.d}</b><span>{k.m}</span></div>
              </div>
              <div className="keg-body">
                <h3>{k.title}</h3>
                <div className="keg-loc"><Icon name="pin" /> {k.loc}</div>
                <p>{k.desc}</p>
                <span className="keg-link">Selengkapnya <Icon name="arrowsm" /></span>
              </div>
            </Reveal>
          ))}
        </div>
        <p className="list-count">Menampilkan <b>{pg.from}–{pg.to}</b> dari <b>{pg.total}</b> kegiatan</p>
        <Pager page={pg.page} pages={pg.pages} onChange={changePage} />
        <Reveal className="upcoming">
          <div className="u-left">
            <small>{SITE.upcoming.tag}</small>
            <h3>{SITE.upcoming.title}</h3>
            <p>{SITE.upcoming.desc}</p>
          </div>
          <a className="btn btn-gold" href="#kontak" onClick={(e) => { e.preventDefault(); document.getElementById("kontak").scrollIntoView({ behavior: "smooth" }); }}>Daftar Sekarang <Icon name="arrow" /></a>
        </Reveal>
      </div>
    </section>
  );
};

Object.assign(window, { Nav, Hero, Stats, Tentang, Pengurus, Kegiatan });