---
const {
  title = [],
  subtitle = [],
  description,
  imageUrl,
  ctas = []
} = Astro.props;
---
<section class="fuz-hero">

  {imageUrl && (
    <img
      src={imageUrl}
      alt="Światłowód FUZ – szybki internet w Wyszkowie"
      class="fuz-hero-bg"
      loading="eager"
    />
  )}

  <div class="fuz-hero-inner">

    <!-- Tytuł (pojedynczy lub lista) -->
    {Array.isArray(title)
      ? title.map(line => (
          <h1 class="fuz-hero-title">{line}</h1>
        ))
      : <h1 class="fuz-hero-title">{title}</h1>
    }

    <!-- Podtytuły (lista) -->
    {subtitle && Array.isArray(subtitle) && (
      <div class="fuz-hero-subtitles">

        <!-- Pierwszy: H2 -->
        <h2 class="fuz-hero-subtitle" style={`--delay:0`}>
          {subtitle[0]}
        </h2>

        <!-- Reszta: <p> (dla SEO najlepsze) -->
        {subtitle.slice(1).map((line, i) => (
          <p class="fuz-hero-subline" style={`--delay:${i + 1}`}>
            {line}
          </p>
        ))}

      </div>
    )}

    <!-- Opis -->
    {description && (
      <p class="fuz-hero-description">{description}</p>
    )}

    <!-- CTA -->
    {ctas.length > 0 && (
      <div class="fuz-hero-cta gap-4">
        {ctas.map((cta: { primary: any; href: string | URL | null | undefined; label: unknown; }) => {
          const cls = cta.primary ? "btn btn-primary" : "btn btn-outline";
          return (
            <a href={cta.href} class={cls}>
              {cta.label}
            </a>
          );
        })}
      </div>
    )}
  </div>
</section>
