// Header for the PETROL site. Sticky, white, hairline on scroll. Mobile: hamburger.

const SiteHeader = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 4);
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  // Block body scroll when menu is open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const headerStyle = {
    position: 'sticky', top: 0, zIndex: 50, background: 'var(--paper)',
    borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
    transition: 'border-color 200ms var(--ease-out)',
  };
  const inner = {
    maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px',
    height: 80, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  };
  const logo = { display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', borderBottom: 0, color: 'var(--ink)' };
  const word = { fontSize: 18, fontWeight: 800, letterSpacing: '-0.02em' };

  const navDesktop = { display: 'flex', gap: 32 };
  const link = (active) => ({
    fontSize: 14, fontWeight: 500, color: active ? 'var(--accent)' : 'var(--ink)',
    borderBottom: active ? '1px solid var(--accent)' : '1px solid transparent',
    padding: '4px 0', textDecoration: 'none',
  });
  const langDesktop = { display: 'flex', gap: 0, alignItems: 'center' };
  const langChip = (active) => ({
    fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em',
    padding: '6px 10px', border: active ? '1px solid var(--ink)' : '1px solid transparent',
    color: active ? 'var(--ink)' : 'var(--ash)',
  });

  // Hamburger button — скрыт на desktop, показан на mobile (через mobile.css)
  const hamburgerStyle = {
    display: 'none',
    flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
    width: 44, height: 44, padding: 0, background: 'transparent', border: 'none',
    cursor: 'pointer', gap: 6,
  };
  const bar = (rotated, hidden, reverseRotate) => ({
    width: 22, height: 2, background: 'var(--ink)',
    transition: 'transform 200ms, opacity 200ms',
    transform: rotated ? `translateY(8px) rotate(${revers