---
import { Image } from 'astro:assets';
import hero1 from '../../assets/img/hero-1.png';
const slides = [
  { title: ['PERFORMANCE.', 'BALANCE.', 'LONGEVITY.'], image: hero1, alt: 'Atleti InsanityLab' },
];
---
<section class="hero" aria-label="presentazione">
  {slides.map((s, i) => (
    <div class:list={['hero__slide', { 'is-active': i === 0 }]}>
      <div class="container hero__in">
        <div class="hero__text">
          <h1>{s.title.map((line) => <span class="hero__line">{line}</span>)}</h1>
          <a class="btn" href="/programs">Scopri</a>
        </div>
        <Image src={s.image} alt={s.alt} class="hero__img" widths={[600, 1000, 1400]} sizes="(max-width: 991px) 100vw, 60vw" loading="eager" />
      </div>
    </div>
  ))}
  {slides.length > 1 && (
    <>
      <button class="hero__arrow hero__arrow--prev" aria-label="precedente">‹</button>
      <button class="hero__arrow hero__arrow--next" aria-label="successiva">›</button>
    </>
  )}
</section>

<style>
  .hero { position: relative; background:
    repeating-linear-gradient(to bottom, transparent 0 10px, rgba(0,0,0,.05) 10px 11px) left top / 40% 60% no-repeat, #fff; }
  .hero__slide { display: none; }
  .hero__slide.is-active { display: block; }
  /* Come nel Figma: figure a piena altezza ancorate in basso a destra,
     testo sovrapposto sulla sinistra. */
  .hero__in { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--header-h)); }
  .hero__line { display: block; }
  .hero__text { position: relative; z-index: 1; max-width: 46%; }
  .hero__text h1 { font-weight: 500; }
  .hero__img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 80%; object-fit: contain; object-position: right bottom; }
  .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 3rem; color: var(--c-heading); cursor: pointer; }
  .hero__arrow--prev { left: 12px; } .hero__arrow--next { right: 12px; }
  @media (max-width: 991px) {
    .hero__in { flex-direction: column; align-items: flex-start; padding-block: 40px; min-height: 0; gap: 24px; }
    .hero__text { max-width: none; }
    .hero__img { position: static; max-width: 100%; height: auto; }
  }

  /* Ingresso al load stile Slider Revolution del template */
  @keyframes hero-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
  @keyframes hero-side { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
  :global(html.js) .hero__line { opacity: 0; animation: hero-up .8s ease forwards; }
  :global(html.js) .hero__line:nth-child(1) { animation-delay: .15s; }
  :global(html.js) .hero__line:nth-child(2) { animation-delay: .3s; }
  :global(html.js) .hero__line:nth-child(3) { animation-delay: .45s; }
  :global(html.js) .hero__text .btn { opacity: 0; animation: hero-up .8s ease .7s forwards; }
  :global(html.js) .hero__img { opacity: 0; animation: hero-side 1s ease .2s forwards; }
  @media (prefers-reduced-motion: reduce) {
    :global(html.js) .hero__line, :global(html.js) .hero__text .btn, :global(html.js) .hero__img { opacity: 1; animation: none; }
  }
</style>

<script>
  const slides = document.querySelectorAll('.hero__slide');
  if (slides.length > 1) {
    let cur = 0;
    const show = (i: number) => {
      slides[cur].classList.remove('is-active');
      cur = (i + slides.length) % slides.length;
      slides[cur].classList.add('is-active');
    };
    document.querySelector('.hero__arrow--prev')?.addEventListener('click', () => show(cur - 1));
    document.querySelector('.hero__arrow--next')?.addEventListener('click', () => show(cur + 1));
  }
</script>
