---
import { Picture } from 'astro:assets';
import plant from '../../assets/images/plant-at-dusk.jpg';
import { t, type Lang } from '../../i18n/ui';

interface Props { lang: Lang }
const { lang } = Astro.props;
const ui = t(lang);
---
<section class="hero night" aria-labelledby="hero-title">
  <div class="hero__media">
    <Picture
      src={plant}
      alt={ui.hero.imageAlt}
      formats={['avif']}
      fallbackFormat="webp"
      widths={[640, 960, 1440, 1920, 2400, 3024]}
      sizes="100vw"
      loading="eager"
      fetchpriority="high"
      decoding="async"
      class="hero__img img-cover img-doc"
      pictureAttributes={{ class: 'hero__picture' }}
    />
    <div class="hero__overlay"></div>
  </div>

  <div class="container hero__content">
    <h1 id="hero-title" class="display hero__title">
      {ui.hero.lines.map((line, i) => (
        <span class="hero__line" style={`--i: ${i}`}>{line}</span>
      ))}
    </h1>
  </div>
</section>

<style>
  .hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(30rem, calc(100svh - var(--header-height)), 56rem);
    overflow: hidden;
  }
  .hero__media { position: absolute; inset: 0; }
  :global(.hero__picture) { display: block; width: 100%; height: 100%; }
  .hero__img,
  :global(.hero__img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
    transform-origin: 50% 60%;
    animation: hero-settle var(--dur-hero) var(--ease) both;
  }
  .hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay);
  }
  .hero__content {
    position: relative;
    width: 100%;
    padding-block: var(--space-9);
  }
  .hero__title { max-width: 12em; }
  .hero__line {
    display: block;
    opacity: 0;
    animation: hero-rise 700ms var(--ease) forwards;
    animation-delay: calc(240ms + var(--i) * 160ms);
  }

  @keyframes hero-settle {
    from { transform: scale(1.045); }
    to   { transform: none; }
  }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(0.18em); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__img, :global(.hero__img), .hero__line { animation: none; opacity: 1; transform: none; }
  }
</style>