"use client";
import * as React from "react";
import { CurtainPreloader } from "@/components/ui/curtain-preloader";
/* Демо: сцена под шторками и прелоадер поверх неё.
fixed={false} держит прелоадер внутри карточки, а не поверх всей страницы —
иначе превью на витрине закрылось бы целиком.
Сценарий проигрывается по кругу: показали раскрытую сцену, выдержали паузу,
сменили key — прелоадер собрался заново и пошёл сначала. Так витрина всегда
застаёт живой кадр, а не тёмную шторку.
maxWait здесь маленький: ждать настоящую загрузку нечего, а показать нужно
весь сценарий. В бою waitFor отдают промису сцены, и счётчик честно стоит
на 92, пока она не готова. */
export default function CurtainPreloaderDemo() {
const [run, setRun] = React.useState(0);
const [open, setOpen] = React.useState(false);
/* пауза на раскрытой сцене, потом заход на новый круг */
React.useEffect(() => {
if (!open) return;
const id = window.setTimeout(() => {
setOpen(false);
setRun((n) => n + 1);
}, 2200);
return () => window.clearTimeout(id);
}, [open]);
return (
<div className="relative h-[560px] w-full overflow-hidden bg-[#0a0709] font-sans">
{/* фон: красное свечение и тёмные полосы поверх него */}
<div
aria-hidden="true"
className="absolute inset-0"
style={{
background:
"radial-gradient(78% 120% at 50% 54%, #ffa860 0%, #f4573c 24%, #d63644 42%, #a3222c 60%, #5a1119 79%, #1a060b 100%)",
}}
/>
<div
aria-hidden="true"
className="absolute inset-0 opacity-95"
style={{
mixBlendMode: "multiply",
background:
"repeating-linear-gradient(90deg, rgba(0,0,0,.92) 0 34px, transparent 34px 72px)",
}}
/>
{/* то, что открывают шторки */}
<div
className="absolute inset-0 flex flex-col items-start justify-end p-[clamp(20px,3vw,46px)] transition-[opacity,transform] duration-700 ease-out"
style={{
opacity: open ? 1 : 0,
transform: open ? "translateY(0)" : "translateY(18px)",
}}
>
<p className="mb-2 text-[11px] uppercase tracking-[0.3em] text-white/70">Content Models</p>
<h1 className="m-0 text-[clamp(38px,7vw,92px)] font-bold uppercase leading-[0.92] tracking-tight text-white">
Studio
</h1>
</div>
<CurtainPreloader
key={run}
fixed={false}
lockScroll={false}
maxWait={700}
onReveal={() => setOpen(true)}
/>
</div>
);
}
