// US-01-02 Leistungsübersicht
// Markiert das gewählte Paket visuell und stellt die Auswahl bereit,
// damit US-01-03 (Pakete online buchen) später darauf aufbauen kann.

// US-01-02 Leistungsübersicht
document.addEventListener("DOMContentLoaded", async () => {
    const section = document.getElementById("leistungen");
    if (!section) return;

    let daten;
    try {
        const response = await fetch("json/pakete.json");
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        daten = await response.json();
    } catch (error) {
        section.querySelector(".pakete__text").textContent = "Die Pakete konnten nicht geladen werden. Bitte lade die Seite erneut.";
        console.error("Pakete konnten nicht geladen werden:", error);
        return;
    }

    const titel = section.querySelector(".pakete__titel");
    const text = section.querySelector(".pakete__text");
    const grid = section.querySelector(".pakete__grid");

    titel.textContent = daten.intro.titel;
    text.textContent = daten.intro.text;

    grid.innerHTML = "";

    // Mappe Bild-Platzhalter zu den Paketen
    const bilderMap = {
        "Starter": "images/paket-starter.jpg",
        "STANDART": "images/paket-standard.jpg",
        "Rundum Sorglos Paket": "images/paket-premium.jpg"
    };

    daten.pakete.forEach(paket => {
        const karte = document.createElement("article");
        karte.classList.add("paket-karte");

        if (paket.empfohlen) {
            karte.classList.add("paket-karte--empfohlen");
        }

        // --- 1. Bildbereich (Platzhalter) ---
        const imgContainer = document.createElement("div");
        imgContainer.classList.add("paket-karte__image-wrapper");
        
        const img = document.createElement("img");
        img.src = bilderMap[paket.name] || "images/paket-placeholder.jpg";
        img.alt = `Vorschau ${paket.name}`;
        img.classList.add("paket-karte__image");
        imgContainer.appendChild(img);
        
        karte.appendChild(imgContainer);

        // --- Content-Container für sauberes Layout ---
        const content = document.createElement("div");
        content.classList.add("paket-karte__content");

        // --- 2. Header: Paketname + Badge nebeneinander ---
        const header = document.createElement("div");
        header.classList.add("paket-karte__header");

        const name = document.createElement("h3");
        name.classList.add("paket-karte__name");
        name.textContent = paket.name;
        header.appendChild(name);

        if (paket.badge) {
            const badge = document.createElement("span");
            badge.classList.add("paket-karte__badge");
            badge.textContent = paket.badge;
            header.appendChild(badge);
        }

        content.appendChild(header);

        // --- 3. Preis ---
        const preis = document.createElement("p");
        preis.classList.add("paket-karte__preis");

        const betrag = document.createElement("span");
        betrag.classList.add("paket-karte__betrag");
        betrag.textContent = `${paket.preis} €`;

        const zeitraum = document.createElement("span");
        zeitraum.classList.add("paket-karte__zeitraum");
        zeitraum.textContent = `/ ${paket.zeitraum}`;

        preis.appendChild(betrag);
        preis.appendChild(zeitraum);
        content.appendChild(preis);

        // --- 4. Beschreibung ---
        const beschreibung = document.createElement("p");
        beschreibung.classList.add("paket-karte__beschreibung");
        beschreibung.textContent = paket.beschreibung;
        content.appendChild(beschreibung);

        // --- 5. Leistungsliste ---
        const liste = document.createElement("ul");
        liste.classList.add("paket-karte__leistungen");

        paket.leistungen.forEach(leistung => {
            const punkt = document.createElement("li");
            punkt.textContent = leistung;
            liste.appendChild(punkt);
        });

        content.appendChild(liste);

        // --- 6. Button ---
        const button = document.createElement("button");
        button.classList.add("paket-karte__cta");
        button.type = "button";
        button.textContent = "Paket wählen";
        button.dataset.paket = paket.dataPaket;
        button.setAttribute("aria-pressed", "false");

        button.addEventListener("click", () => {
            grid.querySelectorAll(".paket-karte").forEach(andereKarte => {
                andereKarte.classList.remove("paket-karte--ausgewaehlt");
                andereKarte.querySelector("button").setAttribute("aria-pressed", "false");
            });
            karte.classList.add("paket-karte--ausgewaehlt");
            button.setAttribute("aria-pressed", "true");
            document.dispatchEvent(new CustomEvent("paket:ausgewaehlt", {
                detail: { paket: button.dataset.paket }
            }));
        });

        content.appendChild(button);
        karte.appendChild(content);

        grid.appendChild(karte);
    });
});