// Nav.jsx — sticky header + mobile sheet.
(function () {
  const { useState, useEffect, useRef } = React;
  const NAV = [
    { id: 'home', label: 'Home' },
    { id: 'about', label: 'About Us' },
    {
      id: 'product', label: 'Products',
      dropdown: [
        { label: 'Residential Ovens', filter: 'residential' },
        { label: 'Commercial Ovens', filter: 'commercial' },
        { label: 'Made to Order', filter: 'madetoorder' },
      ],
    },
    { id: 'gallery', label: 'Gallery' },
    { id: 'configurator', label: 'Design Yours' },
    { id: 'contact', label: 'Contact Us' },
  ];

  function ProductDropdown({ light, go, onClose }) {
    const item = NAV.find(n => n.id === 'product');
    return (
      <div style={{
        position: 'absolute', top: 'calc(100% + 10px)', left: '50%', transform: 'translateX(-50%)',
        background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)',
        boxShadow: '0 8px 32px rgba(0,0,0,.14)', minWidth: 200, zIndex: 200, overflow: 'hidden',
      }}>
        {item.dropdown.map((d) => (
          <a key={d.filter} onClick={() => { go('product', null, d.filter); onClose(); }}
            style={{ display: 'block', padding: '12px 20px', color: 'var(--fg-1)', fontFamily: 'var(--font-body)', fontSize: 'var(--t-sm)', cursor: 'pointer', borderBottom: '1px solid var(--border)', transition: 'background 0.15s' }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--surface)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >{d.label}</a>
        ))}
      </div>
    );
  }

  function Header({ page, go, onDark }) {
    const [scrolled, setScrolled] = useState(false);
    const [open, setOpen] = useState(false);
    const [productsOpen, setProductsOpen] = useState(false);
    const productsRef = useRef(null);

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

    useEffect(() => {
      const handler = (e) => {
        if (productsRef.current && !productsRef.current.contains(e.target)) {
          setProductsOpen(false);
        }
      };
      document.addEventListener('mousedown', handler);
      return () => document.removeEventListener('mousedown', handler);
    }, []);

    const light = onDark && !scrolled;
    const headerStyle = {
      background: scrolled
        ? 'color-mix(in srgb, var(--bg) 86%, transparent)'
        : (onDark
            ? 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%)'
            : 'color-mix(in srgb, var(--bg) 70%, transparent)'),
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
    };

    return (
      <header className="tf-header" data-section={light ? 'ember' : undefined} style={headerStyle}>
        <div className="tf-wrap tf-header__inner">
          <Logo light={light} onClick={() => go('home')} />
          <nav className="tf-nav">
            {NAV.map((n) => n.dropdown ? (
              <div key={n.id} ref={productsRef} style={{ position: 'relative' }}>
                <a className={page === n.id ? 'is-active' : ''} onClick={() => setProductsOpen(v => !v)}
                  style={{ color: light ? (page === n.id ? '#fff' : 'rgba(255,255,255,0.92)') : undefined, textShadow: light ? '0 1px 4px rgba(0,0,0,0.55)' : undefined, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
                  {n.label}
                  <svg width="10" height="6" viewBox="0 0 10 6" fill="none" style={{ transition: 'transform 0.2s', transform: productsOpen ? 'rotate(180deg)' : 'none', opacity: .7 }}>
                    <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
                {productsOpen && <ProductDropdown light={light} go={go} onClose={() => setProductsOpen(false)} />}
              </div>
            ) : (
              <a key={n.id} className={page === n.id ? 'is-active' : ''} onClick={() => go(n.id)}
                style={{ color: light ? (page === n.id ? '#fff' : 'rgba(255,255,255,0.92)') : undefined, textShadow: light ? '0 1px 4px rgba(0,0,0,0.55)' : undefined }}>{n.label}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span className="tf-cta-desktop">
              <TFButton variant="primary" arrow onClick={() => go('contact')}>Get a quote</TFButton>
            </span>
            <button className="tf-burger" aria-label="Menu" onClick={() => setOpen(true)}
              style={{ background: 'none', border: 0, color: light ? '#fff' : 'var(--fg-1)', cursor: 'pointer', padding: 4 }}>
              <Icon name="menu" />
            </button>
          </div>
        </div>

        {open && (
          <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 80, background: 'rgba(26,18,11,.55)', backdropFilter: 'blur(4px)' }}>
            <div onClick={(e) => e.stopPropagation()} style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: 'min(82vw,340px)', background: 'var(--bg)', padding: '24px', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <button aria-label="Close" onClick={() => setOpen(false)} style={{ alignSelf: 'flex-end', background: 'none', border: 0, color: 'var(--fg-1)', cursor: 'pointer', marginBottom: 12 }}><Icon name="x" /></button>
              {NAV.map((n) => n.dropdown ? (
                <React.Fragment key={n.id}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.5rem', padding: '12px 0', borderBottom: '1px solid var(--border)', color: page === n.id ? 'var(--accent)' : 'var(--fg-1)' }}>{n.label}</div>
                  {n.dropdown.map((d) => (
                    <a key={d.filter} onClick={() => { go('product', null, d.filter); setOpen(false); }}
                      style={{ fontFamily: 'var(--font-body)', fontSize: '1rem', padding: '10px 0 10px 16px', borderBottom: '1px solid var(--border)', color: 'var(--fg-2)', cursor: 'pointer', display: 'block' }}>
                      — {d.label}
                    </a>
                  ))}
                </React.Fragment>
              ) : (
                <a key={n.id} onClick={() => { go(n.id); setOpen(false); }}
                  style={{ fontFamily: 'var(--font-display)', fontSize: '1.5rem', padding: '12px 0', borderBottom: '1px solid var(--border)', color: page === n.id ? 'var(--accent)' : 'var(--fg-1)', cursor: 'pointer' }}>{n.label}</a>
              ))}
              <div style={{ marginTop: 24 }}>
                <TFButton variant="primary" block arrow onClick={() => { go('contact'); setOpen(false); }}>Get a quote</TFButton>
              </div>
            </div>
          </div>
        )}
      </header>
    );
  }

  window.Header = Header;
})();