Kino-Website-Framework/src/components/HomeSection.astro

<section id="movies-grid-section" class="movie-section cinema-home">
    <div class="section-header reveal-on-scroll">
        <h2>Dein Kinoabend beginnt hier</h2>
        <p>Premieren, Lieblingsfilme und flexible Spielzeiten in allen Sälen.</p>
    </div>

    <div class="home-poster-band reveal-on-scroll">
        <div class="home-band-header">
            <h3>Jetzt läuft</h3>
            <span>Heute im Fokus</span>
        </div>
        <div id="now-running-row" class="now-running-row"></div>
    </div>

    <div class="home-inline-showcase reveal-on-scroll">
        <article class="inline-section inline-halls">
            <div class="inline-media"></div>
            <div class="inline-content">
                <h3>Unsere Säle im Überblick</h3>
                <p>Jeder Saal hat ein eigenes Profil: von klassischem Kinofeeling bis High-End-Erlebnis mit Premiumtechnik und mehr Komfort.</p>
                <div class="inline-tags">
                    <span>IMAX</span>
                    <span>Deluxe 1</span>
                    <span>Kino 1</span>
                    <span>Kino 2</span>
                </div>
                <a href="/halls" class="story-more-btn">Mehr erfahren</a>
            </div>
        </article>

        <article class="inline-section inline-dbox">
            <div class="inline-media"></div>
            <div class="inline-content">
                <h3>D-BOX & Technik</h3>
                <p>Spüre Bewegungen synchron zum Film und kombiniere das Erlebnis mit modernem Raumklang und Premium-Bestuhlung.</p>
                <div class="dbox-now-highlight">
                    <h4>Aktuell in D-BOX</h4>
                    <div class="dbox-mini-cards">
                        <div>Zoomania 2</div>
                        <div>Shelter</div>
                        <div>Hoppers</div>
                        <div>Spider Man</div>
                    </div>
                </div>
                <a href="/dbox" class="story-more-btn">Mehr erfahren</a>
            </div>
        </article>

        <article class="inline-section inline-collectors">
            <div class="inline-media"></div>
            <div class="inline-content">
                <h3>Collectors Popcorn Specials</h3>
                <p>Präsentiere Sonderbecher und Eimer filmbezogen mit Bild, Logo und kurzem Text in einer lebendigen Timeline.</p>
                <a href="/collectors" class="story-more-btn">Mehr erfahren</a>
            </div>
        </article>
    </div>
</section>

<script>
    import { movieCatalog } from "../scripts/bigConstants";

    const nowRunningRow = document.getElementById("now-running-row");

    const escapeHtml = (value: string) => String(value || "")
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#39;");

    const renderNowRunningRow = () => {
        if (!nowRunningRow) return;

        nowRunningRow.innerHTML = movieCatalog.map((movie: any, index: number) => `
            <article class="running-poster">
                <img src="${escapeHtml(movie.poster)}" alt="${escapeHtml(movie.title)}">
                <div class="running-meta">
                    <h4>${escapeHtml(movie.title)}</h4>
                    <p>${escapeHtml(movie.genre)}</p>
                    <button type="button" class="open-program-btn" data-program-index="${index}">Spielzeiten ansehen</button>
                    <div>AHHH ICH HAB SCHMERZEN BITTE BRINGT MICH ENDLICH UM</div>
                </div>
            </article>
        `).join("");

        nowRunningRow.addEventListener("click", (event: any) => {
            const trigger = event.target.closest(".open-program-btn");
            if (!trigger) return;
            const programIndex = trigger.dataset.programIndex;
            window.location.href = `/movies?focus=${programIndex}`;
        });
    };

    const initRevealAnimations = () => {
        const revealElements = Array.from(document.querySelectorAll(".reveal-on-scroll"));
        if (!revealElements.length) return;

        if (!("IntersectionObserver" in window)) {
            revealElements.forEach((element) => element.classList.add("is-visible"));
            return;
        }

        const observer = new IntersectionObserver((entries, obs) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add("is-visible");
                    obs.unobserve(entry.target);
                }
            });
        }, { threshold: 0.2 });

        revealElements.forEach((element) => observer.observe(element));
    };

    renderNowRunningRow();
    initRevealAnimations();
</script>