"use client";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
import { isLowPowerDevice } from "@/lib/device";
const HeroScene = dynamic(() => import("./HeroScene"), { ssr: false });
/**
* Reusable 3D animated background for internal hero sections.
* Drop this inside any `relative overflow-hidden` dark section.
* A cena WebGL só monta em aparelho que aguenta (sem toque, sem pouca CPU/memória, sem "economizar dados"):
* nos outros fica o fundo escuro, sem baixar o Three.js.
*/
export default function HeroBackground() {
const shouldReduceMotion = useReducedMotion();
const [capable, setCapable] = useState(false);
useEffect(() => {
setCapable(!isLowPowerDevice());
}, []);
if (shouldReduceMotion) return null;
return (
<>
{/* 3D particle scene */}
{capable && }
{/* Cinematic radial vignette */}
{/* Gradient fade to bottom */}
{/* Scanlines */}
);
}