// Nav.jsx — GreySurface top navigation (v4: responsive, with mobile menu)

// Viewport hook — re-renders on resize across a breakpoint
const useIsMobile = (bp = 900) => {
  const [m, setM] = React.useState(() => (typeof window !== 'undefined' ? window.innerWidth <= bp : false));
  React.useEffect(() => {
    const on = () => setM(window.innerWidth <= bp);
    on();
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, [bp]);
  return m;
};

// Global responsive stylesheet — injected once. Inline-style React can't hold
// media queries, so we collapse the site's column grids via attribute selectors.
const injectResponsiveCSS = () => {
  if (typeof document === 'undefined' || document.getElementById('gs-responsive')) return;
  const css = `
/* ── Shared keyframes (every page loads Nav, so declare once here) ── */
@keyframes gs-marquee { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@keyframes gs-marquee-rtl { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
@keyframes gs-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
@keyframes gs-blink { 50% { border-color: transparent; } }
@keyframes gs-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gs-ticker { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes gs-cve-fall { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }
@keyframes gs-mega-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gs-mega-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
@keyframes gs-mega-drift { from { transform: translateX(-40px); } to { transform: translateX(160px); } }
@keyframes gs-mega-item { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.gs-pulse { animation: gs-pulse 1.6s ease-in-out infinite; }

/* ── GreySurface responsive layer ──
   Inline-style React can't carry media queries, so we adapt the site's column
   grids via attribute selectors, tiered widest→narrowest (narrower wins). */

/* Dense item grids reflow continuously by available width (handles any ratio). */
.gs-grid-auto { grid-template-columns: repeat(auto-fit, minmax(var(--gs-min, 150px), 1fr)) !important; }

/* ── Small-laptop / large-tablet: 3-up → 2-up, 6-up → 3-up ── */
@media (max-width: 1080px) {
  [style*="repeat(3, 1fr)"]:not(.gs-grid-auto) { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(6, 1fr)"]:not(.gs-grid-auto) { grid-template-columns: repeat(3, 1fr) !important; }
  /* Footer 5-col → 3-col */
  [style*="2fr 1.4fr repeat(3, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Tablet portrait: collapse all two-column feature / asymmetric rows ── */
@media (max-width: 880px) {
  [style*="1fr 1fr"]:not(.gs-grid-auto),
  [style*="1.1fr 1fr"], [style*="1fr 1.1fr"],
  [style*="1.05fr 1fr"],
  [style*="1.2fr 1fr"], [style*="1fr 1.2fr"],
  [style*="1.3fr 1fr"], [style*="1fr 1.3fr"],
  [style*="1.4fr 1fr"], [style*="1fr 1.4fr"],
  [style*="1.5fr 1fr"], [style*="1.6fr 1fr"],
  [style*="2fr 1.4fr"]:not([style*="repeat"]),
  [style*="repeat(5, 1fr)"]:not(.gs-grid-auto) { grid-template-columns: 1fr !important; }
  [style*="position: sticky"] { position: static !important; top: auto !important; }
  /* Reset explicit cell placement so collapsed grids stack in source order */
  [style*="grid-column"] { grid-column: auto !important; }
  [style*="grid-row"] { grid-row: auto !important; }
  /* Footer 5-col → 2-col */
  [style*="2fr 1.4fr repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Tame oversized section padding from tablet down */
  [style*="120px 32px"], [style*="110px 32px"], [style*="96px 32px"],
  [style*="88px 32px"], [style*="72px 32px"] { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ── Phones ── */
@media (max-width: 600px) {
  [style*="repeat(3, 1fr)"]:not(.gs-grid-auto),
  [style*="repeat(2, 1fr)"]:not(.gs-grid-auto) { grid-template-columns: 1fr !important; }
  [style*="repeat(4, 1fr)"]:not(.gs-grid-auto),
  [style*="repeat(6, 1fr)"]:not(.gs-grid-auto) { grid-template-columns: repeat(2, 1fr) !important; }
  /* Compress vertical section rhythm so phones aren't all whitespace */
  [style*="padding: 120px 32px"], [style*="padding: 110px 32px"] { padding-top: 84px !important; padding-bottom: 48px !important; }
  [style*="padding: 96px 32px"]  { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 96px 0"]     { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 88px 32px"]  { padding-top: 52px !important; padding-bottom: 52px !important; }
  [style*="padding: 72px 32px"]  { padding-top: 44px !important; padding-bottom: 44px !important; }
  /* Smaller side gutters + lighter card padding */
  [style*="120px 32px"], [style*="110px 32px"], [style*="96px 32px"], [style*="88px 32px"],
  [style*="72px 32px"], [style*="64px 32px"], [style*="56px 32px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding: 56px"]:not([style*="32px"]) { padding: 28px !important; }
  [style*="padding: 48px"] { padding: 26px !important; }
  /* Tighten big section gaps */
  [style*="gap: 48px"] { gap: 28px !important; }
}

/* Very narrow phones: even the 2-up dense grids relax a touch */
@media (max-width: 380px) {
  .gs-grid-auto { --gs-min: 120px; }
}

/* Fixed-column data tables / matrices scroll horizontally instead of clipping */
@media (max-width: 760px) {
  .gs-scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .gs-scroll-x > * { min-width: 480px; }
}`;
  const el = document.createElement('style');
  el.id = 'gs-responsive';
  el.textContent = css;
  document.head.appendChild(el);
};

// Mobile slide-down menu — accordion over the same nav data
const MobileMenu = ({ navItems, onLink, onClose, ctaHref }) => {
  const [openKey, setOpenKey] = React.useState(navItems[0] && navItems[0].key);
  return (
    <div style={{
      position: 'fixed', top: 60, left: 0, right: 0, bottom: 0, zIndex: 99,
      background: 'rgba(1,1,2,0.98)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      overflowY: 'auto', padding: '8px 16px 40px', animation: 'gs-mega-in 200ms ease-out',
    }}>
      {navItems.map(item => {
        const open = openKey === item.key;
        const items = item.mega ? item.mega.columns.flatMap(c => c.items) : [];
        if (!item.mega) {
          return (
            <div key={item.key} style={{ borderBottom: '1px solid #1a1b1e' }}>
              <button onClick={() => { onClose(); onLink(item.href); }} style={{
                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '16px 6px', background: 'transparent', border: 'none', cursor: 'pointer',
                color: '#f7f8f8', fontSize: 16, fontWeight: 500, fontFamily: 'var(--font-text)',
              }}>
                {item.label}
                <Icon name="arrowRight" size={15} color="#8a8f98" strokeWidth={2} />
              </button>
            </div>
          );
        }
        return (
          <div key={item.key} style={{ borderBottom: '1px solid #1a1b1e' }}>
            <button onClick={() => setOpenKey(open ? null : item.key)} style={{
              width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '16px 6px', background: 'transparent', border: 'none', cursor: 'pointer',
              color: '#f7f8f8', fontSize: 16, fontWeight: 500, fontFamily: 'var(--font-text)',
            }}>
              {item.label}
              <Icon name="chevronDown" size={16} color="#8a8f98" strokeWidth={2}
                style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 200ms' }} />
            </button>
            {open && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2, paddingBottom: 12 }}>
                {items.map(it => (
                  <button key={it.label} onClick={() => { onClose(); onLink(it.href); }} style={{
                    width: '100%', display: 'flex', alignItems: 'flex-start', gap: 12,
                    padding: '10px 8px', borderRadius: 8, textAlign: 'left',
                    background: 'transparent', border: 'none', cursor: 'pointer',
                  }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: 7, flexShrink: 0,
                      background: 'linear-gradient(180deg, rgba(94,105,210,0.15), rgba(94,105,210,0.04))',
                      border: '1px solid rgba(94,105,210,0.22)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <Icon name={it.icon} size={13} color="#828fff" />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 500, color: '#f7f8f8' }}>{it.label}</div>
                      <div style={{ fontSize: 12, color: '#8a8f98', lineHeight: 1.4 }}>{it.desc}</div>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </div>
        );
      })}
      <button onClick={() => { window.location.href = ctaHref; }} style={{
        width: '100%', marginTop: 22, background: '#5e6ad2', color: '#fff', border: 'none',
        borderRadius: 10, padding: '14px', fontSize: 15, fontWeight: 500, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
        fontFamily: 'var(--font-text)',
      }}>
        Get a quote <Icon name="arrowRight" size={14} color="#fff" strokeWidth={2.2} />
      </button>
    </div>
  );
};

const Nav = ({ onNav, currentPage = 'home' }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [openMenu, setOpenMenu] = React.useState(null);
  const [anchorX, setAnchorX] = React.useState(0);
  const closeTimer = React.useRef(null);
  const cancelClose = () => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } };
  const scheduleClose = () => { cancelClose(); closeTimer.current = setTimeout(() => setOpenMenu(null), 150); };
  const openMega = (key, el) => { cancelClose(); const r = el.getBoundingClientRect(); setAnchorX(r.left + r.width / 2); setOpenMenu(key); };
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const isMobile = useIsMobile(900);

  React.useEffect(() => { injectResponsiveCSS(); }, []);

  // Escape closes any open menu
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') { setOpenMenu(null); setMobileOpen(false); } };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

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

  // Close mobile menu + lock body scroll while open
  React.useEffect(() => { if (!isMobile && mobileOpen) setMobileOpen(false); }, [isMobile, mobileOpen]);
  React.useEffect(() => {
    document.body.style.overflow = (isMobile && mobileOpen) ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [isMobile, mobileOpen]);

  // Resolve URL based on where we are: site root, /services/, /blog/, or /legal/
  const _path = location.pathname;
  const inServices = _path.includes('/services/');
  const inSub = /\/(services|blog|legal)\//.test(_path);
  const svcHref  = (slug) => `/services/${slug}/`;
  const rootHref = (path) => path; // links are already root-relative
  // Every link is root-relative and pages live at /name/index.html, so the
  // address bar shows clean URLs like greysurface.com/about/ (never .html).
  const homeRoot = '/';
  const homeHref = (hash) => `/#${hash}`;

  const services = {
    title: 'Penetration testing services',
    subtitle: 'Manual testing across every attack surface.',
    columns: [
      {
        heading: 'Core testing',
        items: [
          { label: 'Penetration Testing',           desc: 'Full-scope manual testing across your stack', icon: 'shield',      href: svcHref('vapt') },
          { label: 'Web Application Pentesting',    desc: 'OWASP ASVS, business logic, auth flaws',     icon: 'globe',       href: svcHref('web') },
          { label: 'Mobile Application Pentesting', desc: 'iOS, Android, OWASP MASVS',                  icon: 'fingerprint', href: svcHref('mobile') },
        ],
      },
      {
        heading: 'Programs and adversary simulation',
        items: [
          { label: 'Cloud Pentesting',        desc: 'AWS, Azure, GCP, Kubernetes, IAM',       icon: 'cloud',   href: svcHref('cloud') },
          { label: 'Continuous Pentesting',   desc: 'Rolling testing on every release',       icon: 'refresh', href: svcHref('ptaas') },
          { label: 'Red Teaming',             desc: 'Objective-based adversary simulation',   icon: 'target',  href: svcHref('red-team') },
        ],
      },
      {
        // TEMPORARY: IT Support is a short-term offering. Remove this column,
        // the footer link, /it-support/ and /components/ITSupportPage.jsx together.
        heading: 'Managed IT',
        items: [
          { label: 'IT Support',              desc: 'Helpdesk, endpoints, M365, network', icon: 'server',  href: rootHref('/it-support/') },
        ],
      },
    ],
    feature: {
      tag: 'Most requested',
      title: 'Continuous Pentesting',
      desc: 'Testing that keeps pace with your releases. Every meaningful deploy is reviewed by one of our testers.',
      cta: 'Explore the program',
      href: svcHref('ptaas'),
    },
  };

  const resources = {
    title: 'Resources',
    subtitle: 'Research, reports, and pricing.',
    columns: [
      {
        heading: 'Read',
        items: [
          { label: 'Blog',                desc: 'Research, write-ups, advisories', icon: 'code',     href: rootHref('/blog/') },
          { label: 'Pentest Trends 2026', desc: 'Data from 600+ engagements',            icon: 'flame',    href: rootHref('/resources/#report') },
          { label: 'Sample report',       desc: 'See exactly what you receive',          icon: 'download', href: rootHref('/resources/#sample') },
        ],
      },
      {
        heading: 'Programs',
        items: [
          { label: 'Pricing',   desc: 'Fixed-fee engagements, no surprises', icon: 'layers',  href: rootHref('/pricing/') },
          { label: 'Customers', desc: 'Who we work with, and why',           icon: 'globe',   href: rootHref('/customers/') },
          { label: 'Partners',  desc: 'MSP and MSSP partner program',        icon: 'network', href: rootHref('/partners/') },
        ],
      },
    ],
  };

  const company = {
    title: 'Company',
    subtitle: 'A specialist penetration testing practice.',
    columns: [
      {
        heading: 'About us',
        items: [
          { label: 'About',        desc: 'Mission, story, the team',            icon: 'sparkle',      href: rootHref('/about/') },
          { label: 'Philosophy',   desc: 'How we think about offense',          icon: 'eye',          href: rootHref('/philosophy/') },
          { label: 'Careers',      desc: 'Join the team',                       icon: 'arrowUpRight', href: rootHref('/careers/') },
          { label: 'Trust center', desc: 'Compliance, attestations, security',  icon: 'lock',         href: rootHref('/about/#compliance') },
        ],
      },
      {
        heading: 'Connect',
        items: [
          { label: 'Contact',                desc: 'Scoping, pricing, timing',              icon: 'mail',   href: rootHref('/contact/') },
          { label: 'Industries',             desc: 'Sectors we specialize in',              icon: 'globe',  href: homeHref('industries') },
          { label: 'Responsible disclosure', desc: 'Report a vulnerability in our systems', icon: 'shield', href: rootHref('/contact/#disclose') },
        ],
      },
    ],
  };

  const navItems = [
    { label: 'Services',  key: 'services',  mega: services },
    { label: 'Resources', key: 'resources', mega: resources },
    { label: 'Company',   key: 'company',   mega: company },
    { label: 'Pricing',   key: 'pricing',   href: rootHref('/pricing/') },
  ];

  const onLink = (href) => {
    if (!href) return;
    if (href.startsWith('#')) onNav && onNav(href.slice(1));
    else window.location.href = href;
  };

  return (
    <>
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      height: 60, display: 'flex', alignItems: 'center',
      padding: isMobile ? '0 16px' : '0 28px',
      background: scrolled ? 'rgba(1,1,2,0.78)' : 'rgba(1,1,2,0.55)',
      backdropFilter: 'blur(16px) saturate(140%)',
      WebkitBackdropFilter: 'blur(16px) saturate(140%)',
      borderBottom: `1px solid ${scrolled ? '#23252a' : 'transparent'}`,
      transition: 'all 220ms ease-out',
    }}>
      {/* Left — logo */}
      <button
        onClick={() => window.location.href = homeRoot}
        style={{
          display: 'flex', alignItems: 'center', gap: 9,
          background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
          width: isMobile ? 'auto' : 200,
        }}
      >
        <GsMark size={22} />
        <GsWordmark height={20} />
      </button>

      {/* Center — nav links (desktop) */}
      {!isMobile && (
      <div style={{
        position: 'absolute', left: '50%', transform: 'translateX(-50%)',
        display: 'flex', gap: 2, alignItems: 'center',
      }}>
        {navItems.map(item => (
          <div
            key={item.key}
            style={{ position: 'relative' }}
            onMouseEnter={(e) => item.mega && openMega(item.key, e.currentTarget)}
            onMouseLeave={scheduleClose}
          >
            <button
              onClick={(e) => item.href ? onLink(item.href) : openMega(item.key, e.currentTarget.parentElement)}
              onFocus={(e) => item.mega && openMega(item.key, e.currentTarget.parentElement)}
              aria-haspopup={item.mega ? 'true' : undefined}
              aria-expanded={item.mega ? openMenu === item.key : undefined}
              style={{
                fontFamily: 'var(--font-text)', fontSize: 13.5, fontWeight: 500,
                color: openMenu === item.key ? '#f7f8f8' : '#a8aeb8',
                padding: '7px 12px', borderRadius: 7,
                border: 'none', background: openMenu === item.key ? '#141516' : 'transparent',
                cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap',
                transition: 'color 150ms ease-out, background 150ms ease-out',
              }}
              onMouseEnter={e => e.currentTarget.style.color = '#f7f8f8'}
              onMouseLeave={e => { if (openMenu !== item.key) e.currentTarget.style.color = '#a8aeb8'; }}
            >
              {item.label}
              {item.mega && (
                <Icon name="chevronDown" size={11} color="currentColor" strokeWidth={2}
                  style={{ transition: 'transform 200ms', transform: openMenu === item.key ? 'rotate(180deg)' : 'none' }} />
              )}
            </button>
          </div>
        ))}
      </div>
      )}

      {/* Right — actions (desktop) */}
      {!isMobile && (
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center', width: 200, justifyContent: 'flex-end' }}>
        <button
          onClick={() => window.location.href = rootHref('/contact/')}
          style={{
            fontFamily: 'var(--font-text)', fontSize: 13, fontWeight: 500,
            background: '#5e6ad2', color: '#fff',
            border: 'none', borderRadius: 8,
            padding: '7px 13px', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap',
            transition: 'background 150ms ease-out',
          }}
          onMouseEnter={e => e.currentTarget.style.background = '#828fff'}
          onMouseLeave={e => e.currentTarget.style.background = '#5e6ad2'}
        >
          Get a quote
          <Icon name="arrowRight" size={12} color="#fff" strokeWidth={2.2} />
        </button>
      </div>
      )}

      {/* Hamburger (mobile) */}
      {isMobile && (
        <button
          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen(o => !o)}
          style={{
            marginLeft: 'auto', width: 40, height: 40, borderRadius: 9,
            background: mobileOpen ? '#141516' : 'transparent',
            border: `1px solid ${mobileOpen ? '#34343a' : '#23252a'}`,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          }}
        >
          <Icon name={mobileOpen ? 'close' : 'menu'} size={20} color="#f7f8f8" strokeWidth={2} />
        </button>
      )}
    </nav>

    {/* Mega menu — sibling of <nav> so it escapes the nav's backdrop-filter and the
        center container's transform (both create containing blocks that would trap
        a position:fixed panel). This keeps the viewport clamp accurate. */}
    {!isMobile && openMenu && (() => {
      const it = navItems.find(n => n.key === openMenu);
      return it && it.mega ? (
        <MegaMenu mega={it.mega} onLink={onLink} anchorX={anchorX} onEnter={cancelClose} onLeave={scheduleClose} />
      ) : null;
    })()}

    {isMobile && mobileOpen && (
      <MobileMenu
        navItems={navItems}
        onLink={onLink}
        onClose={() => setMobileOpen(false)}
        ctaHref={rootHref('/contact/')}
      />
    )}
    <BackToTop />
    </>
  );
};

// Floating back-to-top — appears after one viewport of scroll, site-wide via Nav
const BackToTop = () => {
  const [show, setShow] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 1.2);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button
      aria-label="Back to top"
      aria-hidden={!show}
      tabIndex={show ? 0 : -1}
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'fixed', right: 22, bottom: 22, zIndex: 900,
        width: 38, height: 38, borderRadius: 10,
        background: hover ? '#18191a' : '#0f1011',
        border: `1px solid ${hover ? '#3e3e44' : '#23252a'}`,
        color: '#a8aeb8', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        opacity: show ? 1 : 0,
        transform: show ? 'translateY(0)' : 'translateY(10px)',
        pointerEvents: show ? 'auto' : 'none',
        transition: 'opacity 200ms ease-out, transform 200ms ease-out, background 150ms ease-out, border-color 150ms ease-out',
      }}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5"></path><path d="M5 12l7-7 7 7"></path></svg>
    </button>
  );
};

const MegaMenu = ({ mega, onLink, anchorX = 0, onEnter, onLeave }) => {
  const cols = mega.columns;
  const hasFeature = !!mega.feature;
  const width = cols.length === 3 ? 1100 : cols.length === 2 ? (hasFeature ? 880 : 720) : 380;
  // Clamp the panel inside the viewport: center on the trigger, but never
  // let an edge cross the 12px gutter on either side.
  const [vw, setVw] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const onResize = () => setVw(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const GUTTER = 12;
  const actualW = Math.min(width, vw - GUTTER * 2);
  let left = anchorX - actualW / 2;
  left = Math.max(GUTTER, Math.min(left, vw - actualW - GUTTER));
  return (
    <div
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      onFocus={onEnter}
      onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) onLeave(); }}
      style={{
        position: 'fixed', top: 52, left,
        paddingTop: 8, zIndex: 99,
      }}>
      <div style={{
        width: actualW,
        background: 'linear-gradient(180deg, #15161a 0%, #0e0f12 100%)',
        border: '1px solid #2a2c33', borderRadius: 16,
        padding: 0,
        boxShadow: '0 32px 80px -16px rgba(0,0,0,0.85), 0 0 0 1px rgba(94,105,210,0.10) inset, 0 0 80px -20px rgba(94,105,210,0.25)',
        overflow: 'hidden', position: 'relative',
        transformOrigin: 'top center',
        animation: 'gs-mega-in 220ms cubic-bezier(.2,.8,.2,1) both',
      }}>
      {/* Animated accent line at top */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1, overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(90deg, transparent, rgba(94,105,210,0.7) 50%, transparent)',
          backgroundSize: '50% 100%',
          animation: 'gs-mega-sweep 3.6s ease-in-out infinite',
        }} />
      </div>

      {/* Soft moving glow */}
      <div style={{
        position: 'absolute', top: -60, left: '20%', width: 360, height: 200,
        background: 'radial-gradient(ellipse at center, rgba(94,105,210,0.16), transparent 70%)',
        pointerEvents: 'none',
        animation: 'gs-mega-drift 8s ease-in-out infinite alternate',
      }} />

      {/* Header */}
      <div style={{
        padding: '14px 20px 12px', borderBottom: '1px solid #1a1b1e',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500, color: '#f7f8f8' }}>{mega.title}</div>
          <div style={{ fontSize: 11.5, color: '#62666d', marginTop: 1 }}>{mega.subtitle}</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols.length}, 1fr)${hasFeature ? ' 280px' : ''}`, gap: 0 }}>
        {cols.map((col, ci) => (
          <div key={col.heading} style={{
            padding: '14px 16px',
            borderRight: ci < cols.length - 1 || hasFeature ? '1px solid #1a1b1e' : 'none',
          }}>
            <div style={{
              fontSize: 10.5, fontWeight: 500, color: '#62666d',
              letterSpacing: '0.5px', textTransform: 'uppercase',
              padding: '4px 8px', marginBottom: 4,
            }}>{col.heading}</div>
            {col.items.map((it, ii) => (
              <button
                key={it.label}
                onClick={() => onLink(it.href)}
                style={{
                  width: '100%', display: 'flex', alignItems: 'flex-start', gap: 11,
                  padding: '9px 8px', borderRadius: 8, textAlign: 'left',
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  transition: 'background 120ms ease-out, transform 160ms ease-out',
                  animation: `gs-mega-item ${260 + ii * 50}ms cubic-bezier(.2,.8,.2,1) both`,
                }}
                onMouseEnter={e => { e.currentTarget.style.background = '#1a1b22'; e.currentTarget.style.transform = 'translateX(2px)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.transform = 'translateX(0)'; }}
              >
                <div style={{
                  width: 28, height: 28, borderRadius: 7,
                  background: 'linear-gradient(180deg, rgba(94,105,210,0.15), rgba(94,105,210,0.04))',
                  border: '1px solid rgba(94,105,210,0.22)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  <Icon name={it.icon} size={13} color="#828fff" />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: '#f7f8f8', marginBottom: 1 }}>{it.label}</div>
                  <div style={{ fontSize: 11.5, color: '#8a8f98', lineHeight: 1.4 }}>{it.desc}</div>
                </div>
              </button>
            ))}
          </div>
        ))}

        {hasFeature && (
          <button
            onClick={() => onLink(mega.feature.href)}
            style={{
              padding: 18, textAlign: 'left', cursor: 'pointer',
              background: 'linear-gradient(155deg, rgba(94,105,210,0.10) 0%, rgba(94,105,210,0.02) 100%)',
              border: 'none',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 12,
              position: 'relative', overflow: 'hidden',
            }}
          >
            <div style={{
              position: 'absolute', top: -40, right: -40, width: 160, height: 160,
              background: 'radial-gradient(circle, rgba(94,105,210,0.18) 0%, transparent 70%)',
              pointerEvents: 'none',
            }} />
            <div style={{ position: 'relative' }}>
              <span style={{
                fontSize: 10, fontWeight: 600, color: '#828fff',
                background: 'rgba(94,105,210,0.18)', borderRadius: 9999,
                padding: '2px 8px', letterSpacing: '0.5px', textTransform: 'uppercase',
              }}>{mega.feature.tag}</span>
              <h4 style={{
                fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600,
                letterSpacing: '-0.4px', color: '#f7f8f8',
                margin: '12px 0 8px',
              }}>{mega.feature.title}</h4>
              <p style={{ fontSize: 12.5, color: '#a8aeb8', lineHeight: 1.5, margin: 0 }}>{mega.feature.desc}</p>
            </div>
            <div style={{
              fontSize: 12, fontWeight: 500, color: '#828fff',
              display: 'inline-flex', alignItems: 'center', gap: 5, position: 'relative',
            }}>
              {mega.feature.cta}
              <Icon name="arrowRight" size={11} color="#828fff" strokeWidth={2.2} />
            </div>
          </button>
        )}
      </div>
    </div>
    </div>
  );
};

Object.assign(window, { Nav, MegaMenu, useIsMobile, MobileMenu });