"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } 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;
}

/**
 * Split hero: copy on the left, a looping chat-bubble conversation demo on
 * the right. Messages appear one at a time with a brief "typing" beat before
 * each assistant reply, then the whole thread restarts.
 */

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