import { Link } from '@tanstack/react-router'
import { commonDescriptions } from '../../data/siteData'

export default function CTA() {
  return (
    <section
      className="py-16"
      style={{ background: 'linear-gradient(100deg, #2e5deb 10%, #5360fd 50%, #ff5b83 100%)' }}
    >
      <div className="container mx-auto px-4 py-3 text-center">
        <div className="max-w-3xl mx-auto">
          <h3 className="text-2xl md:text-3xl font-bold mb-4 font-sans" style={{ color: '#ffffff' }}>
            {commonDescriptions.ctaTitle}
          </h3>
          <p className="text-white my-3">
            {commonDescriptions.sectionDesc}
          </p>
        </div>
        <div className="flex flex-wrap justify-center gap-4 mt-8">
          <Link
            to="/contact"
            className="px-8 py-3 border-2 border-white text-white hover:bg-secondary hover:border-secondary font-semibold rounded transition-colors"
          >
            Contact Us
          </Link>
          <Link
            to="/contact"
            className="px-8 py-3 bg-primary hover:bg-secondary text-white font-semibold rounded transition-colors"
          >
            Get Started
          </Link>
        </div>
      </div>
    </section>
  )
}