Comment créer un compteur de places restantes dans Webflow ?

fetch('https://api.airtable.com/v0/YOUR_BASE/Registrations?fields[]=Status', {
  headers: { 'Authorization': 'Bearer YOUR_KEY' }
})
.then(function(r) { return r.json(); })
.then(function(data) {
  var taken = data.records.filter(function(r) {
    return r.fields.Status === 'Confirmed';
  }).length;
  // Mettre à jour l'UI avec taken
});

(function() {
  var el = document.getElementById('seats-left');
  var bar = document.getElementById('seats-bar');
  var msg = document.getElementById('seats-message');
  if (!el) return;

  // Configuration
  var TOTAL = 20;
  var KEY = 'seats-taken-' + window.location.pathname;

  // Récupère ou initialise le compteur (simulé côté client)
  // En production : remplacez par un fetch vers votre API
  var taken = parseInt(localStorage.getItem(KEY) || Math.floor(Math.random() * 8 + 10));
  localStorage.setItem(KEY, taken);

  var left = Math.max(0, TOTAL - taken);
  var pct = Math.round((taken / TOTAL) * 100);

  el.textContent = left;

  if (bar) {
    bar.style.width = pct + '%';
    bar.style.background = left <= 3 ? '#ef4444' : left <= 7 ? '#f59e0b' : '#22c55e';
  }

  if (msg) {
    if (left === 0) {
      msg.textContent = 'Complet — rejoignez la liste d'attente';
      msg.style.color = '#ef4444';
    } else if (left <= 3) {
      msg.textContent = 'Plus que ' + left + ' place' + (left > 1 ? 's' : '') + ' !';
      msg.style.color = '#ef4444';
    } else if (left <= 7) {
      msg.textContent = left + ' places restantes — réservez vite';
      msg.style.color = '#f59e0b';
    } else {
      msg.textContent = left + ' places disponibles';
      msg.style.color = '#22c55e';
    }
  }
})();