---
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';
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 = true;
---
<Base title="Training" description="One to One, Small Groups, Performance Class e Fit Remote: trova il training InsanityLab più adatto a te.">
  <PageHero title="training" />

  <section class="section" style="padding-bottom:0">
    <div class="section-heading">
      <h2>Training</h2>
      <p>Porta i tuoi allenamenti al livello successivo: programmi completi e percorsi su misura. Trova il training più adatto alle tue esigenze.</p>
    </div>
  </section>
  <TrainingCards />

  <section class="section">
    <div class="container">
      {trainings.map((t, i) => (
        <div class:list={['tblock', { 'tblock--reverse': i % 2 === 1 }]} id={t.id}>
          {imgOf(t.image) && <Image src={imgOf(t.image)!} alt={t.title} widths={[500, 900]} sizes="(max-width:767px) 100vw, 45vw" />}
          <div>
            <h2>{t.title.toLowerCase()}</h2>
            <p>{t.description}</p>
            <a class="btn" href={t.cta.href}>{t.cta.label}</a>
          </div>
        </div>
      ))}
    </div>
  </section>

  <Agenda />

  <section class="section section--alt">
    <div class="container trial">
      <div>
        <h2>Prenota la lezione di prova</h2>
        <p>La lezione di prova è l'occasione perfetta per conoscere il metodo, vivere l'esperienza in prima persona e capire il percorso più adatto a te. Inizia oggi il tuo percorso: prenota la tua lezione di prova.</p>
        <a class="btn btn--dark" href="/contact">Prenota</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 { max-width: 720px; text-align: center; }
  @media (max-width: 767px) { .tblock { grid-template-columns: 1fr; gap: 24px; } .tblock--reverse img { order: 0; } }
</style>