---
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';
import { performanceClassPricing } from '../../data/pricing';
import { programIcons } from '../../data/program-icons';
export const prerender = true;

export function getStaticPaths() {
  return programs.map((p) => ({ params: { slug: p.slug }, props: { program: p } }));
}
const { program } = Astro.props;
const others = programs.filter((p) => p.slug !== program.slug);
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;
const heroImg = imgOf(program.slug);
// Categorie come da Figma (Performance class.pdf), non quelle del blog
const categories = ['Fitness', 'Salute', 'Stile di vita', 'Nutrizione'];
// Ordine card pricing come da Figma: tan, taupe, dark
const tones = ['tan', 'taupe', 'dark'];
---
<Base title={program.title} description={program.excerpt}>
  <PageHero title={program.title.toUpperCase()} bgImage={heroImg} />

  <section class="section">
    <div class="container prog">
      <div>
        <h2>{program.title.toUpperCase()}</h2>
        <p>{program.longDescription}</p>
        <ul class="prog__features">
          {program.features.map((f) => <li>{f}</li>)}
        </ul>
        {heroImg && (
          <Image src={heroImg} alt={program.title} class="prog__img" widths={[600, 1000]} sizes="(max-width:991px) 100vw, 60vw" data-reveal="fade" />
        )}
        <div class="prog__faq">
          {program.faq.map((item, i) => (
            <details open={i === 0}>
              <summary>{item.q}</summary>
              <p>{item.a}</p>
            </details>
          ))}
        </div>
      </div>
      <aside class="prog__side">
        <h3>Categorie</h3>
        {categories.map((c) => <p class="prog__cat">{c}</p>)}
        <h3>Altri programmi</h3>
        {others.map((o) => (
          <a class="prog__other" href={`/programs/${o.slug}`}>
            <span class="prog__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" width="26" height="26" aria-hidden="true"><path d={programIcons[o.slug]} /></svg>
            </span>
            <span>{o.title}</span>
          </a>
        ))}
      </aside>
    </div>
  </section>

  {program.hasPricing && (
    <section class="section section--alt">
      <div class="container">
        <div class="section-heading">
          <h2>{performanceClassPricing.heading}</h2>
          <p>{performanceClassPricing.intro}</p>
        </div>
        {performanceClassPricing.groups.map((g) => (
          <details class="price__group" open={g.open}>
            <summary>{g.open ? '+' : '–'} {g.label}</summary>
            {g.plans.length === 0 ? (
              <p class="price__empty">Contattaci per i dettagli di questo programma. <a href="/contact">Scrivici →</a></p>
            ) : (
              <div class="price__row">
                {g.plans.map((p, i) => (
                  <div class:list={['price__card', `price__card--${tones[i % 3]}`]}>
                    <p class="price__amount">{p.monthly}€</p>
                    <p class="price__per">al mese, semestrale</p>
                    <p class="price__entries">{p.entries} {p.entries === 1 ? 'ingresso settimanale' : 'ingressi settimanali'}</p>
                    <p>{p.note}</p>
                    <p>{p.installments}</p>
                    <p class="price__best">{p.best}</p>
                    <a class="btn btn--light" href="/contact">Acquista</a>
                  </div>
                ))}
              </div>
            )}
          </details>
        ))}
      </div>
    </section>
  )}
</Base>

<style>
  .prog { display: grid; grid-template-columns: 2.2fr 1fr; gap: 60px; }
  .prog__features { padding-left: 20px; display: grid; gap: 8px; margin-bottom: 30px; }
  .prog__features li::marker { color: var(--c-accent); }
  .prog__img { width: 100%; height: auto; margin-bottom: 30px; }
  .prog__faq details { border-top: 1px solid #e4ded6; padding-block: 14px; }
  .prog__faq summary { cursor: pointer; font-family: var(--font-heading); font-size: .85rem; letter-spacing: .08em; color: var(--c-heading); }
  .prog__side h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .16em; margin-top: 30px; }
  .prog__cat { font-family: var(--font-heading); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text); margin-bottom: 10px; }
  .prog__other { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--c-text); margin-bottom: 14px; font-family: var(--font-heading); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
  .prog__other:hover { color: var(--c-accent-dark); }
  .prog__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--c-accent); color: #fff; flex-shrink: 0; }
  .price__group { border-top: 1px solid #ddd5ca; padding-block: 18px; }
  .price__group summary { cursor: pointer; font-family: var(--font-heading); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--c-heading); }
  .price__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
  /* Card colorate come nel Figma: tan / taupe / dark, testo bianco, prezzo grande */
  .price__card { padding: 44px 28px; text-align: center; color: #fff; }
  .price__card--tan { background: var(--c-accent); }
  .price__card--taupe { background: #6b5d5b; }
  .price__card--dark { background: var(--c-dark); }
  .price__card .price__amount { font-family: var(--font-heading); font-size: clamp(2.6rem, 4.7vw, 4rem); font-weight: 500; color: #fff; margin: 0; line-height: 1.1; }
  .price__card .price__per { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; opacity: .85; margin-bottom: 22px; }
  .price__card .price__entries { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; border-top: 1px solid rgba(255,255,255,.25); padding-top: 18px; }
  .price__card p { margin-bottom: 6px; font-size: .82rem; }
  .price__card .price__best { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
  .price__card .btn { margin-top: 18px; }
  @media (max-width: 991px) { .prog { grid-template-columns: 1fr; } .price__row { grid-template-columns: 1fr; } }
</style>
