---
import Base from '../layouts/Base.astro';
import PageHero from '../components/PageHero.astro';
import TrainingCards from '../components/home/TrainingCards.astro';
import Agenda from '../components/Agenda.astro';
import { Image } from 'astro:assets';
import { trainings } from '../data/trainings';
import trialImg from '../assets/img/trial-class.jpg';
import T from '../components/content/T.astro';
import TImg from '../components/content/TImg.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;
---
<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">
      <T tag="training.intro.title" as="h2" />
      <T tag="training.intro.subtitle" as="p" />
    </div>
  </section>
  <TrainingCards />

  <section class="section">
    <div class="container">
      {trainings.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`).toLowerCase()}</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>
      ))}
    </div>
  </section>

  <Agenda />

  <section class="section section--alt">
    <div class="container trial">
      <TImg tag="training.trial.image" src={trialImg} alt="Lezione di prova InsanityLab" widths={[500, 900]} sizes="(max-width:767px) 100vw, 45vw" data-reveal="left" />
      <div data-reveal="right">
        <T tag="training.trial.title" as="h2" />
        <T tag="training.trial.body" as="p" />
        <a class="btn btn--dark" href="/contact">{t('training.trial.cta')}</a>
      </div>
    </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; }
  .trial { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
  .trial img { width: 100%; height: auto; max-height: 460px; object-fit: cover; }
  @media (max-width: 767px) { .trial { grid-template-columns: 1fr; gap: 24px; } }
  @media (max-width: 767px) { .tblock { grid-template-columns: 1fr; gap: 24px; } .tblock--reverse img { order: 0; } }
</style>