/* Datenschutzhinweise — DSGVO-konformer Aufbau, klar als Platzhalter
   gekennzeichnete Stellen markiert mit einem Hinweis-Pill. Die
   Studien­leitung prüft die Inhalte vor Veröffentlichung mit der
   Datenschutz­beauftragten. */

const PrivacyPage = ({ onNavigate }) => {
  const sections = [
    { id: 'verantwortliche',  label: '1 · Verantwortliche' },
    { id: 'datenarten',       label: '2 · Welche Daten erhebe ich?' },
    { id: 'zwecke',           label: '3 · Zwecke & Rechts­grundlagen' },
    { id: 'speicherung',      label: '4 · Speicherdauer' },
    { id: 'empfaenger',       label: '5 · Empfänger der Daten' },
    { id: 'drittland',        label: '6 · Übermittlung in Drittländer' },
    { id: 'rechte',           label: '7 · Ihre Rechte' },
    { id: 'widerruf',         label: '8 · Widerruf der Einwilligung' },
    { id: 'beschwerde',       label: '9 · Beschwerderecht' },
    { id: 'aenderungen',      label: '10 · Änderungen' },
  ];

  return (
    <div className="page-fade-in">
      <Section background="cream" padding="large">
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'flex-end' }}>
          <PageHeader
            eyebrow="Rechtliches"
            title="Datenschutz­hinweise."
            lede="Informationen zur Verarbeitung Ihrer personenbezogenen Daten beim Besuch dieser Webseite sowie im Zusammenhang mit der Studie — gemäß Artikel 13 und 14 DSGVO."
          />
          <Card tone="white" style={{ padding: 24, fontSize: 14, lineHeight: 1.6, color: 'var(--fg-2)' }}>
            <SectionEyebrow tone="cyan">Auf einen Blick</SectionEyebrow>
            <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'grid', gap: 8 }}>
              {sections.map(s => (
                <li key={s.id}>
                  <a href={'#' + s.id} style={{ color: 'var(--brand-blue-700)', textDecoration: 'none', fontWeight: 600 }}>
                    {s.label} →
                  </a>
                </li>
              ))}
            </ul>
          </Card>
        </div>
      </Section>

      <Section id="verantwortliche" background="white" padding="md">
        <Row eyebrow="1 · Verantwortliche">
          <p style={paraStyle}>Verantwortlich für die Daten­verarbeitung im Sinne der DSGVO ist:</p>
          <Card style={{ padding: 22, maxWidth: 520, marginTop: 12 }}>
            <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 4 }}>Maike Lammert</div>
            <div style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.6 }}>
              Hochschule Bielefeld · Fachbereich Gesundheit<br/>
              Interaktion 1 · 33619 Bielefeld
            </div>
            <div style={{ marginTop: 12 }}>
              <EmojiContact kind="mail" href="mailto:info@frühchen-studie.de">info@frühchen-studie.de</EmojiContact>
            </div>
          </Card>
          <Pill tone="outline" style={{ marginTop: 16 }}>Platzhalter – Adresse vor Veröffentlichung prüfen</Pill>
        </Row>
      </Section>

      <Section id="datenarten" background="cream" padding="md">
        <Row eyebrow="2 · Welche Daten erhebe ich?">
          <p style={paraStyle}>
            <strong>Beim reinen Besuch</strong> dieser Webseite werden{' '}
            <strong style={{ color: 'var(--fg-1)' }}>keine personen­bezogenen Daten</strong>{' '}
            aktiv erhoben. Es wird kein Tracking, kein Analyse­dienst und keine
            Cookies eingesetzt. Übliche technische Verbindungs­daten (IP-Adresse,
            User-Agent, Zeitpunkt des Zugriffs) werden vom Webhosting-Provider
            zur Bereitstellung der Seite kurzzeitig verarbeitet.
          </p>
          <p style={paraStyle}>
            <strong>Bei Kontaktaufnahme</strong> per E-Mail werden die von Ihnen
            mitgeteilten Daten (Name, E-Mail-Adresse, Inhalt der Nachricht) zur
            Bearbeitung Ihres Anliegens verarbeitet.
          </p>
          <p style={paraStyle}>
            <strong>Im Rahmen einer Studien­teilnahme</strong> werden — nach
            gesonderter, informierter Einwilligung — die folgenden Datenarten
            verarbeitet: Kontaktdaten, sozio­demografische Angaben,
            anamnestische Angaben zu Geburt und Kind, Audio­aufzeichnung des
            Interviews und das daraus erstellte Transkript.
          </p>
        </Row>
      </Section>

      <Section id="zwecke" background="white" padding="md">
        <Row eyebrow="3 · Zwecke & Rechts­grundlagen">
          <ul style={listStyle}>
            <Bullet tone="cyan">
              <strong>Bereitstellung der Webseite</strong> — Art. 6 Abs. 1 lit. f DSGVO
              (berechtigtes Interesse an sicherer und stabiler Auslieferung).
            </Bullet>
            <Bullet tone="cyan">
              <strong>Beantwortung von Anfragen</strong> — Art. 6 Abs. 1 lit. b DSGVO
              (Anbahnung eines Studien­verhältnisses) bzw. lit. a (Einwilligung).
            </Bullet>
            <Bullet tone="cyan">
              <strong>Wissenschaftliche Studie</strong> — Art. 6 Abs. 1 lit. a DSGVO
              (ausdrückliche Einwilligung) und Art. 9 Abs. 2 lit. a DSGVO für besondere
              Kategorien personen­bezogener Daten (Gesundheitsdaten).
            </Bullet>
          </ul>
        </Row>
      </Section>

      <Section id="speicherung" background="cream" padding="md">
        <Row eyebrow="4 · Speicherdauer">
          <p style={paraStyle}>
            Studiendaten werden pseudonymisiert für die wissenschaftliche
            Auswertung verarbeitet und entsprechend den Empfehlungen der
            Deutschen Forschungs­gemeinschaft zur guten wissenschaftlichen
            Praxis für mindestens 10 Jahre nach Abschluss der Dissertation
            aufbewahrt. Audio­aufzeichnungen werden nach Transkription und
            Anonymisierung gelöscht.
          </p>
          <p style={paraStyle}>
            Anfragen per E-Mail werden gelöscht, sobald die Bearbeitung
            abgeschlossen ist — spätestens nach Abschluss der Studie.
          </p>
        </Row>
      </Section>

      <Section id="empfaenger" background="white" padding="md">
        <Row eyebrow="5 · Empfänger der Daten">
          <ul style={listStyle}>
            <Bullet tone="cyan">die Studien­leitung (Maike Lammert),</Bullet>
            <Bullet tone="cyan">die wissenschaftlichen Betreuerinnen an der Universität zu Köln und der Hochschule Bielefeld,</Bullet>
            <Bullet tone="cyan">technische Auftrags­verarbeiter (z.&nbsp;B. Hosting der Webseite, Videokonferenz­dienst für Online-Interviews) auf Grundlage eines Vertrags zur Auftrags­verarbeitung.</Bullet>
          </ul>
          <p style={paraStyle}>
            Ergebnisse werden ausschließlich anonymisiert wissenschaftlich
            veröffentlicht — eine Re-Identifizierung einzelner Personen ist
            ausgeschlossen.
          </p>
        </Row>
      </Section>

      <Section id="drittland" background="cream" padding="md">
        <Row eyebrow="6 · Übermittlung in Drittländer">
          <p style={paraStyle}>
            Es findet <strong>keine</strong> Übermittlung von personen­bezogenen
            Daten in Länder außerhalb der EU/des EWR statt.
          </p>
        </Row>
      </Section>

      <Section id="rechte" background="white" padding="md">
        <Row eyebrow="7 · Ihre Rechte">
          <ul style={listStyle}>
            <Bullet tone="cyan"><strong>Auskunft</strong> über die zu Ihrer Person gespeicherten Daten (Art. 15 DSGVO),</Bullet>
            <Bullet tone="cyan"><strong>Berichtigung</strong> unrichtiger Daten (Art. 16 DSGVO),</Bullet>
            <Bullet tone="cyan"><strong>Löschung</strong> (Art. 17 DSGVO),</Bullet>
            <Bullet tone="cyan"><strong>Einschränkung</strong> der Verarbeitung (Art. 18 DSGVO),</Bullet>
            <Bullet tone="cyan"><strong>Daten­übertragbarkeit</strong> (Art. 20 DSGVO),</Bullet>
            <Bullet tone="cyan"><strong>Widerspruch</strong> gegen die Verarbeitung (Art. 21 DSGVO).</Bullet>
          </ul>
        </Row>
      </Section>

      <Section id="widerruf" background="cream" padding="md">
        <Row eyebrow="8 · Widerruf der Einwilligung">
          <p style={paraStyle}>
            Eine erteilte Einwilligung können Sie{' '}
            <strong style={{ color: 'var(--fg-1)' }}>jederzeit ohne Angabe von Gründen widerrufen</strong>.
            Der Widerruf wirkt für die Zukunft; bis zum Widerruf erfolgte
            Verarbeitungen bleiben rechtmäßig. Bitte richten Sie den Widerruf an{' '}
            <a href="mailto:info@frühchen-studie.de" style={{ color: 'var(--brand-blue-700)', fontWeight: 600 }}>info@frühchen-studie.de</a>.
          </p>
        </Row>
      </Section>

      <Section id="beschwerde" background="white" padding="md">
        <Row eyebrow="9 · Beschwerderecht">
          <p style={paraStyle}>
            Sie haben das Recht, sich bei einer Datenschutz-Aufsichts­behörde
            zu beschweren, etwa bei der zuständigen Landes­beauftragten für
            Datenschutz und Informations­freiheit Nordrhein-Westfalen
            (LDI NRW).
          </p>
        </Row>
      </Section>

      <Section id="aenderungen" background="cream" padding="md">
        <Row eyebrow="10 · Änderungen">
          <p style={paraStyle}>
            Diese Datenschutz­hinweise werden bei Änderungen der
            Datenverarbeitung oder rechtlicher Rahmen­bedingungen aktualisiert.
            Stand: Mai 2026.
          </p>
        </Row>
      </Section>

      <Section background="warm" padding="md">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <SectionEyebrow>Weitere rechtliche Hinweise</SectionEyebrow>
            <h3 style={{ marginTop: 8, fontSize: 22, fontWeight: 700, letterSpacing: '-0.005em' }}>
              Impressum lesen
            </h3>
          </div>
          <Button variant="primary" icon="arrow" onClick={() => onNavigate('impressum')}>
            Zum Impressum
          </Button>
        </div>
      </Section>


    </div>
  );
};

const paraStyle = { fontSize: 16, lineHeight: 1.7, color: 'var(--fg-2)', margin: '0 0 14px', textWrap: 'pretty' };
const listStyle = { listStyle: 'none', padding: 0, margin: '0 0 14px', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 16, lineHeight: 1.55, color: 'var(--fg-1)' };

const Row = ({ eyebrow, children }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 56, alignItems: 'flex-start' }}>
    <SectionEyebrow>{eyebrow}</SectionEyebrow>
    <div style={{ maxWidth: 760 }}>{children}</div>
  </div>
);

Object.assign(window, { PrivacyPage });