document.addEventListener('DOMContentLoaded', async () => {
    // Container für die Berater-Karten auswählen
    const container = document.getElementById('berater-container');

    // Titel- und Untertitel-Elemente aus dem HTML abrufen
    const titleEl = document.querySelector('.section-title');
    const subtitleEl = document.querySelector('.section-subtitle');

    let daten;
    try {
        // Daten aus der JSON-Datei asynchron laden
        const response = await fetch('json/berater.json');
        if (!response.ok) throw new Error(`HTTP Fehler: ${response.status}`);
        daten = await response.json();
    } catch (error) {
        console.error('Fehler beim Laden der JSON-Datei:', error);
        // Fehlermeldung auf der Webseite anzeigen, falls das Laden fehlschlägt
        if (container) {
            container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
        }
        return;
    }

    // 1. Titel und Einleitungstext (Intro) aus der JSON-Datei einfügen
    if (titleEl && daten.intro) {
        titleEl.textContent = daten.intro.titel;
    }
    if (subtitleEl && daten.intro) {
        subtitleEl.textContent = daten.intro.text;
    }

    // 2. Berater-Karten verarbeiten und erstellen
    // Wir iterieren über das Array "berater" innerhalb der JSON-Daten
    daten.berater.forEach(berater => {
        // Ein neues div-Element für die Karte erstellen
        const card = document.createElement('div');
        card.className = 'berater-card';

        // Zertifikate verarbeiten (falls vorhanden)
        let zertifikateHtml = '';
        if (berater.zertifikate && berater.zertifikate.length > 0) {
            zertifikateHtml = `<h4 class="bio-title" style="margin-top: 16px;">Zertifikate</h4><ul class="berater-liste">`;
            berater.zertifikate.forEach(zert => {
                zertifikateHtml += `<li>${zert}</li>`;
            });
            zertifikateHtml += `</ul>`;
        }

        // Links verarbeiten (falls vorhanden)
        let linksHtml = '';
        if (berater.links && berater.links.length > 0) {
            linksHtml = `<div class="berater-links">`;
            berater.links.forEach(link => {
                if (link.aktion === 'terminbuchung') {
                    // Öffnet das Kalender-Pop-up (js/terminbuchung.js) mit dieser Berater-ID,
                    // statt eine externe Seite zu laden.
                    linksHtml += `<button type="button" class="berater-link-btn" data-terminbuchung="${berater.id}" data-url="${link.url}">${link.text}</button>`;
                } else {
                    linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
                }
            });
            linksHtml += `</div>`;
        }

        // Zusatzinformationen verarbeiten (falls vorhanden)
        let zusatzHtml = '';
        if (berater.zusatzInfo) {
            zusatzHtml = `<p class="berater-zusatz">${berater.zusatzInfo}</p>`;
        }

        // Eigene/unbekannte dynamische Felder verarbeiten
        // Zuerst definieren wir, welche Felder Standard sind und ignoriert werden sollen
        const standardFelder = ['id', 'name', 'role', 'image', 'bioTitle', 'bioText', 'zertifikate', 'links', 'zusatzInfo'];
        let eigeneFelderHtml = '';

        // Wir durchlaufen jeden Eintrag in der JSON für diesen spezifischen Berater
        for (const [schluessel, wert] of Object.entries(berater)) {
            // Wenn das Feld kein Standardfeld ist, generieren wir daraus eine Überschrift und den zugehörigen Text
            if (!standardFelder.includes(schluessel)) {
                eigeneFelderHtml += `
                    <h4 class="bio-title" style="margin-top: 16px; text-transform: capitalize;">${schluessel}</h4>
                    <p class="bio-text">${wert}</p>
                `;
            }
        }

        // Die Karte mit allen gesammelten HTML-Bausteinen zusammenbauen
        card.innerHTML = `
            <div class="berater-image-wrapper">
                <img src="${berater.image}" alt="${berater.name} Profilbild">
            </div>
            <h2 class="berater-name">${berater.name}</h2>
            <h3 class="berater-rolle">${berater.role}</h3>
            
            <div class="berater-bio-box">
                <h4 class="bio-title">${berater.bioTitle}</h4>
                <p class="bio-text">${berater.bioText}</p>
                
                ${eigeneFelderHtml}
                ${zusatzHtml}
                ${zertifikateHtml}
                ${linksHtml}
            </div>
        `;

        // Die fertige Karte zum Container auf der Seite hinzufügen
        container.appendChild(card);
    });

    // "Trainingsplan buchen"-Buttons öffnen das Kalender-Pop-up (js/terminbuchung.js)
    // mit der jeweiligen Berater-ID, statt eine externe Seite zu laden.
    if (container) {
        container.addEventListener('click', (event) => {
            const button = event.target.closest('[data-terminbuchung]');
            if (!button) return;
            if (window.Terminbuchung && typeof window.Terminbuchung.oeffnen === 'function') {
                window.Terminbuchung.oeffnen(Number(button.dataset.terminbuchung));
            } else {
                // Fallback, falls terminbuchung.js nicht geladen wurde: ursprüngliches Linkziel.
                window.location.href = button.dataset.url || '#';
            }
        });
    }
});