---
import Base from '../../layouts/Base.astro';
import PageHero from '../../components/PageHero.astro';
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';
import { programs } from '../../data/programs';
const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/program-*.jpg', { eager: true });
const imgOf = (slug: string) => Object.entries(images).find(([p]) => p.includes(`program-${slug}.`))?.[1]?.default;
export const prerender = true;
---
<Base title="Programmi" description="I programmi InsanityLab: Personal Training, Performance Class, Coaching, Pilates Flow, Rehab e Nutrizione.">
  <PageHero title="Programmi" />
  <section class="section">
    <div class="container">
      <div class="section-heading">
        <h2>Programmi</h2>
        <p>Questi sono i programmi delle classi di Insanity Lab selezionati per voi. Abbiamo scelto i migliori percorsi per offrirvi un'esperienza di allenamento completa e mirata.</p>
      </div>
      <div class="plist">
        {programs.map((p, i) => (
          <article class="plist__card" data-reveal style={`--reveal-delay:${((i % 3) * 0.15).toFixed(2)}s`}>
            {imgOf(p.slug) && (
              <a class="plist__photo" href={`/programs/${p.slug}`}>
                <Image src={imgOf(p.slug)!} alt={p.title} widths={[400, 700]} sizes="(max-width:767px) 100vw, 33vw" />
              </a>
            )}
            <div class="plist__body">
              <h3>{p.title}</h3>
              <p class="plist__sub">{p.subtitle}</p>
              <p>{p.excerpt}</p>
              <a class="plist__more" href={`/programs/${p.slug}`}>Per saperne di più →</a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
</Base>

<style>
  .plist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }
  .plist__card { background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.08); display: flex; flex-direction: column; }
  .plist__photo { display: block; overflow: hidden; }
  .plist__photo img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .5s ease; }
  .plist__card:hover .plist__photo img { transform: scale(1.05); }
  .plist__body { padding: 26px 24px 30px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
  .plist__card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3em; }
  .plist__sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-accent-dark); }
  .plist__body > p:not(.plist__sub) { font-size: .9rem; }
  .plist__more { font-family: var(--font-heading); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--c-heading); margin-top: auto; }
  .plist__more:hover { color: var(--c-accent-dark); }
  @media (max-width: 991px) { .plist { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .plist { grid-template-columns: 1fr; } }
</style>
