Header / Mega Menu

---
import HeaderMegaMenu from "../components/figma/HeaderMegaMenu.astro";

const navItems = [
  { label: "Home", href: "#", current: true },
  { label: "For Sale", href: "#" },
  { label: "About Us", href: "#" },
  { label: "Testimonials", href: "#" },
  { label: "Contact Us", href: "#" },
];

const megaItem = {
  label: "Projects",
  groups: [
    {
      heading: "Now Selling",
      links: [
        { label: "Riverside Quarter", href: "#" },
        { label: "The Grove Residences", href: "#" },
        { label: "Harbour View Terraces", href: "#" },
      ],
    },
    {
      heading: "Coming Soon",
      links: [
        { label: "Parkland Estate", href: "#" },
        { label: "Cedar Heights", href: "#" },
        { label: "Bayview Collection", href: "#" },
      ],
    },
    {
      heading: "Completed",
      links: [
        { label: "Sunset Gardens", href: "#" },
        { label: "The Metropolitan", href: "#" },
        { label: "Willow Creek", href: "#" },
      ],
    },
  ],
  feature: {
    title: "Riverside Quarter",
    image: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=800&q=60",
    href: "#",
    caption: "Now selling — display suite open daily",
  },
};
---

<div style="display:flex;flex-direction:column;gap:32px;">
  <HeaderMegaMenu
    logoText="Meridian"
    navItems={navItems}
    megaItem={megaItem}
    phone="07 3123 4567"
    ctaLabel="Enquire Now"
    ctaUrl="#"
    tone="base-100"
  />

  <HeaderMegaMenu
    logoText="Meridian"
    navItems={navItems}
    megaItem={megaItem}
    phone="07 3123 4567"
    ctaLabel="Enquire Now"
    ctaUrl="#"
    tone="primary"
  />
</div>

<p class="type-caption" style="padding: 0 20px;">
  The burger menu below 900px is viewport-based — resize the browser to see the switch. On
  desktop, click "Projects" to open the full-width mega panel (link-group columns + feature
  card); it closes on re-click, Escape, an outside click, or selecting a link. The mega panel
  is desktop-only — below 900px its groups flatten into plain stacked sections inside the
  burger panel, with no nested disclosure.
</p>