refactor: redistribute main.ts logic into Astro components

src/components/Hero.astro

@@ -8,3 +8,77 @@
         <div id="hero-dots" class="hero-dots"></div>
     </div>
 </header>
+
+<script>
+    import { movieCatalog } from "../scripts/bigConstants";
+
+    const ui = {
+        heroSlider: document.getElementById("hero-slider"),
+        heroDots: document.getElementById("hero-dots"),
+        heroTitle: document.getElementById("hero-title"),
+        heroText: document.getElementById("hero-text"),
+        heroBookingBtn: document.getElementById("hero-booking-btn"),
+    };
+
+    let heroItems = movieCatalog.slice(0, 5);
+    let heroIndex = 0;
+    let heroTimer: any = null;
+
+    const escapeHtml = (value: string) => String(value || "")
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+
+    const setHeroSlide = (index: number) => {
+        if (!heroItems.length || !ui.heroSlider) return;
+        heroIndex = (index + heroItems.length) % heroItems.length;
+
+        ui.heroSlider.querySelectorAll(".hero-slide").forEach((slide, slideIndex) => {
+            slide.classList.toggle("active", slideIndex === heroIndex);
+        });
+
+        ui.heroDots?.querySelectorAll(".hero-dot").forEach((dot, dotIndex) => {
+            dot.classList.toggle("active", dotIndex === heroIndex);
+        });
+
+        const activeMovie = heroItems[heroIndex];
+        if (ui.heroTitle) ui.heroTitle.textContent = activeMovie.title;
+        if (ui.heroText) ui.heroText.textContent = `${activeMovie.genre} • ${activeMovie.duration} Min. • Heute erste Vorstellung um 13:00 Uhr.`;
+    };
+
+    const renderHero = () => {
+        if (!ui.heroSlider || !heroItems.length) return;
+
+        ui.heroSlider.innerHTML = heroItems.map((movie: any, index: number) => `
+            <div class="hero-slide ${index === 0 ? "active" : ""}" style="background-image: linear-gradient(118deg, rgba(0,0,0,0.34), rgba(0,0,0,0.04)), url('${escapeHtml(movie.backdrop || movie.poster)}');"></div>
+        `).join("");
+
+        if (ui.heroDots) {
+            ui.heroDots.innerHTML = heroItems.map((_: any, index: number) => `
+                <button type="button" class="hero-dot ${index === 0 ? "active" : ""}" data-hero-index="${index}"></button>
+            `).join("");
+
+            ui.heroDots.addEventListener("click", (event: any) => {
+                const dot = (event.target as HTMLElement).closest(".hero-dot") as HTMLElement;
+                if (!dot) return;
+                setHeroSlide(Number(dot.dataset.heroIndex || 0));
+                if (heroTimer) {
+                    clearInterval(heroTimer);
+                    heroTimer = setInterval(() => setHeroSlide(heroIndex + 1), 6500);
+                }
+            });
+        }
+
+        setHeroSlide(0);
+        if (heroTimer) clearInterval(heroTimer);
+        heroTimer = setInterval(() => setHeroSlide(heroIndex + 1), 6500);
+    };
+
+    ui.heroBookingBtn?.addEventListener("click", () => {
+        window.location.href = "/movies";
+    });
+
+    renderHero();
+</script>