Contenus

<CardGrid columns={3}>
  {news.map((post, i) => (
    <Card
      href={'/actualites/' + post.id + '/'}
      image={{ src: post.data.image, alt: post.data.imageAlt }}
      meta={formatDate(post.data.date)}
      datetime={isoDate(post.data.date)}
      title={post.data.title}
      excerpt={post.data.excerpt}
      revealDelay={i * 0.12}
    />
  ))}
</CardGrid>

<Gallery
  columns={3}
  caption="Le domaine au fil des saisons"
  photos={[
    { src: '/images/gallery-1.svg', alt: '…' },
    { src: '/images/gallery-2.svg', alt: '…' },
  ]}
/>

<Portrait
  scene={{ src: salle, alt: 'La salle et ses cerisiers en fleurs', width: 1120, height: 1400 }}
  cutout={{ src: gerants, alt: 'Laure et Pierre, détourés', width: 839, height: 1061 }}
  name="Laure & Pierre"
  role="À la tête de la maison depuis 2024"
/>

// variantes : sujet ancré à gauche, plus incliné, décor moins voilé
<Portrait ... side="left" tilt={-6} width={78} veil={45} />

<Journal
  eyebrow="Meursault · quatre parutions"
  title="Le journal *du domaine*"
  issues={news.map((post) => ({
    title: post.data.title,
    href: '/actualites/' + post.id + '/',
    date: post.data.date,
    excerpt: post.data.excerpt,
    image: { src: post.data.image, alt: post.data.imageAlt },
  }))}
  event={{
    image: { src: '/images/fullbleed-1.svg', alt: '…' },
    eyebrow: '1er et 2 août 2026 — l’événement de l’été',
    title: 'La Ronde *des Trois Pierres*',
    text: 'Deux jours de marche gourmande entre les parcelles.',
    link: { href: '/contact', label: 'S’inscrire' },
  }}
/>

<GrilleProduits
  image={{ src: '/images/fullbleed-1.svg', alt: '…' }}
  eyebrow="Six cuvées, trois appellations"
  title="Nos *vins*"
  lead="…"
  categories={[{ key: 'blanc', label: 'Blancs' }, { key: 'rouge', label: 'Rouges' }]}
  labels={{ singular: 'cuvée', plural: 'cuvées' }}
  products={[
    {
      href: '/les-vins/les-trois-pierres/',
      name: 'Les Trois Pierres',
      category: 'blanc',
      image: { src: '/images/packshot-1.svg', alt: '…' },
      badge: 'Blanc', badgeColor: 'var(--detail)',
      status: 'Disponible', statusHighlight: true,
      price: '24,00 €',
      description: 'Chardonnay de haut de coteau, dix mois de fût.',
      meta: 'Millésime 2022 · 13 %',
    },
    // …
  ]}
/>

<!-- Les groupes sont déclaratifs : le composant ne connaît aucune taxonomie. -->
const groupes: GroupeFiltre[] = [
  { cle: 'couleur', label: 'Couleur', champ: 'couleur', mode: 'eq', tout: 'Toutes',
    options: optionsPresentes(COULEURS, cuvees, (c) => c.couleur) },
  { cle: 'accord', label: 'À table avec', champ: 'accords', mode: 'in', tout: 'Tout',
    repli: true, options: optionsPresentes(ACCORDS, cuvees, (c) => c.accords) },
  { cle: 'prix', label: 'Budget', champ: 'prix', mode: 'lte', tout: 'Sans limite',
    repli: true, options: [{ valeur: '25', label: 'moins de 25 €' }] },
];

<FiltresGrille
  groupes={groupes}
  total={cuvees.length}
  colonnes={3}
  labels={{ singulier: 'cuvée', pluriel: 'cuvées',
            recherche: 'Chercher un vin, un cépage, une appellation',
            placeholder: 'Chardonnay, Meursault, vieilles vignes…',
            affiner: 'Affiner — accord, budget' }}
  index={cuvees.map((c) => ({
    cle: c.slug,
    texte: [c.nom, c.appellation, c.cepage, c.note].join(' '),
  }))}
  vide={{ titre: 'Aucune bouteille avec ces réglages.' }}
>
  {cuvees.map((c, i) => (
    <li {...attributsCarte(
      { couleur: c.couleur, millesime: c.millesime, accords: c.accords, prix: c.prix },
      c.slug,
    )}>
      <Card
        href={'/les-vins/' + c.slug + '/'}
        image={{ src: c.image, alt: 'Cuvée ' + c.nom }}
        meta={c.appellation + ' · ' + c.millesime}
        title={c.nom}
        excerpt={c.note}
        revealDelay={(i % 3) * 0.08}
      />
    </li>
  ))}
</FiltresGrille>

<CarteParcelles
  mention="carte schématique — positions indicatives"
  categories={[
    { key: 'chardonnay', label: 'Chardonnay', color: 'var(--detail)' },
    { key: 'pinot', label: 'Pinot noir', color: 'var(--accent)' },
  ]}
  places={[{ name: 'Meursault', lon: 4.7712, lat: 46.9782 }]}
  plots={[
    {
      name: 'Les Trois Pierres',
      place: 'Meursault',
      category: 'chardonnay',
      weight: 1.4,
      lon: 4.7688, lat: 46.9801,
      details: [
        { label: 'Cépage', value: 'Chardonnay' },
        { label: 'Âge des vignes', value: '48 ans (1978)' },
        { label: 'Surface', value: '1,4 ha' },
        { label: 'Exposition', value: 'Sud-est' },
      ],
      note: 'La parcelle historique : les trois bornes de calcaire sont au bout du rang.',
    },
    // …
  ]}
/>

<CarteReperes
  image={carte}
  imageAlt="Carte illustrée du domaine"
  linkLabel="Voir la cuvée"
  mention="carte illustrée — positions indicatives"
  categories={[
    { key: 'rouge', label: 'Rouges', color: '#7a4038' },
    { key: 'blanc', label: 'Blancs', color: '#c8b273' },
  ]}
  markers={[
    {
      title: 'Côtes-du-Couchois « Cuvée Amphore »',
      kicker: 'Bourgogne Côtes-du-Couchois',
      note: 'Rouge · Dracy-lès-Couches',
      category: 'rouge',
      href: '/nos-vins/cuvee-amphore/',
      x: 27.2, y: 50.5,
    },
    // …
  ]}
/>

{/* Sans `image`, le slot porte le fond (SVG inline, <picture>…) : */}
<CarteReperes ratio="3 / 2" markers={…}>
  <svg viewBox="0 0 1536 1024">…</svg>
</CarteReperes>

{categories.map((cat) => (
  <CarteMenu
    kicker={cat.data.kicker}
    name={cat.data.name}
    note={cat.data.note}
    columns={cat.data.columns}
    items={cat.data.items}
  />
))}

// une catégorie en liste
{ name: 'Pâtes', kicker: 'Les', note: 'Servies avec salade',
  items: [{ name: '…', desc: '…', price: '14,60', badge: 'Nouveau' }] }

// une catégorie à colonnes de prix
{ name: 'Bulles', columns: ['La coupe', 'La bouteille'],
  items: [{ name: '…', prices: ['6,00', '30,00'] }] }

<PriceList
  items={[
    { label: 'Dégustation découverte', note: '4 vins · 45 minutes', value: '15 €' },
    { label: 'Verticale de millésimes', note: 'Sur rendez-vous', value: '60 €' },
  ]}
>
  Dégustation offerte pour tout achat de six bouteilles.
</PriceList>

<ContactForm subject="Demande de visite" />

// src/data/site.ts
formEndpoint: 'https://formspree.io/f/xxxxxxx',