"use client";

import * as React from "react";
import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Centred hero with four small feature cards floating around the headline,
 * each bobbing on its own loop and drifting with a pointer-driven parallax
 * offset scaled by its own depth.
 */

export interface HeroFloatingCardsProps {
  eyebrow?: string;
  headline?: string;