// Shared shell for legal pages (Impressum, Datenschutz)
// Simple, reads great, matches the main site.

function LegalShell({ lang, setLang, titleKey, children }) {
  const t = COPY[lang];
  return (
    <div
      style={{
        minHeight: "100vh",
        background: KS.offwhite,
        color: KS.charcoal,
        fontFamily: KSFonts.body,
      }}
    >
      {/* Top bar */}
      <header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 10,
          background: "rgba(248,247,246,0.85)",
          backdropFilter: "blur(10px)",
          WebkitBackdropFilter: "blur(10px)",
          borderBottom: `1px solid ${KS.border}`,
          padding: "14px 24px",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <a
          href="index.html"
          style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            textDecoration: "none",
            color: KS.charcoal,
            whiteSpace: "nowrap",
          }}
        >
          <span
            style={{
              color: KS.muted,
              fontFamily: KSFonts.mono,
              fontSize: 14,
              marginRight: 2,
            }}
          >
            ←
          </span>
          <div
            style={{
              width: 24,
              height: 24,
              background: KS.coral,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "#fff",
              fontWeight: 700,
              fontSize: 12,
              fontFamily: KSFonts.mono,
            }}
          >
            K
          </div>
          <div style={{ fontWeight: 600, fontSize: 14, letterSpacing: -0.2 }}>
            Kilian Springer
          </div>
        </a>
        <LangToggle lang={lang} setLang={setLang} />
      </header>

      {/* Content */}
      <main
        style={{
          maxWidth: 780,
          margin: "0 auto",
          padding: "56px 24px 40px",
        }}
      >
        <div
          style={{
            fontFamily: KSFonts.mono,
            fontSize: 11,
            letterSpacing: 1.5,
            textTransform: "uppercase",
            color: KS.coral,
            marginBottom: 16,
          }}
        >
          {titleKey === "imprint"
            ? lang === "de"
              ? "Rechtliche Information"
              : "Legal"
            : lang === "de"
              ? "Datenschutz"
              : "Privacy"}
        </div>
        <h1
          style={{
            fontSize: 48,
            fontWeight: 800,
            letterSpacing: -1.8,
            lineHeight: 1,
            color: KS.black,
            margin: 0,
            marginBottom: 32,
            textWrap: "balance",
          }}
        >
          {t[titleKey]}
        </h1>
        <div className="legal-body">{children}</div>
      </main>

      {/* Footer */}
      <footer
        style={{
          borderTop: `1px solid ${KS.border}`,
          padding: "22px 24px 28px",
          maxWidth: 780,
          margin: "24px auto 0",
          fontFamily: KSFonts.mono,
          fontSize: 10,
          letterSpacing: 0.5,
          textTransform: "uppercase",
          color: KS.muted,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "wrap",
          gap: 12,
        }}
      >
        <div>© 2026 · kilian-springer.com</div>
        <div style={{ display: "flex", gap: 14 }}>
          <a
            href="index.html"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            {t.about}
          </a>
          <a
            href="events.html"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            {t.eventsNav}
          </a>
          <a
            href="stufen.html"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            5 Stufen
          </a>
          <a
            href="impressum.html"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            {t.imprint}
          </a>
          <a
            href="datenschutz.html"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            {t.privacy}
          </a>
        </div>
      </footer>

      <style>{`
        .legal-body { font-size: 15px; line-height: 1.65; color: ${KS.charcoal}; }
        .legal-body h2 { font-size: 22px; font-weight: 700; color: ${KS.black}; letter-spacing: -0.4px; margin: 40px 0 12px; }
        .legal-body h3 { font-size: 15px; font-weight: 600; color: ${KS.black}; margin: 24px 0 8px; }
        .legal-body p { margin: 0 0 14px; text-wrap: pretty; }
        .legal-body ul { margin: 0 0 14px; padding-left: 20px; }
        .legal-body li { margin-bottom: 6px; }
        .legal-body a { color: ${KS.coral}; text-decoration: none; }
        .legal-body a:hover { text-decoration: underline; }
        .legal-body .muted { color: ${KS.muted}; font-size: 13px; }
        .legal-body .placeholder {
          font-family: ${KSFonts.mono}; font-size: 12px;
          background: ${KS.blush}; color: ${KS.deepRed};
          padding: 2px 6px; border-radius: 2px;
          letter-spacing: 0.3px;
        }
        .legal-body .note {
          margin: 24px 0; padding: 14px 16px;
          background: ${KS.mintWhite}; border-left: 3px solid ${KS.forest};
          font-size: 13px; color: ${KS.charcoal};
        }
        .legal-body .kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px 20px; margin: 12px 0 20px; font-size: 14px; }
        .legal-body .kv dt { font-family: ${KSFonts.mono}; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: ${KS.muted}; padding-top: 3px; }
        .legal-body .kv dd { margin: 0; color: ${KS.charcoal}; }
      `}</style>
    </div>
  );
}

// Add legal titles to COPY at runtime (keeps shared.jsx small).
COPY.de.imprint_title = "Impressum";
COPY.en.imprint_title = "Imprint";
COPY.de.privacy_title = "Datenschutzerklärung";
COPY.en.privacy_title = "Privacy Policy";
// alias: use `imprint` / `privacy` as titleKey
COPY.de.imprint = "Impressum";
COPY.en.imprint = "Imprint";
COPY.de.privacy = "Datenschutz­erklärung";
COPY.en.privacy = "Privacy Policy";

Object.assign(window, { LegalShell });