---
type Props = {
  eyebrow?: string;
  title: string;
  lead?: string;
  image?: string;
  imageAlt?: string;
};

const {
  eyebrow,
  title,
  lead,
  image = "/assets/live-site/img_0067.jpg",
  imageAlt = "Water resources and coastal landscape",
} = Astro.props;
---

<section class="page-hero">
  <div class="hero-copy">
    {eyebrow && <p class="eyebrow">{eyebrow}</p>}
    <h1>{title}</h1>
    {lead && <p>{lead}</p>}
  </div>
  <img src={image} alt={imageAlt} width="1280" height="854" loading="eager" />
</section>
