document.addEventListener('DOMContentLoaded', async () => {
    const detailContainer = document.getElementById('detail-view');
    
    // 1. ID aus der URL lesen (z.B. detail.html?id=1)
    const params = new URLSearchParams(window.location.search);
    const eventId = parseInt(params.get('id'));

    if (!eventId) {
        window.location.href = 'event_overview.html';
        return;
    }

    // 2. Daten laden und das richtige Event suchen
    try {
        const response = await fetch('data/events.json');
        const allEvents = await response.json();
        const event = allEvents.find(e => e.id === eventId);

        if (event) {
            renderDetailPage(event);
        } else {
            detailContainer.innerHTML = "<h1>Event wurde nicht gefunden.</h1><a href='event_overview.html'>Zurück zur Übersicht</a>";
        }
    } catch (error) {
        console.error("Fehler beim Laden der Details:", error);
    }

    function renderDetailPage(event) {
        //Layout Deatilseite der Events mit Rücklink zur Übersicht, Eventtitel, Infos und Bild
        detailContainer.innerHTML = `
            <div class="detail-header">
                <a href="event_overview.html" style="text-decoration:none; color:black; font-size:24px;">←</a>
                <h1>${event.title}</h1>
            </div>
            <div class="detail-grid">
                <div class="info-section">
                   <p>📍 ${event.location} | 📅 ${event.date} | 👤 Max. ${event.spots} Personen</p>
                   <hr>
                   <p>Hier kommen die detaillierten Infos zu ${event.title} hin...</p>
                </div>
                <div class="image-section">
                    <img src="${event.image}" alt="${event.title}" style="width:100%;">
                </div>
            </div>
        `;
    }
});