Header / Overlay

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

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

<p class="caption">
  Header / Overlay sits absolutely over hero imagery — with and without the
  top-down scrim. The burger appears below 900px viewport width; resize the
  browser window to see it (media queries are viewport-based, not
  container-based, so shrinking this panel alone won't trigger it).
</p>

<div class="hero">
  <img
    src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1600&q=60"
    alt=""
    class="hero-img"
  />
  <HeaderOverlay
    logoText="Meridian"
    navItems={navItems}
    phone="07 3123 4567"
    ctaLabel="Enquire Now"
    scrim={true}
  />
</div>

<div class="hero">
  <img
    src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1600&q=60"
    alt=""
    class="hero-img"
  />
  <HeaderOverlay
    logoText="Meridian"
    navItems={navItems}
    phone="07 3123 4567"
    ctaLabel="Enquire Now"
    scrim={false}
  />
</div>