import { packages } from "../../shared/packages.js";

export function renderAngebotsuebersicht() {
    // Wir suchen den Container, der in der angebotsuebersicht.html definiert wurde
    const container = document.getElementById("packages-container");

    // Sicherheitscheck: Wenn der Container nicht da ist, brechen wir ab
    if (!container) {
        console.warn("Container für Angebotsübersicht nicht gefunden.");
        return;
    }

    // Container leeren (falls die Funktion mehrfach aufgerufen wird)
    container.innerHTML = "";

    // Durch jedes Paket iterieren und das HTML generieren
    packages.forEach((pkg) => {
        // Highlight-Badge nur anzeigen, wenn es eins gibt
        const highlightHtml = pkg.highlight
            ? `<span class="package-highlight">${pkg.highlight}</span>`
            : "";

        const cardHtml = `
      <div class="package-card">

        <div class="package-type-container">
          <span class="package-type">${pkg.type}</span>
          ${highlightHtml}
        </div>

        <h3 class="package-title">${pkg.name}</h3>
        <p class="package-desc">${pkg.summary}</p>

        <div class="package-details-box">
          <div class="detail-item">
            <div class="detail-title">Fokus</div>
            <div class="detail-text">${pkg.fokus}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">Anamnese</div>
            <div class="detail-text">${pkg.anamnese}</div>
          </div>
          <div class="detail-item">
            <div class="detail-title">Begleitung</div>
            <div class="detail-text">${pkg.begleitung}</div>
          </div>
        </div>

        <!-- HIER ist der wichtige Link für deinen Kollegen: -->
        <a href="/booking.html#/buchen/${encodeURIComponent(pkg.id)}" class="package-btn">${pkg.buttonText}</a>

      </div>
    `;

        // Das generierte HTML dem Container hinzufügen
        container.innerHTML += cardHtml;
    });
}