/* Reusable sections used across multiple routes. */

/* "In aller Kürze" — short intro card used on Home + Mothers + Professionals */
const ShortIntro = ({ onJoin, onLearn, page = 'home' }) => {
  const { isMobile } = useBreakpoint();
  return (
  <Section background="cream" padding="md">
    <div style={{
      display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: isMobile ? 24 : 64, alignItems: 'flex-start',
    }}>
      <div>
        <SectionEyebrow>In aller Kürze</SectionEyebrow>
        <h2 style={{
          marginTop: 12, fontSize: isMobile ? 32 : 44, fontWeight: 800,
          lineHeight: 1.0, letterSpacing: '-0.018em', textWrap: 'balance',
        }}>Worum geht es hier?</h2>
      </div>
      <div style={{ fontSize: isMobile ? 17 : 19, lineHeight: 1.65, color: 'var(--fg-2)', textWrap: 'pretty' }}>
        <p style={{ marginBottom: 18 }}>
          Ich bin Hebamme und schreibe meine Doktorarbeit an der Med. Fakultät
          der Universität zu Köln in einem Promotionsprogramm (IPHS). Für die Studie suche ich
          {' '}<strong style={{ color: 'var(--fg-1)' }}>Mütter*, die vor mehr als 6 Monaten und weniger als 5 Jahren
          ein heute lebendes Kind unter 1.500 g Gewicht geboren haben</strong>{' '}
          und sich vorstellen können, mit mir darüber zu sprechen und zwei
          Fragebögen auszufüllen.
        </p>
        <p style={{ marginBottom: 24 }}>
          Ziel ist die <strong style={{ color: 'var(--fg-1)' }}>Verbesserung der Hebammen­betreuung und Gesundheits­versorgung</strong>
          {' '}für Mütter* frühgeborener Kinder mit sehr niedrigem Geburts­gewicht.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {onJoin   && <Button variant="primary"   onClick={onJoin}   icon="arrow">Kontaktdaten senden</Button>}
          {onLearn  && <Button variant="secondary" onClick={onLearn}>Mehr zur Studie</Button>}
        </div>
      </div>
    </div>
  </Section>
  );
};

/* Site map — six cards for the major sub-pages, used on Home */
const SiteCards = ({ onNavigate }) => {
  const { isMobile, isTablet } = useBreakpoint();
  const cards = [
    { id: 'mothers',       eyebrow: 'Für Mütter*',         title: 'Informationen für betroffene Mütter*',
      desc: 'Was die Teilnahme bedeutet, wer mitmachen kann — und wie Sie mir Ihre Kontaktdaten übermitteln.',
      tone: 'coral' },
    { id: 'professionals', eyebrow: 'Für Fachpersonen',    title: 'Unterstützung bei der Teilnehmerinnen­gewinnung',
      desc: 'Sie arbeiten oder engagieren sich im Gesundheits- oder Sozialwesen und kennen betroffene Mütter*? So können Sie helfen.',
      tone: 'cyan' },
    { id: 'about',         eyebrow: 'Über mich',           title: 'Informationen zu mir',
      desc: 'Wer ich bin, an welcher Hochschule ich arbeite und wer mich wissenschaftlich begleitet.',
      tone: 'blue' },
    { id: 'materials',     eyebrow: 'Materialien',         title: 'Materialien zum Herunterladen',
      desc: 'Handzettel, Poster und Instagram-Vorlagen — zum Auslegen, Weitergeben und Teilen.',
      tone: 'coral' },
    { id: 'science',       eyebrow: 'Wissenschaftliches',  title: 'Wissenschaftliche Informationen',
      desc: 'Titel, Hintergrund, Methodik, Studien­population, Zeitplan, beteiligte Personen, Datenschutz.',
      tone: 'cyan' },
    { id: 'contact',       eyebrow: 'Mitmachen',           title: 'Kontaktdaten übermitteln',
      desc: 'Trifft das auf Sie zu? Geben Sie mir Ihre Kontaktdaten — die Übermittlung ist noch keine Studienteilnahme.',
      tone: 'blue', highlight: true },
  ];
  return (
    <Section background="white">
      <div style={{ maxWidth: 760, marginBottom: 40 }}>
        <SectionEyebrow>Zur passenden Information für Sie</SectionEyebrow>
        <h2 style={{ marginTop: 12, fontSize: isMobile ? 26 : 40, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.015em' }}>
          Informieren Sie sich — und entscheiden Sie, ob Sie teilnehmen möchten.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 20 }}>
        {cards.map(c => (
          <SiteCard key={c.id} {...c}
            onClick={c.id === 'contact'
              ? () => window.requestContactRedirect && window.requestContactRedirect()
              : () => onNavigate(c.id)} />
        ))}
      </div>
    </Section>
  );
};

const SiteCard = ({ eyebrow, title, desc, tone, onClick, highlight }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        cursor: 'pointer', textDecoration: 'none',
        background: highlight ? 'var(--brand-blue-700)' : 'var(--cream)',
        color: highlight ? '#fff' : 'var(--fg-1)',
        border: highlight ? '1px solid var(--brand-blue-700)' : '1px solid var(--border-soft)',
        borderRadius: 22, padding: 28,
        display: 'flex', flexDirection: 'column', gap: 12,
        minHeight: 240,
        transition: 'all 180ms cubic-bezier(.2,.7,.2,1)',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hover
          ? (highlight ? '0 18px 36px rgba(0,28,42,0.34)' : '0 14px 28px rgba(14,42,56,0.10)')
          : (highlight ? '0 6px 16px rgba(0,28,42,0.22)' : '0 1px 3px rgba(14,42,56,0.05)'),
      }}
    >
      <SectionEyebrow tone={highlight ? 'cyan' : tone} style={{ color: highlight ? 'var(--brand-cyan-400)' : undefined }}>
        {eyebrow}
      </SectionEyebrow>
      <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.01em', textWrap: 'balance' }}>
        {title}
      </div>
      <div style={{ fontSize: 15, lineHeight: 1.6, color: highlight ? 'rgba(255,255,255,0.84)' : 'var(--fg-2)' }}>
        {desc}
      </div>
      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 600,
                    color: highlight ? '#fff' : 'var(--brand-coral-500)' }}>
        <span>{highlight ? 'Jetzt mitmachen' : 'Weiterlesen'}</span>
        <span style={{ transform: hover ? 'translateX(4px)' : 'translateX(0)', transition: 'transform 180ms' }}>→</span>
      </div>
    </a>
  );
};

/* Eligibility — used on Home + Mothers + Science */
const Eligibility = ({ tone = 'cream' }) => {
  const { isMobile } = useBreakpoint();
  return (
  <Section background={tone} padding="md">
    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 24 : 80, alignItems: 'flex-start' }}>
      <div>
        <SectionEyebrow>Wer kann teilnehmen</SectionEyebrow>
        <h2 style={{ marginTop: 12, marginBottom: 18, fontSize: isMobile ? 28 : 40, fontWeight: 800, lineHeight: 1.04, letterSpacing: '-0.015em', color: 'var(--fg-1)' }}>
          Trifft das auf Sie zu?
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--fg-2)', margin: 0, textWrap: 'pretty' }}>
          Diese Kriterien sind die Voraussetzung für eine spätere Teilnahme.
          Prüfen Sie gerne kurz, ob Sie sich wiedererkennen.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <EligibilityCard num="1">
          Sie haben mindestens <strong>ein Kind mit einem Geburts­gewicht unter 1.500 g</strong>
          {' '}geboren, das lebt.
        </EligibilityCard>
        <EligibilityCard num="2">
          Die Geburt ist <strong>mehr als 6 Monate</strong> und{' '}
          <strong>weniger als 5 Jahre</strong> her.
        </EligibilityCard>
        <EligibilityCard num="3">
          Sie sind <strong>volljährig</strong>, einwilligungs­fähig und
          verstehen, sprechen und schreiben ausreichend gut Deutsch.
        </EligibilityCard>
        <EligibilityCard num="4">
          Sie haben ein Handy, Tablet oder einen Computer und können hiermit
          an <strong>Online­treffen mit Ton</strong> teilnehmen.
        </EligibilityCard>
        <EligibilityCard num="5">
          Sie haben <strong>Interesse, an den Studienschritten teilzunehmen</strong>
          {' '}— zwei Fragebögen und ein Interview mit Vorgespräch.
        </EligibilityCard>
      </div>
    </div>
  </Section>
  );
};

const EligibilityCard = ({ num, children }) => (
  <div style={{
    background: '#fff',
    border: '1px solid var(--border-soft)',
    borderRadius: 22,
    padding: '22px 26px',
    display: 'flex', gap: 20,
    alignItems: 'flex-start',
    boxShadow: '0 2px 6px rgba(14,42,56,0.06)',
  }}>
    <IconCircle color="coral" size={44}>{num}</IconCircle>
    <div style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-1)', fontWeight: 500, paddingTop: 8, textWrap: 'pretty' }}>{children}</div>
  </div>
);

/* The four-step participation flow */
const ParticipationSteps = ({ onJoin, ctaLabel = 'Kontaktdaten senden' }) => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <Section background="blue">
    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 48, alignItems: 'flex-end', marginBottom: 44 }}>
      <div>
        <SectionEyebrow tone="cyan">So läuft die Teilnahme ab</SectionEyebrow>
        <h2 style={{ marginTop: 12, fontSize: isMobile ? 32 : 48, fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.018em', color: '#fff', marginBottom: 0, textWrap: 'balance' }}>
          Vier Schritte — Sie entscheiden nach Schritt 1.
        </h2>
      </div>
      <p style={{ fontSize: 18, lineHeight: 1.65, color: 'rgba(255,255,255,0.86)', margin: 0, textWrap: 'pretty' }}>
        Nach Kontaktdaten­übermittlung erhalten Sie alle Informationen. Erst
        danach entscheiden Sie, ob Sie an der Studie teilnehmen möchten. Die
        weiteren Bausteine können Sie zeitlich flexibel auf Ihren Alltag verteilen.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 18 }}>
      <StepCard num="1" title="Kontaktdaten übermitteln & Infos erhalten" time="unverbindlich">
        Sie senden mir Ihre Kontaktdaten und bekommen alle weiteren
        Informationen zur Studie. <strong>Erst danach</strong>
        {' '}entscheiden Sie, ob Sie teilnehmen möchten.
      </StepCard>
      <StepCard num="2" title="Online­fragebogen" time="ca. 30 Minuten">
        Sozio­demografische und anamnestische Angaben zu Ihnen und Ihrem
        Kind. Sie füllen ihn bequem zu Hause aus.
      </StepCard>
      <StepCard num="3" title="Interview mit Vorgespräch" time="ca. 3 Stunden">
        Ein halb­strukturiertes Gespräch — <strong>persönlich</strong> oder
        {' '}<strong>online</strong> per Video. Ich sehe Sie als Expertin: der
        Leitfaden gibt Themen vor, ist aber flexibel.
      </StepCard>
      <StepCard num="4" title="Abschluss­fragebogen" time="ca. 1 Stunde">
        Eine kurze Rückmeldung zu den Ergebnissen. Optional auch als
        Telefonat oder Onlinesitzung.
      </StepCard>
    </div>

    {onJoin && (
      <div style={{ marginTop: 44, display: 'flex', justifyContent: 'center' }}>
        <Button variant="inverse" size="lg" icon="arrow" onClick={onJoin}>{ctaLabel}</Button>
      </div>
    )}
  </Section>
  );
};

const StepCard = ({ num, title, time, children }) => (
  <div style={{
    background: 'rgba(255,255,255,0.06)',
    border: '1px solid rgba(255,255,255,0.18)',
    borderRadius: 22,
    padding: '28px 28px 32px',
    color: '#fff',
    display: 'flex', flexDirection: 'column', gap: 14,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <IconCircle color="white" size={42}>{num}</IconCircle>
      <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--brand-cyan-400)' }}>
        {time}
      </span>
    </div>
    <h3 style={{ marginTop: 4, marginBottom: 0, fontSize: 24, fontWeight: 700, letterSpacing: '-0.01em' }}>{title}</h3>
    <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.86)', textWrap: 'pretty' }}>{children}</p>
  </div>
);

/* Ethics + privacy badge — used on Home, Mothers, Science */
const EthicsBadge = ({ background = 'cream' }) => (
  <Section background={background} padding="md">
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
    }}>
      <BadgeCard
        eyebrow="Ethikvotum"
        title="Positiv beraten"
        desc="Die Geschäftsstelle der Ethikkommission der Medizinischen Fakultät zu Köln hat die Studie (Antrag 25-1210) am 15.01.2026 beraten und positiv bewertet."
        chip="Antrag 25-1210"
      />
      <BadgeCard
        eyebrow="Datenschutz"
        title="Sorgfältig & DSGVO-konform"
        desc="Alle Daten werden vertraulich behandelt und besonders geschützt. Der Zugriff ist auf mich und die wissenschaftlichen Betreuerinnen beschränkt."
        chip="Pseudonymisiert"
      />
      <BadgeCard
        eyebrow="Freiwilligkeit"
        title="Jederzeit kein Nachteil"
        desc="Die Teilnahme ist freiwillig — und auch nach Einwilligung jederzeit ohne Begründung und ohne Nachteile widerrufbar."
        chip="Widerrufbar"
      />
    </div>
  </Section>
);

const BadgeCard = ({ eyebrow, title, desc, chip }) => (
  <div style={{
    background: '#fff',
    border: '1px solid var(--border-soft)',
    borderRadius: 22, padding: 28,
    display: 'flex', flexDirection: 'column', gap: 12,
    boxShadow: '0 2px 6px rgba(14,42,56,0.05)',
  }}>
    <SectionEyebrow tone="cyan">{eyebrow}</SectionEyebrow>
    <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em', margin: 0 }}>{title}</h3>
    <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, textWrap: 'pretty' }}>{desc}</p>
    <Pill tone="cyan" style={{ alignSelf: 'flex-start', marginTop: 4 }}>{chip}</Pill>
  </div>
);

/* Quote block — used on Home */
const QuoteBlock = () => (
  <Section background="warm" padding="sm">
    <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'left' }}>
      <SectionEyebrow>Warum diese Studie</SectionEyebrow>
      <blockquote style={{
        margin: '22px 0 14px',
        fontFamily: 'var(--font-serif)',
        fontStyle: 'italic',
        fontSize: 30, lineHeight: 1.4,
        color: 'var(--fg-1)',
        textWrap: 'pretty',
      }}>
        Eltern von frühgeborenen Kindern stehen vor außergewöhnlichen
        psychologischen und emotionalen Heraus­forderungen. Die möglichen
        Potenziale einer umfassenden Hebammen­betreuung sind zum Teil
        jedoch noch ungenutzt.
      </blockquote>
    </div>
  </Section>
);

/* Researcher card — used on Home */
const ResearcherCard = ({ onMore }) => {
  const { isMobile } = useBreakpoint();
  return (
  <Section background="cream">
    <div style={{
      background: '#fff', borderRadius: 32, padding: 36,
      boxShadow: '0 8px 22px rgba(14,42,56,0.07), 0 2px 4px rgba(14,42,56,0.05)',
      border: '1px solid var(--border-soft)',
      display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '220px 1fr auto', gap: 36, alignItems: 'center',
    }}>
      <img src={window.__resources.portrait} alt="Maike Lammert" style={{
        width: isMobile ? 120 : 220, height: isMobile ? 120 : 220, borderRadius: '50%', objectFit: 'cover', objectPosition: 'top',
      }} />
      <div>
        <SectionEyebrow>Doktorandin</SectionEyebrow>
        <h3 style={{ marginTop: 8, marginBottom: 8, fontSize: 30, fontWeight: 800, letterSpacing: '-0.01em' }}>
          Maike Lammert
        </h3>
        <div style={{ fontSize: 16, color: 'var(--fg-3)', marginBottom: 14 }}>
          Hebamme · Lehrkraft Hebammen­wissenschaft (HSBI) · Doktorandin (Universität zu Köln; IPHS)
        </div>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)', margin: 0, maxWidth: 560, textWrap: 'pretty' }}>
          Als Hebamme mit mehrjähriger Berufspraxis beschäftige ich mich seit
          vielen Jahren mit der Betreuung von Müttern* und ihrer Familie in
          der Schwanger­schaft, während der Geburt und im ersten Lebensjahr.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start' }}>
        <EmojiContact kind="mail" href="mailto:info@frühchen-studie.de">info@frühchen-studie.de</EmojiContact>
        <Button variant="secondary" size="sm" onClick={onMore} style={{ marginTop: 12 }}>Mehr über mich</Button>
      </div>
    </div>
  </Section>
  );
};

Object.assign(window, {
  ShortIntro, SiteCards, Eligibility, EligibilityCard,
  ParticipationSteps, StepCard,
  EthicsBadge, QuoteBlock, ResearcherCard,
});