shinkan-jinkendo/frontend/src/pages/LegalPage.jsx

import { Link } from 'react-router-dom'

const PAGES = {
  impressum: {
    title: 'Impressum',
    sections: [
      {
        heading: 'Betreiber / Verantwortlicher',
        placeholder: '[Name und Rechtsform des Betreibers — vom Betreiber einzutragen]',
      },
      {
        heading: 'Anschrift',
        placeholder: '[Straße, Hausnummer, PLZ, Ort — vom Betreiber einzutragen]',
      },
      {
        heading: 'Vertretungsberechtigte Person',
        placeholder: '[Name der vertretungsberechtigten Person — vom Betreiber einzutragen]',
      },
      {
        heading: 'Kontakt',
        placeholder: '[E-Mail-Adresse, ggf. Telefonnummer — vom Betreiber einzutragen]',
      },
      {
        heading: 'Registerangaben (falls relevant)',
        placeholder: '[Vereinsregister, Handelsregister o. ä. — vom Rechtsanwalt prüfen lassen]',
      },
    ],
  },
  datenschutz: {
    title: 'Datenschutzerklärung',
    sections: [
      {
        heading: 'Verantwortlicher',
        placeholder: '[Name, Anschrift und Kontakt des Verantwortlichen — vom Betreiber einzutragen]',
      },
      {
        heading: 'Zwecke der Verarbeitung',
        placeholder: '[Welche Daten werden zu welchem Zweck verarbeitet? — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Rechtsgrundlagen',
        placeholder: '[Art. 6 DSGVO: Einwilligung, Vertrag, berechtigtes Interesse — vom Rechtsanwalt zu bestimmen]',
      },
      {
        heading: 'Empfänger und Dienstleister',
        placeholder: '[SMTP-Anbieter, Hosting, ggf. weitere — vom Rechtsanwalt und Betreiber zu listen]',
      },
      {
        heading: 'Speicherdauern',
        placeholder: '[Wie lange werden welche Daten gespeichert? — vom Rechtsanwalt zu bestimmen]',
      },
      {
        heading: 'Betroffenenrechte',
        placeholder: '[Auskunft, Berichtigung, Löschung, Widerspruch, Datenübertragbarkeit — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Browser-Speicher (localStorage, sessionStorage)',
        placeholder: '[Technisch notwendige Speicherung des Auth-Tokens und Sitzungsdaten. Nach TDDDG §25 ggf. ohne Einwilligung zulässig — vom Rechtsanwalt zu prüfen]',
      },
      {
        heading: 'Kontakt für Datenschutzanfragen',
        placeholder: '[E-Mail oder Kontaktweg für Datenschutzanfragen — vom Betreiber einzutragen]',
      },
      {
        heading: 'Zuständige Aufsichtsbehörde',
        placeholder: '[Zuständige Datenschutzbehörde je nach Bundesland — vom Rechtsanwalt zu bestimmen]',
      },
    ],
  },
  nutzungsbedingungen: {
    title: 'Nutzungsbedingungen',
    sections: [
      {
        heading: 'Nutzungsumfang',
        placeholder: '[Für welche Nutzergruppen und Zwecke darf die Plattform genutzt werden? — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Registrierung',
        placeholder: '[Voraussetzungen für die Registrierung, Wahrheitspflicht der Angaben — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Zulässige und unzulässige Inhalte',
        placeholder: '[Was darf hochgeladen und veröffentlicht werden? Was ist verboten? — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Verantwortlichkeit der Nutzer',
        placeholder: '[Nutzer sind für ihre hochgeladenen Inhalte selbst verantwortlich — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Sperrung und Löschung',
        placeholder: '[Unter welchen Bedingungen können Konten oder Inhalte gesperrt oder gelöscht werden? — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Haftungshinweise',
        placeholder: '[Haftungsausschluss für Nutzerinhalte, externe Links, Systemausfälle — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Geltungsbereich und anwendbares Recht',
        placeholder: '[Welches Recht ist anwendbar? Welcher Gerichtsstand gilt? — vom Rechtsanwalt zu bestimmen]',
      },
    ],
  },
  medienrichtlinie: {
    title: 'Medienrichtlinie',
    sections: [
      {
        heading: 'Urheberrechte',
        placeholder: '[Nur eigene oder ausdrücklich lizenzierte Inhalte hochladen — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Rechte am eigenen Bild (§ 22 KUG)',
        placeholder: '[Erkennbare Personen müssen eingewilligt haben; besondere Regeln für Minderjährige — juristisch zu prüfen und zu formulieren]',
      },
      {
        heading: 'Minderjährige',
        placeholder: '[Besondere Schutzpflichten bei Aufnahmen von Minderjährigen — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Musik und sonstige Fremdinhalte',
        placeholder: '[Keine Hintergrundmusik oder andere Fremdinhalte ohne gültige Lizenz — vom Rechtsanwalt zu formulieren]',
      },
      {
        heading: 'Sichtbarkeitsstufen',
        placeholder: '[Erläuterung der Stufen: privat, vereinsintern, öffentlich — vom Betreiber zu beschreiben]',
      },
      {
        heading: 'Meldewege für rechtsverletzende Inhalte',
        placeholder: '[Wie können Inhalte gemeldet werden? — wird nach Umsetzung von P-13 (Content-Melde-Backend) ergänzt]',
      },
      {
        heading: 'Lösch- und Sperrlogik',
        placeholder: '[Wann und wie werden gemeldete Inhalte entfernt oder gesperrt? — wird nach Umsetzung von P-11 und P-13 ergänzt]',
      },
    ],
  },
}

const LEGAL_LINKS = [
  { to: '/impressum', label: 'Impressum' },
  { to: '/datenschutz', label: 'Datenschutz' },
  { to: '/nutzungsbedingungen', label: 'Nutzungsbedingungen' },
  { to: '/medienrichtlinie', label: 'Medienrichtlinie' },
]

function LegalPage({ type }) {
  const page = PAGES[type]
  if (!page) return null

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)', padding: '2rem 1rem' }}>
      <div style={{ maxWidth: '720px', margin: '0 auto' }}>

        <div style={{ marginBottom: '1.5rem' }}>
          <Link to="/login" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.9rem' }}>
            ← Zurück zur Anmeldung
          </Link>
        </div>

        <div
          className="card"
          style={{
            marginBottom: '1.5rem',
            borderLeft: '4px solid var(--danger)',
            background: 'var(--surface)',
          }}
        >
          <strong style={{ color: 'var(--danger)' }}>⚠ MUSTER / PLATZHALTER</strong>
          <p style={{ margin: '0.5rem 0 0', color: 'var(--text2)', fontSize: '0.9rem' }}>
            Inhalt wird vor Produktivbetrieb juristisch geprüft und durch den Betreiber ergänzt.
            Diese Seite hat keinen rechtlich verbindlichen Charakter.
          </p>
        </div>

        <h1 style={{ marginBottom: '2rem', color: 'var(--text1)' }}>{page.title}</h1>

        {page.sections.map((section) => (
          <div key={section.heading} style={{ marginBottom: '1.75rem' }}>
            <h2 style={{ fontSize: '1.05rem', marginBottom: '0.4rem', color: 'var(--text1)' }}>
              {section.heading}
            </h2>
            <p style={{ color: 'var(--text3)', fontStyle: 'italic', margin: 0 }}>
              {section.placeholder}
            </p>
          </div>
        ))}

        <div
          style={{
            marginTop: '3rem',
            paddingTop: '1rem',
            borderTop: '1px solid var(--border)',
            fontSize: '0.82rem',
            color: 'var(--text3)',
            textAlign: 'center',
            display: 'flex',
            gap: '1.25rem',
            justifyContent: 'center',
            flexWrap: 'wrap',
          }}
        >
          {LEGAL_LINKS.map((l) => (
            <Link key={l.to} to={l.to} style={{ color: 'var(--text3)' }}>
              {l.label}
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}

export default LegalPage