/* hero.jsx — 3 hero variants + slim brand header */
function useParallax(strength = 1) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
if (matchMedia("(prefers-reduced-motion:reduce)").matches) return;
let raf;
const onMove = (e) => {
const x = (e.clientX / window.innerWidth - .5) * 2;
const y = (e.clientY / window.innerHeight - .5) * 2;
cancelAnimationFrame(raf);
raf = requestAnimationFrame(() => {
el.style.setProperty("--px", x * 12 * strength + "px");
el.style.setProperty("--py", y * 12 * strength + "px");
});
};
window.addEventListener("mousemove", onMove);
return () => {window.removeEventListener("mousemove", onMove);cancelAnimationFrame(raf);};
}, [strength]);
return ref;
}
function BrandHeader({ onCTA }) {
const [solid, setSolid] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const onScroll = () => {setSolid(window.scrollY > 40);if (window.scrollY > 80) setOpen(false);};
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => {
document.body.style.overflow = open ? "hidden" : "";
return () => {document.body.style.overflow = "";};
}, [open]);
const close = () => setOpen(false);
const goTo = (id) => {close();setTimeout(() => document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }), 60);};
return (
<>
{/* Mobile nav overlay */}
);
}
const HEADLINE =
<>Desenvolvimento deE‑Commerce sob medida ;const SUB = <>Criamos, migramos e estruturamos operações de E‑Commerce
{["+20 anos de experiência", "+200 projetos", "Migração sem downtime"].map((t, i) =>
{t}
)}
);
}
/* ----- Variant: Cinematic (centered) ----- */
function HeroCinematic({ onCTA }) {
const pref = useParallax(1);
return (
{HEADLINE}
{SUB}
Receber orçamento
document.getElementById("processo")?.scrollIntoView()} style={{ fontSize: ".94rem", padding: ".82em 1.45em", borderRadius: 13, whiteSpace: "nowrap" }}>Ver como funciona
);
}
/* ----- Variant: Split (asymmetric) ----- */
function HeroSplit({ onCTA }) {
const pref = useParallax(1.2);
return (
{HEADLINE}
{SUB}
document.getElementById("processo")?.scrollIntoView()} style={{ fontSize: ".94rem", padding: ".82em 1.45em", borderRadius: 13, whiteSpace: "nowrap" }}>Ver como funciona
);
}
/* ----- Variant: Depth (layered cluster) ----- */
function HeroDepth({ onCTA }) {
const pref = useParallax(1);
return (
{HEADLINE}
{SUB}
);
}
function Hero({ variant = "split", onCTA }) {
const map = { cinematic: HeroCinematic, split: HeroSplit, depth: HeroDepth };
const C = map[variant] || HeroSplit;
return ;
}
Object.assign(window, { Hero, BrandHeader, useParallax }); 
{/* Hamburger — mobile only */}
