function SiteHeader({ onNav, active = 'home' }) {
  const isMobile = window.useIsMobile(860);
  const [open, setOpen] = React.useState(false);
  const links = [
    ['home', 'Start'], ['osteopathie', 'Osteopathie'],
    ['schwerpunkte', 'Schwerpunkte'], ['ueber', 'Über mich'], ['kontakt', 'Kontakt'],
  ];
  const go = (id) => { setOpen(false); onNav(id); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: isMobile ? '12px 20px' : '18px 40px', background: 'rgba(251,247,242,0.88)',
      backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--border-hair)',
    }}>
      <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ display: 'flex' }}>
        <img src="../../assets/logo-zelger-transparent.png" alt="Zelger Osteopathie" style={{ height: isMobile ? '46px' : '60px' }} />
      </a>

      {isMobile ? (
        <button
          onClick={() => setOpen(!open)}
          aria-label="Menü"
          aria-expanded={open}
          style={{
            width: '46px', height: '46px', display: 'flex', flexDirection: 'column', gap: '5px',
            alignItems: 'center', justifyContent: 'center', background: 'none', border: 'none', cursor: 'pointer',
          }}
        >
          <span style={{ width: '24px', height: '2px', background: 'var(--brand-ink)', borderRadius: '2px', transition: 'transform var(--dur-base) var(--ease-calm)', transform: open ? 'translateY(7px) rotate(45deg)' : 'none' }}></span>
          <span style={{ width: '24px', height: '2px', background: 'var(--brand-ink)', borderRadius: '2px', opacity: open ? 0 : 1, transition: 'opacity var(--dur-fast) var(--ease-calm)' }}></span>
          <span style={{ width: '24px', height: '2px', background: 'var(--brand-ink)', borderRadius: '2px', transition: 'transform var(--dur-base) var(--ease-calm)', transform: open ? 'translateY(-7px) rotate(-45deg)' : 'none' }}></span>
        </button>
      ) : (
        <nav style={{ display: 'flex', gap: '32px', alignItems: 'center' }}>
          {links.map(([id, label]) => (
            <a key={id} href="#" onClick={(e) => { e.preventDefault(); go(id); }}
              style={{
                fontFamily: 'var(--font-display)', fontSize: 'var(--text-sm)', fontWeight: 500,
                letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', textDecoration: 'none',
                color: active === id ? 'var(--accent)' : 'var(--text-muted)',
              }}>{label}</a>
          ))}
          <a href="#" onClick={(e) => { e.preventDefault(); go('kontakt'); }}
            style={{
              fontFamily: 'var(--font-display)', fontSize: 'var(--text-sm)', fontWeight: 500,
              letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', textDecoration: 'none',
              color: '#fff', background: 'var(--accent)', padding: '10px 22px', borderRadius: 'var(--radius-pill)',
            }}>Termin</a>
        </nav>
      )}

      {isMobile && open && (
        <nav style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'rgba(251,247,242,0.98)', backdropFilter: 'blur(12px)',
          borderBottom: '1px solid var(--border-hair)', boxShadow: 'var(--shadow-md)',
          padding: '12px 20px 24px', display: 'flex', flexDirection: 'column',
          animation: 'navSlide var(--dur-base) var(--ease-calm)',
        }}>
          {links.map(([id, label]) => (
            <a key={id} href="#" onClick={(e) => { e.preventDefault(); go(id); }}
              style={{
                fontFamily: 'var(--font-display)', fontSize: 'var(--text-md)', fontWeight: 500,
                letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', textDecoration: 'none',
                color: active === id ? 'var(--accent)' : 'var(--text-strong)',
                padding: '16px 4px', borderBottom: '1px solid var(--border-hair)',
              }}>{label}</a>
          ))}
          <a href="#" onClick={(e) => { e.preventDefault(); go('kontakt'); }}
            style={{
              marginTop: '18px', textAlign: 'center', fontFamily: 'var(--font-display)', fontSize: 'var(--text-base)',
              fontWeight: 500, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', textDecoration: 'none',
              color: '#fff', background: 'var(--accent)', padding: '16px', borderRadius: 'var(--radius-pill)',
            }}>Termin vereinbaren</a>
        </nav>
      )}
    </header>
  );
}