// ---------- Legal Modal (Impressum / Datenschutz / AGB) ----------
function LegalModal({ t, which, onClose }) {
  const data = t.legal[which];
  if (!data) return null;
  return (
    <div className="modal-backdrop" role="dialog" aria-modal="true" aria-label={data.title}
      onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="legal-sheet">
        <button className="modal-close unstyled" onClick={onClose} aria-label={t.legal.close}>
          <Icon.close width="14" height="14"/>
        </button>
        <div className="legal-inner">
          <div className="kicker" style={{ marginBottom: 12 }}>{which.toUpperCase()}</div>
          <h2 className="h-1" style={{ marginBottom: 28 }}>{data.title}</h2>
          {data.body.map((sec, i) => (
            <section key={i} style={{ marginBottom: 22 }}>
              <h3 style={{
                fontFamily: "var(--sans)",
                fontSize: 14,
                fontWeight: 600,
                letterSpacing: "0.04em",
                textTransform: "uppercase",
                marginBottom: 8,
                color: "var(--fg)",
              }}>{sec.h}</h3>
              <p className="body" style={{ whiteSpace: "pre-line", maxWidth: "62ch", margin: 0 }}>{sec.p}</p>
            </section>
          ))}
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "flex-end" }}>
            <button className="btn btn-primary" onClick={onClose}>{t.legal.close}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LegalModal });