/* Wissenschaftliche Informationen — the detailed study description. */

const SciencePage = ({ onNavigate }) => {
  const { isMobile } = useBreakpoint();
  return (
  <div className="page-fade-in">
    <Section background="cream" padding="large">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr', gap: 64, alignItems: 'flex-end' }}>
        <PageHeader
          eyebrow="Wissenschaftliche Informationen"
          title="Studie im Detail."
          lede="Titel, Hintergrund, Ziel, Methodik, Studien­population, Zeitplan und alle beteiligten Personen — auf einer Seite."
        />
        <Card tone="white" style={{
          padding: 24, fontSize: 14, lineHeight: 1.6, color: 'var(--fg-2)',
        }}>
          <SectionEyebrow tone="cyan">Inhalt</SectionEyebrow>
          <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'grid', gap: 8 }}>
            {[
              ['titel', 'Titel der Dissertation und Studie'],
              ['hintergrund', 'Hintergrund'],
              ['ziel', 'Ziel der Studie'],
              ['population', 'Studienpopulation'],
              ['stichprobe', 'Stichprobengröße'],
              ['methodik', 'Methodik'],
              ['zeitplan', 'Zeitplan'],
              ['beteiligte', 'Beteiligte Personen & Institutionen'],
              ['ds', 'Datenschutz'],
            ].map(([id, label]) => (
              <li key={id}>
                <a href={`#${id}`} style={{
                  color: 'var(--brand-blue-700)', textDecoration: 'none',
                  fontWeight: 600, fontSize: 14,
                }}>{label} →</a>
              </li>
            ))}
          </ul>
        </Card>
      </div>
    </Section>

    {/* Titel */}
    <Section id="titel" background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Titel der Dissertation und Studie</SectionEyebrow>
        <div>
          <h2 style={{ fontSize: 32, fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.01em', color: 'var(--fg-1)', textWrap: 'balance', fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>
            „Das Potenzial einer umfassenden Hebammen­betreuung für Mütter*
            von frühgeborenen Kindern mit sehr niedrigem Geburts­gewicht."
          </h2>
        </div>
      </div>
    </Section>

    {/* Hintergrund */}
    <Section id="hintergrund" background="cream" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Hintergrund</SectionEyebrow>
        <div style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-2)', textWrap: 'pretty', maxWidth: 760 }}>
          <p style={{ marginBottom: 18 }}>
            Eltern von frühgeborenen Kindern mit sehr geringem Geburts­gewicht
            (<strong>VLBW = very low birth weight, unter 1.500 g</strong>) stehen
            vor außer­gewöhnlichen psychologischen und emotionalen Heraus­forderungen
            und sind mit Erschöpfung und der Verzögerung der Elternrolle konfrontiert.
          </p>
          <p style={{ marginBottom: 18 }}>
            Die Betreuung durch Hebammen gilt als vorteilhaft. Die möglichen
            Potenziale einer umfassenden Betreuung sind zum Teil jedoch noch ungenutzt.
          </p>
          <p style={{ marginBottom: 18 }}>
            Die komplexen, spezifischen Bedürfnisse und die Unterstützung von
            Müttern* im Zusammenhang mit Frühgeburten werden bisher in der
            Gesetzgebung und der hochschulischen Ausbildung von Hebammen noch
            nicht angemessen berücksichtigt.
          </p>
          <p style={{ margin: 0 }}>
            Hebammen haben durch die Akademisierung des Berufsstandes optimale
            Voraussetzungen, um auch vulnerable Zielgruppen bedarfs­adaptiert
            gesundheitlich zu versorgen.
          </p>
        </div>
      </div>
    </Section>

    {/* Ziel */}
    <Section id="ziel" background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Ziel der Studie</SectionEyebrow>
        <div style={{ maxWidth: 760 }}>
          <h2 style={{ fontSize: 30, fontWeight: 800, lineHeight: 1.15, letterSpacing: '-0.012em', marginBottom: 18, textWrap: 'balance' }}>
            Verbesserung der Gesundheits­versorgung von Müttern* vor und nach
            der Frühgeburt eines Kindes mit sehr niedrigem Geburts­gewicht.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', marginBottom: 16, textWrap: 'pretty' }}>
            Es werden Empfehlungen für eine umfassende Hebammen­betreuung und
            die curriculare Implementierung der Erkenntnisse in Hebammen­studiengänge
            entwickelt.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', marginBottom: 16, textWrap: 'pretty' }}>
            Dazu werden Erfahrungen mit Hebammen, Erwartungen an die
            Hebammen­tätigkeit, Aufgaben und Leistungen von Hebammen sowie die
            Rolle der Hebammen im Kontext Frühgeburtlichkeit ermittelt.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', margin: 0, textWrap: 'pretty' }}>
            Die Identifizierung von Defiziten und Potenzialen in der Gesundheits­versorgung,
            insbesondere im Hebammen­wesen, wird einbezogen.
          </p>
        </div>
      </div>
    </Section>

    {/* Population — split: include + exclude */}
    <Section id="population" background="cream" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Studien­population</SectionEyebrow>
        <div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24 }}>
            <Card style={{ padding: 28 }}>
              <SectionEyebrow tone="cyan">Einschluss­kriterien</SectionEyebrow>
              <div style={{ fontSize: 14, color: 'var(--fg-3)', marginTop: 6, marginBottom: 14 }}>Teilnehmen können Mütter*, die …</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 15, lineHeight: 1.55 }}>
                <Bullet tone="cyan">vor mehr als 6 Monaten ein Kind mit Geburts­gewicht unter 1.500 g geboren haben, das lebt und jünger als fünf vollendete Jahre ist,</Bullet>
                <Bullet tone="cyan">in deutscher Sprache schriftlich und mündlich verständigungsfähig sind,</Bullet>
                <Bullet tone="cyan">mindestens volljährig sind,</Bullet>
                <Bullet tone="cyan">einwilligungs­fähig sind,</Bullet>
                <Bullet tone="cyan">die technischen Voraussetzungen für Online-Meetings haben,</Bullet>
              </ul>
              <div style={{ marginTop: 20, padding: '14px 16px', background: 'var(--cream)', borderRadius: 12, fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6 }}>
                Der Einschluss von Müttern* mit unterschiedlichem sozialem Status und
                mit bestimmten körperlichen und/oder psychischen Erkrankungen ist
                gewünscht und unter Umständen möglich. Die Mütter* können sich in
                einer Folge­schwangerschaft befinden.
              </div>
            </Card>
            <Card style={{ padding: 28 }}>
              <SectionEyebrow tone="coral">Bereitschaft</SectionEyebrow>
              <div style={{ fontSize: 14, color: 'var(--fg-3)', marginTop: 6, marginBottom: 14 }}>… und bereit sind,</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 15, lineHeight: 1.55 }}>
                <Bullet tone="coral">einen sozio­demografischen und anamnestischen Fragebogen (~ 30 Min.) auszufüllen,</Bullet>
                <Bullet tone="coral">an einem Interview inkl. Vorgespräch (~ 3 Std., persönlich oder online) teilzunehmen,</Bullet>
                <Bullet tone="coral">an einer Teilnehmerinnen­reflexion nach der Daten­auswertung (~ 1 Std.) mitzuwirken — optional auch als Telefongespräch oder Onlinesitzung (~ 2 Std.).</Bullet>
              </ul>
              <div style={{ height: 20 }} />
              <SectionEyebrow tone="coral">Ausschluss­kriterien</SectionEyebrow>
              <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6, marginTop: 10 }}>
                Personen, welche die Einschluss­kriterien nicht erfüllen, können nicht
                teilnehmen. Mütter* mit schweren körperlichen und/oder psychischen
                Erkrankungen können nicht teilnehmen, wenn es unzumutbar und zu
                belastend ist.
              </p>
            </Card>
          </div>
          <div style={{ marginTop: 24, fontSize: 15, lineHeight: 1.7, color: 'var(--fg-2)', maxWidth: 880, textWrap: 'pretty' }}>
            <strong style={{ color: 'var(--fg-1)' }}>Rekrutierung:</strong>{' '}
            fortlaufend, mit Hilfe von Gatekeeper*innen und durch Selbstaktivierung
            der Teilnehmerinnen über Aufrufe zur Teilnahme. Das{' '}
            <strong style={{ color: 'var(--fg-1)' }}>Sampling</strong>{' '}
            erfolgt gezielt bzw. absichtsvoll; bei Teilnehmerinnenmangel erfolgt
            der Übergang zu anderen Sampling­strategien.
          </div>
          <div style={{ marginTop: 16, fontSize: 15, lineHeight: 1.7, color: 'var(--fg-2)', maxWidth: 880, textWrap: 'pretty' }}>
            <strong style={{ color: 'var(--fg-1)' }}>Möglicherweise werden nicht alle interessierten Personen befragt.</strong>{' '}
            Der Grund: Es sollen im Sinne eines Samples maximaler Variation viele verschiedene
            Erfahrungen gesammelt werden — z.B. von Müttern* mit und ohne Erkrankung und mit
            unterschiedlichen Lebenswegen.
          </div>
        </div>
      </div>
    </Section>

    {/* Stichprobengröße */}
    <Section id="stichprobe" background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Stichproben­größe</SectionEyebrow>
        <div style={{ maxWidth: 880 }}>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', marginBottom: 24, textWrap: 'pretty' }}>
            Die Stichproben­größe ist aufgrund der Konventionen von qualitativen
            Interview­studien <strong style={{ color: 'var(--fg-1)' }}>provisorisch und modifizierbar</strong>.
            Sie wird modifiziert, bis eine ausreichende Informations­kraft erreicht
            ist — d.h. die Fragestellung der Studie ist beantwortet.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20 }}>
            <StatTile label="Minimum" value="12" unit="Teilnehmerinnen" tone="cyan" />
            <StatTile label="Maximum" value="30" unit="Teilnehmerinnen" tone="coral" />
          </div>
          <div style={{ marginTop: 16, fontSize: 14, color: 'var(--fg-3)' }}>
            Aktueller Planungs­stand.
          </div>
        </div>
      </div>
    </Section>

    {/* Methodik */}
    <Section id="methodik" background="cream" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Methodik</SectionEyebrow>
        <div style={{ maxWidth: 880 }}>
          <h2 style={{ fontSize: 28, fontWeight: 800, lineHeight: 1.2, letterSpacing: '-0.012em', marginBottom: 18, textWrap: 'balance' }}>
            Halb-strukturierte, problem­zentrierte Interviews · Reflexive Thematic Analysis.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', marginBottom: 16, textWrap: 'pretty' }}>
            In der qualitativen Studie werden bis zu 30 Frauen nach der Geburt
            eines Kindes &lt; 1.500 g Geburts­gewicht in{' '}
            <strong style={{ color: 'var(--fg-1)' }}>halb­strukturierten und
            problem­zentrierten Interviews</strong> nach Witzel (2000) & Witzel & Reiter (2022) befragt.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', marginBottom: 16, textWrap: 'pretty' }}>
            Die Interviews werden transkribiert und mit Hilfe der{' '}
            <strong style={{ color: 'var(--fg-1)' }}>„reflexive thematic analysis"
            nach Braun und Clarke (2006; 2019; 2020)</strong> mit einer Analysesoftware ausgewertet.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', margin: 0, textWrap: 'pretty' }}>
            Abschließend werden zusätzliche Erkenntnisse und Perspektiv­erweiterungen
            durch <strong style={{ color: 'var(--fg-1)' }}>Teilnehmerinnen­reflexion nach Tracy (2025) und Tracy & Hinrichs (2017)</strong>{' '}
            — Feedback der Teilnehmerinnen auf die Ergebnisse der Studie — gewonnen.
          </p>
        </div>
      </div>
    </Section>

    {/* Zeitplan */}
    <Section id="zeitplan" background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Zeitplan</SectionEyebrow>
        <div style={{ maxWidth: 880 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 20, marginBottom: 16, maxWidth: 360 }}>
            <Card style={{ padding: 24 }}>
              <SectionEyebrow tone="cyan">Feldzugang & Daten­erhebung</SectionEyebrow>
              <div style={{ marginTop: 10, fontSize: 22, fontWeight: 700, color: 'var(--brand-blue-700)' }}>
                Q3/2026 – Q4/2027
              </div>
            </Card>
          </div>
        </div>
      </div>
    </Section>

    {/* Beteiligte Personen */}
    <Section id="beteiligte" background="cream" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Beteiligte Personen & Institutionen</SectionEyebrow>
        <div style={{ maxWidth: 880 }}>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', margin: '0 0 24px', textWrap: 'pretty' }}>
            Verantwortlich für die Studien­planung, -durchführung und -auswertung
            ist <strong style={{ color: 'var(--fg-1)' }}>Maike Lammert</strong>.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 20, maxWidth: 420 }}>
            <InstitutionCard
              eyebrow="Mitwirkendes Studienzentrum"
              logo={window.__resources.logoUniKoeln}
              name="Institut für Hebammen­wissenschaft"
              affiliation="Medizinische Fakultät der Universität zu Köln"
              person="Univ.-Prof.in Dr. Nicola H. Bauer"
              address="Kerpener Str. 34 · 50931 Köln"
              link="hebammenwissenschaft.uni-koeln.de/institut/institutsleitung"
              href="https://hebammenwissenschaft.uni-koeln.de/institut/institutsleitung"
            />
          </div>
          <div style={{ marginTop: 18, fontSize: 14, color: 'var(--fg-3)', lineHeight: 1.6 }}>
            Die konzeptionelle und schriftliche Arbeit für die Dissertation
            findet im Rahmen einer kooperativen Promotion an der Hochschule
            Bielefeld statt.
          </div>
        </div>
      </div>
    </Section>

    {/* Datenschutz */}
    <Section id="ds" background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Datenschutz</SectionEyebrow>
        <div style={{ maxWidth: 880, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-2)', textWrap: 'pretty' }}>
          <p style={{ marginBottom: 16 }}>
            Es wurde ein <strong style={{ color: 'var(--fg-1)' }}>Datenschutzkonzept
            nach aktuellen Erfordernissen</strong> erstellt. Die Daten werden mit
            aller Sorgfalt behandelt.
          </p>
          <p style={{ marginBottom: 16 }}>
            Die Studienleitung wird alle angemessenen Schritte unternehmen, um
            den Schutz der Daten gemäß <strong style={{ color: 'var(--fg-1)' }}>Datenschutz-Grundverordnung
            (DS-GVO)</strong> und anderen Gesetzen zu gewährleisten.
          </p>
          <p style={{ marginBottom: 16 }}>
            Studien­teilnehmer*innen werden im Verlauf an mehreren Stellen über den
            Datenschutz — z.B. Datenspeicherung, Gesprächs­aufzeichnung, Zugriff und
            Schutz der Daten, Verschlüsselung durch Pseudonymisierung/Anonymisierung —
            mündlich und schriftlich aufgeklärt und müssen hierfür ihre informierte
            und freiwillige Einwilligung erteilen. Potenzielle Teilnehmer*innen nehmen
            ausschließlich durch eigene Initiative mit mir Kontakt auf — es werden
            keine Daten von anderen Fachpersonen an mich übermittelt. Fachpersonen
            informieren nur im direkten, ohnehin bestehenden Kontakt über die Studie.
          </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>


  </div>
  );
};

const StatTile = ({ label, value, unit, tone }) => (
  <Card style={{
    padding: 28,
    background: tone === 'cyan' ? 'rgba(0,172,212,0.08)' : 'rgba(241,95,87,0.08)',
    border: `1px solid ${tone === 'cyan' ? 'rgba(0,172,212,0.30)' : 'rgba(241,95,87,0.28)'}`,
    boxShadow: 'none',
  }}>
    <SectionEyebrow tone={tone}>{label}</SectionEyebrow>
    <div style={{ marginTop: 8, display: 'baseline', display: 'flex', gap: 10, alignItems: 'baseline' }}>
      <div style={{ fontSize: 'clamp(36px, 12vw, 64px)', fontWeight: 800, color: 'var(--brand-blue-700)', letterSpacing: '-0.03em', lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: 16, color: 'var(--fg-2)' }}>{unit}</div>
    </div>
  </Card>
);

const InstitutionCard = ({ eyebrow, logo, name, affiliation, person, address, link, href }) => (
  <div style={{
    background: '#fff',
    border: '1px solid var(--border-soft)',
    borderRadius: 22, padding: 26,
    display: 'flex', flexDirection: 'column', gap: 12,
    boxShadow: '0 2px 6px rgba(14,42,56,0.05)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <img src={logo} alt="" style={{ height: 48, maxWidth: 120, objectFit: 'contain' }} />
      <SectionEyebrow>{eyebrow}</SectionEyebrow>
    </div>
    <div style={{ marginTop: 4 }}>
      <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.005em', color: 'var(--fg-1)' }}>{name}</div>
      <div style={{ fontSize: 15, color: 'var(--fg-2)', marginTop: 2 }}>{affiliation}</div>
    </div>
    <div style={{ fontSize: 15, color: 'var(--fg-1)', fontWeight: 600, marginTop: 4 }}>{person}</div>
    <div style={{ fontSize: 14, color: 'var(--fg-3)', lineHeight: 1.6 }}>{address}</div>
    <a href={href} target="_blank" rel="noopener noreferrer" style={{ fontSize: 14, color: 'var(--brand-blue-700)', fontWeight: 600, textDecoration: 'none', marginTop: 4 }}>
      {link} →
    </a>
  </div>
);

Object.assign(window, { SciencePage });