refactor: redistribute main.ts logic into Astro components

src/components/HomeSection.astro

@@ -24,7 +24,7 @@
                     <span>Kino 1</span>
                     <span>Kino 2</span>
                 </div>
-                <button type="button" class="story-more-btn" data-home-view-open="halls-view">Mehr erfahren</button>
+                <a href="/halls" class="story-more-btn">Mehr erfahren</a>
             </div>
         </article>
 
@@ -42,7 +42,7 @@
                         <div>Spider Man</div>
                     </div>
                 </div>
-                <button type="button" class="story-more-btn" data-home-view-open="dbox-view">Mehr erfahren</button>
+                <a href="/dbox" class="story-more-btn">Mehr erfahren</a>
             </div>
         </article>
 
@@ -51,8 +51,68 @@
             <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>
-                <button type="button" class="story-more-btn" data-home-view-open="collectors-view">Mehr erfahren</button>
+                <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>