document.addEventListener("DOMContentLoaded", function () { const hero = document.getElementById("majordomHeroSplit"); if (!hero) return; const cards = Array.from(hero.querySelectorAll("[data-card]")); const leftCard = hero.querySelector(".split-left"); const rightCard = hero.querySelector(".split-right"); const videos = Array.from(hero.querySelectorAll(".split-video")); const intervals = new Map(); const timeouts = new Map(); const isMobile = () => window.matchMedia("(max-width: 991px)").matches; const isDesktop = () => window.matchMedia("(hover:hover) and (pointer:fine)").matches; function getVideo(card) { return card ? card.querySelector(".split-video") : null; } function safePlay(video) { if (!video) return; video.muted = true; video.defaultMuted = true; video.playsInline = true; video.setAttribute("muted", ""); video.setAttribute("playsinline", ""); const p = video.play(); if (p && typeof p.catch === "function") p.catch(() => {}); } function safePause(video) { if (!video) return; try { video.pause(); } catch (e) {} } function preloadVideos() { videos.forEach((video) => { try { video.load(); } catch (e) {} }); } function clearTimers(card) { if (timeouts.has(card)) { timeouts.get(card).forEach((id) => clearTimeout(id)); timeouts.delete(card); } if (intervals.has(card)) { clearInterval(intervals.get(card)); intervals.delete(card); } } function resetRotator(card) { const title = card.querySelector(".split-main-title"); const args = Array.from(card.querySelectorAll(".split-arg")); clearTimers(card); if (title) title.classList.remove("is-hidden"); args.forEach((arg) => arg.classList.remove("is-visible")); } function startRotator(card) { const title = card.querySelector(".split-main-title"); const args = Array.from(card.querySelectorAll(".split-arg")); if (!title || !args.length) return; resetRotator(card); let current = 0; const localTimeouts = []; const hideTitleTimer = setTimeout(() => { if (!card.classList.contains("is-active")) return; title.classList.add("is-hidden"); }, 1800); const showArgsTimer = setTimeout(() => { if (!card.classList.contains("is-active")) return; args[0].classList.add("is-visible"); const loop = setInterval(() => { if (!card.classList.contains("is-active")) return; args[current].classList.remove("is-visible"); current = (current + 1) % args.length; args[current].classList.add("is-visible"); }, 2100); intervals.set(card, loop); }, 2450); localTimeouts.push(hideTitleTimer, showArgsTimer); timeouts.set(card, localTimeouts); } function stopRotator(card) { resetRotator(card); } function setActive(card) { cards.forEach((item) => { const active = item === card; item.classList.toggle("is-active", active); if (active) { startRotator(item); } else { stopRotator(item); } }); hero.classList.add("has-focus"); } function clearActive() { cards.forEach((item) => { item.classList.remove("is-active"); stopRotator(item); }); hero.classList.remove("has-focus"); } function playOnlyCard(card) { cards.forEach((item) => { const video = getVideo(item); if (item === card) { safePlay(video); } else { safePause(video); } }); } preloadVideos(); /* Desktop hover */ cards.forEach((card) => { card.addEventListener("mouseenter", function () { if (!isDesktop()) return; setActive(card); playOnlyCard(card); }); card.addEventListener("mouseleave", function () { if (!isDesktop()) return; const stillHover = cards.some(c => c.matches(":hover")); if (!stillHover) { clearActive(); videos.forEach((v) => safePause(v)); } }); }); /* Mobile initial: seule la gauche joue */ function activateLeftInitially() { if (!isMobile()) return; setActive(leftCard); playOnlyCard(leftCard); } /* Mobile: la 2e s'active seulement au scroll */ function updateMobileCardByScroll() { if (!isMobile()) return; const leftRect = leftCard.getBoundingClientRect(); const rightRect = rightCard.getBoundingClientRect(); const triggerY = window.innerHeight * 0.58; const leftCenter = leftRect.top + leftRect.height / 2; const rightCenter = rightRect.top + rightRect.height / 2; const leftDistance = Math.abs(leftCenter - triggerY); const rightDistance = Math.abs(rightCenter - triggerY); if (rightDistance + 8 < leftDistance) { setActive(rightCard); playOnlyCard(rightCard); } else { setActive(leftCard); playOnlyCard(leftCard); } } window.addEventListener("scroll", function () { if (isMobile()) updateMobileCardByScroll(); }, { passive: true }); cards.forEach((card) => { card.addEventListener("touchstart", function () { if (!isMobile()) return; setActive(card); playOnlyCard(card); }, { passive: true }); }); document.addEventListener("visibilitychange", function () { if (!document.hidden && isMobile()) { updateMobileCardByScroll(); } }); window.addEventListener("resize", function () { if (isMobile()) { updateMobileCardByScroll(); } else { clearActive(); videos.forEach((v) => safePause(v)); } }); if (isMobile()) { activateLeftInitially(); setTimeout(updateMobileCardByScroll, 120); } });