/* Informationen für Mütter* — full info page */

const MothersPage = ({ onNavigate }) => {
  const { isMobile } = useBreakpoint();
  return (
  <div className="page-fade-in">
    {/* Page header */}
    <Section background="cream" padding="large">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.6fr 1fr', gap: 80, alignItems: 'center' }}>
        <PageHeader
          eyebrow="Für Mütter*"
          title="Sie können sich vorstellen, mit­zumachen?"
          lede="Hier finden Sie die wichtigsten Informationen zur Studie: was eine Teilnahme bedeutet, wer mitmachen kann und wie Sie mir Ihre Kontaktdaten übermitteln können."
        />
        {!isMobile && (
          <div style={{ display: 'grid', placeItems: 'center' }}>
            <div style={{
              width: 280, height: 280, borderRadius: '50%',
              background: 'rgba(241,95,87,0.08)',
              border: '1px solid rgba(241,95,87,0.18)',
              display: 'grid', placeItems: 'center',
            }}>
              <img src={window.__resources.logoBaby} alt="" style={{ width: 220, height: 220 }} />
            </div>
          </div>
        )}
      </div>
    </Section>

    {/* Kurze Zusammenfassung */}
    <Section background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.5fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <SectionEyebrow>Kurze Zusammenfassung</SectionEyebrow>
          <h2 style={{ marginTop: 12, fontSize: 36, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.015em' }}>
            Was ist die Studie?
          </h2>
        </div>
        <Card tone="cream" style={{ padding: 28 }}>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--fg-1)', margin: 0, textWrap: 'pretty' }}>
            Es ist eine <strong>qualitative Studie mit Interviews und 2 Fragebögen</strong>. Diese
            untersucht die Erfahrungen von bis zu <strong>dreißig Müttern*</strong>{' '}
            frühgeborener Kinder, die ein Kind mit sehr niedrigem Geburts­gewicht
            unter 1.500 g geboren haben.
          </p>
          <div style={{ height: 16 }} />
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)', margin: 0 }}>
            Die Interviews werden aufgezeichnet, verschriftlicht und mit einer
            anerkannten wissenschaftlichen Methode ausgewertet. Die Ergebnisse aus den
            Fragebögen fließen ein. Durch die Erkenntnisse können{' '}
            <strong style={{ color: 'var(--fg-1)' }}>Empfehlungen für die
            Hebammen­arbeit und die hochschulische Ausbildung</strong>{' '}
            entwickelt werden.
          </p>
        </Card>
      </div>
    </Section>

    <Eligibility tone="warm" />

    {/* The 3 steps + the 5-step journey */}
    <ParticipationSteps onJoin={() => window.requestContactRedirect && window.requestContactRedirect()} />

    {/* Zeitraum */}
    <Section background="cream" padding="md">
      <div style={{
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'auto 1fr auto', gap: 36, alignItems: 'center',
        background: '#fff', borderRadius: 22, padding: isMobile ? '20px 16px' : '28px 36px',
        border: '1px solid var(--border-soft)',
        boxShadow: '0 2px 6px rgba(14,42,56,0.06)',
      }}>
        <IconCircle color="cyan" size={56}>📅</IconCircle>
        <div>
          <SectionEyebrow tone="cyan">Zeitraum</SectionEyebrow>
          <div style={{ marginTop: 6, fontSize: 22, fontWeight: 700, color: 'var(--fg-1)', letterSpacing: '-0.005em' }}>
            III. Quartal 2026 bis IV. Quartal 2027
          </div>
          <div style={{ marginTop: 4, fontSize: 15, color: 'var(--fg-3)' }}>
            Wir finden einen Termin, der zu Ihrem Alltag passt — auch verteilt über mehrere Wochen.
          </div>
          <div style={{ marginTop: 6, fontSize: 14, color: 'var(--fg-3)' }}>
            Sobald genügend Teilnehmerinnen gefunden sind, wird die Rekrutierung beendet.
          </div>
        </div>
        <Pill tone="cyan" style={{ background: 'rgba(34,197,94,0.15)', color: '#16a34a', border: '1px solid rgba(34,197,94,0.35)' }}>Laufend</Pill>
      </div>
    </Section>

    {/* Wichtig zu wissen — freiwilligkeit + belastungen */}
    <Section background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 56 }}>
        <div>
          <SectionEyebrow>Freiwilligkeit</SectionEyebrow>
          <h2 style={{ marginTop: 12, marginBottom: 24, fontSize: 32, fontWeight: 800, letterSpacing: '-0.012em', lineHeight: 1.1 }}>
            Was ist noch wichtig zu wissen?
          </h2>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16, fontSize: 17, lineHeight: 1.55, color: 'var(--fg-1)' }}>
            <Bullet tone="cyan">
              Die Teilnahme ist <strong>freiwillig</strong> und erst später nach Ihrer
              informierten, freiwilligen und schriftlichen Einwilligung möglich.
            </Bullet>
            <Bullet tone="cyan">
              Aus einer <strong>Nicht­teilnahme entstehen Ihnen keine Nachteile</strong>.
            </Bullet>
            <Bullet tone="cyan">
              Ein <strong>Widerruf der Einwilligung</strong> ist möglich.
              Wir besprechen in Ruhe alle Details.
            </Bullet>
          </ul>
        </div>
        <div>
          <SectionEyebrow tone="coral">Hinweise & Belastungen</SectionEyebrow>
          <h2 style={{ marginTop: 12, marginBottom: 24, fontSize: 32, fontWeight: 800, letterSpacing: '-0.012em', lineHeight: 1.1 }}>
            Gut zu wissen, ist:
          </h2>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16, fontSize: 17, lineHeight: 1.55, color: 'var(--fg-1)' }}>
            <Bullet tone="coral">In der Regel bestehen <strong>keine finanziellen Belastungen</strong>.</Bullet>
            <Bullet tone="coral">Eine <strong>Aufwands­entschädigung kann leider nicht angeboten werden</strong>.</Bullet>
            <Bullet tone="coral">Es besteht <strong>keine körperliche Gefährdung</strong> durch die Studie.</Bullet>
            <Bullet tone="coral">
              Die Gespräche können <strong>emotional belastend</strong> sein. Ich bespreche
              mögliche Unterstützungs­maßnahmen mit Ihnen im späteren Verlauf, falls Sie
              an der Studie teilnehmen.
            </Bullet>
            <Bullet tone="coral">Es besteht eine <strong>Wege-Unfall­versicherung</strong> für Studien­teilnehmer*innen.</Bullet>
            <Bullet tone="coral">Es kann ein <strong>wenig dauern, bis eine Rückmeldung</strong> erfolgt — ich melde mich so schnell wie möglich.</Bullet>
          </ul>
        </div>
      </div>
    </Section>

    {/* Datenschutz */}
    <Section background="warm" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <SectionEyebrow tone="cyan">Datenschutz</SectionEyebrow>
          <h2 style={{ marginTop: 12, fontSize: 36, fontWeight: 800, letterSpacing: '-0.015em', lineHeight: 1.05 }}>
            Ihre Daten bleiben bei Ihnen.
          </h2>
        </div>
        <div style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', textWrap: 'pretty' }}>
          <p style={{ marginBottom: 16 }}>
            Alle Daten werden vertraulich behandelt und besonders geschützt. Der
            Zugriff ist auf mich und die wissenschaftlichen Betreuerinnen der
            Arbeit beschränkt.
          </p>
          <p style={{ marginBottom: 16 }}>
            Sie werden im Rahmen einer späteren Studienteilnahme an mehreren
            Stellen <strong style={{ color: 'var(--fg-1)' }}>ausführlich über den
            Datenschutz</strong> aufgeklärt — Datenspeicherung,
            Gesprächs­aufzeichnung, Zugriff und Schutz Ihrer Daten,
            Verschlüsselung durch Pseudonymisierung/Anonymisierung — und müssen
            hierfür Ihre informierte Einwilligung erteilen.
          </p>
          <p style={{ margin: 0 }}>
            Wissenschaftliche Veröffentlichungen von Ergebnissen oder Präsentationen
            erfolgen <strong style={{ color: 'var(--fg-1)' }}>ausschließlich anonymisiert</strong>.
          </p>
        </div>
      </div>
    </Section>

    {/* CTA */}
    <Section background="blue" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <SectionEyebrow tone="cyan">Trifft das auf Sie zu?</SectionEyebrow>
          <h2 style={{ marginTop: 14, marginBottom: 18, fontSize: isMobile ? 36 : 52, fontWeight: 800, lineHeight: 1.0, letterSpacing: '-0.02em', color: '#fff', textWrap: 'balance' }}>
            Ich freue mich, wenn Sie mir Ihre Kontaktdaten geben.
          </h2>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.86)', maxWidth: 560, margin: 0 }}>
            Die Kontaktdaten­übermittlung ist <strong style={{ color: '#fff' }}>noch keine
            Einwilligung zur späteren Studien­teilnahme</strong> — sondern nur ein erstes
            Signal, dass Sie sich vorstellen können, dabei zu sein.
          </p>
          <div style={{ marginTop: 28, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" icon="arrow" onClick={() => window.requestContactRedirect && window.requestContactRedirect()}>
              Kontaktdaten senden
            </Button>
            <Button variant="inverseOutline" size="lg" onClick={() => onNavigate('science')}>
              Wissenschaftliche Details
            </Button>
          </div>
        </div>
        <div style={{
          background: '#fff', color: 'var(--fg-1)', borderRadius: 26, padding: 22,
          display: 'grid', gridTemplateColumns: '160px 1fr', gap: 22, alignItems: 'center',
          boxShadow: '0 22px 50px rgba(0,28,42,0.4)',
        }}>
          <a href="https://dvz-survey.hsbi.de/index.php/895629?lang=de" target="_blank" rel="noopener noreferrer">
            <img src={window.__resources.qrKontakt} alt="QR Code zum Kontaktformular" style={{ width: 160, height: 160, borderRadius: 12 }} />
          </a>
          <div>
            <SectionEyebrow>Lieber per QR-Code?</SectionEyebrow>
            <div style={{ marginTop: 8, fontSize: 18, fontWeight: 700, color: 'var(--brand-blue-700)', lineHeight: 1.3 }}>
              Direkt zum Anmelde­formular.
            </div>
          </div>
        </div>
      </div>
    </Section>
  </div>
  );
};

Object.assign(window, { MothersPage });