/* global React, LitmusLogo */
const useStateN = React.useState;
const useEffectN = React.useEffect;
const useRefN = React.useRef;

// Sub-eyebrows shown when hovering nav items — tiny field-note hints
const NAV_HINTS = {
  thesis:    "3 layers · 4 sectors",
  portfolio: "21 cos. · 04 corridors",
  markets:   "Gulf · Africa · SEA · LatAm",
  network:   "10 operator partners",
  insights:  "Field notes · 28 published",
  team:      "10 partners across 4 cities",
};

function Navigator({ page, setPage, logoVariant = 'strip' }) {
  const items = [
    { k:'thesis', l:'Thesis' },
    { k:'portfolio', l:'Portfolio' },
    { k:'markets', l:'Markets' },
    { k:'network', l:'Network' },
    { k:'insights', l:'Insights' },
    { k:'team', l:'Team' },
  ];
  const [scrolled, setScrolled] = useStateN(false);
  const [hoverK, setHoverK] = useStateN(null);
  const [indicator, setIndicator] = useStateN({ x: 0, w: 0, opacity: 0 });
  const navRef = useRefN(null);
  const itemRefs = useRefN({});

  useEffectN(() => {
    let raf = 0;
    const on = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setScrolled(window.scrollY > 40));
    };
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => { window.removeEventListener('scroll', on); cancelAnimationFrame(raf); };
  }, []);

  // Position the morphing indicator behind the active OR hovered item
  useEffectN(() => {
    const targetK = hoverK || page;
    const el = itemRefs.current[targetK];
    const nav = navRef.current;
    if (!el || !nav) { setIndicator(s => ({ ...s, opacity: 0 })); return; }
    const navBox = nav.getBoundingClientRect();
    const elBox = el.getBoundingClientRect();
    setIndicator({
      x: elBox.left - navBox.left,
      w: elBox.width,
      opacity: 1,
    });
  }, [hoverK, page, scrolled]);

  const onHero = page === 'home' && !scrolled;

  return (
    <header className={`hdr ${onHero ? 'on-hero' : ''} ${scrolled ? 'condensed' : ''}`}>
      <div className="hdr-inner">
        <a className="hdr-mark" onClick={() => setPage('home')}>
          <LitmusLogo variant={logoVariant} size={scrolled ? 18 : 22}/>
          <span className="hdr-coords">25.27°N · 55.30°E</span>
        </a>

        <nav className="hdr-nav" ref={navRef} onMouseLeave={() => setHoverK(null)}>
          <span className="hdr-indicator" style={{
            transform: `translateX(${indicator.x}px)`,
            width: `${indicator.w}px`,
            opacity: indicator.opacity,
          }}/>
          {items.map(it => (
            <a key={it.k}
               ref={el => { itemRefs.current[it.k] = el; }}
               className={`hdr-item ${page === it.k ? 'active' : ''} ${hoverK === it.k ? 'hover' : ''}`}
               onClick={() => setPage(it.k)}
               onMouseEnter={() => setHoverK(it.k)}>
              <span className="hdr-item-label">{it.l}</span>
              <span className="hdr-item-hint">{NAV_HINTS[it.k]}</span>
            </a>
          ))}
        </nav>

        <a className="hdr-pitch"
           onClick={() => { setPage('home'); setTimeout(() => document.querySelector('[data-screen-label="09 Home · Contact"]')?.scrollIntoView({behavior:'smooth'}), 50); }}>
          <span>Pitch us</span>
          <span className="hdr-pitch-arrow">→</span>
        </a>
      </div>
    </header>
  );
}

Object.assign(window, { Navigator });