/* Shared chrome + layout primitives for the ZeroZ4J site. Exported to window. */
const DS = window.ZeroZ4JDesignSystem_f7e0ed;

const GITHUB = "https://github.com/ZeroZ4j";
const SITE = "https://www.franzschoning.com";
const DOCS_STACK = "https://stack.zeroz4j.com";
const DOCS_DB = "https://db.zeroz4j.com";

const NAV_LINKS = [
  { label: "ZeroZ Stack", href: "stack.html", key: "stack" },
  { label: "ZeroZ DB", href: "db.html", key: "db" },
  { label: "Advisory", href: "about.html", key: "about" },
];

function Pulse({ label }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--color-ash)", textTransform: "uppercase", letterSpacing: "var(--tracking-wide)", fontFamily: "var(--font-mono)", fontSize: "var(--text-10)" }}>
      <span style={{ width: 4, height: 4, background: "var(--color-cyan)", animation: "z4pulse 2s infinite" }} />
      {label}
    </span>
  );
}

/* Docs ↗ — small two-destination menu */
function DocsMenu() {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ position: "relative" }} onMouseLeave={() => setOpen(false)}>
      <button onClick={() => setOpen(!open)} style={{ background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "var(--font-mono)", fontSize: "var(--text-12)", color: open ? "var(--color-brass)" : "var(--color-ash)", textTransform: "uppercase", letterSpacing: "var(--tracking-wide)" }}>Docs ↗</button>
      {open && (
        <div style={{ position: "absolute", top: "100%", left: "50%", transform: "translateX(-50%)", paddingTop: 12, zIndex: 60 }}>
          <div style={{ background: "var(--color-graphite)", border: "1px solid var(--color-steel)", minWidth: 220 }}>
            <a href={DOCS_STACK} target="_blank" rel="noopener" style={{ display: "block", padding: "14px 20px", color: "var(--color-bone)", textDecoration: "none", borderBottom: "1px solid var(--color-steel)", textTransform: "uppercase", letterSpacing: "var(--tracking-wide)" }}>ZeroZ Stack ↗</a>
            <a href={DOCS_DB} target="_blank" rel="noopener" style={{ display: "block", padding: "14px 20px", color: "var(--color-bone)", textDecoration: "none", textTransform: "uppercase", letterSpacing: "var(--tracking-wide)" }}>ZeroZ DB ↗</a>
          </div>
        </div>
      )}
    </div>
  );
}

function Nav({ page }) {
  return (
    <div style={{ position: "sticky", top: 0, zIndex: 50, background: "var(--color-vault)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 32, padding: "20px 48px", borderBottom: "1px solid var(--color-steel)", fontFamily: "var(--font-mono)", fontSize: "var(--text-12)" }}>
      <a href="index.html" style={{ color: "var(--color-bone)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", textDecoration: "none", fontWeight: 500 }}>ZeroZ4J</a>
      <div style={{ display: "flex", alignItems: "center", gap: 28, textTransform: "uppercase", letterSpacing: "var(--tracking-wide)" }}>
        {NAV_LINKS.slice(0, 2).map(l => (
          <a key={l.key} href={l.href} style={{ color: l.key === page ? "var(--color-brass)" : "var(--color-ash)", textDecoration: "none" }}>{l.label}</a>
        ))}
        <DocsMenu />
        <a href="about.html" style={{ color: page === "about" ? "var(--color-brass)" : "var(--color-ash)", textDecoration: "none" }}>Advisory</a>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
        <Pulse label="Apache 2.0" />
        <a href={GITHUB} target="_blank" rel="noopener" style={{ color: "var(--color-bone)", textDecoration: "none", textTransform: "uppercase", letterSpacing: "var(--tracking-wide)" }}>GitHub ↗</a>
      </div>
      <style>{`@keyframes z4pulse{0%,100%{opacity:1}50%{opacity:.2}}`}</style>
    </div>
  );
}

/* Eyebrow label */
function Eyebrow({ children, tone }) {
  return <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-10)", color: tone === "brass" ? "var(--color-brass)" : "var(--color-ash)", textTransform: "uppercase", letterSpacing: "var(--tracking-wide)", marginBottom: 20 }}>{children}</div>;
}

/* Big display headline. Pass accent-styled children via <Serif>. */
function Serif({ children }) {
  return <em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--color-brass)" }}>{children}</em>;
}

function Section({ children, style, id, first }) {
  return (
    <section id={id} style={{ padding: "128px 64px", borderBottom: "1px solid var(--color-steel)", position: "relative", ...(style || {}) }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", position: "relative" }}>{children}</div>
    </section>
  );
}

function H2({ children, style }) {
  return <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: "var(--text-42)", color: "var(--color-bone)", letterSpacing: "var(--tracking-tight)", lineHeight: 1.08, margin: 0, textWrap: "pretty", ...(style || {}) }}>{children}</h2>;
}

/* Product-page hero with meta bar — shared shape for stack.html / db.html */
function ProductHero({ eyebrow, title, body, buttons, meta }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", borderBottom: "1px solid var(--color-steel)", position: "relative" }}>
      <div style={{ flex: 1, display: "flex", alignItems: "center", padding: "112px 64px 88px" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto", width: "100%" }}>
          <Eyebrow tone="brass">{eyebrow}</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: "clamp(44px, 5.6vw, 88px)", letterSpacing: "var(--tracking-tight)", lineHeight: 1.0, color: "var(--color-bone)", margin: 0, maxWidth: 1100, textWrap: "balance" }}>{title}</h1>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-20)", color: "var(--color-ash)", maxWidth: 720, marginTop: 32, lineHeight: 1.5, textWrap: "pretty" }}>{body}</p>
          <div style={{ display: "flex", gap: 12, marginTop: 40 }}>{buttons}</div>
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--color-steel)" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", fontFamily: "var(--font-mono)", fontSize: "var(--text-12)" }}>
          {meta.map(([k, v], i) => (
            <div key={k} style={{ padding: "24px 28px", borderLeft: i ? "1px solid var(--color-steel)" : "none" }}>
              <div style={{ color: "var(--color-ash)", textTransform: "uppercase", letterSpacing: "var(--tracking-wide)", fontSize: "var(--text-10)", marginBottom: 10 }}>{k}</div>
              <div style={{ color: "var(--color-bone)", lineHeight: 1.4 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* Monospace code block with a filename header bar. */
function CodeBlock({ file, lang, badge, badgeTone, children }) {
  const DSlocal = DS;
  return (
    <div style={{ background: "var(--color-graphite)", border: "1px solid var(--color-steel)" }}>
      {(file || badge) && (
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 20px", borderBottom: "1px solid var(--color-steel)" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-12)", color: "var(--color-ash)" }}>{lang ? lang + " · " : ""}{file}</span>
          {badge && <DSlocal.Badge tone={badgeTone || "tech"}>{badge}</DSlocal.Badge>}
        </div>
      )}
      <pre style={{ margin: 0, padding: 24, fontFamily: "var(--font-mono)", fontSize: 13, lineHeight: 1.75, color: "var(--color-bone)", overflowX: "auto" }}>{children}</pre>
    </div>
  );
}

/* Simple syntax-tint helpers for code blocks */
const kw = (t) => <span style={{ color: "var(--color-brass)" }}>{t}</span>;
const cy = (t) => <span style={{ color: "var(--color-cyan)" }}>{t}</span>;
const cm = (t) => <span style={{ color: "var(--color-ash)" }}>{t}</span>;

function Footer() {
  return (
    <div style={{ padding: "96px 64px 56px", position: "relative" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "end", marginBottom: 56 }}>
          <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: "var(--text-64)", letterSpacing: "var(--tracking-tight)", color: "var(--color-bone)", margin: 0, lineHeight: 0.98 }}>
            One language.<br /><Serif>Zero impedance.</Serif>
          </h2>
          <div style={{ display: "flex", gap: 12 }}>
            <a href="stack.html" style={{ textDecoration: "none" }}><DS.Button variant="primary">ZeroZ Stack</DS.Button></a>
            <a href="db.html" style={{ textDecoration: "none" }}><DS.Button variant="secondary">ZeroZ DB</DS.Button></a>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--color-steel)", paddingTop: 24, fontFamily: "var(--font-mono)", fontSize: "var(--text-12)", color: "var(--color-ash)" }}>
          <div>PROJECT<br /><span style={{ color: "var(--color-bone)" }}>ZeroZ4J · Two zero-impedance Java projects</span></div>
          <div>SOURCE<br /><a href={GITHUB} target="_blank" rel="noopener" style={{ color: "var(--color-brass)", textDecoration: "none" }}>github.com/ZeroZ4j ↗</a></div>
          <div>PRINCIPAL<br /><a href={SITE} target="_blank" rel="noopener" style={{ color: "var(--color-brass)", textDecoration: "none" }}>franzschoning.com ↗</a></div>
          <div>STATUS<br /><span style={{ color: "var(--color-cyan)" }}>● Open source · Apache 2.0</span></div>
        </div>
        <div style={{ marginTop: 40, fontFamily: "var(--font-mono)", fontSize: "var(--text-10)", color: "var(--color-ash)", textTransform: "uppercase", letterSpacing: "var(--tracking-wide)" }}>
          © 2024–2026 Franz Schöning — Principal Enterprise Architect, licensed Apache 2.0.
        </div>
      </div>
    </div>
  );
}

/* Page shell: vault surface + centered Libra axis line */
function Page({ page, children }) {
  return (
    <div className="vault-surface" style={{ minHeight: "100vh" }}>
      <Nav page={page} />
      {children}
      <Footer />
    </div>
  );
}

Object.assign(window, { Nav, Footer, Page, Eyebrow, Serif, Section, H2, CodeBlock, ProductHero, kw, cy, cm, GITHUB, SITE, DOCS_STACK, DOCS_DB, Pulse });
