Header / Split Nav

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

const navItems = [
  { label: "Home", href: "#", current: true },
  { label: "For Sale", href: "#" },
  { label: "About Us", href: "#" },
  { label: "Testimonials", href: "#" },
  { label: "Contact Us", href: "#" },
];
---
<div style="display:flex;flex-direction:column;gap:32px;">
  <HeaderSplit
    logoText="Meridian"
    navItems={navItems}
    phone="07 3123 4567"
    ctaLabel="Enquire Now"
    ctaUrl="#"
    tone="base-100"
  />
  <HeaderSplit
    logoText="Meridian"
    navItems={navItems}
    phone="07 3123 4567"
    ctaLabel="Enquire Now"
    ctaUrl="#"
    tone="neutral"
  />
</div>

<p>
  Below 900px both examples collapse to a standard bar (logo centred, burger right) with a
  slide-down panel — resize the browser to see the breakpoint switch. Unlike the standard
  header, the desktop layout splits nav links either side of a centred, larger logo (up to
  ~34px), with the CTA sitting at the far right; the phone number is only shown inside the
  mobile panel, not in the desktop bar.
</p>