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

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

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

  return (
    <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
      <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
      <div className="relative z-10 max-w-2xl">
        <h3 className="text-2xl md:text-3xl font-bold mb-4">{title}</h3>
        <p className="text-lg text-white/70 mb-8">{description}</p>
        <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>
      </div>
    </div>
  );
};