function analyseText(text) {
  const zeichen = text.length;
  const woerter = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
  const grossbuchstaben = (text.match(/[A-ZÄÖÜ]/g) || []).length;
  const saetze = (text.match(/[.!?]+/g) || []).length;

  return { zeichen, woerter, grossbuchstaben, saetze };
}

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

  const ui = document.createElement("div");
  ui.className = "page";
  ui.innerHTML = `
    <textarea id="ta-input" rows="6" placeholder="Text hier eingeben…" style="width:100%;padding: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);resize:vertical;margin-bottom:1rem;"></textarea>
    <a class="btn" id="ta-btn" href="#">Analysieren</a>
    <div id="ta-ergebnis" style="margin-top:2rem;display:none;">
      <hr>
      <div class="cards" style="margin-top:1.5rem;">
        <div class="card"><div class="num" id="r-zeichen">0</div><h3>Zeichen</h3></div>
        <div class="card"><div class="num" id="r-woerter">0</div><h3>Wörter</h3></div>
        <div class="card"><div class="num" id="r-gross">0</div><h3>Großbuchstaben</h3></div>
        <div class="card"><div class="num" id="r-saetze">0</div><h3>Sätze</h3></div>
      </div>
    </div>
  `;

  container.insertAdjacentElement("afterend", ui);

  document.getElementById("ta-btn").addEventListener("click", (e) => {
    e.preventDefault();
    const text = document.getElementById("ta-input").value;

    if (text.trim() === "") {
      alert("Bitte gib einen Text ein.");
      return;
    }

    const { zeichen, woerter, grossbuchstaben, saetze } = analyseText(text);
    document.getElementById("r-zeichen").textContent = zeichen;
    document.getElementById("r-woerter").textContent = woerter;
    document.getElementById("r-gross").textContent = grossbuchstaben;
    document.getElementById("r-saetze").textContent = saetze;
    document.getElementById("ta-ergebnis").style.display = "block";
  });
});
