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

export function renderAngebotsuebersicht() {
    const container = document.getElementById("packages-container");

    if (!container) {
        console.warn("Container für Angebotsübersicht nicht gefunden.");
        return;
    }

    container.innerHTML = "";

    packages.forEach((pkg) => {
        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>

        <h2 class="package-title">${pkg.name}</h2>
        <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>

        <a href="/paket-details.html?id=${pkg.id}" class="package-btn">${pkg.buttonText} <span aria-hidden="true">→</span></a>

      </div>
    `;

        container.innerHTML += cardHtml;
    });
}