"use client";

import { usePathname } from "next/navigation";
import { type ComponentType, useEffect, useState } from "react";
import { isCoarsePointer, prefersReducedMotion } from "@/lib/device";
import ScrollProgress from "./ScrollProgress";

/**
 * Efeitos por cima da home: a barra de progresso (CSS puro) e o grão de filme. O grão só existe com mouse e sem
 * movimento reduzido, e é importado só nesse caso: no toque o pacote dele nem é baixado, e nada fica montado,
 * invisível, medindo a tela.
 */
export default function CinematicOverlays() {
  const isHome = usePathname() === "/";
  const [Grain, setGrain] = useState<ComponentType | null>(null);

  useEffect(() => {
    if (!isHome || isCoarsePointer() || prefersReducedMotion()) return;
    let alive = true;
    import("./FilmGrain").then((module) => {
      if (alive) setGrain(() => module.default);
    });
    return () => {
      alive = false;
    };
  }, [isHome]);

  if (!isHome) return null;
  return (
    <>
      {Grain && <Grain />}
      <ScrollProgress />
    </>
  );
}