'use client';

import React from 'react';
import TrackedLink from '@/components/analytics/TrackedLink';
import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
import { m } from 'framer-motion';

export interface SupportCTAProps {
  title: string;
  description: string;
  buttonLabel: string;
  buttonHref: string;
}

const containerVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.8,
      ease: [0.16, 1, 0.3, 1] as const,
      staggerChildren: 0.15,
      delayChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const },
  },
};

export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
  const { title, description, buttonLabel, buttonHref } = props;

  return (
    <m.div 
      variants={containerVariants}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, margin: "-50px" }}
      className="mt-12 md:mt-24 p-6 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group"
    >
      <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform duration-700 group-hover:translate-x-1/3" />
      <div className="relative z-10 max-w-2xl">
        <m.h3 variants={itemVariants} className="text-2xl md:text-3xl font-bold mb-4">{title}</m.h3>
        <m.p variants={itemVariants} className="text-lg text-white/70 mb-8">{description}</m.p>
        <m.div variants={itemVariants}>
          <TrackedLink
            href={buttonHref}
            className={getButtonClasses('accent', 'lg')}
            eventProperties={{
              location: 'block_support_cta',
            }}
          >
            <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
              {buttonLabel}
              <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
                &rarr;
              </span>
            </span>
            <ButtonOverlay variant="accent" />
          </TrackedLink>
        </m.div>
      </div>
    </m.div>
  );
};