script.js

// script.js
(() => {
  const ratingCard = document.querySelector('.card.card--rating, .rating-state');
  const thankyouCard = document.querySelector('.card.card--thankyou, .thankyou-state');
  const form = document.querySelector('form.rating, .rating-form');
  if (!form || !ratingCard || !thankyouCard) return; // por si el HTML cambia

  const radios = form.querySelectorAll('input[name="rating"]');
  const submitBtn = form.querySelector('.btn--submit, button[type="submit"]');
  const selectedSlot = document.getElementById('selected-rating');

  // Asegura que el grupo sea "requerido" (mejor en HTML, pero por si se olvida)
  if (radios.length) radios[0].setAttribute('required', '');

  // Deshabilita "Submit" hasta elegir una opción (opcional pero UX-friendly)
  if (submitBtn) submitBtn.disabled = true;

  form.addEventListener('change', (e) => {
    if (e.target.name === 'rating' && submitBtn) {
      submitBtn.disabled = false;
    }
  });

  form.addEventListener('submit', (e) => {
    e.preventDefault();

    const checked = form.querySelector('input[name="rating"]:checked');
    if (!checked) {
      form.reportValidity(); // dispara la validación nativa
      return;
    }

    // Inyecta el valor en la vista de "Thank you"
    if (selectedSlot) selectedSlot.textContent = checked.value;

    // Alterna vistas
    ratingCard.hidden = true;
    thankyouCard.hidden = false;

    // Accesibilidad: mueve el foco al título de "Thank you"
    const thankTitle = thankyouCard.querySelector('.card__title, h2, h1');
    if (thankTitle) {
      thankTitle.setAttribute('tabindex', '-1');
      thankTitle.focus();
    }
  });

  // Extra: permitir seleccionar con teclas 1–5
  window.addEventListener('keydown', (e) => {
    if (!/^[1-5]$/.test(e.key)) return;
    const target = form.querySelector(`input[name="rating"][value="${e.key}"]`);
    if (target) {
      target.checked = true;
      target.dispatchEvent(new Event('change', { bubbles: true }));
    }
  });
})();