/* ============================================================
   landing.jsx — minimal home: hero + clean docs index
   Exposes window.Landing
   ============================================================ */
/* group a flat page list into roots + children (same-group nesting only) */
function hiTree(items) {
  const list = items.filter(Boolean);
  const ids = new Set(list.map((p) => p.id));
  const childrenOf = {};
  const roots = [];
  list.forEach((p) => {
    const par = p.parent && p.parent !== p.id && ids.has(p.parent) ? p.parent : null;
    if (par) (childrenOf[par] = childrenOf[par] || []).push(p);
    else roots.push(p);
  });
  return { roots, childrenOf };
}

function HiItem({ node }) {
  const Ic = resolveIcon(PAGE_ICON[node.id], "doc");
  return (
    <li>
      <a href={"#/docs/" + node.id}>
        {Ic && <span className="hi-li-ic"><Ic /></span>}
        <span className="sl-text">{node.title.replace(/ —.*$/, "")}</span>
        {node.draft && <span className="hi-draft">Draft</span>}
      </a>
    </li>
  );
}

function Landing({ onOpenSearch, theme }) {
  const go = (hash) => { window.location.hash = hash; };
  const bannerLight = window.cfg ? window.cfg("bannerImage") : "";
  const bannerDark = window.cfg ? window.cfg("bannerImageDark") : "";
  // Dark theme uses its own picture when set, otherwise falls back to the light one.
  const banner = (theme === "dark" ? bannerDark : bannerLight) || bannerLight;
  const bPosY = window.cfg ? window.cfg("bannerPosY") : 50;
  const bH = window.cfg ? window.cfg("bannerHeight") : 320;
  const bOv = window.cfg ? window.cfg("bannerOverlay") : 38;
  const bVig = window.cfg ? window.cfg("bannerVignette") : 0;
  const bVigColor = (window.cfg ? window.cfg("bannerVignetteColor") : "black") || "black";
  const bVigGradient = bVigColor === "transparent" ? "none"
    : `radial-gradient(ellipse at center, transparent 38%, ${bVigColor === "white" ? "#fff" : "#000"} 122%)`;
  return (
    <div className="landing">
      <section className={"hero hero-simple" + (banner ? " has-banner" : "")} style={banner ? { height: bH } : undefined}>
        {banner ? (
          <>
            <div className="hero-banner" style={{ backgroundImage: `url("${banner}")`, backgroundPosition: `center ${bPosY}%` }} />
            <div className="hero-banner-veil" style={{ opacity: bOv / 100 }} />
            <div className="hero-banner-vignette" style={{ opacity: bVig / 100, background: bVigGradient }} />
          </>
        ) : (
          <>
            <div className="hero-grid-bg" />
            <div className="hero-glow" />
          </>
        )}
        <div className="hero-inner">
          <div className="hero-eyebrow">{window.cfg ? window.cfg("siteEyebrow") : "Machinery Compliance Platform"}</div>
          <h1>{window.cfg ? window.cfg("siteTitle") : "Konform"}<br /><span className="accent">{window.cfg ? window.cfg("siteTitleAccent") : "Docs"}</span></h1>
          <p className="hero-sub">{window.cfg ? window.cfg("siteTagline") : ""}</p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={() => go("#/docs/introduction")}>
              Read the docs <I.arrowR />
            </button>
          </div>
        </div>
      </section>

      <section className="section home-index-section">
        <div className="home-index">
          {NAV.map((grp) => {
            const GIcon = resolveIcon(grp.icon, "layers");
            return (
              <div className="hi-group" key={grp.group}>
                <div className="hi-group-head">
                  {GIcon && <span className="hi-icon"><GIcon /></span>}
                  {grp.group}
                </div>
                <ul className="hi-list">
                  {hiTree(grp.items).roots.map((p) => <HiItem key={p.id} node={p} />)}
                </ul>
              </div>
            );
          })}
        </div>
      </section>

      <footer className="landing-foot">
        <div className="landing-foot-inner">
          <div className="lf-brand">
            <span className="brand-mark"><I.check /></span>
            <span className="brand-text">{window.cfg ? window.cfg("siteTitle") : "Konform"} <span className="sub">{window.cfg ? window.cfg("siteTitleAccent") : "Docs"}</span></span>
          </div>
          <p className="lf-note">{window.cfg ? window.cfg("footerNote") : ""}</p>
          <div className="lf-version" title={(window.SITE_CHANGELOG && window.SITE_CHANGELOG[0]) ? window.SITE_CHANGELOG[0].note : ""}>
            <span className="lf-ver-dot" /> Version {window.SITE_VERSION || "1.00"}
          </div>
        </div>
      </footer>
    </div>
  );
}

window.Landing = Landing;