import { motion, useScroll, useTransform } from 'framer-motion';
import { type ReactNode, useRef } from 'react';
import { useReducedMotion } from '@/hooks/useReducedMotion';

interface CTAFooterProps {
  /** Gradient + glow classes for the footer background */
  gradient?: string;
  /** CTA content */
  children: ReactNode;
}

export function CTAFooter({
  gradient = 'bg-gradient-to-br from-primary via-primary/80 to-primary/60',
  children,
}: CTAFooterProps) {
  const ref = useRef<HTMLElement>(null);
  const prefersReducedMotion = useReducedMotion();
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end end'],
  });

  const opacity = useTransform(scrollYProgress, [0, 1], [0, 1]);
  const y = useTransform(scrollYProgress, [0, 1], [60, 0]);

  return (
    <footer ref={ref} className="relative">
      {/* Background layer — fades/slides in as the footer scrolls into view. */}
      <motion.div
        style={{ opacity, y: prefersReducedMotion ? 0 : y }}
        className={`absolute inset-0 ${gradient}`}
      />

      {/* CTA */}
      <div className="relative mx-auto max-w-2xl px-6 pt-20 pb-16 text-center md:pt-28 md:pb-20">
        {children}
      </div>
    </footer>
  );
}