/* ============================================================
   Naslovnica - 3 varijante hero dijela + zajedničke sekcije.
   ============================================================ */

/* ---------- shared: Euro disclaimer notice ---------- */
function EuroNotice() {
  return (
    <Reveal className="notice" style={{ maxWidth: 760, margin: "0 auto" }}>
      <span className="mark" aria-hidden="true">i</span>
      <span><strong>Poštovani,</strong> molimo vas da nam ne šaljete upite vezane uz euro kovanice - Društvo se ne bavi njihovom procjenom.</span>
    </Reveal>
  );
}

/* ---------- VARIANT A - centered classic ---------- */
function HeroA() {
  return (
    <section className="hero heroA">
      <div className="heroA-deco" aria-hidden="true"></div>
      <div className="wrap">
        <Reveal><div className="seal-wrap"><Seal className="seal-lg" /></div></Reveal>
        <Reveal delay={1}><span className="overline">Osnovano u Zagrebu · 1928.</span></Reveal>
        <Reveal delay={1}><h1>Hrvatsko numizmatičko društvo</h1></Reveal>
        <Reveal delay={2}>
          <div className="estd"><span className="dot" aria-hidden="true"></span>numizmatika i srodne discipline<span className="dot" aria-hidden="true"></span></div>
        </Reveal>
        <Reveal delay={2}>
          <p className="lead">Strukovna udruga posvećena proučavanju, čuvanju i promicanju numizmatike - kovanog i papirnatog novca, medalja i odlikovanja.</p>
        </Reveal>
        <Reveal delay={3} className="cta-row">
          <a className="btn btn-solid" href={navHref("informacije/clanstvo")}>Postanite član <span className="arrow" aria-hidden="true">→</span></a>
          <a className="btn btn-ghost" href={navHref("publikacije/obol")}>Pregledajte publikacije</a>
        </Reveal>
        <Reveal delay={4}>
          <div className="hero-meta">
            <a href={navHref("publikacije/obol")}>
              <span><span className="mk">Najnoviji broj</span><br/><span className="vv">OBOL 69</span></span>
              <span className="arrow" aria-hidden="true">→</span>
            </a>
            <div><span><span className="mk">Sastanci</span><br/><span className="vv">Utorkom 17–20 h</span></span></div>
            <a href={navHref("informacije/kontakt")}>
              <span><span className="mk">Adresa</span><br/><span className="vv">Margaretska 3, Zagreb</span></span>
              <span className="arrow" aria-hidden="true">→</span>
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- shared: News / Blog (user priority) ---------- */
function HomeNews() {
  const NEWS = window.HND.NEWS;
  const lead = NEWS[0];
  const rest = NEWS.slice(1, 4);
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Vijesti i obavijesti</span>
            <h2>Iz Društva</h2>
          </div>
          <a className="textlink" href={navHref("vijesti")}>Sve vijesti <span className="arrow" aria-hidden="true">→</span></a>
        </div>

        <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) => (
            <Reveal key={n.key} delay={i + 1}>
              <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>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- shared: Meeting facts ---------- */
function HomeFacts() {
  const C = window.HND.CONTACT;
  return (
    <section className="section alt">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Sastanci i druženja</span>
            <h2>Svaki utorak otvoreni za članove i prijatelje</h2>
          </div>
        </div>
        <div className="factstrip">
          <div className="fact"><div className="k">Kada</div><div className="v">Utorkom<small>17:00 – 20:00 sati</small></div></div>
          <div className="fact"><div className="k">Gdje</div><div className="v">Margaretska 3<small>10000 Zagreb</small></div></div>
          <div className="fact"><div className="k">Tko</div><div className="v">Članovi i gosti<small>Slobodan pregled biblioteke</small></div></div>
        </div>
        <p style={{ marginTop: 22, color: "var(--muted)", maxWidth: 720 }}>
          U provedbi je sređivanje biblioteke Društva; viškovi knjižnih jedinica otpisuju se na tjednoj bazi. Članovi mogu besplatno preuzeti izdvojene časopise, knjige, aukcijske kataloge i zbornike.
        </p>
      </div>
    </section>
  );
}

/* ---------- shared: Explore tiles ---------- */
function HomeExplore() {
  const tiles = [
    { n: "01", t: "Nove knjige", d: "Najave izlaska i promocija novih izdanja.", k: "nove-knjige" },
    { n: "02", t: "Publikacije", d: "OBOL, Numizmatičke vijesti, zbornici i katalozi.", k: "publikacije" },
    { n: "03", t: "Povijest Društva", d: "Gotovo stoljeće numizmatike u Hrvatskoj.", k: "povijest/povijest" },
    { n: "04", t: "Članstvo", d: "Kako se učlaniti i pogodnosti za članove.", k: "informacije/clanstvo" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div><span className="eyebrow">Istražite</span><h2>Što sve nudimo</h2></div>
        </div>
        <div className="grid grid-4">
          {tiles.map((t, i) => (
            <Reveal key={t.k} delay={i + 1}>
              <a className="tile" href={navHref(t.k)} style={{ height: "100%" }}>
                <span className="num">{t.n}</span>
                <h3>{t.t}</h3>
                <p>{t.d}</p>
                <span className="go">Otvori <span className="arrow" aria-hidden="true">→</span></span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- shared: INC strip ---------- */
function HomeINC() {
  return (
    <section className="section ink">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
        <div style={{ maxWidth: 640 }}>
          <span className="eyebrow" style={{ color: "#a39a8b" }}>Međunarodna suradnja</span>
          <h2 style={{ marginTop: 12, fontWeight: 500 }}>Član Međunarodnog numizmatičkog vijeća (INC)</h2>
          <p style={{ color: "#c9c1b3", marginTop: 14 }}>Društvo je obnovilo članstvo u INC-u do 2027. godine. Vijeće okuplja 160 institucija iz 38 zemalja - muzeja, instituta, društava i kovnica.</p>
          <a className="textlink" href={navHref("vijesti/inc")} style={{ color: "#fff", borderColor: "rgba(255,255,255,.3)", marginTop: 6 }}>Više o članstvu <span className="arrow" aria-hidden="true">→</span></a>
        </div>
        <Placeholder label="INC logotip" style={{ width: 150, height: 150, background: "rgba(255,255,255,.05)", borderColor: "rgba(255,255,255,.14)" }} shape="coin" />
      </div>
    </section>
  );
}

/* ---------- HOME (Classic) ---------- */
function Home() {
  return (
    <>
      <HeroA />
      <div className="notice-band">
        <div className="wrap"><EuroNotice /></div>
      </div>
      <HomeNews />
      <HomeFacts />
      <HomeExplore />
      <HomeINC />
    </>
  );
}

Object.assign(window, { Home });