function Header({ page, onNavigate }) {
  const links = ['Behandlung', 'Preise', 'Über uns'];
  const goToContact = (e) => {
    e.preventDefault();
    if (page !== 'Home') onNavigate('Home');
    setTimeout(() => document.getElementById('kontakt')?.scrollIntoView({ behavior: 'smooth' }), page !== 'Home' ? 50 : 0);
  };
  const goToTreatments = (e) => {
    e.preventDefault();
    if (page !== 'Home') onNavigate('Home');
    setTimeout(() => document.getElementById('behandlungen')?.scrollIntoView({ behavior: 'smooth' }), page !== 'Home' ? 50 : 0);
  };
  return (
    <header
      style={{
        position: 'sticky',
        top: 0,
        zIndex: 10,
        background: 'var(--surface-card)',
        borderBottom: '1px solid var(--border-subtle)',
      }}
    >
      <div
        style={{
          maxWidth: 'var(--container-max)',
          width: '100%',
          boxSizing: 'border-box',
          margin: '0 auto',
          padding: '10px var(--space-6)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 'var(--space-3)',
          flexWrap: 'nowrap',
        }}
      >
        <div
          onClick={() => onNavigate('Home')}
          style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flexShrink: 1, minWidth: 0 }}
        >
          <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzEzLjkgMTIxLjMiPgogIAogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yNzYuMSw5Ny45di0zLjZsMi4yLTIuMyw0LjUsNS45aDEuM2wtNS4xLTYuNiw0LjgtNS4yaC0xLjNsLTYuNSw2Ljl2LTYuOWgtMS4xdjExLjhoMS4xWk0yNjcuOCw4Ni4xaC0xLjF2MTEuOGgxLjF2LTExLjhaTTI1OC41LDk3LjloMXYtMTEuOGgtMS4xdjkuOGwtNy44LTkuOGgtLjl2MTEuOGgxLjF2LTkuN2w3LjcsOS43Wk0yNDEuNCw4Ni4xdjUuM2gtN3YtNS4zaC0xLjF2MTEuOGgxLjF2LTUuNWg3djUuNWgxLjJ2LTExLjhoLTEuMlpNMjE3LjIsOTQuMWMuMy43LjcsMS40LDEuMSwxLjkuNS42LDEuMSwxLDEuNywxLjQuNy40LDEuNC41LDIuMi41cy45LDAsMS40LS4yYy41LS4xLjktLjMsMS4zLS41LjQtLjIuOC0uNSwxLjEtLjkuMy0uMy42LS43LjgtMS4ybC0xLS41Yy0uMi40LS40LjctLjcsMS0uMy4zLS42LjUtLjkuNy0uMy4yLS43LjMtMSwuNC0uMywwLS43LjEtMSwuMS0uNiwwLTEuMi0uMS0xLjgtLjQtLjUtLjMtMS0uNi0xLjQtMS4xLS40LS41LS43LTEtLjktMS42LS4yLS42LS4zLTEuMi0uMy0xLjlzMC0xLjIuMy0xLjhjLjItLjYuNS0xLjEuOC0xLjYuNC0uNS44LS44LDEuNC0xLjEuNS0uMywxLjItLjQsMS45LS40cy42LDAsMSwuMWMuMywwLC43LjIsMSwuNC4zLjIuNi40LjkuNi4zLjMuNS42LjcsMWwuOS0uNmMtLjQtLjgtLjktMS40LTEuNy0xLjktLjctLjUtMS42LS43LTIuNy0uN3MtMS43LjItMi40LjUtMS4zLjgtMS44LDEuNGMtLjUuNi0uOCwxLjItMS4xLDEuOS0uMi43LS40LDEuNC0uNCwyLjFzLjEsMS41LjQsMi4yTTIwNC40LDk2Ljl2LTQuNWg1Ljh2LTFoLTUuOHYtNC4zaDYuNnYtMWgtNy44djExLjhoNy45di0xaC02LjhaTTE5Ny4zLDg2LjFoLTkuNnYxaDQuMnYxMC44aDEuMnYtMTAuOGg0LjJ2LTFaTTE1Ni45LDk3Ljl2LTExLjhoLTEuMmwtNC42LDguMS00LjYtOC4xaC0xLjJ2MTEuOGgxLjF2LTkuN2w0LjMsNy41aC43bDQuMy03LjV2OS43aDEuMVpNMTMxLjUsOTYuNWMtLjUtLjMtLjktLjYtMS4yLTEuMS0uMy0uNS0uNS0xLS42LTEuNi0uMS0uNi0uMi0xLjItLjItMS44di02aC0xLjF2NmMwLC44LDAsMS41LjIsMi4yLjIuNy40LDEuMy44LDEuOS40LjYuOSwxLDEuNSwxLjMuNi4zLDEuNC41LDIuNC41czEuNy0uMiwyLjMtLjVjLjYtLjMsMS4xLS44LDEuNS0xLjMuNC0uNS43LTEuMi45LTEuOS4yLS43LjMtMS41LjMtMi4zdi02aC0xLjJ2NmMwLC42LDAsMS4yLS4yLDEuOC0uMS42LS4zLDEuMS0uNiwxLjYtLjMuNS0uNy44LTEuMiwxLjEtLjUuMy0xLjEuNC0xLjkuNHMtMS4zLS4xLTEuOC0uNE0xMTQuOCw5Ni41Yy0uNS0uMy0uOS0uNi0xLjItMS4xLS4zLS41LS41LTEtLjYtMS42LS4xLS42LS4yLTEuMi0uMi0xLjh2LTZoLTEuMXY2YzAsLjgsMCwxLjUuMiwyLjIuMi43LjQsMS4zLjgsMS45LjQuNi45LDEsMS41LDEuMy42LjMsMS40LjUsMi40LjVzMS43LS4yLDIuMy0uNWMuNi0uMywxLjEtLjgsMS41LTEuMy40LS41LjctMS4yLjktMS45LjItLjcuMy0xLjUuMy0yLjN2LTZoLTEuMnY2YzAsLjYsMCwxLjItLjIsMS44LS4xLjYtLjMsMS4xLS42LDEuNi0uMy41LS43LjgtMS4yLDEuMS0uNS4zLTEuMS40LTEuOS40cy0xLjMtLjEtMS44LS40TTk4LjIsOTcuOXYtMy42bDIuMi0yLjMsNC41LDUuOWgxLjNsLTUuMS02LjYsNC44LTUuMmgtMS4zbC02LjUsNi45di02LjloLTEuMXYxMS44aDEuMVpNODguMSw5My4zaC00LjhsMi40LTUuOCwyLjQsNS44Wk04MS41LDk3LjlsMS41LTMuN2g1LjNsMS41LDMuN2gxLjJsLTQuOS0xMS44aC0uOWwtNC45LDExLjhoMS4yWk02NS44LDg2LjFsNC45LDExLjhoMWw0LjktMTEuOGgtMS4ybC00LjIsMTAuNC00LjItMTAuNGgtMS4yWiI+PC9wYXRoPgogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yNDUuNiw3Ni41YzEuMiwwLDEuNi0xLjMsMS44LTIuMSwyLjMtNi43LDExLjgtMzAuMiwxNy4xLTMwLjIuMi40LDAsLjksMCwxLjIsMCwxLjIsMCwyLjItLjIsMy4zLS45LDUuNi0xLjgsMTEuNC0zLDE3djFjMCwuNS44LjgsMS4yLjhzLjgtLjMsMS4xLS42YzEuNi0zLjEsMy4zLTYsNi4xLTguMi40LS40LDEtLjksMS41LS45LDEuMywwLDIuNSw0LjQsMy4yLDUuNCwxLDEuMiwyLjQsMiw0LDIsNC45LDAsOC45LTQsMTIuMy03LC4yLDAsMS42LTEuNSwxLjgtMS43LjUtLjUsMS4zLS44LDEuMy0xLjZzLS41LTEuMi0xLjEtMS4yLTEuNS44LTEuOSwxLjNjLS4yLDAtMS42LDEuNS0xLjcsMS42bC0yLjUsMi4xYy0yLjIsMS45LTQuOSw0LjEtOC4xLDQuMXMtMi41LTEuOS0zLjItMy41Yy0uOC0xLjYtMS45LTMuOS00LjEtMy45cy00LjcsMy4xLTYuMiw0LjZ2LS4yYzAtMSwuOS01LjQsMS4xLTYuNC40LTIuNSwxLTUuMywxLTguMXMtLjUtMy42LTIuNC0zLjZjLTQsMC04LjgsOC0xMC40LDExLjItMS45LDMuNy0zLjcsNy40LTUuNCwxMS4zaDBjMC0uMywxLjYtNy41LDIuMy0xMC40LjctMy4yLDEuNi02LjMsMi4zLTkuNCwwLS4zLDAtLjQsMC0uNiwwLS44LS41LTEuMy0xLjMtMS4zcy0xLC40LTEuMSwxYy0yLDcuOC00LjEsMTUuNy01LjUsMjMuNywwLC40LS44LDQuOS0xLDYuNCwwLC42LS4yLDEuMS0uMiwxLjd2LjVjMCwuNC42LjgsMS4xLjhNMjE5LjIsNzguM2MuNywwLDEuMy0uNSwxLjUtMS4xLDIuMS02LjUsNC42LTEyLjksNy45LTE4LjkuNy0xLjIsMy43LTYuMSw0LjMtNi4xdi40Yy43LDMuOS45LDksNiw5czUuOC0xLjgsOC4yLTMuNWMuNS0uMywyLjctMS44LDMuMi0yLjIuMy0uMi40LS41LjQtLjksMC0uNy0uNC0xLjItMS4xLTEuMnMtMS40LjYtMS44LDFjLTIuNCwxLjctNS44LDQuNS04LjksNC41cy0xLjMsMC0xLjctLjRjLTIuMi0xLjctLjktOS42LTMuOC05LjYtNC4yLDAtMTAuOCwxNi4yLTEyLjEsMTkuNnYuMmMuNC0zLjIsMS4zLTYuNCwyLjItOS4zbDQuOC0xMy45YzAtLjctLjItMS42LTEuMS0xLjZzLTEuMS41LTEuMywxLjFsLTQuNSwxMy4xYy0xLjgsNS4xLTMuNCwxMS42LTMuNCwxNy4yczAsMi42LDEuMywyLjZNMTk3LjgsNjkuOWMtLjksMC0xLjEtMi41LTEuMS0zdi0xLjRjMC00LjcsMi44LTExLjksNi40LTE1LjIuMiwxLjQuNSwyLjUsMS4yLDMuOCwwLDMuNC0yLjEsMTUuOC02LjUsMTUuOE0xOTcuOCw3Mi4yYzUsMCw3LjItOC4xLDguMS0xMS43LjMtMS4yLjQtMi40LjgtMy42LDIsMS42LDQuNywyLjYsNy4zLDIuNnM4LjctMS44LDEwLjgtNC4yYy4yLS4yLjItLjQuMi0uNiwwLS43LS41LTEuMi0xLjItMS4yLTEsMC0xLjgsMS0yLjcsMS41LTIuMiwxLjItNC41LDItNy4xLDJzLTUtMS4xLTYuOC0zLjFjLS43LS44LS41LTItLjYtMy4xLS4yLTEuMi0uOS0zLjgtMi41LTMuOHMtMS43LjgtMi40LDEuNWMtNC4xLDMuOC03LjMsMTEuNC03LjMsMTdzLjIsNi43LDMuNSw2LjdNMTczLjQsOTUuOWMtMi4xLTIuNy0yLjQtOC44LTIuNC0xMi4yczAtNi45LjctMTAuMmguMmMwLDAsLjcsMS40LjcsMS40LDEuNywzLDIuNSwxMSwyLjUsMTQuM3MtLjIsNC43LTEuNCw2LjZjMCwwLS4yLjItLjMuMk0xNzYuMSw1My40Yy4zLTEuNywxLjctNS41LDIuNC03LjIuNy0xLjUsMy4yLTcuNCwzLjYtOC4zLDMuMy03LjUsOC4yLTE2LjUsMTQuMS0yMi4yLjQtLjQsMS4xLS45LDEuNy0uOSwwLDQuNS01LjUsMTUuNS03LjgsMTkuNC0zLjIsNS44LTkuMywxNC44LTE0LDE5LjJNMTczLjUsOTguNWMzLjQsMCwzLjktNy4zLDMuOS05LjYsMC00LjEtLjctOS45LTIuMi0xMy45LS40LTEuMi0xLjEtMi4xLTEuNi0zLjIsOC41LTIuMiwxMi4xLTQuOCwxOC44LTEwLC4yLDAsLjgtLjYsMS0uOGw1LjgtNS44YzAsMCwwLS41LDAtLjcsMC0uNy0uNS0xLjEtMS4xLTEuMXMtMS4zLjYtMS42LDEuMWMtLjguNy00LjIsNC4xLTQuOSw0LjktNS43LDQuOS0xMC41LDcuNi0xNy44LDkuOWwtMS43LjVjLjUtMy43LDEuNi05LjMsMi44LTEyLjksMy4zLTEuNiw1LjUtNC44LDcuOC03LjYsNS42LTYuNiwxMS4zLTE2LjksMTQuNi0yNC43LDEtMi4zLDIuOC03LjEsMi44LTkuNnMtLjYtMi42LTIuMi0yLjZjLTcuNywwLTE5LjgsMjcuOC0yMi44LDM2LjMtMy43LDEwLjYtNi41LDIzLjgtNi41LDM1LjFzLjgsMTQuNyw0LjksMTQuN00xMjguNyw1My45Yy0uNiwwLTEuNi0uNi0xLjYtMS4ycy40LS42LjUtLjhjLjgtLjgsMi42LTMuMSw0LjEtMy4xcy4zLjIuNC40di41YzAsMS43LTEuNiw0LjItMy40LDQuMk0xMjYuMyw3N2M0LjcsMCwxMC43LTYuMSwxMy44LTkuNSwxLjMtMS40LDEwLjItMTEuNCwxMC4yLTEyLjdzLS41LTEuMS0xLjItMS4xLTEuMi43LTEuNiwxLjJjLS45LDEuNC0yLDIuOS0zLjIsNC4xLTIuMiwyLjYtNC43LDUuNi03LjIsOC4yLTIsMi4xLTcuNSw3LjUtMTAuOCw3LjVzLTMuOC00LjYtMy44LTcuMWMwLTQuMywxLjItOC4yLDMtMTIuMSwwLDAsLjItLjMuMi0uMy45LjgsMS43LDEuMywyLjksMS4zLDMuMiwwLDUuNy0zLjYsNS43LTYuNnMtLjktMy4yLTIuNy0zLjJjLTIuNiwwLTUuNiwzLjQtNyw1LjQtMi43LDQuMi00LjYsMTAuNS00LjYsMTUuNHMuMyw1LjksMyw4LjRjLjguOCwyLDEuMiwzLjEsMS4yTTk0LjIsNzguM2MuNywwLDEuMy0uNSwxLjUtMS4xLDIuMS02LjUsNC42LTEyLjksNy45LTE4LjkuNy0xLjIsMy43LTYuMSw0LjMtNi4xdi40Yy43LDMuOS45LDksNiw5czUuOC0xLjgsOC4yLTMuNWMuNS0uMywyLjctMS44LDMuMi0yLjIuMy0uMi40LS41LjQtLjksMC0uNy0uNC0xLjItMS4xLTEuMnMtMS40LjYtMS44LDFjLTIuNCwxLjctNS44LDQuNS04LjksNC41cy0xLjMsMC0xLjctLjRjLTIuMi0xLjctLjktOS42LTMuOC05LjYtNC4yLDAtMTAuOCwxNi4yLTEyLjEsMTkuNnYuMmMuNC0zLjIsMS4zLTYuNCwyLjItOS4zbDQuOC0xMy45YzAtLjctLjItMS42LTEuMS0xLjZzLTEuMS41LTEuMywxLjFsLTQuNSwxMy4xYy0xLjgsNS4xLTMuNCwxMS42LTMuNCwxNy4yczAsMi42LDEuMywyLjZNNzkuNSw3NS4zYzMuMywwLDUuNy0yLjUsOC4xLTQuNSw0LjUtMy45LDcuNy05LDExLTEzLjguNC0uNiwxLjMtMS41LDEuMy0yLjJzLS41LTEuMS0xLjItMS4xLTEuMy44LTEuNiwxLjVjLTIuOCw0LTUuNSw4LjItOC45LDExLjctMS42LDEuOS01LjksNS45LTguNCw1LjloLS42Yy0xLjYtLjUtMS41LTMuMi0xLjUtNC42LDAtNS45LDIuMS0xMS43LDQuMy0xNy4yLjMtLjcuNy0xLjQuNy0ycy0uNi0xLjQtMS40LTEuNC0uNSwwLS43LjJjLS43LjYtMS4zLDEuNC0xLjgsMmwtOCwxMGMtLjksMS4yLTQuMSw0LjgtNS4xLDQuOHMtLjQtLjktLjQtMS4xdi0uOWMwLTQuOSwyLjEtOS44LDQuNC0xNC4yLjItLjQuMy0uNS4zLTFzLS40LTEuMS0xLjEtMS4xLTEuMi42LTEuNSwxLjJjLTIuMiw0LjgtNC42LDkuOC00LjYsMTVzLjUsNC4zLDIuNyw0LjMsNS45LTQuMiw3LjQtNS45bDQuOS02LjMuMi0uMnYuMmMtMS41LDQuNC0yLjgsOC44LTIuOCwxMy41cy41LDcsNC40LDdNMzUuMyw3OC4yYzAtMyw0LjktNy44LDYuOS05LjcsMC0uMi42LS42LjYtLjZoMGMwLDAtMS4xLDIuMS0xLjEsMi4xLS45LDEuNi00LjcsNy40LTYuNSw4LjJNMTguNCwxMDYuMmMuNywwLDEuMi0uNCwxLjQtMSwxLjQtNC4xLDIuMS04LjIsMy41LTEyLjMsMi40LTYuOSw0LjctMTMuOCw3LjQtMjAuNSwxLjktNC44LDExLjMtMjQuMSwxNi0yNC4xcy45LDEuMi45LDEuN3YxYzAsNC0xLDcuNy0yLjMsMTEuMy0uMi41LS4zLjgtLjcsMS4xLS4yLjItMiwxLjYtMi4yLDEuNy0zLjcsMy05LjUsOC43LTkuNSwxMy42cy42LDIuMSwxLjksMi4xYzQsMCw5LjUtOS45LDExLjEtMTMuNmwuOS0yLjNjLjMtLjUuNi0uNiwxLS45LDQuNC0zLjEsOC40LTUuMywxMy41LTcsLjIsMCwxLjUtLjQsMS42LS41LjIsMCwxLjctLjYsMS45LS42LjgtLjMsMS43LS4yLDEuNy0xLjVzLS40LTEuMi0xLjItMS4yLS40LDAtLjcsMGMtNi42LDItMTAuMiwzLjMtMTYuMiw3LjEsMC0uOS41LTIsLjctMi45LjUtMi4xLjktNC40LjktNi42cy0uNi01LTMuNC01LTYuOCw0LjYtOC40LDcuMmMtNCw1LjgtOC42LDE1LjMtMTEuMSwyMS44bC01LjIsMTQuNy0uOCwyLjF2LS40bC42LTIuNywzLjctMTUuMiwxLTMuNiw3LjgtMjUuNS42LTIuM2MuMy0xLC45LTIuMy45LTMuNXMtLjQtMS4yLTEuMS0xLjJjLTEsMC0xLjIsMS0xLjQsMS43bC05LDI5LjktNC40LDE3LjhjLTEuMyw1LTIuNCwxMS44LTIuNCwxNy4xczAsMi4zLDEuMiwyLjMiPjwvcGF0aD4KPC9zdmc+" alt="pure form" style={{ height: 56, maxWidth: '100%', display: 'block' }} />
        </div>
        <nav style={{ display: 'flex', gap: 'var(--space-3)', marginLeft: 'var(--space-9)', marginRight: 'var(--space-3)', flexShrink: 0, flexWrap: 'nowrap' }}>
          {links.map((l) => (
            <a
              key={l}
              onClick={l === 'Behandlung' ? goToTreatments : (e) => { e.preventDefault(); onNavigate(l); }}
              href="#"
              style={{
                fontFamily: 'var(--font-sans-body)',
                fontSize: '0.75rem',
                letterSpacing: 'var(--tracking-eyebrow)',
                textTransform: 'uppercase',
                whiteSpace: 'nowrap',
                color: page === l ? 'var(--brand-primary)' : 'var(--text-primary)',
              }}
            >
              {l}
            </a>
          ))}
          <a
            onClick={goToContact}
            href="#kontakt"
            style={{
              fontFamily: 'var(--font-sans-body)',
              fontSize: '0.75rem',
              letterSpacing: 'var(--tracking-eyebrow)',
              textTransform: 'uppercase',
              whiteSpace: 'nowrap',
              color: 'var(--text-primary)',
            }}
          >
            Kontakt
          </a>
        </nav>
        <button
          onClick={() => onNavigate('Buchung')}
          style={{
            marginLeft: 'calc(-1 * var(--space-8))',
            flexShrink: 0,
            background: 'var(--cta-bg)',
            color: 'var(--cta-text)',
            border: 'none',
            borderRadius: 'var(--radius-pill)',
            padding: '12px 18px',
            fontFamily: 'var(--font-sans-body)',
            fontSize: '0.75rem',
            fontWeight: 500,
            letterSpacing: 'var(--tracking-button)',
            textTransform: 'uppercase',
            cursor: 'pointer',
            whiteSpace: 'nowrap',
          }}
        >
          Termin buchen
        </button>
      </div>
    </header>
  );
}

window.Header = Header;