// legal.jsx — pages Avis juridique & Avis de non-responsabilité

function LegalPage({ lang, go, target }) {
  const t = window.I18N[lang];
  const data = (t.legalPages && t.legalPages[target]) || null;
  if (!data) {
    return (
      <div className="page" data-screen-label="Legal">
        <PageHeader eyebrow="Légal" title="Page introuvable" sub=""/>
      </div>
    );
  }
  return (
    <div className="page" data-screen-label={`Legal — ${data.title}`}>
      <PageHeader eyebrow={data.eyebrow} title={data.title} sub={data.intro}/>
      <section style={{ paddingTop: 20, paddingBottom: 100 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 80, alignItems: "start" }}>
            <InView>
              <div style={{ position: "sticky", top: 120, paddingTop: 8, borderTop: "1px solid var(--ink)" }}>
                <div className="kpi-label" style={{ marginBottom: 16, color: "var(--gold-2)" }}>{lang === "fr" ? "Sommaire" : "On this page"}</div>
                <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                  {data.sections.map((s, i) => (
                    <li key={i}>
                      <a href={`#sec-${i}`} style={{ fontSize: 13, color: "var(--ink-soft)", textDecoration: "none" }}
                         onClick={(e) => { e.preventDefault(); const el = document.getElementById(`sec-${i}`); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: "smooth" }); }}>
                        {s.h}
                      </a>
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                  <div className="kpi-label" style={{ marginBottom: 8 }}>{lang === "fr" ? "Mise à jour" : "Updated"}</div>
                  <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>{data.updated}</div>
                </div>
              </div>
            </InView>
            <InView delay={80}>
              <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
                {data.sections.map((s, i) => (
                  <div key={i} id={`sec-${i}`} style={{ scrollMarginTop: 100 }}>
                    {s.h && <h3 style={{ marginBottom: 16, fontFamily: "var(--serif)", fontSize: "clamp(22px, 2.2vw, 30px)", letterSpacing: "-0.01em" }}>{s.h}</h3>}
                    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                      {s.p.map((para, j) => (
                        <p key={j} style={{ fontSize: 15, lineHeight: 1.7, color: "var(--ink-soft)" }}>{para}</p>
                      ))}
                    </div>
                  </div>
                ))}
                <div style={{ marginTop: 24, padding: "24px 28px", background: "var(--bone)", borderLeft: "2px solid var(--gold)" }}>
                  <div className="kpi-label" style={{ marginBottom: 8 }}>{lang === "fr" ? "Questions" : "Questions"}</div>
                  <p style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 12 }}>{data.contactNote}</p>
                  <a href="#" onClick={(e) => { e.preventDefault(); go("contact"); }}
                     style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink)", borderBottom: "1px solid var(--gold)", paddingBottom: 2 }}>
                    {lang === "fr" ? "Nous écrire" : "Contact us"} →
                  </a>
                </div>
              </div>
            </InView>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { LegalPage });