// Shared legal-page renderer for Impressum, Datenschutz, and AGB.
//
// Each legal page passes a DOC object with { en, de } content. The right
// language renders based on window.CURRENT_LANG (set by i18n.js), so these
// pages switch with the existing EN/DE toggle.
//
// CONTENT STRUCTURE — a doc looks like:
//   { en: { title, updated, intro, sections: [{ h, body:[...] }] },
//     de: { ... same shape ... } }
// • body entries are plain strings (paragraphs) OR { list: [..] } for bullets.
// • Anything wrapped in [PLACEHOLDER …] is text you/your lawyer must replace.

function LegalPage({ doc, navKey }) {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "themeColor": "navy" }/*EDITMODE-END*/);
  useTweakBodyClasses(tweaks);
  useLucideIcons([tweaks]);

  const lang = window.CURRENT_LANG || "en";
  const c = doc[lang] || doc.en;

  return (
    <>
      <SiteNav active={navKey} />

      <header className="page-header">
        <div className="container">
          <span className="eyebrow">{c.eyebrow}</span>
          <h1 style={{ fontSize: "35px" }}>{c.title}</h1>
          {c.updated && <p style={{ maxWidth: "720px" }}>{c.updated}</p>}
        </div>
      </header>

      <section className="section">
        <div className="container">
          <article className="legal">
            {c.intro && <p className="legal-intro">{c.intro}</p>}
            {c.sections.map((s, i) => (
              <section key={i} className="legal-section">
                {s.h && <h2>{s.h}</h2>}
                {s.body.map((b, j) =>
                  typeof b === "string"
                    ? <p key={j}>{b}</p>
                    : <ul key={j}>{b.list.map((li, k) => <li key={k}>{li}</li>)}</ul>
                )}
              </section>
            ))}
          </article>
        </div>
      </section>

      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Primary color"
          value={tweaks.themeColor}
          onChange={v => setTweak("themeColor", v)}
          options={[
            { value: "navy",     label: "Navy" },
            { value: "graphite", label: "Graphite" },
            { value: "emerald",  label: "Emerald" },
            { value: "gold",     label: "Gold" },
          ]} />
      </TweaksPanel>
    </>
  );
}

window.LegalPage = LegalPage;