---
export interface Props {
  bar?: string;
  tag?: string;
  displayLines?: string[];
  italicLine?: string;
  lede?: string;
  ctaLabel?: string;
  ctaHref?: string;
  stat?: string;
  yearPrefix?: string;
  yearSuffix?: string;
}
const {
  bar = 'FILE 001 / LANDING / 2026 / STUDIO LAUREL &amp; VOW',
  tag = '[01] HELLO.',
  displayLines = ['PHOTOGRAPHIE', 'DE MARIAGE.'],
  italicLine = 'documentaire.',
  lede = "UNE DIZAINE D'UNIONS PAR AN. PAS DE POSE. PAS DE FILTRE ROMANTIQUE. LA JOURNEE COMME ELLE SE PASSE.",
  ctaLabel = '[ VOIR LES REALISATIONS ]',
  ctaHref = '#realisations',
  stat = 'REPONSE <48H &middot; LIVRAISON 4SEM &middot; ARCHIVES 7ANS',
  yearPrefix = '20',
  yearSuffix = '26',
} = Astro.props;
---
<section class="hero">
  <div class="hero__bar" set:html={bar}></div>
  <div class="hero__grid">
    <div class="hero__txt">
      <p class="tag">{tag}</p>
      <h1>
        {displayLines.map((line) => <span class="display" set:html={line}></span>)}
        <span class="ital">{italicLine}</span>
      </h1>
      <div class="hero__line"></div>
      <p class="lede">{lede}</p>
    </div>
    <div class="hero__num">
      <span>{yearPrefix}</span><span>{yearSuffix}</span>
    </div>
  </div>
  <div class="hero__sub">
    <a class="cta" href={ctaHref}>{ctaLabel}</a>
    <p class="hero__stat" set:html={stat}></p>
  </div>
</section>
