// Single canonical nav — green background, multi-page links + Client Login
const NAV_SERVICES = [
  { slug: "bespoke-wealth-architecture",     label: "Bespoke Wealth Architecture" },
  { slug: "treasury-management",             label: "Treasury Management" },
  { slug: "nri-services",                    label: "NRI Services" },
  { slug: "alternative-investment-vehicles", label: "Alternative Investment Vehicles" },
  { slug: "external-asset-tracking",         label: "External Asset Tracking" },
  { slug: "nomination-estate-audits",        label: "Nomination & Estate Readiness" },
];

const CLIENT_PORTAL = "https://maxwealthinvestments.my-portfolio.co.in";

// Base URL prefix — pages inside subfolders (e.g. /services/) override this
const __BASE = (window.__BASE__ === undefined) ? "" : window.__BASE__;

const Nav = ({ current = "home" }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [svcOpen, setSvcOpen] = useState(false);
  const svcCloseTimer = useRef(null);

  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  const items = [
    { key: "about",    l: "About",    h: `${__BASE}about.html` },
    { key: "services", l: "Services", h: `${__BASE}index.html#services`, hasDropdown: true },
    { key: "career",   l: "Career",   h: `${__BASE}careers.html` },
    { key: "contact",  l: "Contact",  h: `${__BASE}contact.html` },
  ];

  const onSvcEnter = () => { clearTimeout(svcCloseTimer.current); setSvcOpen(true); };
  const onSvcLeave = () => { svcCloseTimer.current = setTimeout(() => setSvcOpen(false), 150); };

  return (
    <>
      {/* Top utility strip — address only */}
      <div style={{
        background: "var(--green-900)", color: "var(--cream)", padding: "9px 0", fontSize: 12,
        position: "relative", zIndex: 51, borderBottom: "1px solid rgba(250,246,236,0.06)"
      }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24 }}>
          <span style={{ display: "inline-flex", gap: 8, alignItems: "center", color: "var(--cream)", opacity: 0.85 }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}><path d="M12 22 C 12 22 4 14 4 9 a 8 8 0 1 1 16 0 c 0 5 -8 13 -8 13 Z M 12 11 a 2 2 0 1 1 0 -4 a 2 2 0 0 1 0 4 Z" fill="none" stroke="currentColor" strokeWidth="1.6"/></svg>
            B-412, Bestech Business Tower, Sector 68, Mohali, Punjab
          </span>
          <div style={{ display: "flex", gap: 18, alignItems: "center" }} className="topstrip-right">
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--gold-400)" }}>AMFI REGISTERED · CFP (FPSB)</span>
          </div>
        </div>
      </div>

      {/* Main header — green */}
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        padding: scrolled ? "10px 0" : "16px 0",
        background: scrolled ? "rgba(5,36,26,0.94)" : "var(--green-900)",
        backdropFilter: scrolled ? "saturate(140%) blur(14px)" : "none",
        WebkitBackdropFilter: scrolled ? "saturate(140%) blur(14px)" : "none",
        borderBottom: "1px solid rgba(250,246,236,0.08)",
        transition: "all .3s ease"
      }}>
        <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28 }}>
          <a href={`${__BASE}index.html`} style={{ display: "flex", alignItems: "center" }}>
            <Logo height={scrolled ? 34 : 44}/>
          </a>
          <nav style={{ display: "flex", alignItems: "center", gap: 2 }} className="desktop-nav">
            {items.map(it => {
              const isCurrent = current === it.key;
              if (it.hasDropdown) {
                return (
                  <div key={it.key} style={{ position: "relative" }} onMouseEnter={onSvcEnter} onMouseLeave={onSvcLeave}>
                    <a href={it.h} style={{
                      padding: "10px 16px", fontSize: 14, fontWeight: 500,
                      color: isCurrent ? "var(--gold-400)" : "var(--cream)",
                      borderRadius: 6, transition: "color .2s",
                      display: "inline-flex", alignItems: "center", gap: 6
                    }}>
                      {it.l}
                      <svg width="10" height="10" viewBox="0 0 10 10" style={{ transform: svcOpen ? "rotate(180deg)" : "none", transition: "transform .2s" }}>
                        <path d="M2 3 L5 7 L8 3" stroke="currentColor" strokeWidth="1.5" fill="none"/>
                      </svg>
                    </a>
                    {/* Dropdown */}
                    <div style={{
                      position: "absolute", top: "calc(100% + 8px)", left: 0,
                      background: "var(--green-800)", border: "1px solid var(--green-700)",
                      borderRadius: 8, padding: 8, minWidth: 300,
                      boxShadow: "0 24px 60px -20px rgba(0,0,0,0.5)",
                      opacity: svcOpen ? 1 : 0, pointerEvents: svcOpen ? "auto" : "none",
                      transform: svcOpen ? "translateY(0)" : "translateY(-6px)",
                      transition: "opacity .2s, transform .2s",
                    }}>
                      {NAV_SERVICES.map(s => (
                        <a key={s.slug} href={`${__BASE}services/${s.slug}.html`} style={{
                          display: "flex", justifyContent: "space-between", alignItems: "center",
                          padding: "12px 14px", borderRadius: 6, fontSize: 14, fontWeight: 500,
                          color: "var(--cream)", transition: "background .15s, color .15s"
                        }}
                          onMouseEnter={e => { e.currentTarget.style.background = "var(--green-700)"; e.currentTarget.style.color = "var(--gold-400)"; }}
                          onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--cream)"; }}>
                          {s.label}
                          <ArrowIcon size={12} style={{ opacity: 0.5 }}/>
                        </a>
                      ))}
                    </div>
                  </div>
                );
              }
              return (
                <a key={it.key} href={it.h} style={{
                  padding: "10px 16px", fontSize: 14, fontWeight: 500,
                  color: isCurrent ? "var(--gold-400)" : "var(--cream)",
                  borderRadius: 6, transition: "color .2s"
                }}
                   onMouseEnter={e => { e.currentTarget.style.color = "var(--gold-400)"; }}
                   onMouseLeave={e => { e.currentTarget.style.color = isCurrent ? "var(--gold-400)" : "var(--cream)"; }}>
                  {it.l}
                </a>
              );
            })}
          </nav>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <a href={CLIENT_PORTAL} target="_blank" rel="noopener" className="btn desktop-nav" style={{
              padding: "10px 16px", fontSize: 13, border: "1px solid var(--gold-500)", color: "var(--gold-400)", background: "transparent"
            }}
              onMouseEnter={e => { e.currentTarget.style.background = "var(--gold-500)"; e.currentTarget.style.color = "var(--green-900)"; }}
              onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--gold-400)"; }}>
              Client Login
              <svg className="arrow" width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M3 11 L11 3 M11 3 H5 M11 3 V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/></svg>
            </a>
            <a href={`${__BASE}contact.html`} className="btn desktop-nav" style={{
              padding: "11px 18px", fontSize: 13, background: "var(--gold-500)", color: "var(--green-900)"
            }}
              onMouseEnter={e => e.currentTarget.style.background = "var(--gold-400)"}
              onMouseLeave={e => e.currentTarget.style.background = "var(--gold-500)"}>
              Book a consult <ArrowIcon/>
            </a>
            <button className="mobile-toggle" aria-label="Menu" onClick={() => setOpen(o => !o)} style={{ display: "none", padding: 10, color: "var(--cream)" }}>
              <svg width="22" height="14" viewBox="0 0 22 14"><path d="M0 1h22M0 13h22" stroke="currentColor" strokeWidth="1.5"/></svg>
            </button>
          </div>
        </div>

        {/* Mobile sheet */}
        {open && (
          <div style={{ position: "fixed", inset: 0, top: 62, background: "var(--green-900)", padding: "30px 22px", display: "flex", flexDirection: "column", gap: 8, zIndex: 49, overflowY: "auto" }}>
            <a href={`${__BASE}about.html`} onClick={() => setOpen(false)} style={{ padding: "16px 0", borderBottom: "1px solid rgba(250,246,236,0.12)", fontFamily: "Poppins", fontWeight: 600, fontSize: 26, color: "var(--cream)" }}>About</a>
            <a href={`${__BASE}index.html#services`} onClick={() => setOpen(false)} style={{ padding: "16px 0", borderBottom: "1px solid rgba(250,246,236,0.12)", fontFamily: "Poppins", fontWeight: 600, fontSize: 26, color: "var(--cream)" }}>Services</a>
            <div style={{ paddingLeft: 16, display: "flex", flexDirection: "column", gap: 4, marginTop: 4 }}>
              {NAV_SERVICES.map(s => (
                <a key={s.slug} href={`${__BASE}services/${s.slug}.html`} onClick={() => setOpen(false)} style={{ padding: "10px 0", fontSize: 15, color: "rgba(250,246,236,0.7)" }}>— {s.label}</a>
              ))}
            </div>
            <a href={`${__BASE}careers.html`} onClick={() => setOpen(false)} style={{ padding: "16px 0", borderBottom: "1px solid rgba(250,246,236,0.12)", fontFamily: "Poppins", fontWeight: 600, fontSize: 26, color: "var(--cream)" }}>Career</a>
            <a href={`${__BASE}contact.html`} onClick={() => setOpen(false)} style={{ padding: "16px 0", borderBottom: "1px solid rgba(250,246,236,0.12)", fontFamily: "Poppins", fontWeight: 600, fontSize: 26, color: "var(--cream)" }}>Contact</a>
            <a href={CLIENT_PORTAL} target="_blank" rel="noopener" onClick={() => setOpen(false)} className="btn" style={{ marginTop: 18, justifyContent: "center", border: "1px solid var(--gold-500)", color: "var(--gold-400)" }}>Client Login ↗</a>
            <a href={`${__BASE}contact.html`} onClick={() => setOpen(false)} className="btn" style={{ marginTop: 4, justifyContent: "center", background: "var(--gold-500)", color: "var(--green-900)" }}>Book a consult <ArrowIcon/></a>
          </div>
        )}
      </header>

      <style>{`
        @media (max-width: 1040px){
          .desktop-nav{display:none !important}
          .mobile-toggle{display:inline-flex !important}
        }
        @media (max-width: 760px){
          .topstrip-right{display:none}
        }
      `}</style>
    </>
  );
};

window.Nav = Nav;
window.NAV_SERVICES = NAV_SERVICES;
window.__BASE = __BASE;
window.CLIENT_PORTAL = CLIENT_PORTAL;