// Sticky top nav. Cream + backdrop-blur on scroll.
// Desktop: full link rail. Mobile: hamburger → slide-in drawer.
const Nav = ({ openBooking, active }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [drawer, setDrawer] = React.useState(false);

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

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

  const closeAnd = (fn) => () => { setDrawer(false); fn && fn(); };

  return (
    <React.Fragment>
      <nav className="slf-nav" style={{
        position: 'sticky', top: 0, zIndex: 50,
        display: 'flex', alignItems: 'center', gap: 24,
        padding: '14px 48px',
        background: scrolled ? 'rgba(245, 239, 226, 0.78)' : 'rgba(245, 239, 226, 0.0)',
        backdropFilter: scrolled ? 'blur(12px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
        transition: 'background 260ms var(--ease-out), border-color 260ms var(--ease-out), backdrop-filter 260ms var(--ease-out)',
      }}>
        <a href="#top" style={{
          fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 500,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: scrolled ? 'var(--sage-deep)' : 'var(--cream)',
          textDecoration: 'none',
          textShadow: scrolled ? 'none' : '0 1px 8px rgba(0,0,0,0.4)',
          display: 'flex', alignItems: 'center', gap: 10,
          transition: 'color 260ms var(--ease-out)',
        }}>
          <svg width="22" height="26" viewBox="0 0 22 26" fill="none" aria-hidden="true">
            <path d="M11 25 L11 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
            <path d="M11 11 C 11 6, 14 3, 17 2 C 17 6, 14 9, 11 11 Z" fill="currentColor"/>
            <path d="M11 11 C 11 7, 8 4, 5 3 C 5 7, 8 10, 11 11 Z" fill="currentColor"/>
            <path d="M11 16 C 11 13, 13 11, 15 10 C 15 13, 13 15, 11 16 Z" fill="currentColor"/>
            <path d="M11 16 C 11 13, 9 11, 7 10 C 7 13, 9 15, 11 16 Z" fill="currentColor"/>
          </svg>
          <span>Slowley Farm</span>
        </a>

        {/* Desktop link rail */}
        <div className="slf-nav-links" style={{ marginLeft: 'auto', display: 'flex', gap: 28, alignItems: 'center' }}>
          <a href="#buttercup" style={{
            fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
            color: scrolled ? (active === 'buttercup' ? 'var(--sage-deep)' : 'var(--fg-2)') : 'var(--cream)',
            textDecoration: 'none',
            textShadow: scrolled ? 'none' : '0 1px 6px rgba(0,0,0,0.5)',
            display: 'flex', alignItems: 'center', gap: 8,
            transition: 'color 260ms var(--ease-out)',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--sage)', display: 'inline-block', boxShadow: scrolled ? 'none' : '0 0 0 2px rgba(245,239,226,0.35)' }}/>
            Buttercup Cottage
          </a>
          <a href="#countryside" style={{
            fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
            color: scrolled ? (active === 'countryside' ? 'var(--terracotta-deep)' : 'var(--fg-2)') : 'var(--cream)',
            textDecoration: 'none',
            textShadow: scrolled ? 'none' : '0 1px 6px rgba(0,0,0,0.5)',
            display: 'flex', alignItems: 'center', gap: 8,
            transition: 'color 260ms var(--ease-out)',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--terracotta)', display: 'inline-block', boxShadow: scrolled ? 'none' : '0 0 0 2px rgba(245,239,226,0.35)' }}/>
            Countryside View
          </a>
          <a href="#things-to-do" style={navLinkStyle(scrolled)}>Things to do</a>
          <a href="#finding-us"   style={navLinkStyle(scrolled)}>Find us</a>
          <a href="#contact"      style={navLinkStyle(scrolled)}>Contact</a>
          <button className="slf-btn slf-btn-sage" onClick={() => openBooking()} style={{ padding: '10px 18px', fontSize: 13 }}>
            Check availability
          </button>
        </div>

        {/* Mobile burger */}
        <button
          className="slf-nav-burger"
          aria-label="Open menu"
          onClick={() => setDrawer(true)}
          style={{
            marginLeft: 'auto', display: 'none',
            width: 44, height: 44, borderRadius: 8,
            border: '1px solid ' + (scrolled ? 'var(--border-strong)' : 'rgba(245,239,226,0.5)'),
            background: scrolled ? 'rgba(255,255,255,0.6)' : 'rgba(245,239,226,0.10)',
            color: scrolled ? 'var(--fg)' : 'var(--cream)',
            cursor: 'pointer',
            alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(8px)',
          }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            <path d="M4 7h16M4 12h16M4 17h16"/>
          </svg>
        </button>
      </nav>

      {/* Mobile drawer */}
      {drawer && (
        <div className="slf-drawer" onClick={() => setDrawer(false)}>
          <div className="slf-drawer-panel" onClick={(e) => e.stopPropagation()}>
            <button
              aria-label="Close menu"
              onClick={() => setDrawer(false)}
              style={{
                alignSelf: 'flex-end', width: 40, height: 40, marginBottom: 4,
                border: '1px solid var(--border)', background: 'transparent',
                borderRadius: 8, cursor: 'pointer', color: 'var(--fg)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
                <path d="M6 6l12 12M6 18 18 6"/>
              </svg>
            </button>
            <a href="#buttercup"    onClick={closeAnd()}>
              <span style={{ display: 'inline-block', width: 9, height: 9, borderRadius: 999, background: 'var(--sage)', marginRight: 12, verticalAlign: 'middle' }}/>
              Buttercup Cottage
            </a>
            <a href="#countryside"  onClick={closeAnd()}>
              <span style={{ display: 'inline-block', width: 9, height: 9, borderRadius: 999, background: 'var(--terracotta)', marginRight: 12, verticalAlign: 'middle' }}/>
              Countryside View
            </a>
            <a href="#gallery"      onClick={closeAnd()}>Gallery</a>
            <a href="#things-to-do" onClick={closeAnd()}>Things to do</a>
            <a href="#finding-us"   onClick={closeAnd()}>Find us</a>
            <a href="#faq"          onClick={closeAnd()}>FAQ</a>
            <a href="#contact"      onClick={closeAnd()}>Contact</a>
            <button className="slf-btn slf-btn-sage" onClick={closeAnd(() => openBooking())} style={{ padding: '14px 22px', fontSize: 14 }}>
              Check availability →
            </button>
          </div>
        </div>
      )}
    </React.Fragment>
  );
};

const navLinkStyle = (scrolled) => ({
  fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
  color: scrolled ? 'var(--fg-2)' : 'var(--cream)',
  textShadow: scrolled ? 'none' : '0 1px 6px rgba(0,0,0,0.5)',
  textDecoration: 'none',
  transition: 'color 260ms var(--ease-out)',
});

window.Nav = Nav;