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

const GITHUB = "https://github.com/fschoning/zeroz4j";
const SITE = "https://www.franzschoning.com";

const NAV_LINKS = [
  { label: "Framework", href: "index.html", key: "home" },
  { label: "Docs", href: "docs.html", key: "docs" },
  { label: "Components", href: "components.html", key: "components" },
  { label: "Capabilities", href: "protocol.html", key: "protocol" },
  { 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>
  );
}

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", gap: 28, textTransform: "uppercase", letterSpacing: "var(--tracking-wide)" }}>
        {NAV_LINKS.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>
        ))}
      </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>;
}

/* 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={GITHUB} target="_blank" rel="noopener" style={{ textDecoration: "none" }}><DS.Button variant="primary">Clone the Repo</DS.Button></a>
            <a href="docs.html" style={{ textDecoration: "none" }}><DS.Button variant="secondary">Read Docs</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 · Reference architecture</span></div>
          <div>SOURCE<br /><a href={GITHUB} target="_blank" rel="noopener" style={{ color: "var(--color-brass)", textDecoration: "none" }}>github.com/fschoning/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, kw, cy, cm, GITHUB, SITE, Pulse });
