// Navbar component
// Fixed, transparent over hero with gradient scrim
// On scroll >60px: dark backdrop rgba(18,18,18,0.94) + blur(10px)
// Left: logo + brand name | Right: hamburger (two white bars, 28px wide, 7px gap)

function Navbar({ data }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  // Animate hamburger bars to X when menu opens
  const bar1Style = {
    display: 'block',
    width: '28px',
    height: '2px',
    background: '#ffffff',
    borderRadius: '2px',
    transition: 'transform 0.3s ease, opacity 0.3s ease',
    transform: menuOpen ? 'translateY(4.5px) rotate(45deg)' : 'none',
  };

  const bar2Style = {
    display: 'block',
    width: '28px',
    height: '2px',
    background: '#ffffff',
    borderRadius: '2px',
    transition: 'transform 0.3s ease, opacity 0.3s ease',
    transform: menuOpen ? 'translateY(-4.5px) rotate(-45deg)' : 'none',
  };

  const navStyle = {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 100,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '1.25rem 6vw',
    background: scrolled
      ? 'rgba(18, 18, 18, 0.94)'
      : 'linear-gradient(to bottom, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.00) 100%)',
    backdropFilter: scrolled ? 'blur(10px)' : 'none',
    WebkitBackdropFilter: scrolled ? 'blur(10px)' : 'none',
    transition: 'background 0.4s ease, backdrop-filter 0.4s ease',
  };

  const logoSrc = data ? data.logo : '';
  const brandName = data ? data.nav.brand : 'Sunset Cafe & Restaurant';

  return (
    <nav style={navStyle} aria-label="Main navigation">
      <a
        href="/"
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '0.8rem',
          textDecoration: 'none',
        }}
      >
        <img
          src={logoSrc}
          alt="Logo"
          style={{
            height: '44px',
            width: '44px',
            objectFit: 'contain',
            flexShrink: 0,
            filter: 'drop-shadow(0 1px 4px rgba(0,0,0,0.4))',
          }}
        />
        <span
          style={{
            fontFamily: "'Playfair Display', Georgia, serif",
            fontWeight: 600,
            fontSize: '1.1rem',
            color: '#ffffff',
            letterSpacing: '0.01em',
            whiteSpace: 'nowrap',
            textShadow: '0 1px 6px rgba(0,0,0,0.5)',
          }}
        >
          {brandName}
        </span>
      </a>

      <button
        onClick={() => setMenuOpen(!menuOpen)}
        aria-label={menuOpen ? 'Close menu' : 'Open menu'}
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '7px',
          background: 'none',
          border: 'none',
          cursor: 'pointer',
          padding: '6px',
        }}
      >
        <span style={bar1Style}></span>
        <span style={bar2Style}></span>
      </button>
    </nav>
  );
}