/* Shared document-grade policy page renderer for melgeek.fr stubs.
   Usage (after _ds_bundle.js + React): window.MGPolicy({ eyebrow, title, updated, sections:[{h,p}] }). */
window.MGPolicy = function MGPolicy(cfg) {
  const { AnnouncementBar, SiteHeader, SiteFooter, Eyebrow, EmailTeaser } = window.MelGeekFrDesignSystem_7cf6d5;

  function Policy() {
    return (
      <div>
        <AnnouncementBar />
        <SiteHeader theme="paper" cartCount={0} logoSrc="../../assets/logo/logo-melgeek.png" />
        <section style={{ background: "var(--mg-paper)", minHeight: "62vh" }}>
          <div style={{ maxWidth: "760px", margin: "0 auto", padding: "var(--mg-space-9) var(--mg-gutter) var(--mg-space-10)" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--mg-space-3)", paddingBottom: "var(--mg-space-5)", borderBottom: "1px solid var(--mg-border)" }}>
              {cfg.eyebrow ? <Eyebrow bracket>{cfg.eyebrow}</Eyebrow> : null}
              <h1 style={{ margin: 0, fontFamily: "var(--mg-font-display)", fontWeight: 700, fontSize: "var(--mg-step-4)", textTransform: "uppercase", letterSpacing: "var(--mg-track-display)", color: "var(--mg-ink-900)" }}>
                {cfg.title}
              </h1>
              {cfg.updated ? <span style={{ fontFamily: "var(--mg-font-mono)", fontSize: "var(--mg-step--2)", color: "var(--mg-ink-500)" }}>{cfg.updated}</span> : null}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--mg-space-6)", marginTop: "var(--mg-space-7)" }}>
              {cfg.sections.map((s, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "var(--mg-space-5)", alignItems: "start" }}>
                  <span style={{ fontFamily: "var(--mg-font-mono)", fontSize: "var(--mg-step--2)", color: "var(--mg-ink-400, #a0a0a8)", paddingTop: "4px", whiteSpace: "nowrap" }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                    <h2 style={{ margin: 0, fontFamily: "var(--mg-font-display)", fontWeight: 600, fontSize: "var(--mg-step-1)", textTransform: "uppercase", letterSpacing: "var(--mg-track-tight)", color: "var(--mg-ink-900)" }}>
                      {s.h}
                    </h2>
                    <p className="mg-p" style={{ margin: 0, maxWidth: "62ch", lineHeight: 1.65 }}>{s.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
        <SiteFooter logoSrc="../../assets/logo/logo-melgeek.png" teaserSlot={<EmailTeaser variant="footer" />} />
      </div>
    );
  }
  ReactDOM.createRoot(document.getElementById("root")).render(<Policy />);
};