/* global React */
const { useState, useEffect } = React;

function Header({ current, onNavigate, onQuote }) {
  const { Button } = window.VailuxuryGlassDesignSystem_8a37c5;
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const scroller = document.getElementById('vlx-scroll');
    const onScroll = () => setScrolled((scroller ? scroller.scrollTop : window.scrollY) > 40);
    const target = scroller || window;
    target.addEventListener('scroll', onScroll);
    onScroll();
    return () => target.removeEventListener('scroll', onScroll);
  }, [current]);

  const links = ['Home', 'Services', 'Gallery', 'About', 'Contact'];
  const solid = scrolled || current !== 'Home';

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: solid ? 'var(--ink)' : 'transparent',
      transition: 'background var(--dur-base) var(--ease-glass)',
    }}>
      <div style={{
        maxWidth: 'var(--content-max)', margin: '0 auto',
        padding: '16px var(--gutter)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '24px',
      }}>
        <button onClick={() => onNavigate('Home')} style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer', display: 'flex' }} aria-label="Vailuxury home">
          <img src="assets/logo-vailuxury.png" alt="Vailuxury Glass & Mirror" style={{ height: '48px', width: 'auto', display: 'block' }} />
        </button>

        <nav className="vlx-desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: '30px' }}>
          {links.map((l) => (
            <button key={l} onClick={() => onNavigate(l)} style={{
              background: 'none', border: 0, cursor: 'pointer', padding: '4px 0',
              fontFamily: 'var(--font-body)', fontSize: '0.9375rem', fontWeight: 500,
              color: current === l ? 'var(--teal)' : 'var(--text-inv)',
              borderBottom: current === l ? '1px solid var(--teal)' : '1px solid transparent',
            }}>{l}</button>
          ))}
        </nav>

        <div className="vlx-desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: '18px' }}>
          <a href="tel:+19709792022" style={{
            fontFamily: 'var(--font-mono)', fontSize: '0.8125rem', letterSpacing: '0.06em',
            color: 'var(--text-inv)', textDecoration: 'none',
          }}>(970) 979-2022</a>
          <Button variant="primary" size="sm" onClick={onQuote}>Free Quote</Button>
        </div>

        <button className="vlx-burger" onClick={() => setMenuOpen(true)} aria-label="Open menu" style={{
          display: 'none', background: 'none', border: 0, cursor: 'pointer', flexDirection: 'column', gap: '5px',
        }}>
          <span style={{ width: 24, height: 2, background: 'var(--text-inv)' }} />
          <span style={{ width: 24, height: 2, background: 'var(--text-inv)' }} />
          <span style={{ width: 24, height: 2, background: 'var(--text-inv)' }} />
        </button>
      </div>

      {menuOpen && (
        <div style={{
          position: 'fixed', inset: 0, background: 'var(--ink)', zIndex: 100,
          display: 'flex', flexDirection: 'column', padding: 'var(--gutter)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <img src="assets/logo-vailuxury.png" alt="Vailuxury Glass & Mirror" style={{ height: '48px', width: 'auto', display: 'block' }} />
            <button onClick={() => setMenuOpen(false)} aria-label="Close menu" style={{
              background: 'none', border: 0, color: 'var(--text-inv)', fontSize: '2rem', cursor: 'pointer', lineHeight: 1,
            }}>×</button>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '48px' }}>
            {links.map((l) => (
              <button key={l} onClick={() => { onNavigate(l); setMenuOpen(false); }} style={{
                background: 'none', border: 0, textAlign: 'left', cursor: 'pointer', padding: '12px 0',
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '2rem', letterSpacing: '-0.02em',
                color: current === l ? 'var(--teal)' : 'var(--text-inv)',
              }}>{l}</button>
            ))}
          </nav>
          <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: '16px' }}>
            <div className="lit-edge" />
            <a href="tel:+19709792022" style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-inv)', textDecoration: 'none' }}>(970) 979-2022</a>
            <Button variant="primary" onClick={() => { onQuote(); setMenuOpen(false); }}>Request a Free Quote</Button>
          </div>
        </div>
      )}
    </header>
  );
}
window.Header = Header;