---
export interface Category {
  num: string;
  name: string;
  slug: string;
  startsAt: string;
  formules: string;
}
export interface Props {
  tag?: string;
  italicTitle?: string;
  endTitle?: string;
  categories?: Category[];
  ctaHref?: string;
  ctaLabel?: string;
  note?: string;
}
const {
  tag = '[05] TARIFS.',
  italicTitle = 'quatre',
  endTitle = 'TERRAINS / A PARTIR DE.',
  categories = [
    { num: '01', name: 'MARIAGE', slug: 'mariage', startsAt: '1 200&euro;', formules: 'DEMI-JOURNEE / JOURNEE / SUR-MESURE' },
    { num: '02', name: 'PORTRAIT / LIFESTYLE', slug: 'portrait', startsAt: '400&euro;', formules: 'SEANCE 1H / ETENDU / SUR-MESURE' },
    { num: '03', name: 'REPORTAGE / EDITORIAL', slug: 'reportage', startsAt: '500&euro;', formules: 'DEMI-JOURNEE / JOURNEE / PROJET' },
    { num: '04', name: 'EVENEMENTIEL', slug: 'evenementiel', startsAt: '700&euro;', formules: '2H / DEMI-JOURNEE / JOURNEE' },
  ],
  ctaHref = '/tarifs',
  ctaLabel = '[ VOIR LES FORMULES DETAILLEES + DEVIS &#x2192; ]',
  note = 'PRIX INDICATIFS / DEVIS PERSONNALISE SUR DEMANDE. COUVERTURE PACA + FRANCE / TARIFS DEPLACEMENT EN SUS HORS PACA.',
} = Astro.props;
---
<section class="pricing" id="tarifs">
  <header class="section-head">
    <p class="tag">{tag}</p>
    <h2><span class="ital">{italicTitle}</span> {endTitle}</h2>
  </header>
  <div class="cat-grid">
    {categories.map((c) => (
      <a class="cat-card" href={`${ctaHref}#${c.slug}`} aria-label={`Voir formules ${c.name}`}>
        <p class="cat-card__num">{c.num}</p>
        <h3 class="cat-card__name">{c.name}</h3>
        <p class="cat-card__price">A PARTIR DE <span class="price" set:html={c.startsAt}></span></p>
        <p class="cat-card__formules">{c.formules}</p>
        <p class="cat-card__cta">VOIR LES FORMULES <span aria-hidden="true">&#x2192;</span></p>
      </a>
    ))}
  </div>
  <div class="pricing-footer">
    <a class="cta cta--big" href={ctaHref} set:html={ctaLabel}></a>
    <p class="rate-note">{note}</p>
  </div>
</section>

<style>
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }
  .cat-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--paper);
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    text-decoration: none;
    color: inherit;
    transition: background 0.18s, transform 0.18s;
    position: relative;
    isolation: isolate;
  }
  .cat-card:nth-child(2n) { border-right: none; }
  .cat-card:nth-last-child(-n+2) { border-bottom: none; }
  .cat-card:hover { background: var(--paper-elev); }
  .cat-card:hover .cat-card__cta { color: var(--accent); }
  .cat-card:focus-visible { background: var(--paper-elev); }

  .cat-card__num {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--accent);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .cat-card__name {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    margin: 0;
    letter-spacing: 0.04em;
  }
  .cat-card__price {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-2);
    margin: 0.25rem 0 0;
    letter-spacing: 0.1em;
  }
  .cat-card__price .price {
    color: var(--ink);
    font-weight: 700;
    font-size: 1.125rem;
    margin-left: 0.4rem;
    white-space: nowrap;
  }
  .cat-card__formules {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-2);
    margin: 0.5rem 0 0;
    letter-spacing: 0.08em;
  }
  .cat-card__cta {
    margin: 1rem 0 0;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.18s;
  }

  .pricing-footer {
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 1.75rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  @media (max-width: 700px) {
    .cat-grid { grid-template-columns: 1fr; }
    .cat-card { border-right: none; }
    .cat-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--ink); }
    .cat-card:last-child { border-bottom: none; }
  }
</style>
