---
import { t, type Lingua } from '../i18n';

interface Props { lang: Lingua }
const { lang } = Astro.props;
const d = t(lang);
// La lista scorre in continuo: serve duplicata, cosi' l'anello si chiude senza salti.
const nastro = [...d.marchi.elenco, ...d.marchi.elenco];
---
<section class="gb-sezione gb-sotto gb-marchi">
  <div class="gb-wrap">
    <p class="gb-etichetta">{d.marchi.etichetta}</p>
    <h2 class="gb-titolo gb-anim">{d.marchi.titolo}</h2>
    <p class="gb-occhio gb-anim-sfuma">{d.marchi.sommario}</p>
  </div>

  <div class="gb-marchi__nastro" aria-hidden="true">
    <ul class="gb-marchi__scorre">
      {nastro.map((m) => <li>{m}</li>)}
    </ul>
  </div>

  <!-- Lo stesso elenco, leggibile da chi usa uno screen reader e dai motori. -->
  <ul class="gb-marchi__elenco">
    {d.marchi.elenco.map((m) => <li>{m}</li>)}
  </ul>
</section>

<style>
  /* Il ritaglio sta sul nastro, non sulla sezione: sulla sezione avrebbe reso
     tutta la fascia un contenitore di scorrimento, spegnendo le rivelazioni. */
  .gb-marchi { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

  .gb-marchi__nastro {
    overflow: hidden;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-block: var(--gb-sp-3);
    border-block: 1px solid color-mix(in srgb, var(--gb-riflesso) 22%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }

  .gb-marchi__scorre {
    display: flex;
    gap: clamp(2rem, 5vw, 4rem);
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    animation: gb-deriva 46s linear infinite;
  }
  .gb-marchi__nastro:hover .gb-marchi__scorre { animation-play-state: paused; }

  .gb-marchi__scorre li {
    font-family: var(--gb-display);
    font-variation-settings: 'wdth' 88;
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
    font-weight: 600;
    color: color-mix(in srgb, var(--gb-schiuma) 70%, transparent);
    white-space: nowrap;
    transition: color 300ms var(--gb-onda);
  }
  .gb-marchi__scorre li:hover { color: var(--gb-sabbia); }

  /* Copia accessibile: fuori dallo schermo ma leggibile dalle tecnologie assistive. */
  .gb-marchi__elenco {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .gb-marchi__scorre { animation: none; flex-wrap: wrap; width: auto; }
    .gb-marchi__nastro { -webkit-mask-image: none; mask-image: none; }
  }
</style>