/* Layout: TopNav, Section wrapper, PartnerStrip, Footer */

const NAV_LINKS = [
  { id: 'home',         label: 'Start' },
  { id: 'mothers',      label: 'Für Mütter*' },
  { id: 'professionals',label: 'Für Fachpersonen' },
  { id: 'about',        label: 'Über mich' },
  { id: 'materials',    label: 'Materialien' },
  { id: 'science',      label: 'Wissenschaftliches' },
];

const TopNav = ({ current, onNavigate }) => {
  const { isMobile } = useBreakpoint();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [navVisible, setNavVisible] = React.useState(true);
  const [scrollY, setScrollY] = React.useState(0);

  React.useEffect(() => {
    let lastY = window.scrollY;
    const onScroll = () => {
      const y = window.scrollY;
      if (Math.abs(y - lastY) > 8) {
        setNavVisible(y < lastY || y < 80);
        setScrollY(y);
        lastY = y;
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const handleNav = (id) => { onNavigate(id); setMenuOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); };

  const navLink = (l) => (
    <a
      key={l.id}
      onClick={() => handleNav(l.id)}
      style={{
        cursor: 'pointer',
        padding: isMobile ? '14px 16px' : '8px 13px',
        borderRadius: 999,
        fontSize: isMobile ? 16 : 14,
        fontWeight: 600,
        color: current === l.id ? 'var(--brand-blue-700)' : 'var(--fg-2)',
        background: current === l.id ? 'rgba(0,84,118,0.10)' : 'transparent',
        display: 'block',
        textDecoration: 'none',
      }}
    >{l.label}</a>
  );

  return (
    <>
    <div style={{ height: 65 }} aria-hidden />
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: 'rgba(251,246,236,0.92)',
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--border-soft)',
      transform: navVisible ? 'translateY(0)' : 'translateY(-100%)',
      transition: 'transform 280ms cubic-bezier(.2,.7,.2,1)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        padding: '12px 20px',
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <a
          onClick={() => handleNav('home')}
          style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', textDecoration: 'none' }}
        >
          <img src={window.__resources.logoBaby} alt="Zur Startseite" style={{ width: 40, height: 40 }} />
          {!isMobile && (
            <div style={{ lineHeight: 1.1 }}>
              <div style={{ fontWeight: 800, fontSize: 15, color: 'var(--brand-blue-700)', letterSpacing: '-0.01em' }}>
                Frühchen-Studie.de
              </div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>
                Doktorarbeit · HSBI &middot; Universität zu Köln
              </div>
            </div>
          )}
        </a>

        {isMobile ? (
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-3)' }}>Alle Seiten</span>
            <span style={{ fontSize: 14, color: 'var(--fg-3)', lineHeight: 1 }}>›</span>
            <button className="rsp-hamburger" onClick={() => setMenuOpen(v => !v)} aria-label="Menü" style={{ margin: 0 }}>
              <span style={{ transform: menuOpen ? 'rotate(45deg) translate(5px,5px)' : 'none' }}/>
              <span style={{ opacity: menuOpen ? 0 : 1 }}/>
              <span style={{ transform: menuOpen ? 'rotate(-45deg) translate(5px,-5px)' : 'none' }}/>
            </button>
          </div>
        ) : (
          <nav style={{ marginLeft: 'auto', display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
            {NAV_LINKS.map(navLink)}
            <Button variant="primary" size="sm" onClick={() => window.requestContactRedirect && window.requestContactRedirect()} style={{ marginLeft: 10 }}>
              Kontaktdaten senden
            </Button>
          </nav>
        )}
      </div>
    </header>

    {isMobile && menuOpen && (
      <div className="rsp-mobile-nav">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <a onClick={() => handleNav('home')} style={{ cursor: 'pointer' }}>
            <img src={window.__resources.logoBaby} alt="Startseite" style={{ width: 36, height: 36 }} />
          </a>
          <button onClick={() => setMenuOpen(false)} style={{ background: 'none', border: 'none', fontSize: 24, cursor: 'pointer', color: 'var(--fg-2)', padding: 4 }}>×</button>
        </div>
        {NAV_LINKS.map(navLink)}
        <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-soft)' }}>
          <Button variant="primary" size="lg" onClick={() => { window.requestContactRedirect && window.requestContactRedirect(); setMenuOpen(false); }}>
            Kontaktdaten senden
          </Button>
        </div>
      </div>
    )}

    {/* Back-to-top FAB — mobile only, appears after scrolling */}
    {isMobile && scrollY > 300 && (
      <button
        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
        aria-label="Nach oben"
        style={{
          position: 'fixed', bottom: 24, right: 20, zIndex: 100,
          width: 44, height: 44, borderRadius: '50%',
          background: 'var(--brand-blue-700)',
          color: '#fff', border: 'none', cursor: 'pointer',
          display: 'grid', placeItems: 'center',
          boxShadow: '0 4px 14px rgba(0,28,42,0.35)',
          fontSize: 20, lineHeight: 1,
        }}
      >↑</button>
    )}
    </>
  );
};

const Section = ({ children, background = 'cream', padding = 'large', id, style = {}, maxWidth = 1180 }) => {
  const { isMobile } = useBreakpoint();
  const bgs = {
    cream: 'var(--cream)', white: '#fff', warm: 'var(--off-white)',
    blue: 'var(--brand-blue-700)', blueMid: 'var(--brand-blue-500)',
  };
  const padDesktop = { xs: 36, sm: 60, md: 80, large: 104, xl: 132 }[padding];
  const padMobile  = { xs: 20, sm: 32, md: 44, large:  60, xl:  80 }[padding];
  const padY = isMobile ? padMobile : padDesktop;
  const padX = isMobile ? 16 : 28;
  return (
    <section id={id} style={{
      background: bgs[background],
      color: background === 'blue' || background === 'blueMid' ? '#fff' : 'inherit',
      ...style,
    }}>
      <div style={{ maxWidth, margin: '0 auto', padding: `${padY}px ${padX}px` }}>
        {children}
      </div>
    </section>
  );
};

/* Page header for inner pages — eyebrow + big title + lede */
const PageHeader = ({ eyebrow, title, lede, accent = 'coral', invert = false }) => {
  const { isMobile } = useBreakpoint();
  return (
    <div style={{ maxWidth: 880 }}>
      <SectionEyebrow tone={accent}>{eyebrow}</SectionEyebrow>
      <h1 style={{
        marginTop: 14, marginBottom: lede ? 20 : 0,
        fontSize: isMobile ? 36 : 64, fontWeight: 800,
        lineHeight: isMobile ? 1.1 : 0.98,
        letterSpacing: '-0.02em', color: invert ? '#fff' : 'var(--fg-1)',
        textWrap: 'balance',
      }}>{title}</h1>
      {lede && (
        <p style={{
          fontSize: isMobile ? 16 : 22, lineHeight: 1.5, fontWeight: 400,
          color: invert ? 'rgba(255,255,255,0.88)' : 'var(--fg-2)',
          textWrap: 'pretty', margin: 0,
        }}>{lede}</p>
      )}
    </div>
  );
};

const PartnerStrip = ({ background = 'cream' }) => (
  <Section background={background} padding="sm">
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
      <div style={{ minWidth: 220, maxWidth: 480 }}>
        <div style={{ fontSize: 14, color: 'var(--fg-3)', lineHeight: 1.6 }}>
          Eine qualitative Forschungsarbeit an der Hochschule Bielefeld in Zusammenarbeit mit dem Institut für Hebammen­wissenschaft an der Universität zu Köln.
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 56, flexWrap: 'wrap' }}>
        <a href="https://www.hsbi.de/studiengaenge/angewandte-hebammenwissenschaft-praxisintegriert" target="_blank" rel="noopener noreferrer">
          <img src={window.__resources.logoHsbi} alt="Hochschule Bielefeld" style={{ height: 64 }} />
        </a>
        <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: 72 }} />
        </a>
      </div>
    </div>
  </Section>
);

const Footer = ({ onNavigate }) => {
  const { isMobile } = useBreakpoint();
  return (
    <footer style={{ background: 'var(--brand-blue-700)', color: 'rgba(255,255,255,0.86)', padding: isMobile ? '48px 0 28px' : '64px 0 36px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 16px' : '0 28px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.6fr 1fr 1fr 1fr', gap: isMobile ? 32 : 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
              <img src={window.__resources.logoBaby} alt="" style={{ width: 44, height: 44 }} />
              <div>
                <div style={{ fontWeight: 800, fontSize: 17, color: '#fff' }}>Frühchen-Studie.de</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.72)' }}>Doktorarbeit von Maike Lammert</div>
              </div>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.65, margin: '8px 0 8px', color: 'rgba(255,255,255,0.78)', maxWidth: 380 }}>
              Eine qualitative Forschungsarbeit an der Hochschule Bielefeld in Zusammenarbeit mit dem Institut für Hebammen­wissenschaft an der Universität zu Köln.
            </p>
            <p style={{ fontSize: 14, lineHeight: 1.65, margin: '0 0 16px', color: 'rgba(255,255,255,0.78)', maxWidth: 380 }}>
              Es besteht ein positives Votum für das Forschungsvorhaben durch die Geschäftsstelle der Ethikkommission der Med. Fakultät der Universität zu Köln vom 11.02.2026.
            </p>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--brand-cyan-400)', marginBottom: 14 }}>Kontakt</div>
            <EmojiContact kind="mail" dark href="mailto:info@frühchen-studie.de">info@frühchen-studie.de</EmojiContact>
            <div style={{ height: 10 }} />
            <EmojiContact kind="instagram" dark href="https://www.instagram.com/fruehchen_studie/" target="_blank" rel="noopener noreferrer">
              <span><span style={{ color: 'rgba(255,255,255,0.7)' }}>Instagram&nbsp;·&nbsp;</span><strong style={{ color: '#fff', fontWeight: 600 }}>@fruehchen_studie</strong></span>
            </EmojiContact>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--brand-cyan-400)', marginBottom: 14 }}>Auf dieser Seite</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
              <li><a onClick={() => onNavigate('mothers')}       style={footerLink}>Für Mütter*</a></li>
              <li><a onClick={() => onNavigate('professionals')} style={footerLink}>Für Fachpersonen</a></li>
              <li><a onClick={() => onNavigate('about')}         style={footerLink}>Über mich</a></li>
              <li><a onClick={() => onNavigate('materials')}     style={footerLink}>Materialien</a></li>
              <li><a onClick={() => onNavigate('science')}       style={footerLink}>Wissenschaftliche Informationen</a></li>
            </ul>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--brand-cyan-400)', marginBottom: 14 }}>Rechtliches</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
              <li><a onClick={() => onNavigate('impressum')} style={footerLink}>Impressum</a></li>
              <li><a onClick={() => onNavigate('privacy')}   style={footerLink}>Datenschutz­hinweise</a></li>
            </ul>
          </div>
        </div>

        <div style={{ marginTop: 48, padding: '18px 22px', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 16, fontSize: 13, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)' }}>
          <strong style={{ color: '#fff', fontWeight: 600 }}>Hinweis zur Sprache —</strong>{' '}
          Die Begriffe „Mutter*", „Studienteilnehmer*in" sowie weitere weibliche Bezeichnungen werden geschlechtsunabhängig für Personen verwendet, die ein Kind geboren haben. Wenn Personen andere Bezeichnungen bevorzugen, werden diese selbstverständlich nach dem Kennenlernen berücksichtigt.
        </div>

        <div style={{ borderTop: '1px solid rgba(255,255,255,0.16)', marginTop: 32, paddingTop: 22, display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'rgba(255,255,255,0.62)', flexWrap: 'wrap', gap: 12 }}>
          <span>© 2026 Maike Lammert · Hochschule Bielefeld / Universität zu Köln</span>
          <span>Letzte Aktualisierung: Mai 2026</span>
        </div>
      </div>
    </footer>
  );
};

const footerLink = {
  color: '#fff', textDecoration: 'none', cursor: 'pointer',
  borderBottom: '1px solid transparent', paddingBottom: 1,
};

Object.assign(window, { TopNav, Section, PageHeader, PartnerStrip, Footer });