/* Berlin Döner Rauma — shared nav for inner pages */
const THEME_URL = (document.getElementById('berlin-doner-nav-js')?.src.replace('/assets/nav-app.jsx', '').split('?')[0])
  || 'https://berlin2.demowpsite.com/wp-content/themes/berlin-doner-rauma';

const { useState, useEffect } = React;

const overlayLinkStyle = {
  fontFamily: "Anton, 'Bebas Neue', sans-serif",
  fontSize: 'clamp(2.5rem, 8vw, 4rem)',
  color: '#f5f1e8',
  textDecoration: 'none',
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
  transition: 'color 0.2s',
};
const hamburgerStyle = {
  width: 40, height: 40, borderRadius: 8,
  border: '1px solid rgba(245,241,232,0.3)',
  background: 'transparent',
  color: '#7dddd8', fontSize: 18,
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  cursor: 'pointer',
};

function Nav({ status }) {
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') setMenuOpen(false); }
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  return (
    <>
      <nav className="nav">
        <div className="nav-left">
          <a href="/"><img className="nav-logo nav-logo-img" src={`${THEME_URL}/assets/logo.png`} alt="Berlin Döner Rauma" /></a>
          <div className="nav-links" style={{ fontSize: 15, letterSpacing: '0.08em' }}>
            <a href="/about">About</a>
            <a href="/menu">Menu</a>
            <a href="/ice-cream">Ice Cream</a>
            <a href="/gallery">Gallery</a>
            <a href="/contact">Contact</a>
          </div>
        </div>
        <div className="nav-right">
          <a href={window.WOLT_URL || 'https://wolt.com/fi/fin/rauma/restaurant/berlin-dner-rauma'} target="_blank" className="nav-cart nav-wolt-btn">
            <span>Order on Wolt →</span>
          </a>
          <button className="nav-hamburger" onClick={() => setMenuOpen(true)} aria-label="Open menu" style={hamburgerStyle}>☰</button>
        </div>
      </nav>

      {menuOpen && (
        <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(10,10,10,0.97)', zIndex: 2000, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '2rem' }}>
          <button onClick={() => setMenuOpen(false)} aria-label="Close menu" style={{ ...hamburgerStyle, position: 'absolute', top: 20, right: 20 }}>✕</button>
          <a href="/about" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>About</a>
          <a href="/menu" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>Menu</a>
          <a href="/ice-cream" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>Ice Cream</a>
          <a href="/gallery" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>Gallery</a>
          <a href="/contact" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>Contact</a>
          <a href={window.WOLT_URL || 'https://wolt.com/fi/fin/rauma/restaurant/berlin-dner-rauma'} target="_blank" style={{ marginTop: '1rem', padding: '14px 28px', background: '#7dddd8', color: '#0a0a0a', textDecoration: 'none', borderRadius: 999, fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Order on Wolt →</a>
        </div>
      )}
    </>
  );
}

const navEl = document.getElementById('nav-root');
if (navEl) ReactDOM.createRoot(navEl).render(<Nav status={{ open: false, label: '' }} />);