/* tenant/ops_ site chrome -- nav, language toggle, footer, Impressum.
   Dark only (no theme switch). Language toggle: DE (default) / EN.
   LangCtx exported so site-home.jsx can read it if needed. */

const { useState, useEffect, useCallback, createContext } = React;

/* ── Language context ──────────────────────────────────────────── */
const LangCtx = createContext("de");

/* ── SiteNav ──────────────────────────────────────────────────── */
function SiteNav({ pal, lang, onToggleLang }) {
  return (
    <nav className="nav">
      <div className="container nav__row">
        <a href="index.html" style={{ display: "inline-flex", alignItems: "center" }} aria-label="tenant/ops_ home">
          <Lockup pal={pal} size={17} blink />
        </a>
        <div style={{ flex: 1 }} />
        <div className="nav__right">
          <button
            onClick={onToggleLang}
            className="theme-toggle"
            aria-label={lang === "de" ? "Switch to English" : "Zu Deutsch wechseln"}
            style={{ width: "auto", padding: "0 10px", borderRadius: 6, fontFamily: MK_TYPE.mono, fontSize: 11, letterSpacing: "0.08em" }}
          >
            {lang === "de" ? "EN" : "DE"}
          </button>
          <a
            className="btn btn--primary"
            href="https://www.linkedin.com/in/simon-lenz-prosec/"
            target="_blank"
            rel="noopener noreferrer"
          >
            {lang === "de" ? "Kontakt aufnehmen" : "Get in touch"}
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ── SiteFooter ───────────────────────────────────────────────── */
function SiteFooter({ pal, lang }) {
  const tagline = lang === "de" ? "Von Admins, für Admins." : "From Admins, for Admins.";
  return (
    <footer className="footer">
      <div className="container">
        <div style={{ padding: "40px 0 24px", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 20 }}>
          <Lockup pal={pal} size={15} />
          <span className="footer__tag" style={{ margin: 0, fontStyle: "italic" }}>{tagline}</span>
          <a href="#impressum" style={{ fontFamily: MK_TYPE.mono, fontSize: 11, color: pal.fgFaint, letterSpacing: "0.06em" }}>
            Impressum
          </a>
        </div>
        <div className="footer__legal">
          <span>
            tenant
            <span style={{ color: pal.accent }}>/</span>
            ops
            <span style={{ color: pal.accent }} className="ops-caret">_</span>
            {"  ·  © 2026 Simon Lenz"}
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ── Impressum ────────────────────────────────────────────────── */
function ImpressumSection({ pal }) {
  return (
    <section id="impressum" className="section section--panel">
      <div className="container">
        <div style={{ padding: "56px 0" }}>
          <span className="eyebrow">Impressum</span>
          <div style={{ marginTop: 20, fontSize: 13.5, lineHeight: 2, color: pal.fgMuted, maxWidth: 480 }}>
            <p style={{ margin: "0 0 14px", fontFamily: MK_TYPE.mono, fontSize: 11, color: pal.fgFaint, letterSpacing: "0.04em" }}>
              {"Angaben gemäß § 5 DDG"}
            </p>
            <address style={{ fontStyle: "normal" }}>
              Simon Lenz<br />
              Goethestr. 8<br />
              56727 Mayen
            </address>
            <p style={{ margin: "16px 0 0" }}>
              E-Mail:{" "}
              <a href="mailto:hello@tenant-ops.dev" style={{ color: pal.accentDeep }}>
                hello@tenant-ops.dev
              </a>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Section helpers (used by site-home.jsx) ──────────────────── */
function Section({ id, panel, flush, tight, children, style }) {
  return (
    <section
      id={id}
      className={"section" + (panel ? " section--panel" : "") + (flush ? " section--flush" : "")}
      style={style}
    >
      <div className="container">
        <div className={"section__inner" + (tight ? " section__inner--tight" : "")}>
          {children}
        </div>
      </div>
    </section>
  );
}

function SectionHead({ eyebrow, title, sub, align = "left", style }) {
  return (
    <div
      className="sec-head"
      style={{
        alignItems: align === "center" ? "center" : "flex-start",
        textAlign: align,
        margin: align === "center" ? "0 auto" : undefined,
        ...style,
      }}
    >
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      <h2 className="sec-title">{title}</h2>
      {sub && <p className="sec-sub">{sub}</p>}
    </div>
  );
}

/* ── SiteShell ────────────────────────────────────────────────── */
function SiteShell({ children }) {
  const [lang, setLang] = useState("de");
  const pal = MK_PALETTES.dark;

  useEffect(() => {
    const root = document.documentElement;
    Object.entries(pal).forEach(([k, v]) => root.style.setProperty("--" + k, v));
    document.body.style.background = pal.bg;
    document.body.style.color = pal.fg;
  }, []);

  const onToggleLang = useCallback(() => setLang((l) => (l === "de" ? "en" : "de")), []);

  return (
    <LangCtx.Provider value={lang}>
      <SiteNav pal={pal} lang={lang} onToggleLang={onToggleLang} />
      <main>
        {typeof children === "function" ? children(pal, lang) : children}
      </main>
      <ImpressumSection pal={pal} />
      <SiteFooter pal={pal} lang={lang} />
    </LangCtx.Provider>
  );
}

Object.assign(window, { LangCtx, SiteNav, SiteFooter, ImpressumSection, Section, SectionHead, SiteShell });