export default function CallToAction() {
  return (
    <section className="py-12 bg-gradient-to-r from-teal-600 to-teal-500 relative overflow-hidden">
      {/* Background decorative element */}
      <div className="absolute left-0 top-0 bottom-0 w-32 opacity-20">
        <div className="h-full bg-gradient-to-r from-teal-700/30 to-transparent transform -skew-x-12"></div>
      </div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="flex flex-col md:flex-row items-center justify-between text-white">
          <div className="mb-6 md:mb-0">
            <p className="text-teal-100 mb-2 text-lg">If you'd like to speak to us directly</p>
            <h2 className="font-serif text-3xl md:text-4xl lg:text-5xl font-bold">
              Call Free 24 hours a day
            </h2>
          </div>
          
          <div className="text-center md:text-right">
            <a 
              href="tel:1800-123-4567" 
              className="text-2xl md:text-3xl lg:text-4xl font-light text-white hover:text-teal-100 transition-colors duration-300"
            >
              1800-123-4567
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}