// heritage/nav.jsx — sticky shrinking nav + mobile hamburger

function HeritageNav({ theme, onReserve, mobile }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

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

  React.useEffect(() => {
    if (!mobile) setMobileOpen(false);
  }, [mobile]);

  // Lock body scroll when drawer open
  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  const leftLinks = [
    { label: 'Rooms',  href: '#rooms' },
    { label: 'Tours',  href: '#tours' },
    { label: 'Dining', href: '#dining' },
  ];
  const rightLinks = [
    { label: 'Gallery', href: '#estate' },
  ];
  const revealed = scrolled || mobileOpen;

  return (
    <>
      <nav data-scrolled={scrolled ? '1' : '0'} style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        background: revealed ? `rgba(245, 239, 228, 0.95)` : 'transparent',
        backdropFilter: revealed ? 'blur(14px) saturate(140%)' : 'none',
        WebkitBackdropFilter: revealed ? 'blur(14px) saturate(140%)' : 'none',
        borderBottom: revealed ? `1px solid ${theme.ink}18` : '1px solid transparent',
        transition: 'background .3s ease, backdrop-filter .3s ease, border-color .3s ease, padding .3s ease',
        padding: mobile ? '14px 20px' : scrolled ? '14px 56px' : '28px 56px',
        color: theme.ink,
      }}>
        {mobile ? (
          // ── Mobile bar ──
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <a href="#top" style={{ textDecoration: 'none' }} onClick={() => setMobileOpen(false)}>
              <Wordmark size={17} color={theme.ink} accentColor={theme.oxblood} leColor={revealed ? theme.gilt : theme.cream} />
            </a>
            <button
              onClick={() => setMobileOpen(!mobileOpen)}
              aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
              style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 8, color: theme.ink, lineHeight: 0 }}>
              {mobileOpen
                ? <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M4 4l12 12M16 4L4 16"/></svg>
                : <svg width="22" height="16" viewBox="0 0 22 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="0" y1="2" x2="22" y2="2"/><line x1="0" y1="8" x2="22" y2="8"/><line x1="0" y1="14" x2="22" y2="14"/></svg>
              }
            </button>
          </div>
        ) : (
          // ── Desktop bar ──
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 24 }}>
            <div style={{ display: 'flex', gap: 28 }}>
              {leftLinks.map((x) => (
                <a key={x.label} href={x.href} className="nav-link"
                   style={{ fontFamily: theme.sans, fontSize: 12, color: theme.ink, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.78, textDecoration: 'none' }}>{x.label}</a>
              ))}
            </div>
            <a href="#top" style={{ textAlign: 'center', textDecoration: 'none', display: 'block', transition: 'transform .3s ease', transform: scrolled ? 'scale(0.82)' : 'scale(1)', transformOrigin: 'center' }}>
              <Wordmark size={24} color={theme.ink} accentColor={theme.oxblood} leColor={scrolled ? theme.gilt : theme.cream} />
            </a>
            <div style={{ display: 'flex', gap: 22, alignItems: 'center', justifyContent: 'flex-end' }}>
              {rightLinks.map((x) => (
                <a key={x.label} href={x.href} className="nav-link"
                   style={{ fontFamily: theme.sans, fontSize: 12, color: theme.ink, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.78, textDecoration: 'none' }}>{x.label}</a>
              ))}
              <span style={{ width: 1, height: 14, background: `${theme.ink}33`, marginInline: 4 }} />
              <button onClick={onReserve} style={{
                padding: '10px 22px', border: `1px solid ${theme.ink}`, background: scrolled ? theme.ink : 'transparent',
                color: scrolled ? theme.cream : theme.ink,
                fontFamily: theme.sans, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                cursor: 'pointer', transition: 'background .25s, color .25s', fontWeight: 500,
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = theme.oxblood; e.currentTarget.style.borderColor = theme.oxblood; e.currentTarget.style.color = theme.cream; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = scrolled ? theme.ink : 'transparent'; e.currentTarget.style.borderColor = theme.ink; e.currentTarget.style.color = scrolled ? theme.cream : theme.ink; }}>
                Reserve Now
              </button>
            </div>
          </div>
        )}
      </nav>

      {/* Mobile drawer */}
      {mobile && mobileOpen && (
        <div style={{
          position: 'fixed', top: 50, left: 0, right: 0, bottom: 0, zIndex: 49,
          background: theme.cream, overflowY: 'auto',
          display: 'flex', flexDirection: 'column',
          padding: '36px 24px 40px',
          borderTop: `1px solid ${theme.ink}11`,
        }}>
          <div style={{ flex: 1 }}>
            {[...leftLinks, ...rightLinks].map((x, i, arr) => (
              <a key={x.label} href={x.href}
                onClick={() => setMobileOpen(false)}
                style={{
                  display: 'block',
                  fontFamily: theme.serif, fontSize: 38, fontWeight: 400,
                  color: theme.ink, textDecoration: 'none', letterSpacing: '-0.01em',
                  padding: '14px 0',
                  borderBottom: i < arr.length - 1 ? `1px solid ${theme.ink}12` : 'none',
                }}>
                {x.label}
              </a>
            ))}
          </div>
          <div style={{ marginTop: 40 }}>
            <button onClick={() => { onReserve(); setMobileOpen(false); }} style={{
              width: '100%', padding: '20px',
              border: `1px solid ${theme.ink}`, background: theme.ink, color: theme.cream,
              fontFamily: theme.sans, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
              cursor: 'pointer', fontWeight: 500,
            }}>
              Reserve Now
            </button>
          </div>
        </div>
      )}

      {!mobile && (
        <style>{`
          .nav-link { position: relative; transition: color .25s ease; }
          .nav-link::after {
            content: ''; position: absolute; left: 0; right: 100%; bottom: -4px;
            height: 1px; background: currentColor; transition: right .35s cubic-bezier(.2,.7,.2,1);
          }
          .nav-link:hover::after { right: 0; }
          nav[data-scrolled="0"] .nav-link:hover { opacity: 1 !important; color: ${theme.cream} !important; }
          nav[data-scrolled="1"] .nav-link:hover { opacity: 1 !important; color: ${theme.oxblood} !important; }
        `}</style>
      )}
    </>
  );
}

window.HeritageNav = HeritageNav;