/* Über mich — Informationen zu mir */

const AboutPage = ({ onNavigate }) => {
  const { isMobile } = useBreakpoint();
  return (
  <div className="page-fade-in">
    {/* Hero with portrait */}
    <Section background="cream" padding="large">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '380px 1fr', gap: 64, alignItems: 'center' }}>
        <img
          src={window.__resources.portrait}
          alt="Maike Lammert"
          style={{ width: isMobile ? '100%' : 380, height: isMobile ? 'auto' : 460, objectFit: isMobile ? 'contain' : 'cover', objectPosition: 'top', borderRadius: 32, boxShadow: '0 22px 48px rgba(14,42,56,0.18)' }}
        />
        <div>
          <SectionEyebrow>Über mich</SectionEyebrow>
          <h1 style={{ marginTop: 14, marginBottom: 14, fontSize: isMobile ? 36 : 54, fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.02em' }}>
            Mein Name ist<br/>Maike Lammert.
          </h1>
          <p style={{ fontSize: 21, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 580, textWrap: 'pretty' }}>
            Als Hebamme mit mehrjähriger Berufspraxis und Lehrkraft im
            Gesundheits­wesen mit Bachelor- und Master­abschluss 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 des Kindes.
          </p>
          <p style={{ marginTop: 16, fontSize: 19, lineHeight: 1.55, color: 'var(--fg-1)', fontWeight: 500, maxWidth: 580 }}>
            Die <strong>Optimierung der Versorgungslage</strong>, auch in
            herausfordernden Situationen, ist für mich besonders wichtig.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
            <Pill tone="coral">Hebamme</Pill>
            <Pill tone="cyan">Lehrkraft Hebammen­wissenschaft</Pill>
            <Pill>Doktorandin</Pill>
            <Pill tone="outline">B.A. und M.A.</Pill>
          </div>
        </div>
      </div>
    </Section>

    {/* Aktuelle Tätigkeit */}
    <Section background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: 56, alignItems: 'flex-start' }}>
        <div>
          <SectionEyebrow>Aktuelle Tätigkeit</SectionEyebrow>
          <h2 style={{ marginTop: 12, fontSize: 36, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.015em' }}>
            Ich arbeite aktuell als …
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20 }}>
          <Card tone="cream" style={{ padding: 28 }}>
            <a href="https://www.hsbi.de/studiengaenge/angewandte-hebammenwissenschaft-praxisintegriert" target="_blank" rel="noopener noreferrer">
              <img src={window.__resources.logoHsbi} alt="HSBI" style={{ height: 36, marginBottom: 14 }} />
            </a>
            <SectionEyebrow tone="coral">Hochschule Bielefeld</SectionEyebrow>
            <h3 style={{ marginTop: 8, fontSize: 22, fontWeight: 700, letterSpacing: '-0.005em' }}>
              Lehrkraft im Studiengang Hebammen­wissenschaft B.Sc. & wissenschaftliche Mitarbeiterin
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg-2)', margin: '8px 0 0' }}>
              Fachbereich Gesundheit
            </p>
            <a href="https://www.hsbi.de/personenverzeichnis/maike-lammert" target="_blank" rel="noopener noreferrer"
               style={{ marginTop: 14, display: 'inline-block', fontSize: 14, color: 'var(--brand-blue-700)', fontWeight: 600, textDecoration: 'none' }}>
              hsbi.de/personenverzeichnis/maike-lammert →
            </a>
          </Card>
          <Card tone="cream" style={{ padding: 28 }}>
            <a href="https://hebammenwissenschaft.uni-koeln.de/" target="_blank" rel="noopener noreferrer">
              <img src={window.__resources.logoUniKoeln} alt="Universität zu Köln" style={{ height: 48, marginBottom: 8 }} />
            </a>
            <SectionEyebrow tone="cyan">Universität zu Köln</SectionEyebrow>
            <h3 style={{ marginTop: 8, fontSize: 22, fontWeight: 700, letterSpacing: '-0.005em' }}>
              Doktorandin · Medizinische Fakultät
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg-2)', margin: '8px 0 0' }}>
              Promotion an der Medizinischen Fakultät im Promotionsprogramm Interdisciplinary Program Health Sciences (IPHS).
              Die Studie gehört zu meiner Tätigkeit als Doktorandin.
            </p>
          </Card>
        </div>
      </div>
    </Section>

    {/* Wissenschaftliche Begleitung */}
    <Section background="warm" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: 56, alignItems: 'flex-start' }}>
        <div>
          <SectionEyebrow>Wissenschaftliche Begleitung</SectionEyebrow>
          <h2 style={{ marginTop: 12, fontSize: 36, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.015em' }}>
            Begleitet durch zwei erfahrene Betreuerinnen.
          </h2>
          <p style={{ marginTop: 14, fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)', textWrap: 'pretty' }}>
            Ich werde durch meine wissenschaftlichen Betreuerinnen unterstützt —
            beide forschen im Bereich Hebammenwissenschaft und Versorgungsforschung.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20 }}>
          <SupervisorCard
            name="Univ.-Prof.in Dr. Nicola H. Bauer"
            institution="Universität zu Köln"
            role="Institutsleiterin · Institut für Hebammen­wissenschaft"
            link="hebammenwissenschaft.uni-koeln.de"
            href="https://hebammenwissenschaft.uni-koeln.de/institut/institutsleitung"
            logo={window.__resources.logoUniKoeln}
          />
          <SupervisorCard
            name="Prof. Dr. Annette Bernloehr"
            institution="Hochschule Bielefeld"
            role="Fachbereich Gesundheit"
            link="hsbi.de/personenverzeichnis/annette-bernloehr"
            href="https://www.hsbi.de/personenverzeichnis/annette-bernloehr"
            logo={window.__resources.logoHsbi}
          />
        </div>
      </div>
    </Section>

    {/* Studienzentrum */}
    <Section background="cream" padding="md">
      <Card style={{ padding: 36 }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: 48, alignItems: 'flex-start' }}>
          <div>
            <SectionEyebrow tone="cyan">Mitwirkendes Studienzentrum</SectionEyebrow>
            <h3 style={{ marginTop: 12, fontSize: 26, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.15 }}>
              Institut für Hebammen­wissenschaft
            </h3>
            <p style={{ fontSize: 15, color: 'var(--fg-2)', margin: '6px 0 0' }}>
              Medizinische Fakultät der Universität zu Köln
            </p>
          </div>
          <div style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-1)' }}>
            <div style={{ fontWeight: 600 }}>Univ.-Prof.in Dr. Nicola H. Bauer</div>
            <div style={{ color: 'var(--fg-2)' }}>Kerpener Straße 34</div>
            <div style={{ color: 'var(--fg-2)' }}>50931 Köln</div>
            <div style={{ marginTop: 18, padding: '14px 16px', background: 'var(--cream)', borderRadius: 12, fontSize: 14, color: 'var(--fg-2)' }}>
              Die <strong style={{ color: 'var(--fg-1)' }}>Verantwortung für die Studie</strong> liegt bei mir.
            </div>
          </div>
        </div>
      </Card>
    </Section>

    {/* Kontakt */}
    <Section background="blue" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <SectionEyebrow tone="cyan">Bei Fragen</SectionEyebrow>
          <h2 style={{ marginTop: 14, fontSize: isMobile ? 30 : 48, fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#fff', textWrap: 'balance' }}>
            Schreiben Sie mir gerne.
          </h2>
          <p style={{ marginTop: 16, fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,0.86)', maxWidth: 480 }}>
            Bitte haben Sie Verständnis, falls ich nicht sofort antworten kann —
            ich melde mich so schnell wie möglich zurück.
          </p>
        </div>
        <Card style={{ padding: 32 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <EmojiContact kind="mail" href="mailto:info@frühchen-studie.de">info@frühchen-studie.de</EmojiContact>
            <EmojiContact kind="instagram" href="https://www.instagram.com/fruehchen_studie/" target="_blank" rel="noopener noreferrer">@fruehchen_studie</EmojiContact>
            <div style={{ borderTop: '1px solid var(--border-soft)', paddingTop: 14, marginTop: 4 }}>
              <SectionEyebrow>Mehr Infos zu mir</SectionEyebrow>
              <a href="https://www.hsbi.de/personenverzeichnis/maike-lammert" target="_blank" rel="noopener noreferrer"
                 style={{ display: 'block', marginTop: 8, fontSize: 14, color: 'var(--brand-blue-700)', fontWeight: 600, textDecoration: 'none', wordBreak: 'break-word' }}>
                hsbi.de/personenverzeichnis/maike-lammert →
              </a>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
              <Button variant="primary" icon="arrow" onClick={() => window.requestContactRedirect && window.requestContactRedirect()}>
                Kontaktdaten senden
              </Button>
            </div>
          </div>
        </Card>
      </div>
    </Section>


  </div>
  );
};

const SupervisorCard = ({ name, institution, role, link, href, logo }) => (
  <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)',
  }}>
    <img src={logo} alt="" style={{ height: 36, alignSelf: 'flex-start' }} />
    <div style={{ marginTop: 4 }}>
      <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--fg-1)', letterSpacing: '-0.005em' }}>{name}</div>
      <div style={{ fontSize: 15, color: 'var(--fg-2)', marginTop: 2 }}>{institution}</div>
      <div style={{ fontSize: 14, color: 'var(--fg-3)', marginTop: 2 }}>{role}</div>
    </div>
    <a href={href} target="_blank" rel="noopener noreferrer" style={{ fontSize: 14, color: 'var(--brand-blue-700)', fontWeight: 600, textDecoration: 'none', marginTop: 'auto', wordBreak: 'break-word' }}>
      {link} →
    </a>
  </div>
);

Object.assign(window, { AboutPage });