function berechneNote(prozent) {
  if (prozent >= 90) return "sehr gut";
  if (prozent >= 75) return "gut";
  if (prozent >= 60) return "befriedigend";
  if (prozent >= 50) return "ausreichend";
  return "nicht bestanden";
}

document.addEventListener("DOMContentLoaded", () => {
  const hero = document.querySelector(".page-hero");

  const ui = document.createElement("div");
  ui.className = "page";
  ui.innerHTML = `
    <div style="display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;">
      <input type="number" id="punkte" placeholder="Deine Punkte" style="flex:1;min-width:140px;padding:0.8rem 1rem;font-family:'Barlow',sans-serif;font-size:1rem;background:rgba(255,255,255,0.05);color:inherit;border:1px solid rgba(255,255,255,0.15);">
      <input type="number" id="maxPunkte" placeholder="Maximale Punkte" style="flex:1;min-width:140px;padding:0.8rem 1rem;font-family:'Barlow',sans-serif;font-size:1rem;background:rgba(255,255,255,0.05);color:inherit;border:1px solid rgba(255,255,255,0.15);">
    </div>
    <a class="btn" id="berechnen-btn" href="#">Berechnen</a>
    <div id="nr-ergebnis" style="margin-top:2rem;display:none;">
      <hr>
      <div class="cards" style="margin-top:1.5rem;">
        <div class="card"><div class="num" id="r-prozent">0%</div><h3>Prozent</h3></div>
        <div class="card"><div class="num" id="r-note">–</div><h3>Note</h3></div>
      </div>
      <div id="balken-wrap" style="margin-top:1.5rem;background:rgba(255,255,255,0.06);height:12px;">
        <div id="balken" style="height:100%;width:0%;transition:width 0.5s ease;"></div>
      </div>
      <p id="ergebnis" style="margin-top:1rem;font-size:0.88rem;color:rgba(255,255,255,0.5);"></p>
    </div>
  `;

  hero.insertAdjacentElement("afterend", ui);

  document.getElementById("berechnen-btn").addEventListener("click", (e) => {
    e.preventDefault();

    const inputPunkte = document.getElementById("punkte");
    const inputMax = document.getElementById("maxPunkte");
    const punkte = Number(inputPunkte.value);
    const maxPunkte = Number(inputMax.value);

    const isValid = inputPunkte.value !== "" && inputMax.value !== ""
      && !isNaN(punkte) && !isNaN(maxPunkte)
      && punkte >= 0 && punkte <= maxPunkte && maxPunkte > 0;

    inputPunkte.style.borderColor = isValid ? "rgba(255,255,255,0.15)" : "red";
    inputMax.style.borderColor = isValid ? "rgba(255,255,255,0.15)" : "red";

    if (!isValid) {
      document.getElementById("ergebnis").textContent = "Bitte gültige Werte eingeben.";
      document.getElementById("nr-ergebnis").style.display = "block";
      document.getElementById("balken").style.width = "0%";
      return;
    }

    const prozent = Math.round((punkte / maxPunkte) * 100);
    const note = berechneNote(prozent);

    document.getElementById("r-prozent").textContent = prozent + "%";
    document.getElementById("r-note").textContent = note;
    document.getElementById("ergebnis").textContent = `${punkte} von ${maxPunkte} Punkten`;
    document.getElementById("nr-ergebnis").style.display = "block";

    const balken = document.getElementById("balken");
    balken.style.width = prozent + "%";
    balken.style.backgroundColor = prozent >= 75 ? "#4ade80" : prozent >= 50 ? "#fb923c" : "#f87171";
  });
});