---
import type { ImageMetadata } from 'astro';
import { trainings } from '../../data/trainings';
import T from '../content/T.astro';
import TImg from '../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;
const tones = ['taupe', 'tan', 'dark', 'charcoal'];
// riga 1 (training 0-1): card, foto  |  riga 2 (training 2-3): foto, card
const isSwapRow = (i: number) => Math.floor(i / 2) % 2 === 1;
---
<section class="tcards">
  {trainings.map((tr, i) => {
    const img = imgOf(tr.image);
    const card = (
      <div class:list={['tcards__cell', `tcards__cell--${tones[i]}`]} data-reveal="fade" style={`--reveal-delay:${(i % 2) * 0.15}s`}>
        <T tag={`training.${tr.id}.title`} as="h3" />
        <T tag={`training.${tr.id}.caption`} as="p" />
        <a class="tcards__link" href={tr.cta.href}><T tag="home.training-cards.link-label" as="span" /> →</a>
      </div>
    );
    const photo = img ? (
      <div class="tcards__photo" data-reveal="fade" style={`--reveal-delay:${((i % 2) * 0.15 + 0.1).toFixed(2)}s`}>
        <TImg tag={`training.${tr.id}.image`} src={img} alt={t(`training.${tr.id}.title`)} class="tcards__img" widths={[400, 700]} sizes="(max-width: 767px) 50vw, 25vw" />
      </div>
    ) : null;
    return isSwapRow(i) ? <>{photo}{card}</> : <>{card}{photo}</>;
  })}
</section>

<style>
  .tcards { display: grid; grid-template-columns: repeat(4, 1fr); }
  .tcards__cell { padding: 48px 36px; display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1; }
  .tcards__cell--taupe { background: #6b5d5b; }
  .tcards__cell--dark { background: var(--c-dark); }
  .tcards__cell--charcoal { background: #27252a; }
  .tcards__cell--taupe h3, .tcards__cell--taupe p,
  .tcards__cell--dark h3, .tcards__cell--dark p,
  .tcards__cell--charcoal h3, .tcards__cell--charcoal p { color: #efe9e3; }
  .tcards__cell--tan { background: var(--c-accent); }
  .tcards__cell--tan h3, .tcards__cell--tan p { color: #fff; }
  .tcards__cell h3 { text-transform: uppercase; letter-spacing: .12em; }
  .tcards__cell p { font-size: .88rem; }
  .tcards__link { color: #fff; font-family: var(--font-heading); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; margin-top: 18px; }
  .tcards__photo { overflow: hidden; }
  .tcards__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .5s ease; }
  .tcards__photo:hover .tcards__img { transform: scale(1.06); }
  @media (max-width: 767px) { .tcards { grid-template-columns: repeat(2, 1fr); } }
</style>
