/* eslint-disable */
// Sticky nav. Transparent over hero, becomes off-white-on-light after threshold.
// Smooth-scrolls to section anchors.

const NAV_ITEMS = [
  { id: 'about',    href: 'about.html',          label: 'About', external: true },
  { id: 'work',     href: 'index.html#work',     label: 'Workshop' },
  { id: 'projects', href: 'index.html#projects', label: 'Projects' },
  { id: 'process',  href: 'index.html#process',  label: 'Process' },
  { id: 'contact',  href: 'index.html#contact',  label: 'Contact' },
];

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState('');

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

  // Section-aware active link via IntersectionObserver
  React.useEffect(() => {
    const ids = ['work', 'projects', 'process', 'about', 'contact'];
    const els = ids.map((id) => document.getElementById(id)).filter(Boolean);
    if (els.length === 0) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: '-40% 0px -55% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const spa = typeof window !== 'undefined' && window.__ucSPA;

  const go = (item) => (e) => {
    if (item.external) {
      // About page
      if (spa) { e.preventDefault(); if (location.hash !== '#/about') location.hash = '#/about'; }
      return; // multi-page: follow href to about.html
    }
    // section link
    const el = document.getElementById(item.id);
    if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth', block: 'start' }); return; }
    if (spa) { e.preventDefault(); window.__pendingSection = item.id; location.hash = ''; }
    // multi-page & not on this page: follow href to index.html#id
  };
  const goTop = (e) => {
    if (spa) {
      e.preventDefault();
      if (location.hash) location.hash = ''; else window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    if (!document.getElementById('top')) return; // not on home; follow href
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  const hrefFor = (item) => {
    if (!spa) return item.href;
    return item.external ? '#/about' : `#${item.id}`;
  };

  const fg = 'var(--color-off-white)';
  const logoColor = 'var(--color-acid-yellow)';
  const bg = scrolled ? 'var(--color-deep-brown)' : 'transparent';
  const border = scrolled ? '1px solid rgba(253, 254, 120, 0.18)' : '1px solid transparent';

  return (
    <header
      style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        background: bg,
        borderBottom: border,
        backdropFilter: scrolled ? 'saturate(120%)' : 'none',
        transition: 'background 400ms var(--ease-craft), border-color 400ms var(--ease-craft), color 400ms var(--ease-craft)',
        color: fg,
      }}
    >
      <div
        className="uc-shell"
        style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          height: 78,
        }}
      >
        <a
          href={spa ? '#/' : 'index.html#top'}
          onClick={goTop}
          className="uc-logo"
          style={{
            color: logoColor, fontSize: 22, textDecoration: 'none', cursor: 'pointer',
            lineHeight: 0.9, whiteSpace: 'pre',
          }}
        >{'[uni\ncraft]'}</a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
          {NAV_ITEMS.map((item) => (
            <a
              key={item.id}
              href={hrefFor(item)}
              onClick={go(item)}
              className={`uc-link ${active === item.id ? 'is-active' : ''}`}
              style={{ color: fg }}
            >{item.label}</a>
          ))}
        </nav>
      </div>
    </header>
  );
};

Object.assign(window, { Nav });