*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.rating-card {
  background: #ffffff;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 400px;
}

.rating-card h2 {
  margin: 0 0 10px 0;
  color: #0f172a;
}

.rating-text {
  color: #64748b;
  font-size: 1.1rem;
  margin-bottom: 30px;
  min-height: 24px;
  font-weight: 500;
  transition: color 0.3s;
}

.stars-container {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.star-icon {
  color: #e2e8f0;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.star-icon:hover {
  transform: scale(1.2);
}

.star-icon.active {
  color: #f59e0b;
}

.star-icon.selected {
  color: #f59e0b;
  animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

const stars = document.querySelectorAll(".star-icon");
const ratingText = document.getElementById("rating-text");
const container = document.getElementById("stars-container");

let currentRating = 0;

const messages = new Array();
messages.push("Terrible");
messages.push("Poor");
messages.push("Average");
messages.push("Good");
messages.push("Excellent!");

function fillStars(index) {
  for (let i = 0; i < stars.length; i++) {
    if (i <= index) {
      stars.item(i).classList.add("active");
    } else {
      stars.item(i).classList.remove("active");
    }
  }
}

stars.forEach(function(star, index) {
  star.addEventListener("mouseenter", function() {
    fillStars(index);
    ratingText.innerText = messages.at(index);
    ratingText.style.color = "#f59e0b";
  });
  
  star.addEventListener("click", function() {
    currentRating = index + 1;
    
    stars.forEach(function(s) {
      s.classList.remove("selected");
    });
    star.classList.add("selected");
  });
});

container.addEventListener("mouseleave", function() {
  if (currentRating === 0) {
    fillStars(-1);
    ratingText.innerText = "We value your feedback!";
    ratingText.style.color = "#64748b";
  } else {
    fillStars(currentRating - 1);
    ratingText.innerText = messages.at(currentRating - 1);
    ratingText.style.color = "#f59e0b";
  }
});