/* Header.jsx — hide-on-scroll-down / show-on-scroll-up sticky header with burger (desktop + mobile) */
function Header({ onNav, onOpenMenu, menuOpen }) {
  const [hidden, setHidden] = React.useState(false);
  const [atTop, setAtTop] = React.useState(true);
  const lastY = React.useRef(0);

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setAtTop(y < 40);
      // hide when scrolling down past the hero edge; show when scrolling up
      if (y > lastY.current && y > 130) setHidden(true);
      else if (y < lastY.current) setHidden(false);
      lastY.current = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // over-hero (transparent) styling only when at top AND menu closed
  const onPhoto = atTop && !menuOpen;
  const logo = onPhoto ? 'assets/logo-kigips-transparent.png' : 'assets/logo-kigips.png';

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60,
      transform: hidden && !menuOpen ? 'translateY(-105%)' : 'translateY(0)',
      transition: 'transform .45s var(--kg-ease), background .35s var(--kg-ease), box-shadow .35s var(--kg-ease)',
      background: menuOpen ? 'transparent' : onPhoto ? 'transparent' : '#ffffff',
      backdropFilter: 'none',
      boxShadow: (!menuOpen && !onPhoto) ? '0 1px 0 var(--kg-line)' : 'none'
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px', height: 82, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <img src={logo} alt="Kigips GmbH" onClick={() => onNav('Home')}
          style={{ height: 40, cursor: 'pointer', opacity: menuOpen ? 0 : 1, transition: 'opacity .25s var(--kg-ease)' }} />

        <div style={{ display: 'flex', alignItems: 'center', gap: 18, opacity: menuOpen ? 0 : 1, transition: 'opacity .25s var(--kg-ease)', pointerEvents: menuOpen ? 'none' : 'auto' }}>
          <a href="tel:+41715250808" className="kg-hdr-phone" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none', fontWeight: 700, fontSize: 15,
            fontFamily: 'var(--kg-font-body)', color: onPhoto ? '#fff' : 'var(--kg-slate-700)', transition: 'color .3s var(--kg-ease)'
          }}>
            <Icon name="phone" size={16} color={onPhoto ? '#fff' : 'var(--kg-blue)'} />
            071 525 08 08
          </a>
          <button onClick={() => onNav('Offerte')} className="kg-hdr-cta" style={{
            background: onPhoto ? 'rgba(255,255,255,0.12)' : 'var(--kg-blue)', color: '#fff',
            border: onPhoto ? '1.5px solid rgba(255,255,255,0.5)' : '1.5px solid var(--kg-blue)',
            backdropFilter: onPhoto ? 'blur(4px)' : 'none',
            fontFamily: 'var(--kg-font-body)', fontWeight: 700, fontSize: 14.5, cursor: 'pointer',
            padding: '10px 18px', borderRadius: 'var(--kg-radius)', transition: 'all var(--kg-dur) var(--kg-ease)'
          }}>Offerte anfragen</button>

          <BurgerButton onClick={onOpenMenu} dark={!onPhoto} />
        </div>
      </div>
    </header>
  );
}

/* animated burger that reads "Menü" */
function BurgerButton({ onClick, dark }) {
  const [h, setH] = React.useState(false);
  const color = dark ? 'var(--kg-ink)' : '#fff';
  const line = (w) => ({ height: 2, width: w, background: color, borderRadius: 2, transition: 'width .3s var(--kg-ease), background .3s var(--kg-ease)' });
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 11, background: 'none', border: 'none', cursor: 'pointer', padding: '8px 4px' }}>
      <span style={{ fontFamily: 'var(--kg-font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '.14em', textTransform: 'uppercase', color }} className="kg-burger-label">Menü</span>
      <span style={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'flex-end', width: 26 }}>
        <span style={line(26)} />
        <span style={line(h ? 26 : 18)} />
        <span style={line(h ? 26 : 22)} />
      </span>
    </button>
  );
}

Object.assign(window, { Header, BurgerButton });