/* Informationen für im Gesundheits- und Sozialwesen und Ehrenamt
   tätige Personen: Unterstützung bei der Gewinnung von
   Studienteilnehmerinnen. */

const ProfessionalsPage = ({ onNavigate }) => {
  const { isMobile } = useBreakpoint();
  return (
  <div className="page-fade-in">
    <Section background="blue" padding="large">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr', gap: 64, alignItems: 'center' }}>
        <PageHeader
          eyebrow="Für Fachpersonen & Ehrenamt"
          title="Unterstützen Sie mich, Mütter* zu erreichen."
          lede="Ich suche für meine Doktorarbeit Mütter* von frühgeborenen Kindern (< 1.500 g Geburtsgewicht). Ohne Unterstützung aus Ehrenamt und Praxis ist die Durchführung der Studie schwerer möglich."
          accent="cyan"
          invert
        />
        {!isMobile && (
          <div style={{ display: 'grid', placeItems: 'center' }}>
            <img src={window.__resources.iconHand} alt=""
                 style={{ width: 220, height: 220, filter: 'drop-shadow(0 16px 32px rgba(0,28,42,0.45))' }} />
          </div>
        )}
      </div>
    </Section>

    {/* Worum geht es */}
    <Section background="cream" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.5fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <SectionEyebrow>Worum geht es?</SectionEyebrow>
          <h2 style={{ marginTop: 12, fontSize: 36, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.015em' }}>
            Eine qualitative Studie zur Hebammen­betreuung nach Frühgeburt.
          </h2>
        </div>
        <div style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-2)', textWrap: 'pretty' }}>
          <p style={{ marginBottom: 14 }}>
            Ich suche Mütter*, deren Kind mit weniger als 1.500 g zur Welt
            gekommen ist. Die Geburt war <strong>vor mehr als 6 Monaten</strong>
            {' '}und ist <strong>nicht länger als 5 Jahre</strong> her.
          </p>
          <p style={{ marginBottom: 18 }}>
            Es ist eine qualitative Studie, die die Erfahrungen von bis zu
            dreißig Müttern* mit Interviews und Fragebögen sammelt.
          </p>
          <Button variant="ghost" onClick={() => onNavigate('science')}>
            Mehr zur Studie & Methodik →
          </Button>
        </div>
      </div>
    </Section>

    {/* Wer kann mich unterstützen */}
    <Section background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 48 }}>
        <Card tone="cream" style={{ padding: 32 }}>
          <IconCircle color="cyan" size={48}>👥</IconCircle>
          <h3 style={{ marginTop: 18, marginBottom: 12, fontSize: 26, fontWeight: 700, letterSpacing: '-0.01em' }}>
            Wer kann mich unterstützen?
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)', margin: 0, textWrap: 'pretty' }}>
            <strong style={{ color: 'var(--fg-1)' }}>Alle Personen, die Kontakt zu
            betroffenen Müttern* haben</strong> — ehrenamtlich oder beruflich.
            Auch <strong style={{ color: 'var(--fg-1)' }}>Führungskräfte und Verwaltungspersonal</strong>{' '}
            können unterstützen, indem sie Informationen an Mitarbeitende weitergeben.
          </p>
        </Card>
        <Card tone="cream" style={{ padding: 32 }}>
          <IconCircle color="coral" size={48}>?</IconCircle>
          <h3 style={{ marginTop: 18, marginBottom: 12, fontSize: 26, fontWeight: 700, letterSpacing: '-0.01em' }}>
            Warum bitte ich Sie darum?
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)', margin: 0, textWrap: 'pretty' }}>
            Der Zugang zur Zielgruppe ist für mich als Forscherin erschwert.
            Belastete Familien sind schwerer erreichbar. <strong style={{ color: 'var(--fg-1)' }}>Jede
            Informations­weitergabe</strong> kann mir helfen, genügend Teilnehmer*innen zu finden.
          </p>
        </Card>
      </div>
    </Section>

    {/* Wie können Sie unterstützen — 4 ways */}
    <Section background="cream" padding="md">
      <div style={{ marginBottom: 36, maxWidth: 720 }}>
        <SectionEyebrow>Wie können Sie mich unterstützen?</SectionEyebrow>
        <h2 style={{ marginTop: 12, fontSize: isMobile ? 26 : 40, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.015em' }}>
          Drei konkrete Wege.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 20 }}>
        <SupportCard
          n="1"
          title="Mütter* informieren"
          desc="Sie sprechen Mütter* dann direkt an, wenn Sie ohnehin mit ihnen im Kontakt stehen — z.B. im Rahmen einer Beratung — und informieren über eine mögliche Studienteilnahme. Oder Sie geben Material zur Selbstaktivierung weiter."
          action={<Button variant="ghost" onClick={() => onNavigate('materials')}>Zu den Materialien →</Button>}
        />
        <SupportCard
          n="2"
          title="Materialien auslegen oder weitergeben"
          desc="Handzettel, Poster und Insta-Vorlagen finden Sie zum Herunterladen."
          action={<Button variant="ghost" onClick={() => onNavigate('materials')}>Downloads →</Button>}
        />
        <SupportCard
          n="3"
          title="In Ihren Netzwerken teilen"
          desc="Meine Webseite und mein Instagram-Profil über soziale Medien und E-Mail-Verteiler weiterreichen."
          action={
            <div style={{ display: 'flex', gap: 8 }}>
              <Pill tone="cyan">@fruehchen_studie</Pill>
            </div>
          }
        />
      </div>
    </Section>

    {/* Datenschutz */}
    <Section background="warm" padding="md">
      <div style={{
        background: '#fff',
        border: '1px solid var(--border-soft)',
        borderRadius: 26, padding: isMobile ? '20px 16px' : '36px 40px',
        boxShadow: '0 8px 22px rgba(14,42,56,0.07)',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: 56, alignItems: 'flex-start' }}>
          <div>
            <SectionEyebrow tone="cyan">Datenschutz</SectionEyebrow>
            <h2 style={{ marginTop: 12, fontSize: 30, fontWeight: 800, letterSpacing: '-0.012em', lineHeight: 1.1 }}>
              Für Sie entsteht kein Datenschutz­problem.
            </h2>
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16, fontSize: 16, lineHeight: 1.55, color: 'var(--fg-1)' }}>
            <Bullet tone="cyan">Sie geben mir <strong>keine personenbezogenen Daten</strong> weiter.</Bullet>
            <Bullet tone="cyan">
              Interessierte Mütter* <strong>melden sich selbst</strong> bei mir
              und werden ausführlich über den Datenschutz aufgeklärt. Vorab
              erklären sie ihre informierte Einwilligung. Den Link zur
              Kontaktdaten­übermittlung finden Sie <a onClick={() => window.requestContactRedirect && window.requestContactRedirect()} style={{ color: 'var(--brand-blue-700)', textDecoration: 'underline', cursor: 'pointer' }}>hier</a>.
            </Bullet>
            <Bullet tone="cyan">
              Die Studie beachtet die aktuellen Erfordernisse der{' '}
              <strong>DSGVO</strong>. Es wird ein Datenschutz­konzept umgesetzt.
            </Bullet>
          </ul>
        </div>
      </div>
    </Section>

    {/* Final CTA */}
    <Section background="blue" padding="md">
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
        <SectionEyebrow tone="cyan">Vielen Dank.</SectionEyebrow>
        <h2 style={{ marginTop: 16, marginBottom: 16, fontSize: isMobile ? 28 : 44, fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.015em', color: '#fff', textWrap: 'balance' }}>
          Ohne Ihre Unterstützung wäre diese Studie schwerer möglich.
        </h2>
        <p style={{ fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.88)', maxWidth: 580, margin: '0 auto 28px' }}>
          Bei Fragen, Anregungen oder Materialwünschen schreiben Sie mir gerne —
          ich antworte so schnell ich kann.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="mailto:info@frühchen-studie.de" style={{ textDecoration: 'none' }}>
            <Button variant="primary" size="lg" icon="arrow">E-Mail schreiben</Button>
          </a>
          <Button variant="inverseOutline" size="lg" onClick={() => onNavigate('materials')}>
            Materialien herunterladen
          </Button>
        </div>
      </div>
    </Section>


  </div>
  );
};

const SupportCard = ({ n, title, desc, action }) => (
  <div style={{
    background: '#fff',
    border: '1px solid var(--border-soft)',
    borderRadius: 22, padding: 28,
    display: 'flex', flexDirection: 'column', gap: 14,
    boxShadow: '0 2px 6px rgba(14,42,56,0.05)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <Num n={n} tone="cyan" />
      <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.005em', margin: 0 }}>{title}</h3>
    </div>
    <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, textWrap: 'pretty' }}>{desc}</p>
    <div style={{ marginTop: 4 }}>{action}</div>
  </div>
);

Object.assign(window, { ProfessionalsPage });