/* These preview files are <script type="text/babel"> sharing ONE global
   scope, not modules — hooks and components come off `window`, so eslint
   reads every one of them as undefined. Declaring them here clears 20 of
   the 24 errors this file carried, rather than adding to the pile while
   touching it. The 2 that remain are real @next/next findings.

   The lint baseline recorded 22 for this file while main actually lints at
   24, so the ratchet was already failing anyone who edited it. */
/* global IconArrowDown, IconClose */

/* ============================================================
 * Top Navbar, sticky, LIGHT mega-menu, mobile drawer
 * Items: Home · Platform (mega) · Resources (dropdown) · Pricing
 * Right: Login · Book a demo
 *
 * Mega menu mirrors the homepage's 6-module section EXACTLY:
 *   Knowledge Base · Channels · CRM · CDP · Campaigns & Journeys · Loyalty
 * Same names. Same one-line promises. Same order.
 * ============================================================ */

/* Module list, single source of truth, also used by mobile drawer & footer.
   Mirrors the 6 cards in section-rest.jsx (homepage).

   Each entry used to carry a `hue`, and those hues came from tokens named
   for third-party channels: Loyalty was Facebook blue, B2B CRM was
   Booking.com yellow, CRM and Guest Memories were both Instagram pink, and
   Knowledge was the brand accent itself. The fields are gone rather than
   merely unused, because a dead `hue: "var(--c-facebook)"` sitting on
   Loyalty is an invitation to wire it back up. Modules are told apart by
   their icon. */
const platformModules = [
  {
    slug: "knowledge",
    label: "Knowledge",
    sub: "What your hotel knows. What your guests have told you: never asked twice.",
    icon: "IconKnowledge",
    children: [
      {
        slug: "brain",
        href: "platform/knowledge.html",
        label: "Hotel Brain",
        sub: "The hotel's facts, in any language, on every channel.",
        icon: "IconKnowledge",
      },
      {
        slug: "memory",
        href: "platform/memory.html",
        label: "Guest Memories",
        sub: "Every preference, captured automatically, retrieved on demand.",
        icon: "IconMemory",
      },
    ],
  },
  {
    slug: "channels",
    label: "Channels",
    sub: "Every guest conversation, on every channel, in one shared inbox.",
    icon: "IconInbox",
    children: [
      {
        slug: "inbox",
        href: "platform/inbox.html",
        label: "Inboxes",
        sub: "WhatsApp · Meta · OTAs · Email · Web Chat",
        icon: "IconInbox",
      },
      {
        slug: "voice",
        href: "platform/voice.html",
        label: "Voice Agent",
        sub: "Always-on AI phone. Bookings, FAQs, transfers.",
        icon: "IconVoiceModule",
      },
    ],
  },
  {
    /* Split into two on 2026-08-12, the same shape as Channels above: the
       parent is a heading with no href of its own, and the children carry
       the links. The existing page becomes B2C explicitly — it always was
       B2C, it just had no sibling forcing it to say so. */
    slug: "crm",
    label: "CRM",
    sub: "One CRM for the guests who stay and the accounts that send them.",
    icon: "IconCRM",
    children: [
      {
        slug: "crm",
        href: "platform/crm.html",
        label: "B2C CRM",
        sub: "A CRM built around bookings, not emails. Guests, stays and stages.",
        icon: "IconCRM",
      },
      {
        slug: "crm-b2b",
        href: "platform/crm-b2b.html",
        label: "B2B CRM",
        sub: "Agencies, tour operators, DMCs and corporate accounts.",
        icon: "IconB2B",
      },
    ],
  },
  {
    slug: "cdp",
    href: "platform/cdp.html",
    label: "CDP",
    sub: "One guest, even when your PMS and booking engine disagree.",
    icon: "IconCDP",
  },
  {
    slug: "journeys",
    href: "platform/journeys.html",
    label: "Campaigns & Journeys",
    sub: "Email and WhatsApp campaigns plus omnichannel automation.",
    icon: "IconJourneys",
  },
  {
    slug: "loyalty",
    href: "platform/loyalty.html",
    label: "Loyalty",
    sub: "A loyalty engine sophisticated enough for any hotel group.",
    icon: "IconLoyalty",
  },
];

/* Tiny module icons: stroked outlines, one family, one weight.
 *
 * They inherit `currentColor` so the chip decides the colour — that is what
 * lets the whole set go monochrome without touching a single glyph. The
 * `color` prop is kept for callers that still pass one.
 *
 * strokeWidth is 1.5 to match the design system; it was 1.6 here, which is
 * invisible on its own and exactly how an icon set drifts out of a system.
 *
 * The paths below (all but IconMemory) are lucide-react's own icon data,
 * copied verbatim from node_modules/lucide-react/dist/esm/icons/*.js (ISC
 * licensed) — not redrawn by hand. The real app uses lucide-react in 1,298
 * files; this marketing site had its own hand-approximated shapes instead,
 * which is exactly the inconsistency that made this menu read as a
 * different, lower-quality product next to the one a prospect logs into.
 * IconMemory keeps its original two-lobe path rather than swapping to
 * Lucide's own (more detailed, 8-path) brain — it's the same glyph already
 * shipped and approved on the homepage hero's "AI Guest Memory" badge, and
 * matching that is worth more here than matching Lucide on this one icon. */
const ModIcon = ({ size = 22, color, children }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color || "currentColor"} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {children}
  </svg>
);
const IconInbox       = (p) => <ModIcon {...p}><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" /></ModIcon>;
const IconVoiceModule = (p) => <ModIcon {...p}><path d="M12 19v3" /><path d="M19 10v2a7 7 0 0 1-14 0v-2" /><rect x="9" y="2" width="6" height="13" rx="3" /></ModIcon>;
const IconJourneys    = (p) => <ModIcon {...p}><rect width="8" height="8" x="3" y="3" rx="2" /><path d="M7 11v4a2 2 0 0 0 2 2h4" /><rect width="8" height="8" x="13" y="13" rx="2" /></ModIcon>;
const IconCRM         = (p) => <ModIcon {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path d="M16 3.128a4 4 0 0 1 0 7.744" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" /></ModIcon>;
/* Two records resolving into one guest — the thing the CDP actually does,
   and what its own card says: "One guest, even when your PMS says otherwise."
   It was a database cylinder: the single infrastructure metaphor in a set of
   otherwise human ones (a person, a brain, a book, a microphone). Lucide's
   own "blend" icon turned out to already be exactly this: two overlapping
   circles, same concept, just Lucide's own precise proportions. */
const IconCDP         = (p) => <ModIcon {...p}><circle cx="9" cy="9" r="7" /><circle cx="15" cy="15" r="7" /></ModIcon>;
const IconKnowledge   = (p) => <ModIcon {...p}><path d="M12 7v14" /><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" /></ModIcon>;
const IconMemory      = (p) => <ModIcon {...p}><path d="M9 4a3 3 0 0 0-3 3v0a3 3 0 0 0-2 5v0a3 3 0 0 0 2 5v0a3 3 0 0 0 3 3h.5a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H9z" /><path d="M15 4a3 3 0 0 1 3 3v0a3 3 0 0 1 2 5v0a3 3 0 0 1-2 5v0a3 3 0 0 1-3 3h-.5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2H15z" /></ModIcon>;
/* A tier medal, not a heart.
   The heart lost twice: the GuestMaker mark carries its own heart-shaped
   fuchsia accent about 40px away in the same bar, so the nav showed two; and
   a heart reads as "favourite", where this module is tiers, points and
   status. A medal says status. Lucide's "award" is the same medal-on-ribbon
   shape, just properly drawn. */
const IconLoyalty     = (p) => <ModIcon {...p}><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" /><circle cx="12" cy="8" r="6" /></ModIcon>;
const IconB2B         = (p) => <ModIcon {...p}><path d="M10 12h4" /><path d="M10 8h4" /><path d="M14 21v-3a2 2 0 0 0-4 0v3" /><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2" /><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16" /></ModIcon>;

const moduleIconMap = { IconInbox, IconVoiceModule, IconJourneys, IconCRM, IconCDP, IconKnowledge, IconMemory, IconLoyalty, IconB2B };

/* === Mega menu, LIGHT, 3-col card grid === */
const PlatformMega = ({ open, onClose, basePath = "" }) => {
  if (!open) return null;
  return (
    <div className="gm-mega" onMouseLeave={onClose}>
      <div className="gm-mega-inner">
        <div className="gm-mega-head">
          <div className="gm-mega-eyebrow">Platform</div>
          <div className="gm-mega-title">One AI system. <span className="italic-accent">Every guest, every channel, every stay.</span></div>
        </div>
        <div className="gm-mega-grid">
          {platformModules.map((m) => {
            const Ic = moduleIconMap[m.icon];

            /* A card with children is a GROUP, not a link.
             *
             * It used to be an <a> pointing at its first child, with the
             * children as role="link" spans revealed on hover. Three things
             * were wrong with that. The reveal never worked — the collapsed
             * wrapper measured 59px, so every parent card carried that much
             * invisible content and the first row stood 156px against the
             * second's 94px, which is the empty band that made the panel look
             * broken. The children stayed in the tab order while invisible, so
             * a keyboard user tabbed through six destinations they could not
             * see. And spans cannot be cmd-clicked, middle-clicked or opened
             * in a new tab, which is most of what people do to a nav.
             *
             * All three came from one decision: wrapping links in a link. So
             * the parent is now a plain container, the children are real
             * anchors, and they are always visible. The row already reserved
             * the height; it now holds something usable. Progressive
             * disclosure inside an already-disclosed menu was never earning
             * its keep. */
            if (m.children) {
              return (
                <div key={m.slug} className="gm-mega-card gm-mega-card-group">
                  <span className="gm-mega-card-icon" aria-hidden="true">
                    <Ic size={22} />
                  </span>
                  <div className="gm-mega-card-body">
                    <h3 className="gm-mega-card-label">{m.label}</h3>
                    <p className="gm-mega-card-sub">{m.sub}</p>
                    <div className="gm-mega-children">
                      {m.children.map((c) => {
                        const CIc = moduleIconMap[c.icon];
                        return (
                          <a key={c.slug} href={`${basePath}${c.href}`} className="gm-mega-child">
                            <span className="gm-mega-child-icon" aria-hidden="true">
                              <CIc size={18} />
                            </span>
                            <span className="gm-mega-child-label">{c.label}</span>
                            <IconArrow size={10} className="gm-mega-child-arrow" />
                          </a>
                        );
                      })}
                    </div>
                  </div>
                </div>
              );
            }
            return (
              <a key={m.slug} href={`${basePath}${m.href}`} className="gm-mega-card">
                <span className="gm-mega-card-icon" aria-hidden="true">
                  <Ic size={22} />
                </span>
                <div className="gm-mega-card-body">
                  <h3 className="gm-mega-card-label">{m.label}</h3>
                  <p className="gm-mega-card-sub">{m.sub}</p>
                </div>
              </a>
            );
          })}
        </div>
        <div className="gm-mega-foot">
          <a href={`${basePath}integrations.html`} className="gm-mega-foot-link">
            <span className="gm-mega-foot-dot" /> Integrations <span className="gm-mega-foot-meta">PMS · OTA · Booking · Voice · Email</span>
          </a>
          <a href={`${basePath}pricing.html`} className="gm-mega-foot-link">
            <span className="gm-mega-foot-dot" /> Pricing <span className="gm-mega-foot-meta">Core · Signature · Enterprise</span>
          </a>
        </div>
      </div>
    </div>
  );
};

const SectionNav = ({ basePath = "", current = "home" }) => {
  const [scrolled, setScrolled] = useState(false);
  const [megaOpen, setMegaOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [mobileMegaOpen, setMobileMegaOpen] = useState(false);

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

  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const navItems = [
    { key: "home",         label: "Home",         href: `${basePath}index-v2.html` },
    { key: "platform",     label: "Platform",     mega: true },
    /* Resources replaced Integrations as a top-level item. Integrations did
        not disappear, it moved one level down and gained a sibling. The
        dropdown is CSS-driven on hover and :focus-within rather than
        stateful — it holds two links, and a second piece of open/close
        state next to the mega menu is a needless way for the two to
        disagree. */
    { key: "resources", label: "Resources", items: [
      { label: "Developers Documentation", href: "/developers", sub: "API reference, SDKs, sandbox and changelog" },
      { label: "Integrations", href: `${basePath}integrations.html`, sub: "PMS, OTA, booking engines, voice and email" },
      { label: "Blog", href: "/blog", sub: "Guides and product news for hotel groups" },
    ] },
    { key: "pricing",      label: "Pricing",      href: `${basePath}pricing.html` },
  ];

  return (
    <>
      <nav className={`gm-nav ${scrolled ? "scrolled" : ""}`} onMouseLeave={() => setMegaOpen(false)}>
        <div className="gm-nav-inner">
          <a href={`${basePath}index-v2.html`} className="gm-nav-logo">
            <span className="gm-nav-mark"><GMMark size={28} /></span>
            <span className="gm-nav-word">GuestMaker</span>
          </a>

          <div className="gm-nav-center">
            {navItems.map((it) => (
              <div
                key={it.key}
                className={`gm-nav-item ${current === it.key ? "active" : ""}`}
                /* Moving onto any other item closes the mega. Without this it
                   stays open until the pointer leaves the whole nav, so hovering
                   Resources drew its dropdown on top of a still-open Platform
                   panel: two menus at once. */
                onMouseEnter={it.mega ? () => setMegaOpen(true) : () => setMegaOpen(false)}
              >
                {it.mega ? (
                  <button
                    type="button"
                    className="gm-nav-link gm-nav-link-btn"
                    onClick={() => setMegaOpen(v => !v)}
                    aria-expanded={megaOpen}
                  >
                    {it.label}
                    <span className="gm-nav-caret"><IconArrowDown size={11} stroke={2} /></span>
                  </button>
                ) : it.items ? (
                  <>
                    <button type="button" className="gm-nav-link gm-nav-link-btn" aria-haspopup="true">
                      {it.label}
                      <span className="gm-nav-caret"><IconArrowDown size={11} stroke={2} /></span>
                    </button>
                    <div className="gm-drop">
                      {it.items.map((sub) => (
                        <a key={sub.href} className="gm-drop-item" href={sub.href}>
                          <span className="gm-drop-label">{sub.label}</span>
                          <span className="gm-drop-sub">{sub.sub}</span>
                        </a>
                      ))}
                    </div>
                  </>
                ) : (
                  <a href={it.href} className="gm-nav-link">{it.label}</a>
                )}
              </div>
            ))}
          </div>

          <div className="gm-nav-right">
            <a href="https://guestmaker.ai/login" className="gm-nav-login">Login</a>
            <a href={DEMO_URL} className="gm-nav-cta">
              Book a demo <IconArrow size={13} />
            </a>
            <button className="gm-nav-burger" onClick={() => setMobileOpen(true)} aria-label="Open menu">
              <span /><span /><span />
            </button>
          </div>
        </div>

        <PlatformMega open={megaOpen} onClose={() => setMegaOpen(false)} basePath={basePath} />
      </nav>

      {/* Mobile drawer */}
      <div className={`gm-mob ${mobileOpen ? "open" : ""}`}>
        <div className="gm-mob-head">
          <a href={`${basePath}index-v2.html`} className="gm-nav-logo">
            <span className="gm-nav-mark"><GMMark size={28} /></span>
            <span className="gm-nav-word">GuestMaker</span>
          </a>
          <button className="gm-mob-close" onClick={() => setMobileOpen(false)} aria-label="Close menu"><IconClose size={20} stroke={1.6} /></button>
        </div>
        <div className="gm-mob-body">
          <a className="gm-mob-link" href={`${basePath}index-v2.html`}>Home</a>
          <button className="gm-mob-link expand" onClick={() => setMobileMegaOpen(v => !v)}>
            <span>Platform</span>
            <span className={`gm-mob-chev ${mobileMegaOpen ? "open" : ""}`}><IconArrowDown size={14} stroke={2} /></span>
          </button>
          {mobileMegaOpen && (
            <div className="gm-mob-sub">
              {platformModules.flatMap(m => {
                if (m.children) {
                  // Show parent label + children
                  return [
                    <div key={`${m.slug}-head`} className="gm-mob-sub-head">{m.label}</div>,
                    ...m.children.map(c => (
                      <a key={c.slug} href={`${basePath}${c.href}`} className="gm-mob-sub-link">
                        <span className="gm-mob-sub-dot" />
                        <span>
                          <span className="gm-mob-sub-label">{c.label}</span>
                          <span className="gm-mob-sub-sub">{c.sub}</span>
                        </span>
                      </a>
                    )),
                  ];
                }
                return [(
                  <a key={m.slug} href={`${basePath}${m.href}`} className="gm-mob-sub-link">
                    <span className="gm-mob-sub-dot" />
                    <span>
                      <span className="gm-mob-sub-label">{m.label}</span>
                      <span className="gm-mob-sub-sub">{m.sub}</span>
                    </span>
                  </a>
                )];
              })}
            </div>
          )}
          <a className="gm-mob-link" href="/developers">Developers Documentation</a>
          <a className="gm-mob-link" href={`${basePath}integrations.html`}>Integrations</a>
          <a className="gm-mob-link" href={`${basePath}pricing.html`}>Pricing</a>
          <div className="gm-mob-cta">
            <a href="https://guestmaker.ai/login" className="gm-mob-login">Login</a>
            <a href={DEMO_URL} className="gm-mob-book">Book a demo <IconArrow size={14} /></a>
          </div>
        </div>
      </div>

      <style>{`
        :root { --gm-nav-h: 68px; }
        body { padding-top: var(--gm-nav-h); }

        .gm-nav {
          position: fixed; top: 0; left: 0; right: 0; z-index: 80;
          background: color-mix(in srgb, var(--bg) 80%, transparent);
          backdrop-filter: saturate(180%) blur(14px);
          -webkit-backdrop-filter: saturate(180%) blur(14px);
          border-bottom: 1px solid transparent;
          transition: border-color .25s ease, background .25s ease;
        }
        .gm-nav.scrolled {
          background: color-mix(in srgb, var(--bg) 92%, transparent);
          border-bottom-color: var(--hairline);
        }
        .gm-nav-inner {
          max-width: var(--max-w);
          margin: 0 auto;
          height: var(--gm-nav-h);
          padding: 0 var(--gutter);
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: 40px;
        }

        /* Logo */
        .gm-nav-logo {
          display: inline-flex; align-items: center; gap: 10px;
          color: var(--ink); font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
          font-family: var(--f-sans);
        }
        .gm-nav-mark { width: 30px; height: 30px; display: grid; place-items: center; }

        /* Center links */
        .gm-nav-center {
          display: flex; gap: 4px; justify-content: center;
        }
        .gm-nav-item { position: relative; }
        .gm-nav-link {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 10px 14px;
          font-size: 14px; font-weight: 500;
          color: var(--ink-2);
          border-radius: 8px;
          transition: color .15s ease, background .15s ease;
        }
        .gm-nav-link-btn { background: none; border: 0; cursor: pointer; font-family: inherit; }
        .gm-nav-item:hover .gm-nav-link,
        .gm-nav-item.active .gm-nav-link { color: var(--ink); }
        .gm-nav-link:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
        .gm-nav-caret { display: inline-flex; opacity: .55; transition: transform .2s ease; }
        .gm-nav-item:hover .gm-nav-caret { transform: rotate(180deg); }

        /* Right side */
        .gm-nav-right { display: flex; gap: 8px; align-items: center; }
        .gm-nav-login {
          padding: 9px 14px;
          font-size: 14px; font-weight: 500;
          color: var(--ink-2);
          border-radius: 8px;
          transition: color .15s ease, background .15s ease;
        }
        .gm-nav-login:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
        .gm-nav-cta {
          display: inline-flex; align-items: center; gap: 7px;
          padding: 10px 16px;
          font-size: 14px; font-weight: 500;
          background: var(--ink); color: var(--bg);
          border-radius: 999px;
          border: 1px solid var(--ink);
          transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
        }
        .gm-nav-cta:hover {
          background: var(--accent); border-color: var(--accent);
          color: white;
          transform: translateY(-1px);
          box-shadow: 0 12px 30px -12px var(--accent-glow);
        }

        .gm-nav-burger { display: none; flex-direction: column; gap: 4px; padding: 8px; border-radius: 8px; }
        .gm-nav-burger span { width: 18px; height: 1.6px; background: var(--ink); border-radius: 2px; }

        /* === Mega menu, LIGHT === */
        .gm-mega {
          position: absolute; top: 100%; left: 0; right: 0;
          background: var(--bg);
          border-top: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
          color: var(--ink);
          animation: gmMegaIn .22s ease;
          box-shadow: 0 24px 50px -28px rgba(20,18,15,0.12);
        }
        @keyframes gmMegaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
        .gm-mega-inner {
          max-width: var(--max-w);
          margin: 0 auto;
          padding: 36px var(--gutter) 28px;
        }
        .gm-mega-head {
          display: grid;
          grid-template-columns: auto 1fr;
          align-items: end;
          gap: 32px;
          padding-bottom: 24px;
          margin-bottom: 24px;
          border-bottom: 1px solid var(--hairline);
        }
        .gm-mega-eyebrow {
          font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--accent);
        }
        .gm-mega-eyebrow::before {
          content: ""; display: inline-block; width: 24px; height: 1px; background: var(--accent);
          margin-right: 10px; vertical-align: middle;
        }
        .gm-mega-title {
          font-family: var(--f-display); font-size: 22px; line-height: 1.25; color: var(--ink);
          letter-spacing: -0.01em;
          max-width: 580px;
        }
        .gm-mega-all {
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
          color: var(--ink-2); padding: 8px 14px; border-radius: 999px;
          border: 1px solid var(--hairline-strong);
          transition: all .15s ease;
          white-space: nowrap;
        }
        /* The color property was declared twice here; the first was dead.
           NOTE: no backticks in comments inside this block — the whole
           stylesheet is a template literal, so one would end the string. */
        .gm-mega-all:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

        /* Resources dropdown — moved here from styles.css.
         *
         * A colleague hit this rendering as raw inline text: label and sub
         * ran together and the panel pushed "Pricing" across the bar,
         * which is what you see when position:absolute never applies. The
         * rules were present and correct in production, so the panel had
         * markup from one version and CSS from another.
         *
         * That is possible because index-v2.html loads this script as
         * section-nav.jsx?v=8 but the stylesheet as a bare styles.css.
         * The markup was versioned; the CSS was not. Keeping a component's
         * styles in a separate, differently-cached file is the bug — so
         * they now travel together and cannot desync.
         *
         * hero-cinematic.css still re-points the palette variables for the
         * cinematic hero; that selector is more specific and unaffected. */
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 4px);
  min-width: 290px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 30px 60px -40px rgba(26, 20, 26, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 220ms;
  z-index: 60;
}
        .gm-nav-item:hover .gm-drop,
        .gm-nav-item:focus-within .gm-drop {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
/* The gap between the trigger and the panel would otherwise drop the hover
   the moment the pointer crosses it. */
        .gm-drop {
          position: absolute;
          top: 100%; left: 50%;
          transform: translate(-50%, 4px);
          min-width: 290px;
          padding: 8px;
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 14px;
          box-shadow: 0 30px 60px -40px rgba(26, 20, 26, 0.45);
          opacity: 0; visibility: hidden;
          transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
                      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
                      visibility 0s linear 220ms;
          z-index: 60;
        }
        .gm-nav-item:hover .gm-drop,
        .gm-nav-item:focus-within .gm-drop {
          opacity: 1; visibility: visible;
          transform: translate(-50%, 0);
          transition-delay: 0s;
        }
        /* The gap between the trigger and the panel would otherwise drop the
           hover the moment the pointer crosses it. */
        .gm-drop::before {
          content: ""; position: absolute;
          left: 0; right: 0; top: -10px; height: 10px;
        }
        .gm-drop-item {
          display: block;
          padding: 11px 12px;
          border-radius: 10px;
          text-decoration: none;
          transition: background 200ms ease;
        }
        .gm-drop-item:hover, .gm-drop-item:focus-visible { background: var(--bg-elev-2); }
        /* Deliberately the same two-line treatment as .gm-mega-card-label /
           .gm-mega-card-sub below. Both panels hang off the same bar and carry
           the same kind of content — a name and a one-line description — so
           they are one system or they are two.
           The sub was mono 9.5px with 0.08em tracking: the eyebrow style this
           site uses for THE PLATFORM BEHIND THE STAY and 1 MIN 18 SEC. That is
           a label treatment, and it was being applied to a running sentence,
           which is both off-system and needlessly hard to read. */
        .gm-drop-label {
          display: block;
          font-family: var(--f-display);
          font-size: 17px; font-weight: 400; color: var(--ink);
          line-height: 1.25; letter-spacing: -0.01em;
        }
        .gm-drop-sub {
          display: block; margin-top: 3px;
          font-family: var(--f-sans);
          font-size: 13px; color: var(--ink-2); line-height: 1.45;
        }
        @media (prefers-reduced-motion: reduce) { .gm-drop { transition-duration: 1ms; } }

        .gm-mega-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 4px;
          align-items: start;
        }
        .gm-mega-card {
          display: flex; gap: 14px; align-items: flex-start;
          padding: 16px;
          border-radius: 10px;
          color: inherit;
          transition: background .15s ease;
        }
        a.gm-mega-card:hover { background: var(--bg-elev-1); }
        /* A group is not hoverable as a whole — its children are the targets,
           so lighting the container up would promise a click it cannot honour. */
        .gm-mega-card-group { align-self: start; }

        .gm-mega-children {
          display: flex; flex-direction: column; gap: 4px;
          margin-top: 10px;
        }
        .gm-mega-child {
          display: flex; align-items: center; gap: 8px;
          padding: 7px 10px;
          border-radius: 7px;
          background: var(--bg);
          border: 1px solid var(--hairline);
          color: var(--ink);
          font-size: 12.5px; font-weight: 500;
          font-family: var(--f-sans);
          transition: border-color .15s ease, background .15s ease, transform .15s ease;
        }
        .gm-mega-child:hover {
          border-color: var(--hairline-strong);
          background: var(--bg-elev-1);
          transform: translateX(2px);
        }
        .gm-mega-child-icon {
          /* Was 16px holding a 13px glyph (a 1.5 stroke on a 24-unit viewBox
             scaled to 13px renders under 1 real CSS pixel — sub-pixel
             anti-aliases into a blur, not a line). Now sized to exactly
             match the 18px glyph instead of leaving a gap around it. */
          width: 18px; height: 18px;
          display: inline-grid; place-items: center;
          flex-shrink: 0;
          color: var(--ink-3);
        }
        .gm-mega-child:hover .gm-mega-child-icon { color: var(--accent); }
        .gm-mega-child-label { flex: 1; }
        .gm-mega-child-arrow { color: var(--ink-3); transition: transform .15s ease, color .15s ease; }
        .gm-mega-child:hover .gm-mega-child-arrow { color: var(--accent); transform: translateX(2px); }

        /* ONE ink-toned chip for every module.
         *
         * Each card used to carry its own hue, drawn from tokens named for
         * third-party channels — Loyalty rendered in Facebook blue, CRM and
         * Guest Memories both in Instagram pink, Knowledge in the brand
         * accent itself. So the same hex meant "Facebook" in the channels
         * section and "Loyalty" here, one hue identified three unrelated
         * modules, and at a 10% tint none of them were distinguishable
         * anyway: Campaigns and Loyalty both read as the same pale blue-grey.
         * It was paying the full cost of a rainbow for none of the benefit,
         * and spending the accent four ways in a panel that already uses it
         * on the eyebrow, the footer dots and the demo button.
         *
         * Modules are differentiated by their icon, which cannot collide.
         * Accent now appears on interaction only, one card at a time. */
        .gm-mega-card-icon {
          flex-shrink: 0;
          width: 40px; height: 40px;
          display: grid; place-items: center;
          border-radius: 9px;
          border: 1px solid var(--hairline-strong);
          background: color-mix(in srgb, var(--ink) 4%, transparent);
          color: var(--ink-2);
          transition: color .15s ease, border-color .15s ease;
        }
        a.gm-mega-card:hover .gm-mega-card-icon {
          color: var(--accent);
          border-color: color-mix(in srgb, var(--accent) 45%, transparent);
        }
        .gm-mega-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        /* Instrument Serif ships a single weight — the font-face is loaded as
           ital@0;1 with no weight axis — so the 500 that used to be here was a
           no-op the browser either ignored or faked. */
        .gm-mega-card-label {
          margin: 0;
          font-family: var(--f-display);
          font-size: 17px; font-weight: 400; color: var(--ink); line-height: 1.25;
          letter-spacing: -0.01em;
        }
        .gm-mega-card-sub {
          margin: 0;
          font-size: 13px; color: var(--ink-2); line-height: 1.45;
          font-family: var(--f-sans);
        }

        .gm-mega-foot {
          display: flex; gap: 28px;
          margin-top: 24px;
          padding-top: 20px;
          border-top: 1px solid var(--hairline);
          flex-wrap: wrap;
        }
        .gm-mega-foot-link {
          display: inline-flex; align-items: center; gap: 8px;
          font-size: 13px; color: var(--ink-2); font-weight: 500;
          font-family: var(--f-sans);
        }
        .gm-mega-foot-link:hover { color: var(--ink); }
        .gm-mega-foot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
        .gm-mega-foot-meta { color: var(--ink-3); font-size: 11.5px; font-family: var(--f-mono); margin-left: 4px; }

        /* === Mobile drawer === */
        .gm-mob {
          position: fixed; inset: 0;
          background: var(--bg);
          z-index: 90;
          transform: translateX(100%);
          transition: transform .28s cubic-bezier(.4,0,.2,1);
          overflow-y: auto;
        }
        .gm-mob.open { transform: translateX(0); }
        .gm-mob-head {
          display: flex; justify-content: space-between; align-items: center;
          padding: 18px 24px; border-bottom: 1px solid var(--hairline);
        }
        .gm-mob-close { padding: 8px; border-radius: 8px; color: var(--ink); }
        .gm-mob-body { padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
        .gm-mob-link {
          display: flex; align-items: center; justify-content: space-between;
          padding: 14px 16px;
          font-size: 16px; font-weight: 500; color: var(--ink);
          border-radius: 10px;
          width: 100%; text-align: left;
          background: none; border: 0;
        }
        .gm-mob-link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
        .gm-mob-chev { display: inline-flex; transition: transform .2s ease; opacity: .6; }
        .gm-mob-chev.open { transform: rotate(180deg); }
        .gm-mob-sub { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 12px 8px; }
        .gm-mob-sub-link {
          display: flex; gap: 12px; align-items: flex-start;
          padding: 12px 14px; border-radius: 10px;
        }
        .gm-mob-sub-link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
        .gm-mob-sub-head { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 14px 4px; }
        /* Same reasoning as the desktop chips: the drawer dots carried the same
           borrowed channel hues, so mobile showed a Facebook-blue dot for Loyalty.
           One ink dot; the label does the identifying. */
        .gm-mob-sub-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: var(--ink-3); }
        .gm-mob-sub-label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
        .gm-mob-sub-sub { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
        .gm-mob-cta {
          margin-top: 24px; padding: 16px;
          display: flex; flex-direction: column; gap: 10px;
          border-top: 1px solid var(--hairline);
        }
        .gm-mob-login {
          display: block; padding: 14px; text-align: center;
          font-weight: 500; color: var(--ink);
          border: 1px solid var(--hairline-strong); border-radius: 999px;
        }
        .gm-mob-book {
          display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          padding: 14px;
          font-weight: 500;
          background: var(--ink); color: var(--bg);
          border-radius: 999px;
        }

        @media (max-width: 900px) {
          .gm-nav-center { display: none; }
          .gm-nav-login, .gm-nav-cta { display: none; }
          .gm-nav-burger { display: inline-flex; }
          .gm-nav-inner { grid-template-columns: auto 1fr auto; gap: 16px; padding: 0 20px; }
          .gm-nav-inner > .gm-nav-center { display: none; }
        }
        @media (max-width: 1100px) {
          .gm-mega-grid { grid-template-columns: repeat(2, 1fr); }
          .gm-mega-head { grid-template-columns: 1fr; gap: 14px; }
        }
      `}</style>
    </>
  );
};

Object.assign(window, { SectionNav, platformModules, moduleIconMap });