---
import Base from '../../layouts/Base.astro';
import PageHero from '../../components/PageHero.astro';
import TrainingCards from '../../components/home/TrainingCards.astro';
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';
import { VISTE_TRAINING, trainingDaMostrare } from '../../data/trainings';
import T from '../../components/content/T.astro';
import { t } from '../../lib/content';
const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/training-*.{jpg,png}', { eager: true });
const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1]?.default;
export const prerender = false;

// `/training` mostra tutto; `/training/one-to-one` e `/training/class` il solo sottoinsieme
// da cui si arriva cliccando la card corrispondente in /services. Un indirizzo inventato è
// 404 e non l'elenco intero: un filtro che non c'è deve vedersi, non passare per buono.
const vista = Astro.params.vista;
const daMostrare = trainingDaMostrare(vista);
if (!daMostrare) return new Response(null, { status: 404 });
const filtrata = Boolean(vista);
---
<Base title={t('training.meta.title')} description={t('training.meta.description')}>
  <PageHero title={t('training.hero.title')} />

  <section class="section" style="padding-bottom:0">
    <div class="section-heading">
      {filtrata ? <p>{VISTE_TRAINING[vista!].titolo}</p> : <T tag="training.intro.subtitle" as="p" />}
    </div>
  </section>
  <TrainingCards items={daMostrare} />

  <section class="section">
    <div class="container">
      {daMostrare.map((tr, i) => (
        <div class:list={['tblock', { 'tblock--reverse': i % 2 === 1 }]} id={tr.id}>
          {imgOf(tr.image) && <Image src={imgOf(tr.image)!} alt={t(`training.${tr.id}.title`)} widths={[500, 900]} sizes="(max-width:767px) 100vw, 45vw" data-reveal={i % 2 === 1 ? 'right' : 'left'} />}
          <div data-reveal={i % 2 === 1 ? 'left' : 'right'}>
            <h2 data-tag={`training.${tr.id}.title`}>{t(`training.${tr.id}.title`)}</h2>
            <T tag={`training.${tr.id}.description`} as="p" />
            <a class="btn" href={tr.cta.href}><T tag={`training.${tr.id}.cta-label`} as="span" /></a>
          </div>
        </div>
      ))}
      {/* Da una vista filtrata si esce: senza questo link chi è entrato da una card di
          /services non ha modo di vedere gli altri training se non dal menu. */}
      {filtrata && (
        <p class="tblock__tutti"><a class="btn btn--light" href="/training">{t('training.tutti.cta-label')}</a></p>
      )}
    </div>
  </section>
</Base>

<style>
  .tblock { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-block: 40px; scroll-margin-top: calc(var(--header-h) + 20px); }
  .tblock--reverse img { order: 2; }
  .tblock h2 { letter-spacing: .1em; }
  .tblock__tutti { text-align: center; margin-top: 20px; }
  @media (max-width: 767px) { .tblock { grid-template-columns: 1fr; gap: 24px; } .tblock--reverse img { order: 0; } }
</style>