/* ====== Shared: routing, Logo, Nav, Footer, helpers ====== */
const { useState, useEffect } = React;

/* hash router: #/tentang -> "tentang", empty -> "home" */
function parseRoute() {
  const h = (location.hash || "").replace(/^#\/?/, "").trim();
  return h || "home";
}
function useRoute() {
  const [route, setRoute] = useState(parseRoute);
  useEffect(() => {
    const on = () => { setRoute(parseRoute()); window.scrollTo({ top: 0, behavior: "instant" }); };
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return route;
}

function Logo({ light, lg, sub = true }) {
  return (
    <a href="index.html#/" className={"logo" + (light ? " logo--light" : "")} aria-label="GMN — Gajah Muda Nusantara">
      <img className={"logo__mark" + (lg ? " logo__mark--lg" : "")} src="assets/gmn-mark.png" alt="Logo GMN" />
      <span className="logo__word">
        <b>GMN</b>
        {sub && <span>Gajah Muda Nusantara</span>}
      </span>
    </a>
  );
}

function Eyebrow({ id, en, light, children }) {
  return (
    <span className={"eyebrow" + (light ? " eyebrow--light" : "")}>
      {id || children}{en && <span className="en">· {en}</span>}
    </span>
  );
}

function Placeholder({ label, red, style, className = "" }) {
  return (
    <div className={"ph " + (red ? "ph--red " : "") + className} style={style}>
      {label && <span className="ph__tag">{label}</span>}
    </div>
  );
}

const Arrow = () => (
  <svg className="arr" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

function ProgIcon({ i }) {
  const paths = [
    <path key="a" d="M4 9l11-5 11 5-11 5L4 9zm0 0v7m4 1.5V12l7 3 7-3v5.5c0 2-3.1 3.5-7 3.5s-7-1.5-7-3.5z" />,
    <path key="b" d="M15 4v22M9 9c0-2 2.7-3 6-3s6 1 6 3-2.7 3-6 3-6 1-6 3 2.7 3 6 3 6-1 6-3" />,
    <path key="c" d="M15 26s-9-5.2-9-11a5 5 0 019-3 5 5 0 019 3c0 5.8-9 11-9 11z" />,
    <path key="d" d="M6 7h18v13H6zM10 24h10M15 20v4M11 13l3-3 3 3 3-4" />,
    <path key="e" d="M15 27c6-4 9-8 9-13a5 5 0 00-9-3 5 5 0 00-9 3c0 5 3 9 9 13zM15 6v8" />,
    <path key="f" d="M9 5l6 3 6-3v15l-6 3-6-3V5zm6 3v15M5 9l4-2v15l-4 2V9z" />,
  ];
  return (
    <svg width="26" height="26" viewBox="0 0 30 30" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      {paths[i % paths.length]}
    </svg>
  );
}

const NAV_LINKS = [
  ["tentang", "Tentang"],
  ["program", "Program"],
  ["galeri", "Galeri"],
  ["berita", "Berita"],
  ["pengurus", "Pengurus"],
  ["kontak", "Kontak"],
];

function Nav() {
  const route = useRoute();
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [route]);
  return (
    <header className="nav">
      <div className="wrap nav__in">
        <Logo />
        <nav className="nav__links">
          {NAV_LINKS.map(([r, label]) => (
            <a key={r} href={"#/" + r} className={route === r ? "is-active" : ""}>{label}</a>
          ))}
        </nav>
        <div className="nav__cta">
          <a className="btn btn--ghost" href="#/tentang">Pelajari</a>
          <a className="btn btn--primary" href="daftar.html">Daftar Anggota <Arrow /></a>
          <button className="nav__burger" aria-label="Menu" onClick={() => setOpen(!open)}>
            <span style={open ? { transform: "translateY(7px) rotate(45deg)" } : null}></span>
            <span style={open ? { opacity: 0 } : null}></span>
            <span style={open ? { transform: "translateY(-7px) rotate(-45deg)" } : null}></span>
          </button>
        </div>
      </div>
      {open && (
        <div className="nav__mobile" style={{ display: "flex" }}>
          {NAV_LINKS.map(([r, label]) => (
            <a key={r} href={"#/" + r} className={route === r ? "is-active" : ""}>{label}</a>
          ))}
          <a className="btn btn--primary" href="daftar.html" style={{ marginTop: 14 }}>Daftar Anggota <Arrow /></a>
        </div>
      )}
    </header>
  );
}

/* compact red header band for inner pages */
function PageHero({ eyebrow, en, title, sub }) {
  return (
    <section className="phero">
      <div className="phero__grid"></div>
      <div className="wrap phero__in">
        <nav className="phero__crumb"><a href="#/">Beranda</a><span>/</span><b>{eyebrow}</b></nav>
        <Eyebrow id={eyebrow} en={en} light />
        <h1 className="phero__title">{title}</h1>
        {sub && <p className="phero__sub">{sub}</p>}
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ["Organisasi", [["#/tentang", "Tentang Kami"], ["#/program", "Program"], ["#/pengurus", "Pengurus"], ["#/berita", "Berita"]]],
    ["Bergabung", [["daftar.html", "Daftar Anggota"], ["#/program", "Cara Bergabung"], ["#/galeri", "Galeri"], ["#/kontak", "Kontak"]]],
    ["Ikuti", [["#", "Instagram"], ["#", "TikTok"], ["#", "X / Twitter"], ["#", "YouTube"]]],
  ];
  return (
    <footer className="footer">
      <div className="wrap" style={{ paddingBlock: "72px" }}>
        <div className="footer__top">
          <div className="footer__brand">
            <Logo light lg />
            <p style={{ color: "rgba(255,255,255,.6)", marginTop: 22, maxWidth: "34ch", lineHeight: 1.6 }}>
              Ormas kepemudaan di bawah naungan Partai Solidaritas Indonesia. Bergerak untuk Indonesia yang adil, terbuka, dan progresif.
            </p>
            <div className="footer__contact">
              <div><span>Sekretariat</span>Jl. Solidaritas No. 17, Jakarta Pusat 10110</div>
              <div><span>Surel</span>halo@gajahmudanusantara.id</div>
              <div><span>Telepon</span>+62 21 5050 1945</div>
            </div>
          </div>
          <div className="footer__cols">
            {cols.map(([title, links]) => (
              <div key={title} className="footer__col">
                <h4>{title}</h4>
                {links.map(([href, label]) => <a key={label} href={href}>{label}</a>)}
              </div>
            ))}
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 Gajah Muda Nusantara. Hak cipta dilindungi.</span>
          <span className="footer__en">Youth movement for a fair &amp; open Indonesia</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { useRoute, Logo, Eyebrow, Placeholder, Arrow, ProgIcon, Nav, PageHero, Footer });