---
import { getImage } from 'astro:assets';
import quoteBgSrc from '../../assets/img/quote-bg.jpg';
import { t, contentImageUrl } from '../../lib/content';
const quoteBg = contentImageUrl('home.quote.image', (await getImage({ src: quoteBgSrc, width: 1920 })).src);
---
<section class="quote" data-parallax>
  <div class="quote__bg" style={`background-image:url(${quoteBg})`} data-tag="home.quote.image"></div>
  <div class="quote__in">
    <p class="quote__mark">“</p>
    <blockquote>
      <div class="quote__marquee">
        <p class="quote__track">
          <span class="quote__seg" data-tag="home.quote.text" set:html={t('home.quote.text')} />
          <span class="quote__seg" aria-hidden="true" data-tag="home.quote.text" set:html={t('home.quote.text')} />
        </p>
      </div>
      <cite data-tag="home.quote.cite">{t('home.quote.cite')}</cite>
    </blockquote>
  </div>
</section>

<style>
  .quote { position: relative; overflow: hidden; text-align: center; }
  /* Sfondo su div dedicato, esteso oltre i bordi per il margine di corsa del parallax */
  .quote__bg { position: absolute; inset: -120px 0; background-size: cover; background-position: center; transform: translateY(var(--parallax-y, 0)); will-change: transform; }
  .quote__bg::after { content: ''; position: absolute; inset: 0; background: rgba(46,32,24,.82); }
  .quote__in { position: relative; padding-block: 110px; }
  .quote__mark { color: #fff; font-size: 4rem; font-family: var(--font-heading); margin: 0; line-height: 1; }
  .quote blockquote { margin: 0; }
  /* Marquee: testo a scorrimento infinito come il ticker del template */
  .quote__marquee { overflow: hidden; white-space: nowrap; }
  .quote__track { display: inline-flex; margin: 0; animation: quote-scroll 30s linear infinite; will-change: transform; }
  .quote__marquee:hover .quote__track { animation-play-state: paused; }
  .quote__seg { padding-right: 4em; color: #fff; font-family: var(--font-heading); font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: .06em; line-height: 1.6; }
  @keyframes quote-scroll { to { transform: translateX(-50%); } }
  .quote cite { display: block; margin-top: 24px; color: var(--c-accent); font-style: normal; font-family: var(--font-heading); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; }
  @media (prefers-reduced-motion: reduce) {
    .quote__track { animation: none; white-space: normal; display: block; max-width: 820px; margin-inline: auto; padding-inline: 20px; }
    .quote__seg { padding-right: 0; }
    .quote__seg[aria-hidden] { display: none; }
    .quote__bg { transform: none; }
  }
</style>
