// Rechtsseiten: Impressum + Datenschutzerklärung.
// Seit 04.09.2026 sprachgesteuert: Die Texte stehen je Sprache in sprache-<xx>.js unter
// recht.impressumSeite und recht.datenschutzSeite. Diese Datei rendert sie nur noch.
// Maßgeblich ist die deutsche Fassung (recht.hinweis wird in EN/ES/EL eingeblendet).
//
// Textformat in den Sprachdateien (bewusst einfach, damit Übersetzungen ohne JSX auskommen):
//   **fett**          → hervorgehoben
//   Zeilenumbruch \n  → <br>
//   E-Mail-Adressen, https://… und www.… werden automatisch verlinkt.
// Ein Abschnitt: { titel, absaetze: [String], liste: [String], nachListe: [String] }
// (alle Felder optional; ohne titel entsteht ein Absatzblock ohne Überschrift).

function rechtVerlinke(text, schluessel) {
  const muster = /([\w.+-]+@[\w-]+\.[\w.-]+|https?:\/\/[^\s)]+|www\.[^\s)]+)/g;
  const teile = [];
  let letzte = 0, treffer, i = 0;
  while ((treffer = muster.exec(text))) {
    let wort = treffer[0];
    let rest = '';
    while (/[.,;:]$/.test(wort)) { rest = wort.slice(-1) + rest; wort = wort.slice(0, -1); }
    if (treffer.index > letzte) teile.push(text.slice(letzte, treffer.index));
    const istMail = wort.indexOf('@') >= 0;
    const ziel = istMail ? 'mailto:' + wort : (wort.indexOf('http') === 0 ? wort : 'https://' + wort);
    teile.push(istMail
      ? <a key={`${schluessel}-${i++}`} href={ziel}>{wort}</a>
      : <a key={`${schluessel}-${i++}`} href={ziel} target="_blank" rel="noopener noreferrer">{wort}</a>);
    if (rest) teile.push(rest);
    letzte = treffer.index + treffer[0].length;
  }
  if (letzte < text.length) teile.push(text.slice(letzte));
  return teile;
}

function rechtInline(s) {
  if (typeof s !== 'string') return s;
  const knoten = [];
  s.split('\n').forEach((zeile, zi) => {
    if (zi > 0) knoten.push(<br key={`br${zi}`} />);
    zeile.split('**').forEach((teil, ti) => {
      const inhalt = rechtVerlinke(teil, `${zi}-${ti}`);
      if (ti % 2) knoten.push(<strong key={`f${zi}-${ti}`} style={{ fontWeight: 600, color: 'var(--tinte)' }}>{inhalt}</strong>);
      else inhalt.forEach((k, ki) => knoten.push(typeof k === 'string' ? <React.Fragment key={`t${zi}-${ti}-${ki}`}>{k}</React.Fragment> : k));
    });
  });
  return knoten;
}

function RechtRahmen({ titel, untertitel, onGoto, children }) {
  const { t, lang } = React.useContext(window.SpracheCtx);
  return <main style={{ maxWidth: '880px', margin: '0 auto', padding: '44px var(--rand) 90px' }} data-screen-label={titel}>
    <p style={{ margin: 0, fontSize: '15px' }}><a href="#" onClick={e => { e.preventDefault(); onGoto('home'); }}>{t.recht.zurueck}</a></p>
    <h1 style={{ margin: '30px 0 0', fontSize: 'clamp(27px,3.4vw,40px)', lineHeight: 1.1, letterSpacing: '-.025em', fontWeight: 600 }}>{titel}</h1>
    {untertitel && <p style={{ margin: '10px 0 0', fontSize: '16px', color: 'var(--stein-tief)' }}>{untertitel}</p>}
    {lang !== 'de' && t.recht.hinweis && <p style={{ margin: '18px 0 0', padding: '13px 16px', background: 'var(--papier-ton)', borderLeft: '3px solid var(--gold)', fontSize: '14.5px', lineHeight: 1.55, color: 'var(--stein-tief)' }}>{t.recht.hinweis}</p>}
    <div style={{ marginTop: '14px' }}>{children}</div>
  </main>;
}

function RA({ titel, children }) {
  return <section style={{ marginTop: '34px' }}>
    {titel && <h2 style={{ margin: 0, fontSize: '19px', fontWeight: 600, letterSpacing: '-.015em' }}>{titel}</h2>}
    <div style={{ marginTop: titel ? '10px' : 0, fontSize: '15.5px', lineHeight: 1.7, color: 'var(--stein-tief)' }}>{children}</div>
  </section>;
}
const RP = ({ children, style }) => <p style={Object.assign({ margin: '0 0 10px' }, style || {})}>{children}</p>;
const RL = ({ items }) => <ul style={{ margin: '0 0 10px', paddingLeft: '19px', display: 'grid', gap: '6px' }}>{items.map((x, i) => <li key={i}>{rechtInline(x)}</li>)}</ul>;

function RechtAbschnitte({ abschnitte }) {
  return (abschnitte || []).map((a, i) => <RA key={i} titel={a.titel}>
    {(a.absaetze || []).map((p, j) => <RP key={`p${j}`}>{rechtInline(p)}</RP>)}
    {a.liste && a.liste.length > 0 && <RL items={a.liste} />}
    {(a.nachListe || []).map((p, j) => <RP key={`n${j}`}>{rechtInline(p)}</RP>)}
  </RA>);
}

function RechtSeite({ onGoto, art }) {
  const { t } = React.useContext(window.SpracheCtx);
  const seite = t.recht[art];
  if (!seite) return <RechtRahmen titel={t.recht[art === 'impressumSeite' ? 'impressum' : 'datenschutz']} onGoto={onGoto} />;
  return <RechtRahmen titel={seite.titel} untertitel={seite.untertitel} onGoto={onGoto}>
    <RechtAbschnitte abschnitte={seite.abschnitte} />
    {seite.stand && <RA><RP style={{ margin: 0 }}>{rechtInline(seite.stand)}</RP></RA>}
  </RechtRahmen>;
}

function ImpressumSeite({ onGoto }) { return <RechtSeite onGoto={onGoto} art="impressumSeite" />; }
function DatenschutzSeite({ onGoto }) { return <RechtSeite onGoto={onGoto} art="datenschutzSeite" />; }

Object.assign(window, { ImpressumSeite, DatenschutzSeite });