/* Gemeinsamer Header + Footer für alle Seiten */

function Eyebrow({ children }) {
  return <div style={{ fontFamily: "var(--font-pixel)", fontSize: 13, letterSpacing: "0.12em", color: "var(--blue-600)", marginBottom: 12 }}>{children}</div>;
}

function SiteHeader({ active }) {
  const { Logo, Button } = window.SeevetalDigitalDesignSystem_7a23a1;
  const linkStyle = (key) => ({
    color: active === key ? "var(--blue-600)" : "var(--text-body)",
    textDecoration: active === key ? "underline" : "none",
    textUnderlineOffset: "6px",
    fontSize: 17,
    fontWeight: 700,
    padding: "8px 4px",
  });
  const cls = "sd-nav-link";
  return (
    <header style={{ borderBottom: "1px solid var(--ink-100)", background: "var(--paper)", position: "sticky", top: 0, zIndex: 20 }}>
      <div className="sd-container" style={{ padding: "14px 24px", display: "flex", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
        <a href="index.html" style={{ textDecoration: "none" }} aria-label="Zur Startseite"><Logo size="sm" /></a>
        <nav style={{ display: "flex", gap: 24, marginLeft: "auto", alignItems: "center", flexWrap: "wrap" }}>
          <a href="index.html" className={cls} style={linkStyle("start")}>Startseite</a>
          <a href="leistungen.html" className={cls} style={linkStyle("leistungen")}>Leistungen</a>
          <a href="kontakt.html" className={cls} style={linkStyle("kontakt")}>Kontakt</a>
          <Button size="sm" onClick={() => { window.location.href = "kontakt.html"; }}>Termin vereinbaren</Button>
        </nav>
      </div>
    </header>
  );
}

function SiteFooter() {
  const { Logo } = window.SeevetalDigitalDesignSystem_7a23a1;
  const flink = { color: "var(--blue-200)" };
  return (
    <footer style={{ background: "var(--surface-inverse)", color: "var(--blue-200)" }}>
      <div className="sd-container" style={{ padding: "48px 24px", display: "flex", gap: 48, flexWrap: "wrap", alignItems: "flex-start" }}>
        <div style={{ flex: "1 1 280px" }}>
          <Logo size="sm" inverse />
          <p style={{ fontSize: 16, marginTop: 16, maxWidth: 340 }}>Beratung und Coaching für digitale Kompetenz — persönlich, geduldig, bei Ihnen vor Ort in Seevetal und Umgebung.</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 16 }}>
          <strong style={{ color: "#fff" }}>Kontakt</strong>
          <a href="tel:+4915146388214" style={flink}>0151 46388214</a>
          <a href="mailto:kontakt@seevetal-digital.de" style={flink}>kontakt@seevetal-digital.de</a>
          <span>Helmsweg 2a, 21218 Seevetal</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 16 }}>
          <strong style={{ color: "#fff" }}>Rechtliches</strong>
          <a href="impressum.html" style={flink}>Impressum</a>
          <a href="datenschutz.html" style={flink}>Datenschutz</a>
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--blue-800)", padding: "16px 24px", textAlign: "center", fontSize: 14, color: "var(--blue-300)" }}>
        © 2026 Seevetal-Digital · Inhaber Pierre-Frederik Augustiny
      </div>
    </footer>
  );
}

/* Header/Footer in Platzhalter-Divs einhängen (für Seiten mit statischem Inhalt) */
function mountChrome(active) {
  const h = document.getElementById("site-header");
  const f = document.getElementById("site-footer");
  if (h) ReactDOM.createRoot(h).render(<SiteHeader active={active} />);
  if (f) ReactDOM.createRoot(f).render(<SiteFooter />);
}

Object.assign(window, { SiteHeader, SiteFooter, Eyebrow, mountChrome });