// mv-nav.jsx — ModVedi mega-navigation.
// A full-width banner drops under the letterhead and morphs its height smoothly
// between items; content cross-fades. No floating card, no drop shadow — just a
// quiet darker band with a hairline edge. All type is sans, matching the nav.

const MV_MENUS = [
  {
    key: 'about', label: 'About', lede: 'Modern knowledge. Ancient discipline.',
    page: 'ModVedi - About.html',
    links: [
      { t: 'About the Firm', d: 'Where the name comes from, and what it means.', href: 'ModVedi - About.html#firm' },
      { t: 'Founder', d: 'Engineer. Operator. Investor.', href: 'ModVedi - About.html#team' },
      { t: 'Principles', d: 'The four principles that govern every decision.', href: 'ModVedi - About.html#principles' },
    ],
  },
  {
    key: 'whatwedo', label: 'What We Do', lede: 'Two disciplines, one engine: we invest, and we transform.',
    page: 'ModVedi - What We Do.html',
    links: [
      { t: 'The Fund', d: 'We acquire, partner, and build vertical software.', href: 'ModVedi - The Fund.html' },
      { t: 'Advisory', d: 'We diagnose an operation, then transform it.', href: 'ModVedi - Advisory.html' },
      { t: 'ModVedi Intelligence', d: 'The systematized intelligence beneath both.', href: 'ModVedi - Sutra.html' },
      { t: 'Sectors', d: 'The asset-intensive industries we work across.', href: 'ModVedi - Sectors.html' },
    ],
  },
  {
    key: 'insights', label: 'Insights', lede: 'Letters, news, and research from the field.',
    page: 'ModVedi - Insights.html',
    links: [
      { t: 'Letters', d: 'Written to the operators and investors we work with.', href: 'ModVedi - Insights.html#letters' },
      { t: 'News', d: 'A live feed from across our sectors.', href: 'ModVedi - Insights.html#news' },
      { t: 'Research', d: 'Long-form work on the industries we invest in.', href: 'ModVedi - Insights.html#research' },
    ],
  },
  {
    key: 'contact', label: 'Contact', href: 'ModVedi - Contact.html',
  },
];

if (typeof document !== 'undefined' && !document.getElementById('mv-nav-styles')) {
  const s = document.createElement('style');
  s.id = 'mv-nav-styles';
  s.textContent = `
    .mv-meganav{position:relative;z-index:40}
    .mv-navbtn{position:relative;appearance:none;background:none;border:0;cursor:pointer;font-family:${MV.sans};
      font-size:13px;font-weight:500;letter-spacing:.03em;padding:6px 0;text-decoration:none;white-space:nowrap;
      color:${MV.creamDim};transition:color .25s ease;}
    .mv-navbtn:hover,.mv-navbtn[data-open="true"]{color:${MV.cream}}
    .mv-navbtn::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
      background:${MV.gold};opacity:0;transform:scaleX(0);transform-origin:center;
      transition:opacity .3s ease,transform .35s cubic-bezier(.32,.72,0,1)}
    .mv-navbtn:hover::after,.mv-navbtn[data-open="true"]::after{opacity:.5;transform:scaleX(1)}
    @media (prefers-reduced-motion: reduce){.mv-navbtn::after{transition:opacity .2s ease}}
    .mv-nav-sep{width:1px;height:16px;background:${MV.hair};display:inline-block}
    .mv-loginbtn{display:inline-flex;align-items:center;gap:7px;font-family:${MV.sans};
      font-size:12px;font-weight:600;letter-spacing:.05em;color:${MV.creamDim};text-decoration:none;
      border:1px solid ${MV.hair};border-radius:2px;padding:7px 15px;
      transition:border-color .25s ease,color .25s ease}
    .mv-loginbtn:hover{border-color:${MV.gold};color:${MV.gold}}
    .mv-loginbtn svg{opacity:.9}
    .mv-navbar{padding:34px 80px 20px}
    .mv-navgroup{display:flex;align-items:center;gap:34px}
    @media (max-width:1200px){.mv-navbar{padding:28px 48px 16px}.mv-navgroup{gap:22px}}
    @media (max-width:960px){.mv-navbar{padding:22px 28px 14px}.mv-navgroup{gap:15px}.mv-navbtn{font-size:12.5px}}
    .mv-mega-wrap{position:absolute;top:100%;left:0;right:0;overflow:hidden;
      height:0;opacity:0;pointer-events:none;
      transition:height .5s cubic-bezier(.32,.72,0,1),opacity .3s ease;}
    .mv-mega-wrap[data-open="true"]{opacity:1;pointer-events:auto}
    .mv-mega-panel{background:rgba(4,11,20,0.97);backdrop-filter:blur(20px) saturate(140%);
      -webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid ${MV.hair}}
    .mv-mega-inner{display:grid;grid-template-columns:300px 1fr;gap:104px;padding:52px 80px 56px;
      max-width:1320px;margin:0 auto;width:100%}
    .mv-mega-aside{display:flex;flex-direction:column;align-items:flex-start}
    .mv-mega-kicker{font-family:${MV.sans};font-size:11px;font-weight:600;letter-spacing:.22em;
      text-transform:uppercase;color:${MV.gold};margin-bottom:18px;display:inline-flex;align-items:center;gap:12px}
    .mv-mega-kicker::before{content:"";width:24px;height:1px;background:${MV.gold};display:inline-block}
    .mv-mega-title{font-family:${MV.serif};font-size:25px;font-weight:600;line-height:1.14;
      letter-spacing:-0.005em;color:${MV.cream};margin:0 0 12px}
    .mv-mega-lede{font-family:${MV.sans};font-size:14px;font-weight:400;line-height:1.55;
      color:${MV.creamDim};max-width:240px;letter-spacing:.005em}
    .mv-mega-visit{margin-top:auto;padding-top:26px}
    .mv-mega-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      column-gap:88px;align-content:start}
    .mv-megalink{display:block;text-decoration:none;padding:22px 0 21px;border-top:1px solid ${MV.hair};
      transition:padding-left .35s cubic-bezier(.32,.72,0,1)}
    .mv-megalink:hover{padding-left:10px}
    .mv-megalink-t{display:block;font-family:${MV.serif};font-size:18px;font-weight:600;
      letter-spacing:.005em;color:${MV.cream};transition:color .22s ease}
    .mv-megalink:hover .mv-megalink-t{color:${MV.gold}}
    .mv-megalink-d{display:block;margin-top:6px;font-family:${MV.sans};font-size:12px;
      line-height:1.55;color:${MV.creamFaint};letter-spacing:.005em}
    .mv-mega-fade{animation:mv-megafade .42s cubic-bezier(.32,.72,0,1)}
    @keyframes mv-megafade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
    @media (prefers-reduced-motion: reduce){
      .mv-mega-wrap{transition:opacity .2s ease}.mv-mega-fade{animation:none}
      .mv-megalink{transition:none}}
  `;
  document.head.appendChild(s);
}

function MegaNav() {
  const [active, setActive] = React.useState(null);
  const [height, setHeight] = React.useState(0);
  const innerRef = React.useRef(null);
  const closeTimer = React.useRef(null);

  const open = (key) => { clearTimeout(closeTimer.current); setActive(key); };
  const close = () => { clearTimeout(closeTimer.current); setActive(null); };
  const scheduleClose = () => {
    clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setActive(null), 120);
  };

  React.useLayoutEffect(() => {
    setHeight(active && innerRef.current ? innerRef.current.scrollHeight : 0);
  }, [active]);

  React.useEffect(() => () => clearTimeout(closeTimer.current), []);

  const item = MV_MENUS.find((m) => m.key === active);

  return (
    <div className="mv-meganav" onMouseLeave={scheduleClose}>
      <nav className="mv-navbar" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative', zIndex: 2 }}>
        <a href="/" className="mv-serif" style={{ fontSize: 22, fontWeight: 600,
          letterSpacing: '.02em', color: MV.cream, textDecoration: 'none' }}>ModVedi</a>
        <div className="mv-navgroup">
          {MV_MENUS.map((m) => (
            m.links ? (
              <a key={m.key} className="mv-navbtn" data-open={active === m.key} href={m.page}
                onMouseEnter={() => open(m.key)} onFocus={() => open(m.key)}>{m.label}</a>
            ) : (
              <a key={m.key} className="mv-navbtn" href={m.href}
                onMouseEnter={close}>{m.label}</a>
            )
          ))}
          <span className="mv-nav-sep" aria-hidden="true" />
          <a className="mv-loginbtn" href="ModVedi - Investor Login.html" onMouseEnter={close}>
            <svg width="11" height="12" viewBox="0 0 11 12" fill="none" stroke="currentColor" strokeWidth="1.2">
              <rect x="1" y="5" width="9" height="6" rx="1" />
              <path d="M3 5V3.5a2.5 2.5 0 0 1 5 0V5" />
            </svg>
            Investor Login
          </a>
        </div>
      </nav>

      <div className="mv-mega-wrap" data-open={!!active} style={{ height }}
        onMouseEnter={() => clearTimeout(closeTimer.current)} aria-hidden={!active}>
        <div ref={innerRef} className="mv-mega-panel">
          {item && (
            <div key={item.key} className="mv-mega-fade mv-mega-inner">
              <div className="mv-mega-aside">
                <div className="mv-mega-kicker">{item.label}</div>
                <h3 className="mv-mega-title">{item.lede}</h3>
                <div className="mv-mega-visit">
                  <a href={item.page} className="mv-textlink">Visit {item.label} <MVArrow /></a>
                </div>
              </div>
              <div className="mv-mega-links">
                {item.links.map((l) => (
                  <a key={l.t} href={l.href || '#'} className="mv-megalink">
                    <span className="mv-megalink-t">{l.t}</span>
                    {l.d && <span className="mv-megalink-d">{l.d}</span>}
                  </a>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MegaNav, MV_MENUS });