const root = document.documentElement;
const systemDark = matchMedia("(prefers-color-scheme: dark)");
const currentTheme = () => root.dataset.theme || (systemDark.matches ? "dark" : "light");
const themeButton = document.getElementById("theme-toggle");
function labelTheme() { themeButton.setAttribute("aria-label", `Включить ${currentTheme() === "dark" ? "светлую" : "тёмную"} тему`); }
labelTheme();
themeButton.addEventListener("click", () => {
  root.dataset.theme = currentTheme() === "dark" ? "light" : "dark";
  try { localStorage.setItem("ytdl-site-theme", root.dataset.theme); } catch { /* Session-only theme. */ }
  labelTheme();
});
systemDark.addEventListener("change", labelTheme);

for (const button of document.querySelectorAll("[data-screenshot]")) button.addEventListener("click", () => {
  const theme = button.dataset.screenshot;
  const screenshot = document.getElementById("menu-screenshot");
  screenshot.src = `assets/menu-${theme}.png`;
  screenshot.alt = `Меню YouTubeDL в ${theme === "dark" ? "тёмной" : "светлой"} теме: качество видео, звук, формат, кодек и папка сохранения`;
  for (const peer of document.querySelectorAll("[data-screenshot]")) peer.setAttribute("aria-pressed", String(peer === button));
});

let copyTimer;
for (const button of document.querySelectorAll("[data-copy]")) button.addEventListener("click", async () => {
  const status = document.getElementById("copy-status");
  try { await navigator.clipboard.writeText(button.dataset.copy); status.textContent = `Скопировано: ${button.dataset.copy}`; }
  catch { status.textContent = `Скопируйте адрес вручную: ${button.dataset.copy}`; }
  status.hidden = false;
  clearTimeout(copyTimer); copyTimer = setTimeout(() => { status.hidden = true; }, 5500);
});

// Content stays visible if JavaScript or IntersectionObserver is unavailable.
if ("IntersectionObserver" in window && !matchMedia("(prefers-reduced-motion: reduce)").matches) {
  const observer = new IntersectionObserver(entries => { for (const entry of entries) if (entry.isIntersecting) { entry.target.classList.add("shown"); observer.unobserve(entry.target); } }, { threshold: 0.07 });
  for (const element of document.querySelectorAll(".reveal")) { element.classList.add("will-reveal"); observer.observe(element); }
}