// Sticky header — desktop nav + mobile hamburger menu

function Header({ active, onNav, enableOrdering = true }) {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const items = [
    { key: 'bakes',       label: "This Week's Bakes" },
    { key: 'visit',       label: 'Visit the Cake Shed' },
    { key: 'testimonials',label: 'Testimonials' },
    { key: 'about',       label: 'About Emilia' },
  ];

  function handleNav(key) {
    onNav(key);
    setMenuOpen(false);
  }

  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(253,248,243,0.96)', backdropFilter: 'saturate(180%) blur(8px)', WebkitBackdropFilter: 'saturate(180%) blur(8px)', borderBottom: '1px solid rgba(240,224,206,0.7)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '14px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>

        {/* Wordmark */}
        <a onClick={() => handleNav('home')} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', textDecoration: 'none', flexShrink: 0 }}>
          <div style={{ lineHeight: 1 }}>
            <div style={{ fontFamily: "'Sacramento', cursive", fontSize: 28, color: '#3D2817', lineHeight: 0.9 }}>Emilia's</div>
            <div style={{ fontFamily: "'Fraunces', serif", fontSize: 11, color: '#8B6F4E', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500 }}>Petite Bakery</div>
          </div>
        </a>

        {/* Desktop nav */}
        <nav style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div className="site-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            {items.map(it => (
              <a key={it.key} onClick={() => handleNav(it.key)} style={{
                padding: '8px 12px', borderRadius: 10, fontSize: 13, fontWeight: 500,
                color: active === it.key ? '#3D2817' : '#8B6F4E',
                background: active === it.key ? '#F0E0CE' : 'transparent',
                cursor: 'pointer', transition: 'background .15s ease, color .15s ease',
                textDecoration: 'none', whiteSpace: 'nowrap',
              }}>{it.label}</a>
            ))}
          </div>

          {/* Enquire CTA — always visible */}
          <button onClick={() => handleNav('celebration')} style={{
            marginLeft: 6, padding: '10px 18px', background: '#C97B4A', color: '#FDF8F3',
            borderRadius: 10, fontSize: 14, fontWeight: 500, border: 'none', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 6,
            transition: 'transform .15s ease', whiteSpace: 'nowrap', flexShrink: 0,
          }}>
            Enquire <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
          </button>

          {/* Hamburger — mobile only */}
          <button
            className="hamburger-btn"
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Menu"
            style={{
              display: 'none',
              marginLeft: 8, padding: 8, background: 'transparent', border: '1.5px solid #E8D5C4',
              borderRadius: 10, cursor: 'pointer', color: '#3D2817',
              alignItems: 'center', justifyContent: 'center',
            }}
          >
            <i data-lucide={menuOpen ? 'x' : 'menu'} style={{ width: 20, height: 20 }}></i>
          </button>
        </nav>
      </div>

      {/* Mobile dropdown menu */}
      {menuOpen && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'rgba(253,248,243,0.98)', backdropFilter: 'blur(8px)',
          borderBottom: '1px solid rgba(240,224,206,0.8)',
          padding: '8px 16px 16px', zIndex: 49,
          boxShadow: '0 8px 24px rgba(61,40,23,0.08)',
        }}>
          {items.map(it => (
            <a key={it.key} onClick={() => handleNav(it.key)} style={{
              display: 'block', padding: '14px 12px',
              borderBottom: '1px solid rgba(240,224,206,0.5)',
              fontSize: 15, fontWeight: 500,
              color: active === it.key ? '#C97B4A' : '#3D2817',
              cursor: 'pointer', textDecoration: 'none',
            }}>{it.label}</a>
          ))}
          <button onClick={() => handleNav('celebration')} style={{
            marginTop: 12, width: '100%', padding: '14px', background: '#C97B4A', color: '#FDF8F3',
            borderRadius: 12, fontSize: 15, fontWeight: 500, border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            Enquire about a Celebration Cake <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
          </button>
        </div>
      )}
    </header>
  );
}

window.Header = Header;