---
import { Image } from "astro:assets";

type TextPosition = "right" | "left" | "center";

interface Props {
  title?: string | string[];
  subtitle?: string[];
  description?: string;
  imageUrl?: string;
  ctas?: Array<{
    label: string;
    href: string;
    primary?: boolean;
  }>;
  textPosition?: TextPosition;
}

const {
  title = [],
  subtitle = [],
  description,
  imageUrl,
  ctas = [],
  textPosition = "right" as TextPosition
} = Astro.props;

const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/hero/*.{png,jpg,jpeg,webp,avif}', {
  eager: true
});

let imageAsset: ImageMetadata | null = null;

if (imageUrl) {
  const path = `/src/assets/hero/${imageUrl}`;
  const mod = images[path];
  if (mod) {
    imageAsset = mod.default;
  }
}

const isLCP = true;
---

<section class={`f-hero f-hero--${textPosition}`}>
  
  <!-- Background Image -->
  {imageAsset && (
    <Image
      src={imageAsset}
      alt="Światłowód FUZ, szybki internet w Wyszkowie"
      class="f-hero__bg"
      loading="eager"
      fetchpriority={isLCP ? "high" : "auto"}
      decoding="async"
      format="webp"
      widths={[640, 960, 1280, 1350, 1920]}
      sizes="100vw"
    />
  )}

  <!-- Overlay -->
  <div class="f-hero__overlay"></div>

  <!-- Container -->
  <div class="f-hero__container">
    
    <!-- Content -->
    <div class="f-hero__content">
      
      <!-- Titles -->
      <div class="f-hero__titles">
        {Array.isArray(title)
          ? title.map(line => (
              <h1 class="f-hero__title">{line}</h1>
            ))
          : <h1 class="f-hero__title">{title}</h1>
        }
      </div>

      <!-- Subtitles -->
      {subtitle && Array.isArray(subtitle) && subtitle.length > 0 && (
        <div class="f-hero__subtitles">
          {subtitle.map((line, i) => (
            <p 
              class="f-hero__subtitle"
              style={`--delay: ${i}`}
            >
              {line}
            </p>
          ))}
        </div>
      )}

      <!-- Description -->
      {description && (
        <p class="f-hero__description">{description}</p>
      )}

      <!-- CTAs -->
      {ctas.length > 0 && (
        <div class="f-hero__ctas">
          {ctas.map((cta) => (
            <a 
              href={cta.href} 
              class={cta.primary ? "btn-hero-primary" : "btn-hero-outline"}
            >
              {cta.label}
            </a>
          ))}
        </div>
      )}

    </div>

  </div>

</section>