// HeroStreak.jsx — alternate hero with a "never-ending" light streak (Streak-style).
// Same copy as Hero.jsx; the background swaps the looping video for a layered
// system: a static lit arc (base art) + drifting ambient bloom + an SVG path
// carrying a bright white highlight that flows along the arc forever. The arc
// path is the exact curve from the source art (3832×1642), extended off-screen
// at both ends so the moving highlight is born and dies out of view.
function StarRating({ brand, alt, brandH, score, kind, base = 2.1, step = 0.15 }) {
const STARS = 5;
const [rated, setRated] = useState(false);
const starsRef = useRef(null);
useEffect(() => {
const whiteAt = (base + (STARS - 1) * step + 0.5) * 1000;
const t = setTimeout(() => setRated(true), whiteAt);
return () => clearTimeout(t);
}, []);
// pointer-following spotlight: brand color blooms under the cursor across the stars
const track = (e) => {
const el = starsRef.current; if (!el) return;
const r = el.getBoundingClientRect();
el.style.setProperty("--mx", (e.clientX - r.left).toFixed(1) + "px");
el.style.setProperty("--my", (e.clientY - r.top).toFixed(1) + "px");
};
const reset = () => {
const el = starsRef.current; if (!el) return;
el.style.setProperty("--mx", "-200px");
};
return (