// 22K hi-fi — Header + Hero (full-bleed cinematic reel).
function Header({ scrolled, theme, base = "" }) {
const dark = theme === "dark";
const fg = scrolled ? dark ? "var(--text)" : "var(--ink)" : "#fff";
return (
);
}
// Vimeo reel — cycles through the 22K films in the hero background.
const VIMEO_REEL = [
{ id: 1199265366, h: "5378d5ecb8" },
{ id: 1199263586, h: "bf87c8aac9" },
{ id: 1199252213, h: "f4ad10db46" },
{ id: 1199252212, h: "d0d975c58d" },
{ id: 1199252211, h: "c31c91889f" },
{ id: 1199252210, h: "1417628739" },
{ id: 1199247097 },
{ id: 1199247096 },
{ id: 1199259582, h: "a6cc0b56e9" },
{ id: 1199259581, h: "7b72de52d7" },
];
function Hero({ variant = "bottom-split" }) {
const [playing, setPlaying] = React.useState(true);
const [clock, setClock] = React.useState("");
const videoRef = React.useRef(null);
React.useEffect(() => {
const v = videoRef.current;
if (v) { v.muted = true; const p = v.play(); if (p && p.catch) p.catch(() => {}); }
const tick = () => setClock(new Date().toLocaleTimeString("pt-BR", {
timeZone: "America/Sao_Paulo", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false
}));
tick();
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, []);
const togglePlay = () => {
const v = videoRef.current;
setPlaying((prev) => {
const np = !prev;
if (v) { np ? v.play().catch(() => {}) : v.pause(); }
return np;
});
};
return (
{/* full-bleed hero reel — local video (autoplay, muted, loop) */}
{/* film grain over the video */}
{/* legibility gradient — top + bottom */}
{/* top-right timecode */}
Rio de Janeiro · BR
{clock}
{/* center play */}
{/* bottom-right CTAs */}
Ver portfólio
{ window.location.hash = "#contato"; }}>Agende agora
{/* scroll cue */}
Role
);
}
Object.assign(window, { Header, Hero });