import React from 'react';

interface ContactCTAProps {
  title: string;
  description: string;
  buttonText: string;
  buttonLink: string;
}

export const ContactCTA: React.FC<ContactCTAProps> = ({
  title,
  description,
  buttonText,
  buttonLink,
}) => {
  return (
    <section className="py-24 container mx-auto px-4">
      <div className="glass-effect p-12 rounded-2xl text-center relative overflow-hidden">
        <div className="absolute -top-40 -right-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl"></div>
        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-accent-teal/10 rounded-full blur-3xl"></div>
        
        <div className="relative z-10 max-w-2xl mx-auto">
          <h2 className="text-3xl md:text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent-teal">
            {title}
          </h2>
          <p className="text-lg text-neutral-light mb-10 leading-relaxed">
            {description}
          </p>
          <a
            href={buttonLink}
            className="inline-flex items-center gap-2 px-10 py-4 rounded-full bg-gradient-to-r from-primary to-accent-teal text-white font-bold hover:shadow-[0_0_30px_rgba(0,113,227,0.4)] transition-all transform hover:-translate-y-1"
          >
            {buttonText}
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
    </section>
  );
};
