/* ============================================================
   Podstranice - dubinski dotjerane. Struktura prati staru stranicu;
   tijela tekstova su Lorem Ipsum (sadržaj se ažurira kroz backend/CRM).
   ============================================================ */

/* ---------- helpers ---------- */
function findTrail(key) {
  const NAV = window.HND.NAV;
  const out = [];
  function walk(items, parents) {
    for (const it of items) {
      const chain = [...parents, { key: it.key, label: it.label }];
      if (it.key === key) { out.push(...chain); return true; }
      if (it.children && walk(it.children, chain)) return true;
    }
    return false;
  }
  walk(NAV, []);
  return out;
}
function topLabel(topKey) {
  const t = window.HND.NAV.find((n) => n.key === topKey);
  return t ? t.label : "";
}
function getInitials(name) {
  const words = name.replace(/,/g, "").split(/\s+/).filter((w) => w && !w.endsWith("."));
  return words.slice(0, 2).map((w) => w[0]).join("").toUpperCase();
}

const LI = () => <p>{window.HND.LI}</p>;
const LI2 = () => <p>{window.HND.LI2}</p>;

/* ---------- section sidebar ---------- */
function SectionSidebar({ topKey, current }) {
  const NAV = window.HND.NAV;
  const top = NAV.find((n) => n.key === topKey);
  if (!top || !top.children) return null;
  return (
    <nav className="sidenav" aria-label="Pododjeljci">
      <h4>
        <a href={navHref(top.key)} className={"sidenav-title" + (current === top.key ? " active" : "")}>{top.label}</a>
      </h4>
      {top.children.map((c) => (
        c.group ? (
          <React.Fragment key={c.key}>
            <a href={navHref(c.key)} className={current === c.key ? "active" : ""}>{c.label}</a>
            {c.children.map((g) => (
              <a key={g.key} className={"deep" + (current === g.key ? " active" : "")} href={navHref(g.key)}>{g.label}</a>
            ))}
          </React.Fragment>
        ) : (
          <a key={c.key} href={navHref(c.key)} className={current === c.key ? "active" : ""}>{c.label}</a>
        )
      ))}
    </nav>
  );
}

/* ---------- page header ---------- */
function PageHead({ trail, eyebrow, title, deck, aside }) {
  const head = (
    <div>
      {eyebrow && <span className="ph-eyebrow">{eyebrow}</span>}
      <Reveal as="h1">{title}</Reveal>
      {deck && <Reveal delay={1} as="p" className="deck">{deck}</Reveal>}
    </div>
  );
  return (
    <div className="pagehead">
      <div className="wrap">
        <Breadcrumb trail={trail} />
        {aside ? (
          <div className="ph-grid">
            {head}
            <div className="ph-aside">
              {aside.map((a, i) => (
                <div className="pa" key={i}><div className="k">{a.k}</div><div className="v">{a.v}</div></div>
              ))}
            </div>
          </div>
        ) : head}
      </div>
    </div>
  );
}

/* ---------- layout with section sidebar ---------- */
function SectionPage({ current, eyebrow, title, deck, topKey, aside, children }) {
  const trail = findTrail(current);
  return (
    <>
      <PageHead trail={trail.length ? trail : [{ key: current, label: title }]}
        eyebrow={eyebrow} title={title} deck={deck} aside={aside} />
      <div className="wrap">
        <div className="pagewrap">
          <SectionSidebar topKey={topKey} current={current} />
          <div><Reveal delay={1}>{children}</Reveal></div>
        </div>
      </div>
    </>
  );
}

/* ---------- simple prose page ---------- */
function SimplePage({ current, eyebrow, title, deck, children, wide }) {
  const trail = findTrail(current);
  return (
    <>
      <PageHead trail={trail.length ? trail : [{ key: current, label: title }]} eyebrow={eyebrow} title={title} deck={deck} />
      <section className="section" style={{ paddingTop: "clamp(28px,4vw,44px)" }}>
        <div className={wide ? "wrap" : "wrap-narrow"}><Reveal className="prose">{children}</Reveal></div>
      </section>
    </>
  );
}

/* ============================================================
   VIJESTI / BLOG
   ============================================================ */
function NewsCard({ n, delay }) {
  return (
    <Reveal delay={delay}>
      <a className="card" href={navHref("vijesti/" + n.key)} style={{ height: "100%" }}>
        <Placeholder label={n.ph} style={{ aspectRatio: "16/10" }} />
        <div className="card-body">
          <span className="card-kicker">{n.tag} · {n.date.d} {n.date.m}</span>
          <span className="card-title">{n.title}</span>
          <p className="card-excerpt">{n.excerpt}</p>
          <span className="card-foot">Pročitaj više <span className="arrow" aria-hidden="true">→</span></span>
        </div>
      </a>
    </Reveal>
  );
}

function NewsIndex() {
  const NEWS = window.HND.NEWS;
  const lead = NEWS[0];
  const rest = NEWS.slice(1);
  return (
    <>
      <PageHead trail={[{ key: "vijesti", label: "Vijesti" }]} eyebrow="Aktualno"
        title="Vijesti i obavijesti"
        deck="Najnovije iz Hrvatskog numizmatičkog društva - skupštine, događaji, izdanja i obavijesti za članove." />
      <section className="section" style={{ paddingTop: "clamp(28px,4vw,44px)" }}>
        <div className="wrap">
          <Reveal>
            <a className="news-featured" href={navHref("vijesti/" + lead.key)}>
              <Placeholder label={lead.ph} />
              <div className="nf-body">
                <span className="nf-tag"><span className="lead-pill">Izdvojeno</span> {lead.tag} · {lead.date.d} {lead.date.m}</span>
                <h3>{lead.title}</h3>
                <p>{lead.excerpt}</p>
                <span className="nf-foot">Pročitaj više <span className="arrow" aria-hidden="true">→</span></span>
              </div>
            </a>
          </Reveal>
          <div className="grid grid-3">
            {rest.map((n, i) => <NewsCard key={n.key} n={n} delay={(i % 3) + 1} />)}
          </div>
        </div>
      </section>
    </>
  );
}

function NewsArticle({ articleKey }) {
  const NEWS = window.HND.NEWS;
  const n = NEWS.find((x) => x.key === articleKey) || NEWS[0];
  const related = NEWS.filter((x) => x.key !== n.key).slice(0, 3);
  return (
    <>
      <PageHead trail={[{ key: "vijesti", label: "Vijesti" }, { key: "vijesti/" + n.key, label: n.title }]} title={n.title} />
      <section className="section" style={{ paddingTop: "clamp(20px,3vw,32px)" }}>
        <div className="wrap-narrow">
          <div className="article-meta">
            <span className="article-tag">{n.tag}</span>
            <span>{n.date.d} {n.date.m}</span>
          </div>
          <Reveal><Placeholder label={n.ph} style={{ aspectRatio: "16/9", marginBottom: 28 }} /></Reveal>
          <div className="prose">
            {n.body.map((p, i) => <p key={i} style={i === 0 ? { fontSize: "1.18em", color: "var(--ink)" } : null}>{p}</p>)}
            {n.gallery && (
              <div className="grid grid-3" style={{ marginTop: 28 }}>
                {Array.from({ length: n.gallery }).map((_, i) => (
                  <Placeholder key={i} label={"Fotografija " + (i + 1)} style={{ aspectRatio: "4/3" }} />
                ))}
              </div>
            )}
          </div>
        </div>
      </section>
      <section className="section alt">
        <div className="wrap">
          <div className="section-head"><div><span className="eyebrow">Povezano</span><h2>Ostale vijesti</h2></div>
            <a className="textlink" href={navHref("vijesti")}>Sve vijesti <span className="arrow" aria-hidden="true">→</span></a>
          </div>
          <div className="related-grid">
            {related.map((r, i) => <NewsCard key={r.key} n={r} delay={i + 1} />)}
          </div>
        </div>
      </section>
    </>
  );
}

/* ============================================================
   NOVE KNJIGE
   ============================================================ */
function BooksPage() {
  const BOOKS = window.HND.BOOKS;
  const [lead, ...rest] = BOOKS;
  return (
    <>
      <PageHead trail={findTrail("nove-knjige")} eyebrow="Izdavaštvo" title="Nove knjige"
        deck="Najave izlaska novih knjiga i informacije o promocijama izdanja Društva i partnera." />
      <section className="section" style={{ paddingTop: "clamp(28px,4vw,44px)" }}>
        <div className="wrap">
          <Reveal>
            <div className="issue-featured">
              <Placeholder label={lead.ph} className="cover" />
              <div>
                <span className="if-kicker">Novo izdanje · {lead.year}</span>
                <h3>{lead.title}</h3>
                <p className="if-meta">{lead.author}</p>
                <p style={{ color: "var(--ink-soft)", maxWidth: 520, marginBottom: 18 }}>{window.HND.LI}</p>
                <div className="if-actions">
                  <a className="btn btn-solid" href={navHref("informacije/kontakt")}>Upit o knjizi <span className="arrow" aria-hidden="true">→</span></a>
                  <a className="btn btn-ghost" href={navHref("nove-knjige")}>Najava promocije</a>
                </div>
              </div>
            </div>
          </Reveal>
          <div className="grid grid-4">
            {rest.map((b, i) => (
              <Reveal key={b.key} delay={(i % 4) + 1}>
                <div className="pubcard">
                  <Placeholder label={b.ph} className="ph" style={{ aspectRatio: "3/4" }} />
                  <div className="pb">
                    <span className="y">{b.year}</span>
                    <h3>{b.title}</h3>
                    <div className="meta-row">{b.author}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

/* ============================================================
   PRINOVE U BIBLIOTECI
   ============================================================ */
function PrinovePage() {
  const ACQ = window.HND.ACQUISITIONS;
  return (
    <>
      <PageHead trail={findTrail("prinove")} eyebrow="Knjižnica" title="Prinove u biblioteci"
        deck="Novi naslovi i prinove u knjižnici Društva. Građa je dostupna članovima na sastancima svaki utorak od 17 do 20 sati."
        aside={[{ k: "Dostupno", v: "Utorkom" }, { k: "Lokacija", v: "Margaretska 3" }]} />
      <section className="section" style={{ paddingTop: "clamp(28px,4vw,44px)" }}>
        <div className="wrap-narrow">
          <Reveal>
            <div className="acq-list">
              {ACQ.map((a, i) => (
                <div className="acq-row" key={i}>
                  <span className="acq-date">{a.date}</span>
                  <span className="acq-title">{a.title}<small>{a.sub}</small></span>
                  <span className="acq-type">{a.type}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <div className="notice" style={{ marginTop: 32 }}>
            <span className="mark" aria-hidden="true">i</span>
            <span>Viškovi knjižnih jedinica otpisuju se na tjednoj bazi; članovi ih mogu besplatno preuzeti u prostorijama Društva.</span>
          </div>
        </div>
      </section>
    </>
  );
}

/* ============================================================
   POVIJEST DRUŠTVA
   ============================================================ */
function PovijestPage({ current }) {
  const HISTORY = window.HND.HISTORY;
  return (
    <SectionPage current={current} topKey="povijest" eyebrow="O Društvu" title="Povijest Društva"
      deck="Gotovo stoljeće numizmatike u Hrvatskoj - od osnutka 1928. godine do danas.">
      <Placeholder label="Povijesna fotografija Društva" style={{ aspectRatio: "16/9", marginBottom: 32, borderRadius: "var(--radius-lg)" }} />
      <div className="prose" style={{ maxWidth: "none", marginBottom: 40 }}>
        <p style={{ maxWidth: 720 }}>{window.HND.LI}</p>
      </div>
      <h2 style={{ fontFamily: "var(--serif)", fontSize: 28, fontWeight: 600, marginBottom: 28 }}>Ključni trenuci</h2>
      <div className="timeline">
        {HISTORY.map((h, i) => (
          <Reveal key={i} delay={(i % 4) + 1} className="tl-item">
            <span className="tl-dot" aria-hidden="true"></span>
            <div className="tl-year">{h.year}</div>
            <h3>{h.title}</h3>
            <p>{h.text}</p>
          </Reveal>
        ))}
      </div>
    </SectionPage>
  );
}

function ObolHistoryPage({ current }) {
  return (
    <SectionPage current={current} topKey="povijest" eyebrow="O Društvu" title="Povijest - Obol br. 60, 2008."
      deck="Pregled povijesti Društva objavljen u jubilarnom broju biltena Obol (broj 60, 2008.).">
      <div className="prose">
        <Placeholder label="OBOL br. 60 - naslovnica" style={{ aspectRatio: "3/4", maxWidth: 300, marginBottom: 28, borderRadius: 4, boxShadow: "var(--shadow-2)" }} />
        <LI /><LI2 /><LI />
      </div>
    </SectionPage>
  );
}

/* ============================================================
   PUBLIKACIJE / IZDANJA - issue grid with featured latest
   ============================================================ */
function IssueShowcase({ data }) {
  const [latest, ...rest] = data.items;
  return (
    <>
      <p className="section-intro">{data.intro}</p>
      <Reveal>
        <div className="issue-featured">
          <Placeholder label={latest.ph} className="cover" />
          <div>
            <span className="if-kicker">Najnoviji broj</span>
            <h3>{latest.title}</h3>
            <p className="if-meta">{latest.year}.</p>
            <p style={{ color: "var(--ink-soft)", maxWidth: 520, marginBottom: 18 }}>{window.HND.LI}</p>
            <div className="if-actions">
              <a className="btn btn-solid" href={navHref("informacije/kontakt")}>Zatraži primjerak <span className="arrow" aria-hidden="true">→</span></a>
              <a className="btn btn-ghost" href={navHref("informacije/clanstvo")}>Za članove besplatno</a>
            </div>
          </div>
        </div>
      </Reveal>
      <h2 style={{ fontFamily: "var(--serif)", fontSize: 24, fontWeight: 600, margin: "8px 0 22px" }}>Arhiva brojeva</h2>
      <div className="grid grid-4">
        {rest.map((it, i) => (
          <Reveal key={it.key} delay={(i % 4) + 1}>
            <div className="pubcard">
              <Placeholder label={it.ph} className="ph" style={{ aspectRatio: "3/4" }} />
              <div className="pb">
                <span className="y">{it.year}.</span>
                <h3>{it.title}</h3>
                <span className="view">Pregledaj <span className="arrow" aria-hidden="true">→</span></span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </>
  );
}

function PublikacijeIndex() {
  const sec = window.HND.NAV.find((n) => n.key === "publikacije");
  return (
    <SectionPage current="publikacije" topKey="publikacije" eyebrow="Izdavaštvo" title="Publikacije"
      deck="Znanstvena i stručna izdanja Hrvatskog numizmatičkog društva.">
      <div className="grid grid-2">
        {sec.children.map((c, i) => (
          <Reveal key={c.key} delay={(i % 2) + 1}>
            <a className="tile" href={navHref(c.key)} style={{ height: "100%" }}>
              <h3>{c.label}</h3>
              <p>Pregledajte sve brojeve i izdanja u arhivi.</p>
              <span className="go">Otvori <span className="arrow" aria-hidden="true">→</span></span>
            </a>
          </Reveal>
        ))}
      </div>
    </SectionPage>
  );
}

function PublicationPage({ current }) {
  const sub = current.split("/")[1];
  const data = window.HND.PUBLICATIONS[sub];
  return (
    <SectionPage current={current} topKey="publikacije" eyebrow="Publikacije" title={data.title}>
      <IssueShowcase data={data} />
    </SectionPage>
  );
}

function IzdanjaIndex() {
  const sec = window.HND.NAV.find((n) => n.key === "hnd-izdanja");
  return (
    <SectionPage current="hnd-izdanja" topKey="hnd-izdanja" eyebrow="Naklada" title="HND izdanja"
      deck="Sva izdanja u nakladi Hrvatskog numizmatičkog društva.">
      <div className="grid grid-2">
        {sec.children.map((c, i) => (
          <Reveal key={c.key} delay={(i % 2) + 1}>
            <a className="tile" href={navHref(c.key)} style={{ height: "100%" }}>
              <h3>{c.label}</h3>
              <p>Pregledajte izdanja u nakladi Društva.</p>
              <span className="go">Otvori <span className="arrow" aria-hidden="true">→</span></span>
            </a>
          </Reveal>
        ))}
      </div>
    </SectionPage>
  );
}

function EditionPage({ current }) {
  const sub = current.split("/")[1];
  const data = window.HND.EDITIONS[sub];
  return (
    <SectionPage current={current} topKey="hnd-izdanja" eyebrow="HND izdanja" title={data.title}>
      <IssueShowcase data={data} />
    </SectionPage>
  );
}

/* ============================================================
   INFORMACIJE
   ============================================================ */
function InfoIndex() {
  const sec = window.HND.NAV.find((n) => n.key === "informacije");
  const desc = (k) => k.includes("clanstvo") ? "Kako se učlaniti i pogodnosti članstva." : k.includes("ustroj") ? "Tijela upravljanja Društvom." : k.includes("kontakt") ? "Adresa, e-pošta i radno vrijeme." : "Više informacija.";
  return (
    <SectionPage current="informacije" topKey="informacije" eyebrow="Informacije" title="Informacije"
      deck="Sve što trebate znati o članstvu, ustroju i kontaktu Društva.">
      <div className="grid grid-2">
        {sec.children.map((c, i) => (
          <Reveal key={c.key} delay={(i % 2) + 1}>
            <a className="tile" href={navHref(c.key)} style={{ height: "100%" }}>
              <h3>{c.label}</h3>
              <p>{desc(c.key)}</p>
              <span className="go">Otvori <span className="arrow" aria-hidden="true">→</span></span>
            </a>
          </Reveal>
        ))}
      </div>
    </SectionPage>
  );
}

function ClanstvoPage({ current }) {
  const TIERS = window.HND.TIERS;
  return (
    <SectionPage current={current} topKey="informacije" eyebrow="Informacije" title="Članstvo"
      deck="Postanite članom Hrvatskog numizmatičkog društva i pridružite se zajednici sakupljača i istraživača.">
      <div className="prose" style={{ maxWidth: 720 }}><LI /></div>
      <h2 style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 600, margin: "8px 0 18px" }}>Vrste članstva</h2>
      <div className="tiers">
        {TIERS.map((t, i) => (
          <Reveal key={i} delay={(i % 3) + 1}>
            <div className={"tier" + (t.feature ? " feature" : "")} style={{ height: "100%" }}>
              <span className="t-name">{t.name}</span>
              <span className="t-price">{t.price} <small>{t.unit}</small></span>
              <ul>{t.items.map((it, j) => <li key={j}>{it}</li>)}</ul>
            </div>
          </Reveal>
        ))}
      </div>
      <div className="prose" style={{ maxWidth: 720, marginTop: 36 }}>
        <h2>Kako se učlaniti</h2>
        <LI2 />
        <div style={{ marginTop: 20 }}>
          <a className="btn btn-solid" href={navHref("informacije/kontakt")}>Kontaktirajte tajnika <span className="arrow" aria-hidden="true">→</span></a>
        </div>
      </div>
    </SectionPage>
  );
}

function RosterGroup({ title, sub, people, leadCount }) {
  return (
    <div className="roster-group">
      <h2>{title}</h2>
      {sub && <p className="rg-sub">{sub}</p>}
      <div className="roster">
        {people.map((p, i) => (
          <Reveal key={i} delay={(i % 2) + 1}>
            <div className={"member" + (leadCount && i < leadCount ? " lead" : "")}>
              <span className="monogram" aria-hidden="true">{getInitials(p.name)}</span>
              <span>
                <span className="m-name">{p.name}</span>
                <span className="m-role">{p.role}</span>
              </span>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  );
}

function UstrojPage({ current }) {
  const H = window.HND;
  const sub = current.split("/")[2];
  let title = "Ustroj HND", body;
  if (sub === "upravni-odbor") { title = "Upravni odbor"; body = <RosterGroup title="Upravni odbor" people={H.UPRAVNI} leadCount={4} />; }
  else if (sub === "nadzorni-odbor") { title = "Nadzorni odbor"; body = <RosterGroup title="Nadzorni odbor" people={H.NADZORNI} />; }
  else if (sub === "sud-casti") { title = "Sud časti"; body = <RosterGroup title="Sud časti" people={H.SUD_CASTI} />; }
  else if (sub === "likvidator") { title = "Likvidator"; body = <RosterGroup title="Likvidator" people={H.LIKVIDATOR} />; }
  else {
    body = (
      <>
        <RosterGroup title="Upravni odbor" sub="Predsjednik, potpredsjednik, blagajnik, tajnik i odbornici." people={H.UPRAVNI} leadCount={4} />
        <RosterGroup title="Nadzorni odbor" people={H.NADZORNI} />
        <RosterGroup title="Sud časti" people={H.SUD_CASTI} />
        <RosterGroup title="Likvidator" people={H.LIKVIDATOR} />
      </>
    );
  }
  return (
    <SectionPage current={current} topKey="informacije" eyebrow="Informacije" title={title}
      deck={sub ? null : "Tijela upravljanja Hrvatskog numizmatičkog društva, izabrana na Skupštini 1. ožujka 2026."}>
      {body}
    </SectionPage>
  );
}

const IC = {
  pin: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>,
  mail: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>,
  clock: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
};

function KontaktPage({ current }) {
  const C = window.HND.CONTACT;
  return (
    <SectionPage current={current} topKey="informacije" eyebrow="Informacije" title="Kontakt"
      deck="Hrvatsko numizmatičko društvo - Margaretska 3, Zagreb.">
      <div className="contact-grid">
        <div>
          <div className="contact-cards">
            <div className="cc"><span className="cc-ic">{IC.pin}</span><span><div className="cc-k">Adresa</div><div className="cc-v">{C.address}</div></span></div>
            <div className="cc"><span className="cc-ic">{IC.mail}</span><span><div className="cc-k">E-pošta</div><div className="cc-v"><a href={"mailto:" + C.email}>{C.email}</a></div></span></div>
            <div className="cc"><span className="cc-ic">{IC.clock}</span><span><div className="cc-k">Sastanci i druženja</div><div className="cc-v">{C.hours}</div></span></div>
          </div>
          <p style={{ marginTop: 20, color: "var(--muted)", fontSize: 15 }}>Molimo da nam ne šaljete upite vezane uz procjenu euro kovanica.</p>
        </div>
        <div>
          <Placeholder label="Karta - Margaretska 3, Zagreb" className="mapph" />
          <form style={{ marginTop: 24 }} onSubmit={(e) => { e.preventDefault(); alert("Hvala! Poruka je zabilježena (demo)."); }}>
            <div className="form-field"><label htmlFor="cf-name">Ime i prezime</label><input id="cf-name" type="text" required /></div>
            <div className="form-field"><label htmlFor="cf-mail">E-pošta</label><input id="cf-mail" type="email" required /></div>
            <div className="form-field"><label htmlFor="cf-msg">Poruka</label><textarea id="cf-msg" rows="4" required></textarea></div>
            <button className="btn btn-solid" type="submit">Pošalji poruku <span className="arrow" aria-hidden="true">→</span></button>
          </form>
        </div>
      </div>
    </SectionPage>
  );
}

/* ============================================================
   INCC - event landing
   ============================================================ */
function INCCPage({ current, title, year }) {
  const PROG = window.HND.EVENT_PROGRAM;
  const trail = findTrail(current);
  return (
    <>
      <PageHead trail={trail.length ? trail : [{ key: current, label: title }]} eyebrow="Skup / kongres" title={title}
        deck={"Međunarodni numizmatički susret " + year + " u organizaciji i suradnji s Hrvatskim numizmatičkim društvom."} />
      <section className="section" style={{ paddingTop: "clamp(24px,3vw,36px)" }}>
        <div className="wrap-narrow">
          <Reveal><Placeholder label={"INCC " + year + " - vizual"} style={{ aspectRatio: "16/9", borderRadius: "var(--radius-lg)" }} /></Reveal>
          <div className="event-meta">
            <div className="em"><div className="k">Datum</div><div className="v">{year}.</div></div>
            <div className="em"><div className="k">Mjesto</div><div className="v">Zagreb</div></div>
            <div className="em"><div className="k">Format</div><div className="v">Izlaganja i razgled</div></div>
          </div>
          <div className="prose"><p>{window.HND.LI}</p></div>
          <h2 style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 600, margin: "28px 0 8px" }}>Program</h2>
          <div className="program">
            {PROG.map((p, i) => (
              <div className="pr" key={i}>
                <span className="time">{p.time}</span>
                <div><h4>{p.title}</h4><p>{p.desc}</p></div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28 }}>
            <a className="btn btn-solid" href={navHref("informacije/kontakt")}>Prijava i upiti <span className="arrow" aria-hidden="true">→</span></a>
          </div>
        </div>
      </section>
    </>
  );
}

/* ============================================================
   Utility pages
   ============================================================ */
function SearchPage() {
  const [q, setQ] = useState("");
  return (
    <SimplePage current="trazi" eyebrow="Pretraga" title="Pretraga" deck="Pretražite sadržaj stranice Hrvatskog numizmatičkog društva.">
      <form onSubmit={(e) => e.preventDefault()} style={{ display: "flex", gap: 10, maxWidth: 520 }}>
        <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Upišite pojam…" style={{ flex: 1, fontFamily: "var(--sans)", fontSize: 17, padding: "13px 16px", border: "1.5px solid var(--line-strong)", borderRadius: 8 }} aria-label="Pojam za pretragu" />
        <button className="btn btn-solid" type="submit">Traži</button>
      </form>
      <p style={{ marginTop: 20, color: "var(--muted)" }}>{q ? "Nema rezultata za „" + q + "” (demo pretraga)." : "Unesite pojam za pretragu."}</p>
    </SimplePage>
  );
}

function SitemapPage() {
  const NAV = window.HND.NAV;
  return (
    <SimplePage current="sitemap" eyebrow="Navigacija" title="Mapa stranice" wide>
      <ul>
        <li><a href={navHref("")}>Početna</a></li>
        <li><a href={navHref("vijesti")}>Vijesti</a></li>
        {NAV.map((n) => (
          <li key={n.key}>
            <a href={navHref(n.key)}>{n.label}</a>
            {n.children && (
              <ul>
                {n.children.map((c) => (
                  <li key={c.key}>
                    <a href={navHref(c.key)}>{c.label}</a>
                    {c.children && <ul>{c.children.map((g) => <li key={g.key}><a href={navHref(g.key)}>{g.label}</a></li>)}</ul>}
                  </li>
                ))}
              </ul>
            )}
          </li>
        ))}
      </ul>
    </SimplePage>
  );
}

function PrivacyPage() {
  return <SimplePage current="zastita-privatnosti" eyebrow="Pravno" title="Zaštita privatnosti"><LI /><LI2 /><LI /></SimplePage>;
}
function ImpressumPage() {
  const C = window.HND.CONTACT;
  return (
    <SimplePage current="impressum" eyebrow="Pravno" title="Impressum">
      <p><strong>{C.name}</strong><br/>{C.address}<br/><a href={"mailto:" + C.email}>{C.email}</a></p>
      <LI />
    </SimplePage>
  );
}

Object.assign(window, {
  findTrail, NewsIndex, NewsArticle, BooksPage, PrinovePage,
  PovijestPage, ObolHistoryPage, PublikacijeIndex, PublicationPage,
  IzdanjaIndex, EditionPage, InfoIndex, ClanstvoPage, UstrojPage,
  KontaktPage, INCCPage, SearchPage, SitemapPage, PrivacyPage, ImpressumPage,
});