'use client';

import Link from 'next/link';
import { AnimatedSection } from '@/components/animated-section';
import { Phone, Mail, ArrowRight } from 'lucide-react';

export function CtaSection() {
  return (
    <section className="py-16 md:py-24">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
        <AnimatedSection>
          <div className="bg-gradient-to-br from-navy via-navy-light to-navy rounded-xl p-8 md:p-12 text-center relative overflow-hidden">
            {/* Gold accent */}
            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-gold to-transparent" />

            <h2 className="font-display text-3xl md:text-4xl font-bold text-white tracking-tight mb-4">
              Ready to <span className="text-gold">Start Investing?</span>
            </h2>
            <p className="text-white/70 text-lg mb-8 max-w-xl mx-auto">
              Take the first step towards building your wealth. Get in touch with our team today.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                href="/contact"
                className="inline-flex items-center justify-center gap-2 bg-gold hover:bg-gold-light text-navy font-semibold px-8 py-4 rounded-md transition-all duration-300 hover:shadow-lg hover:shadow-gold/20"
              >
                Contact Us Now
                <ArrowRight className="w-5 h-5" />
              </Link>
              <a
                href="tel:07847587241"
                className="inline-flex items-center justify-center gap-2 border-2 border-gold/50 hover:border-gold text-gold font-semibold px-8 py-4 rounded-md transition-all duration-300"
              >
                <Phone className="w-5 h-5" />
                07847 587241
              </a>
            </div>
          </div>
        </AnimatedSection>
      </div>
    </section>
  );
}