"use client"; import Link from "next/link"; import { useEffect, useRef, useState } from "react"; export type HeroButton = { label: string; href: string; variant: "primary" | "secondary"; }; export type HeroProps = { title: string; titleBold?: string; description: string; buttons: HeroButton[]; desktopImage?: string; tabletImage?: string; mobileImage?: string; desktopImageAlt?: string; mobileImageAlt?: string; }; function IconArrowPrimary() { return ( ); } function IconArrowSecondary() { return ( ); } export default function Hero({ title, titleBold, description, buttons, desktopImage, tabletImage, mobileImage, desktopImageAlt, mobileImageAlt, }: HeroProps) { const contentRef = useRef(null); const bgImageRef = useRef(null); const [inView, setInView] = useState(false); const [bgLoaded, setBgLoaded] = useState(false); const d = (desktopImage ?? "").trim(); const t = (tabletImage ?? "").trim(); const m = (mobileImage ?? "").trim(); const fallback = d || t || m; const desktopSrc = d || fallback; const tabletSrc = t || d || fallback; const mobileSrc = m || d || fallback; const imageAlt = (desktopImageAlt ?? "").trim() || (mobileImageAlt ?? "").trim() || ""; const hasBackground = Boolean(fallback); useEffect(() => { const el = contentRef.current; if (!el) return; const obs = new IntersectionObserver( ([entry]) => setInView(!!entry.isIntersecting), { threshold: 0.12, rootMargin: "0px" } ); obs.observe(el); return () => obs.disconnect(); }, []); useEffect(() => { setBgLoaded(false); }, [desktopSrc, tabletSrc, mobileSrc]); useEffect(() => { const img = bgImageRef.current; if (!img || !hasBackground) return; if (img.complete && img.naturalWidth > 0) { setBgLoaded(true); } }, [hasBackground, desktopSrc, tabletSrc, mobileSrc]); return (

{hasBackground ? (

) : ( <> )}