// Top navigation. Heritage merchant house — wordmark left, links right, single
// CTA. Sticks on scroll, transparent over hero, becomes opaque after scroll.
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

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

  const links = [
    { id: 'trade',   label: 'What We Trade' },
    { id: 'reach',   label: 'Global Reach' },
    { id: 'process', label: 'How We Work' },
    { id: 'trust',   label: 'Trust & Standards' },
  ];

  const goto = (id) => {
    setMobileOpen(false);
    // If we're not on the homepage, navigate there with a hash.
    const onHome = /(^|\/)Homepage\.html$/i.test(window.location.pathname) ||
                   window.location.pathname === '/' ||
                   window.location.pathname.endsWith('/');
    const el = document.getElementById(id);
    if (el && onHome) {
      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
      window.location.href = `Homepage.html#${id}`;
    }
  };

  return (
    <>
      <style>{`
        .nav{
          position:fixed;top:0;left:0;right:0;z-index:50;
          transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
          border-bottom:1px solid transparent;
        }
        .nav.scrolled{
          background:rgba(243,238,227,.86);
          backdrop-filter:saturate(140%) blur(10px);
          -webkit-backdrop-filter:saturate(140%) blur(10px);
          border-bottom-color:rgba(20,33,51,.12);
        }
        .nav-inner{
          display:flex;align-items:center;justify-content:space-between;
          padding:18px 0;gap:24px;
        }
        .nav-brand{display:flex;align-items:center;gap:14px;cursor:pointer}
        .nav-brand .est{
          font-family:var(--mono);font-size:10px;letter-spacing:.16em;
          text-transform:uppercase;color:rgba(20,33,51,.55);
          padding-left:14px;border-left:1px solid rgba(20,33,51,.2);
          line-height:1.4;
        }
        .nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
        .nav-links a{
          font-size:13px;font-weight:500;color:rgba(20,33,51,.78);
          letter-spacing:.01em;cursor:pointer;
          padding:6px 0;border-bottom:1px solid transparent;transition:.2s;
        }
        .nav-links a:hover{color:var(--ink);border-bottom-color:var(--brass)}
        .nav-cta{
          font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
          padding:11px 18px;background:var(--ink);color:var(--paper);
          border-radius:0;cursor:pointer;border:1px solid var(--ink);transition:.2s;
        }
        .nav-cta:hover{background:transparent;color:var(--ink)}
        .nav-burger{
          display:none;width:36px;height:36px;border:1px solid rgba(20,33,51,.2);
          background:transparent;border-radius:0;cursor:pointer;
          flex-direction:column;align-items:center;justify-content:center;gap:5px;
        }
        .nav-burger span{width:16px;height:1px;background:var(--ink);transition:.2s}
        .nav-mobile{
          display:none;
          position:fixed;inset:64px 0 0 0;background:var(--paper);z-index:49;
          padding:40px 24px;
        }
        .nav-mobile a{
          display:block;
          font-family:var(--serif);
          font-size:32px;font-style:italic;font-weight:500;
          padding:18px 0;border-bottom:1px solid rgba(20,33,51,.12);
          cursor:pointer;
        }
        @media (max-width:880px){
          .nav-links,.nav-cta,.nav-brand .est{display:none}
          .nav-burger{display:flex}
          .nav-mobile.open{display:block}
        }
      `}</style>
      <nav className={scrolled ? 'nav scrolled' : 'nav'}>
        <div className="container">
          <div className="nav-inner">
            <div className="nav-brand" onClick={() => {
              const onHome = /(^|\/)Homepage\.html$/i.test(window.location.pathname) ||
                             window.location.pathname === '/' ||
                             window.location.pathname.endsWith('/');
              if (onHome) window.scrollTo({top:0,behavior:'smooth'});
              else window.location.href = 'Homepage.html';
            }}>
              <SBMonogram size={42} />
              <div className="est">Est. 2020<br/>Miami · FL</div>
            </div>
            <ul className="nav-links">
              {links.map(l => (
                <li key={l.id}><a onClick={() => goto(l.id)}>{l.label}</a></li>
              ))}
            </ul>
            <button className="nav-cta" onClick={() => goto('contact')}>Make an Inquiry</button>
            <button className="nav-burger" aria-label="Menu" onClick={() => setMobileOpen(o=>!o)}>
              <span/><span/><span/>
            </button>
          </div>
        </div>
        <div className={mobileOpen ? 'nav-mobile open' : 'nav-mobile'}>
          {links.map(l => <a key={l.id} onClick={()=>goto(l.id)}>{l.label}</a>)}
          <a onClick={()=>goto('contact')}>Make an Inquiry</a>
        </div>
      </nav>
    </>
  );
}

window.Nav = Nav;