// legal.jsx — shared layout for Impressum / Datenschutz
function LegalLayout({ active, title, eyebrow, children }) {
  return (
    <Page active={active}>
      <PageHeader eyebrow={eyebrow} title={title} />
      <section style={{ background: "var(--paper)", padding: "60px 0 90px" }}>
        <Container width={860}>{children}</Container>
      </section>
    </Page>
  );
}

function LSec({ heading, children }) {
  return (
    <div style={{ marginBottom: 36 }}>
      {heading && <h2 style={{ fontFamily: "var(--font-serif)", fontSize: 24, fontWeight: 600, color: "var(--fg)", margin: "0 0 14px" }}>{heading}</h2>}
      {children}
    </div>
  );
}

function LP({ children }) {
  return <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.75, color: "var(--fg-muted)", margin: "0 0 14px" }}>{children}</p>;
}

function LInfo({ rows }) {
  return (
    <div style={{ background: "var(--white)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: "26px 28px", margin: "0 0 28px" }}>
      {rows.map(([k, v], i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 16, padding: "8px 0", borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "0" }}>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 700, color: "var(--fg)" }}>{k}</span>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--fg-muted)" }}>{v}</span>
        </div>
      ))}
    </div>
  );
}

function ExtLink({ href, children }) {
  return <a href={href} target="_blank" rel="noopener" style={{ color: "var(--gold-700)", wordBreak: "break-word" }}>{children || href}</a>;
}

Object.assign(window, { LegalLayout, LSec, LP, LInfo, ExtLink });