---
/**
 * Hero — the top of a case study or page: label, title, optional intro, and chips.
 * eyebrow: the label above the title. title, lede: may hold inline markup.
 * status: the first chip, drawn as the status chip. chips: the facts after it.
 * It holds the page's h1 and id="top", so use it once per page.
 */
import Chips from './Chips.astro';
interface Props { eyebrow: string; title: string; lede?: string; status?: string; chips?: string[] }
const { eyebrow, title, lede, status, chips = [] } = Astro.props;
---
<section class="case-hero" id="top">
  <div class="wrap">
    <p class="eyebrow">{eyebrow}</p>
    <h1 set:html={title} />
    {lede && <p class="lede" set:html={lede} />}
    <Chips status={status} items={chips} />
  </div>
</section>