// nav.jsx — Fixed, discreet navigation + footer for CAJE Collective

function TopNav({ route, navigate, inquiryMode, setInquiryMode }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [wide, setWide] = React.useState(() => typeof window !== 'undefined' && window.innerWidth >= 1200);
  const isMobile = useIsMobile();

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    const onResize = () => setWide(window.innerWidth >= 1200);
    onScroll(); onResize();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const items = [
    { id: 'about', label: 'About' },
    { id: 'sanctuaries', label: 'Sanctuaries' },
    { id: 'experiences', label: 'Experiences' },
    { id: 'inquiry', label: 'Inquiry' },
  ];

  const go = (id) => { setMenuOpen(false); navigate(id); };

  // ----- MOBILE: wordmark + hamburger, full-screen drawer -----
  if (isMobile) {
    return (
      <>
        <header style={{
          position: 'fixed', top: 0, left: 0, right: 0, zIndex: 90,
          padding: scrolled || menuOpen ? '14px 0' : '20px 0',
          background: menuOpen ? 'transparent' : (scrolled ? 'rgba(245,240,230,0.9)' : 'transparent'),
          backdropFilter: (!menuOpen && scrolled) ? 'blur(14px) saturate(1.1)' : 'none',
          WebkitBackdropFilter: (!menuOpen && scrolled) ? 'blur(14px) saturate(1.1)' : 'none',
          borderBottom: (!menuOpen && scrolled) ? '1px solid rgba(17,17,17,0.08)' : '1px solid transparent',
          transition: 'all 0.5s var(--ease-silk)',
        }}>
          <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ textDecoration: 'none', opacity: menuOpen ? 0 : 1, transition: 'opacity 0.3s' }}>
              <Wordmark size="sm" />
            </a>
            <button onClick={() => setMenuOpen(o => !o)} aria-label="Menu" style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              width: 40, height: 40, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', gap: 6, padding: 0,
              position: 'relative', zIndex: 95,
            }}>
              <span style={{
                width: 26, height: 1.4, background: menuOpen ? '#F5F0E6' : '#111',
                transition: 'all 0.4s var(--ease-silk)',
                transform: menuOpen ? 'translateY(3.7px) rotate(45deg)' : 'none',
              }} />
              <span style={{
                width: 26, height: 1.4, background: menuOpen ? '#F5F0E6' : '#111',
                transition: 'all 0.4s var(--ease-silk)',
                transform: menuOpen ? 'translateY(-3.7px) rotate(-45deg)' : 'none',
              }} />
            </button>
          </div>
        </header>

        {/* Drawer */}
        <div style={{
          position: 'fixed', inset: 0, zIndex: 88,
          background: '#111',
          opacity: menuOpen ? 1 : 0,
          visibility: menuOpen ? 'visible' : 'hidden',
          transition: 'opacity 0.5s var(--ease-silk), visibility 0.5s',
          display: 'flex', flexDirection: 'column',
          padding: '120px 32px 48px',
        }}>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1 }}>
            {items.map((it, i) => (
              <a key={it.id} href="#"
                onClick={(e) => { e.preventDefault(); go(it.id); }}
                style={{
                  fontFamily: 'EB Garamond, serif', fontStyle: 'italic',
                  fontSize: 44, lineHeight: 1.5,
                  color: route === it.id ? '#B89A79' : '#F5F0E6',
                  textDecoration: 'none',
                  display: 'flex', alignItems: 'baseline', gap: 16,
                  opacity: menuOpen ? 1 : 0,
                  transform: menuOpen ? 'translateY(0)' : 'translateY(16px)',
                  transition: `opacity 0.5s ${0.1 + i * 0.07}s var(--ease-silk), transform 0.5s ${0.1 + i * 0.07}s var(--ease-silk)`,
                }}>
                <span style={{ fontFamily: 'Inter', fontStyle: 'normal', fontSize: 11, color: '#B89A79', letterSpacing: '0.1em' }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                {it.label}
              </a>
            ))}
          </nav>

          <div style={{
            paddingTop: 32, borderTop: '1px solid rgba(245,240,230,0.15)',
            opacity: menuOpen ? 1 : 0, transition: 'opacity 0.5s 0.4s',
          }}>
            <a href="#" onClick={(e) => { e.preventDefault(); go('inquiry'); }}
              style={{
                fontFamily: 'Inter', fontSize: 11, letterSpacing: '0.28em',
                textTransform: 'uppercase', color: '#B89A79', textDecoration: 'none',
              }}>
              Begin the Dialogue &nbsp;→
            </a>
            <div style={{ marginTop: 18, fontFamily: 'Inter', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'rgba(245,240,230,0.4)' }}>
              By appointment · Worldwide
            </div>
          </div>
        </div>
      </>
    );
  }

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0,
      zIndex: 80,
      padding: scrolled ? '16px 0' : '26px 0',
      background: scrolled ? 'rgba(245,240,230,0.82)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(1.1)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(1.1)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(17,17,17,0.08)' : '1px solid transparent',
      transition: 'all 0.6s var(--ease-silk)',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#" onClick={(e) => { e.preventDefault(); navigate('home'); }}
          style={{ textDecoration: 'none' }}>
          <Wordmark size="sm" />
        </a>

        <nav style={{ display: 'flex', gap: wide ? 36 : 24, alignItems: 'center' }}>
          {items.map(it => (
            <a key={it.id} href="#" className="linky"
              onClick={(e) => { e.preventDefault(); navigate(it.id); }}
              style={{
                fontSize: wide ? 11 : 10.5,
                letterSpacing: wide ? '0.28em' : '0.22em',
                textTransform: 'uppercase',
                color: route === it.id ? '#B89A79' : '#111',
                fontWeight: 400,
                whiteSpace: 'nowrap',
              }}>
              {it.label}
            </a>
          ))}
        </nav>

        {wide ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, whiteSpace: 'nowrap' }}>
            <span className="micro" style={{ fontSize: 10, opacity: 0.55 }}>EN · FR · IT</span>
            <span style={{ width: 1, height: 14, background: 'rgba(17,17,17,0.2)' }} />
            <a href="#" onClick={(e) => { e.preventDefault(); navigate('inquiry'); }}
              className="linky" style={{
                fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
                color: '#B89A79',
              }}>
              Begin the Dialogue
            </a>
          </div>
        ) : (
          <div style={{ minWidth: 60, display: 'flex', justifyContent: 'flex-end' }}>
            <span className="micro" style={{ fontSize: 10, opacity: 0.55, whiteSpace: 'nowrap' }}>EN</span>
          </div>
        )}
      </div>
    </header>
  );
}

function Footer({ navigate }) {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: '#111',
      color: 'rgba(245,240,230,0.7)',
      padding: isMobile ? '64px 0 32px' : '100px 0 40px',
      marginTop: isMobile ? 80 : 140,
    }}>
      <div className="container">
        {/* top row */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr 1fr 1fr', gap: isMobile ? 48 : 60, marginBottom: isMobile ? 56 : 80 }}>
          <div>
            <Wordmark size="md" inverse mono />
            <p className="display" style={{
              fontSize: 28, color: '#F5F0E6', marginTop: 32, maxWidth: 360, lineHeight: 1.25,
            }}>
              Architects of the <em>flawlessly orchestrated</em>.
            </p>
            <div style={{ marginTop: 36 }}>
              <CTA href="#" onClick={(e) => { e.preventDefault(); navigate('inquiry'); }}>
                Begin the Dialogue
              </CTA>
            </div>
          </div>

          <FooterCol title="The Collective" items={[
            { label: 'About', id: 'about' },
            { label: 'Discretion Charter', id: 'about' },
            { label: 'By Introduction', id: 'inquiry' },
          ]} navigate={navigate} />

          <FooterCol title="Services" items={[
            { label: 'Sanctuaries', id: 'sanctuaries' },
            { label: 'Experiences', id: 'experiences' },
            { label: 'Private Aviation', id: 'experiences' },
            { label: 'Concierge', id: 'experiences' },
          ]} navigate={navigate} />

          <FooterCol title="Reach" items={[
            { label: 'By appointment', id: 'inquiry' },
            { label: 'Worldwide · Upon request', id: 'inquiry' },
            { label: 'Correspondence', id: 'inquiry' },
            { label: 'Discretion Charter', id: 'about' },
          ]} navigate={navigate} />
        </div>

        <div style={{ height: 1, background: 'rgba(245,240,230,0.12)' }} />

        <div style={{
          display: 'flex', flexDirection: isMobile ? 'column' : 'row',
          gap: isMobile ? 18 : 0,
          justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center',
          paddingTop: 36, fontSize: 10.5, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: 'rgba(245,240,230,0.4)',
        }}>
          <div>© MMXXVI · CAJE Collective · All rights reserved</div>
          <div style={{ display: 'flex', gap: 28 }}>
            <a href="#" className="linky" style={{ color: 'inherit' }}>Privacy</a>
            <a href="#" className="linky" style={{ color: 'inherit' }}>Terms</a>
            <a href="#" className="linky" style={{ color: 'inherit' }}>Discretion Charter</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items, navigate }) {
  return (
    <div>
      <div style={{
        fontFamily: 'Inter', fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase',
        color: '#B89A79', marginBottom: 22,
      }}>
        {title}
      </div>
      <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map(it => (
          <li key={it.label}>
            <a href="#" className="linky"
              onClick={(e) => { e.preventDefault(); navigate(it.id); }}
              style={{
                color: 'rgba(245,240,230,0.72)',
                fontFamily: 'EB Garamond, serif', fontSize: 19, fontStyle: 'italic',
              }}>
              {it.label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { TopNav, Footer });