/* global React */
// Dentertain — Rechtstexte (Impressum, Datenschutz, AGB, Widerruf).
// Inhalt kommt aus legal-data.js (window.DT_LEGAL, aus dem Rechtstexte-Workflow).
// Ruhige, gut lesbare Prosa-Seite im Blush-Design; Inhalt ist standardmäßig
// sichtbar (kein Reveal-Gating), nur ein sanfter page-enter.

const LegalBlock = ({ b }) => {
  if (!b) return null;
  if (b.type === "p") return <p className="legal__p">{b.text}</p>;
  if (b.type === "note") return <p className="legal__hint">{b.text}</p>;
  if (b.type === "contact") {
    return (
      <div className="legal__contact">
        {String(b.text || "").split("\n").map((ln, i) => <div key={i}>{ln || " "}</div>)}
      </div>
    );
  }
  if (b.type === "list") {
    return <ul className="legal__list">{(b.items || []).map((it, i) => <li key={i}>{it}</li>)}</ul>;
  }
  return null;
};

// Stabile Anker-ID pro Abschnitt (Umlaut-fest, index-eindeutig).
const secId = (heading, i) => {
  const base = String(heading || "")
    .toLowerCase()
    .replace(/[§&]/g, " ")
    .replace(/ä/g, "ae").replace(/ö/g, "oe").replace(/ü/g, "ue").replace(/ß/g, "ss")
    .replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40);
  return "sec-" + (base || "abschnitt") + "-" + i;
};

const LegalPage = ({ page, onNavigate }) => {
  const store = (typeof window !== "undefined" && window.DT_LEGAL) || { docs: {}, updated: "" };
  const data = store.docs[page];
  React.useEffect(() => { try { window.scrollTo({ top: 0, behavior: "instant" }); } catch (e) {} }, [page]);

  const sections = (data && data.sections) || [];
  // Sprung-Inhaltsverzeichnis nur auf den langen Seiten (Datenschutz/AGB).
  const showToc = sections.length >= 8;
  const jumpTo = (i) => {
    const el = document.getElementById(secId(sections[i].heading, i));
    if (!el) return;
    const reduce = typeof window.matchMedia === "function"
      && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    el.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
  };

  return (
    <div className="legal">
      <style>{LEGAL_CSS}</style>
      <div className="legal__wrap">
        <button className="legal__back" onClick={() => onNavigate("home")}>
          <span aria-hidden="true">←</span> Zurück zur Startseite
        </button>
        {!data ? (
          <p className="legal__p">Dieser Inhalt ist derzeit nicht verfügbar.</p>
        ) : (
          <>
            <span className="eyebrow solo">Rechtliches</span>
            <h1 className="legal__title">{data.title}</h1>
            {data.intro ? <p className="legal__intro">{data.intro}</p> : null}

            {showToc ? (
              <nav className="legal__toc" aria-label="Inhaltsverzeichnis">
                <span className="legal__toc-label">Auf dieser Seite</span>
                <ul className="legal__toc-list">
                  {sections.map((s, i) => (
                    <li key={i}>
                      <button type="button" className="legal__toc-link" onClick={() => jumpTo(i)}>
                        {s.heading}
                      </button>
                    </li>
                  ))}
                </ul>
              </nav>
            ) : null}

            {sections.map((s, i) => (
              <section className="legal__section" id={secId(s.heading, i)} key={i}>
                <h2 className="legal__h">{s.heading}</h2>
                {(s.blocks || []).map((b, j) => <LegalBlock key={j} b={b} />)}
              </section>
            ))}

            {data.reviewerNote ? (
              <div className="legal__note">
                <span className="legal__note-label">Rechtlicher Hinweis</span>
                <p className="legal__p" style={{ margin: 0 }}>{data.reviewerNote}</p>
              </div>
            ) : null}

            <div className="legal__updated">Stand: {store.updated}</div>
          </>
        )}
      </div>
    </div>
  );
};

const LEGAL_CSS = `
.legal { background: var(--bg); padding: 132px 0 120px; --measure: 540px; }
.legal__wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.legal__back {
  display: flex; width: fit-content; align-items: center; gap: 8px; background: none; border: none;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3); cursor: pointer; padding: 0; margin: 0 0 40px;
  transition: color 240ms var(--ease-out);
}
.legal__back:hover { color: var(--accent-active-strong); }
.legal .eyebrow { margin-bottom: 18px; }
.legal__title {
  font-size: clamp(26px, 5.2vw, 50px); font-weight: 800; line-height: 1.02;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg); margin: 0 0 8px;
  text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
.legal__intro {
  font-size: 17px; line-height: 1.7; color: var(--fg-2); max-width: var(--measure);
  margin: 22px 0 8px; text-wrap: pretty;
}
.legal__section { margin-top: 52px; padding: 0; scroll-margin-top: 96px; }
.legal__h {
  font-size: 20px; font-weight: 700; letter-spacing: -0.003em; color: var(--fg);
  margin: 0 0 12px; text-wrap: balance;
}
.legal__p { font-size: 15.5px; line-height: 1.8; color: var(--fg-2); margin: 0 0 14px; max-width: var(--measure); text-wrap: pretty; }
.legal__p:last-child { margin-bottom: 0; }
.legal__list { margin: 0 0 14px; padding-left: 22px; list-style: none; max-width: var(--measure); }
.legal__list li {
  position: relative; font-size: 15.5px; line-height: 1.75; color: var(--fg-2);
  margin-bottom: 10px; text-wrap: pretty;
}
.legal__list li::before {
  content: ""; position: absolute; left: -18px; top: 0.72em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent-active);
}
.legal__contact {
  font-size: 15.5px; line-height: 1.72; color: var(--fg); font-weight: 500; max-width: var(--measure);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 22px; margin: 0 0 14px;
}
.legal__hint {
  font-size: 14px; line-height: 1.7; color: var(--fg-2); max-width: var(--measure);
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 13px 17px; margin: 0 0 14px; text-wrap: pretty;
}
/* Sprung-Inhaltsverzeichnis — nur auf den langen Seiten (Datenschutz/AGB) */
.legal__toc {
  max-width: var(--measure); margin: 34px 0 4px; padding: 20px 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.legal__toc-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 14px;
}
.legal__toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
@media (min-width: 560px) { .legal__toc-list { grid-template-columns: 1fr 1fr; gap: 9px 32px; } }
.legal__toc-link {
  font-family: inherit; text-align: left; font-size: 14px; line-height: 1.4; color: var(--fg-2);
  background: none; border: none; padding: 0; cursor: pointer; transition: color 180ms var(--ease-out);
}
.legal__toc-link:hover { color: var(--accent-active-strong); }
.legal__note {
  margin-top: 54px; padding: 20px 24px; max-width: var(--measure); background: var(--blush-100);
  border: 1px solid var(--blush-300); border-radius: 14px;
}
.legal__note-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blush-ink); margin-bottom: 8px;
}
.legal__updated {
  margin-top: 40px; font-size: 12px; letter-spacing: 0.04em; color: var(--fg-3);
  border-top: 1px solid var(--hairline); padding-top: 20px;
}
@media (max-width: 640px) {
  .legal { padding: 104px 0 88px; }
  .legal__wrap { padding: 0 18px; }
  .legal__section { margin-top: 38px; }
  .legal__toc-list { gap: 10px; }
}
`;

Object.assign(window, { LegalPage });