{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-mega-menu",
  "title": "Header — Mega Menu",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/header-mega-menu/HeaderMegaMenu.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { ArrowRight, BarChart3, BookOpen, Boxes, LifeBuoy, Lock, Menu, Layers, Workflow } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/components/ui/navigation-menu'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst menus = [\n  {\n    label: 'Product',\n    groups: [\n      {\n        heading: 'Core',\n        items: [\n          { icon: Boxes, title: 'Metric layer', body: 'Versioned definitions your whole org shares.' },\n          { icon: BarChart3, title: 'Dashboards', body: 'Composed from certified metrics, not raw SQL.' },\n          { icon: Workflow, title: 'Pipelines', body: 'Scheduled materialisation with cost ceilings.' },\n        ],\n      },\n      {\n        heading: 'Governance',\n        items: [\n          { icon: Lock, title: 'Row-level access', body: 'Scope evaluated per query, per identity.' },\n          { icon: BookOpen, title: 'Change history', body: 'Every definition edit reviewed and revertible.' },\n          { icon: LifeBuoy, title: 'Audit exports', body: 'Generated from the same history, not by hand.' },\n        ],\n      },\n    ],\n    highlight: {\n      title: 'Ship your first dashboard today',\n      body: 'Connect a warehouse, publish one certified metric, and invite the team. No migration required.',\n      cta: 'Start the walkthrough',\n    },\n  },\n  {\n    label: 'Resources',\n    groups: [\n      {\n        heading: 'Learn',\n        items: [\n          { icon: BookOpen, title: 'Documentation', body: 'Setup, modelling, and the access model.' },\n          { icon: Layers, title: 'Guides', body: 'Reconciliation and first-close checklists.' },\n          { icon: BarChart3, title: 'Benchmarks', body: 'Close speed across 240 finance teams.' },\n        ],\n      },\n      {\n        heading: 'Support',\n        items: [\n          { icon: LifeBuoy, title: 'Help centre', body: 'Answers to the questions support gets most.' },\n          { icon: Workflow, title: 'Status', body: 'Live uptime and incident history.' },\n          { icon: Lock, title: 'Trust centre', body: 'SOC 2, subprocessors, and data residency.' },\n        ],\n      },\n    ],\n    highlight: {\n      title: 'Read the rollout plan',\n      body: 'The five-week implementation we run for every customer, written down so you can run it yourself.',\n      cta: 'Open the plan',\n    },\n  },\n]\n\nconst plainLinks = [\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n]\n\nexport function HeaderMegaMenu() {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <header data-slot=\"header-mega-menu\" className=\"border-border bg-background/90 border-b backdrop-blur\">\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n        <a href=\"#top\" className=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n          <Layers className=\"text-primary size-5\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n\n        <NavigationMenu className=\"hidden lg:flex\">\n          <NavigationMenuList>\n            {menus.map((menu) => (\n              <NavigationMenuItem key={menu.label}>\n                <NavigationMenuTrigger>{menu.label}</NavigationMenuTrigger>\n                <NavigationMenuContent>\n                  <div className=\"grid w-[46rem] grid-cols-[1fr_1fr_16rem] gap-6 p-6\">\n                    {menu.groups.map((group) => (\n                      <div key={group.heading}>\n                        <p className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">\n                          {group.heading}\n                        </p>\n                        <ul className=\"mt-3 space-y-1\">\n                          {group.items.map((item) => (\n                            <li key={item.title}>\n                              <a\n                                href=\"#\"\n                                className=\"hover:bg-muted focus-visible:ring-ring flex gap-3 rounded-md p-2 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                              >\n                                <item.icon\n                                  className=\"text-muted-foreground mt-0.5 size-4 shrink-0\"\n                                  aria-hidden=\"true\"\n                                />\n                                <span className=\"min-w-0\">\n                                  <span className=\"block text-sm font-medium\">{item.title}</span>\n                                  <span className=\"text-muted-foreground block text-xs leading-snug\">{item.body}</span>\n                                </span>\n                              </a>\n                            </li>\n                          ))}\n                        </ul>\n                      </div>\n                    ))}\n\n                    {/* Highlight rail: one promoted destination per panel, on the\n                        muted surface so it reads as an aside, not a sixth link. */}\n                    <div className=\"bg-muted/50 flex flex-col rounded-lg p-4\">\n                      <p className=\"text-sm font-semibold\">{menu.highlight.title}</p>\n                      <p className=\"text-muted-foreground mt-2 text-xs leading-relaxed\">{menu.highlight.body}</p>\n                      <Button variant=\"link\" className=\"mt-auto h-auto justify-start p-0 pt-4 text-xs\">\n                        {menu.highlight.cta}\n                        <ArrowRight className=\"ml-1 size-3\" aria-hidden=\"true\" />\n                      </Button>\n                    </div>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ))}\n\n            {plainLinks.map((link) => (\n              <NavigationMenuItem key={link.href}>\n                <a href={link.href} className={navigationMenuTriggerStyle()}>\n                  {link.label}\n                </a>\n              </NavigationMenuItem>\n            ))}\n          </NavigationMenuList>\n        </NavigationMenu>\n\n        <div className=\"ml-auto flex items-center gap-2\">\n          <Button variant=\"ghost\" size=\"sm\" className=\"hidden sm:inline-flex\">\n            Sign in\n          </Button>\n          <Separator orientation=\"vertical\" className=\"hidden h-5 sm:block\" />\n          <Button size=\"sm\">Book a demo</Button>\n        </div>\n\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"ml-auto lg:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"right\" className=\"w-72 overflow-y-auto\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav className=\"mt-6 grid gap-5\" aria-label=\"Mobile\">\n              {menus.map((menu) => (\n                <div key={menu.label}>\n                  <p className=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{menu.label}</p>\n                  <ul className=\"mt-2 grid gap-1\">\n                    {menu.groups.map((group) =>\n                      group.items.map((item) => (\n                        <li key={item.title}>\n                          <a\n                            href=\"#\"\n                            className=\"hover:bg-muted block rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                            onClick={() => setOpen(false)}\n                          >\n                            {item.title}\n                          </a>\n                        </li>\n                      )),\n                    )}\n                  </ul>\n                </div>\n              ))}\n              <Separator />\n              {plainLinks.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  onClick={() => setOpen(false)}\n                >\n                  {link.label}\n                </a>\n              ))}\n              <Separator />\n              <div className=\"grid gap-2\">\n                <Button variant=\"outline\">Sign in</Button>\n                <Button>Book a demo</Button>\n              </div>\n            </nav>\n          </SheetContent>\n        </Sheet>\n      </div>\n    </header>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeaderMegaMenu.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/navigation-menu.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/sheet.json"
  ],
  "description": "Navbar whose product and resources items open a full-width mega panel of grouped, described links plus a highlighted feature card, keyboard navigable and closing on Escape.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}