function Navbar() {
  const { SocialButton } = window.VizeProDamboIceDesignSystem_70ea19;
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const root = document.querySelector('[data-scroll-root]') || window;
    const onScroll = () => {
      const y = root === window ? window.scrollY : root.scrollTop;
      setScrolled(y > 24);
    };
    root.addEventListener('scroll', onScroll);
    onScroll();
    return () => root.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['#kdo-jsme', 'Kdo jsme'],
    ['#program', 'Program'],
    ['#kandidati', 'Kandidáti'],
    ['#kontakt', 'Kontakt'],
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(252,253,251,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(1.4) blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border-subtle)' : '1px solid transparent',
      transition: 'background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)',
    }}>
      <nav style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '10px var(--gutter)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-5)',
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="../../assets/logo.png" alt="Vize pro Dambořice" style={{ height: 68, width: 'auto' }} />
        </a>

        <div className="vpd-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }}>
          {links.map(([href, label]) => (
            <a key={href} href={href} style={{
              fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 15,
              color: 'var(--text-strong)', textDecoration: 'none',
            }}>{label}</a>
          ))}
        </div>

        <div className="vpd-nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <SocialButton channel="facebook" href={window.FB_URL} size="sm" label="Facebook" />
          <SocialButton channel="instagram" href={window.IG_URL} size="sm" label="Instagram" />
        </div>

        <button className="vpd-burger" aria-label="Menu" onClick={() => setOpen(o => !o)} style={{
          display: 'none', border: '1px solid var(--border-strong)', background: 'var(--white)',
          borderRadius: 'var(--radius-sm)', width: 44, height: 44, cursor: 'pointer',
          alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{ display: 'grid', gap: 5 }}>
            {[0,1,2].map(i => <span key={i} style={{ width: 20, height: 2, background: 'var(--ink-900)', borderRadius: 2 }} />)}
          </span>
        </button>
      </nav>

      {open && (
        <div className="vpd-mobile-menu" style={{
          padding: '8px var(--gutter) 20px', display: 'flex', flexDirection: 'column', gap: 12,
          background: 'var(--white)', borderBottom: '1px solid var(--border-subtle)',
        }}>
          {links.map(([href, label]) => (
            <a key={href} href={href} onClick={() => setOpen(false)} style={{
              fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 17,
              color: 'var(--text-strong)', padding: '8px 0',
            }}>{label}</a>
          ))}
          <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
            <SocialButton channel="facebook" href={window.FB_URL} size="sm" fullWidth />
            <SocialButton channel="instagram" href={window.IG_URL} size="sm" fullWidth />
          </div>
        </div>
      )}
    </header>
  );
}
window.Navbar = Navbar;