document.addEventListener('DOMContentLoaded', () => {
    const eventGrid = document.getElementById('event-grid');
    const filterButtons = document.querySelectorAll('.category-item');
    let allEvents = [];

    // 1. Daten laden
    async function fetchEvents() {
        try {
            // Pfad an deine Ordnerstruktur angepasst
            const response = await fetch('data/events.json');
            allEvents = await response.json();
            renderEvents(allEvents);
        } catch (error) {
            console.error("Fehler:", error);
            eventGrid.innerHTML = "<p>Events konnten nicht geladen werden.</p>";
        }
    }

    // 2. Events rendern + "Empty State" Logik
    function renderEvents(events) {
        eventGrid.innerHTML = ''; 

        // PRÜFUNG: Wenn keine Events vorhanden sind
        if (events.length === 0) {
            eventGrid.innerHTML = `
                <div class="empty-state">
                    <h3>Schade! Aktuell gibt es hier keine Events.</h3>
                    <p>Möchtest du vielleicht selbst Gastgeber sein?</p>
                    <button class="btn-outline" onclick="alert('Hier gehts zum Formular!')">Eigenes Event erstellen</button>
                </div>
            `;
            return;
        }

        // Wenn Events da sind, Karten bauen
        events.forEach(event => {
            const card = document.createElement('article');
            card.className = 'event-card';
            card.innerHTML = `
                <div class="event-image" style="background-image: url('${event.image}')"></div>
                <div class="event-content">
                    <small>📍 ${event.location}</small>
                    <h2 style="margin: 5px 0;">${event.title}</h2>
                    <div>
                        <span class="tag">${event.cuisine}</span>
                        <span class="tag">${event.category}</span>
                    </div>
                </div>
                <div class="event-info">
                    <strong>${event.date}</strong><br>
                    <span>🕒 ${event.time}</span>
                </div>
                <div class="event-cta">
                    <div style="font-size: 12px; margin-bottom: 8px;">🥗 ${event.diet}</div>
                    <button class="btn-primary">Anmelden</button>
                    <p style="font-size: 10px; margin-top: 8px;">${event.spots} PLÄTZE FREI</p>
                </div>
                <div style="text-align: center;">❤️</div>
            `;
            eventGrid.appendChild(card);
        });
    }

    // 3. Filter-Logik
    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            filterButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');

            const selectedCat = button.getAttribute('data-cat');
            
            const filtered = selectedCat === 'ALLE' 
                ? allEvents 
                : allEvents.filter(e => e.category === selectedCat);
            
            renderEvents(filtered);
        });
    });

    fetchEvents();
});