'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import { ArrowRight, Phone } from 'lucide-react';

export function CtaSection() {
  return (
    <section className="py-24 sm:py-28 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-[#081526] via-[#0d2137] to-[#1e4a6e]" />
      <div className="absolute inset-0 bg-mesh" />
      
      {/* Animated glow */}
      <motion.div
        animate={{ scale: [1, 1.15, 1], opacity: [0.08, 0.15, 0.08] }}
        transition={{ duration: 8, repeat: Infinity }}
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full bg-[var(--gold)]"
      />
      <motion.div
        animate={{ scale: [1.1, 1, 1.1], opacity: [0.05, 0.1, 0.05] }}
        transition={{ duration: 6, repeat: Infinity, delay: 2 }}
        className="absolute top-1/3 left-1/3 w-[300px] h-[300px] rounded-full bg-[var(--teal)]"
      />

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-6">
            Ready to Take Control of Your <span className="text-gradient-gold">Finances</span>?
          </h2>
          <p className="text-white/60 text-lg max-w-2xl mx-auto mb-10">
            Schedule a free consultation today and discover how Alpha CPA Consulting can help your business grow.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link
              href="/contact"
              className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-[var(--gold)] to-[#d4b060] text-[var(--navy-dark)] font-bold rounded-xl hover:shadow-xl hover:shadow-[var(--gold)]/20 transition-all duration-300 hover:-translate-y-0.5"
            >
              Book Free Consultation <ArrowRight className="w-5 h-5" />
            </Link>
            <a
              href="tel:+15707553434"
              className="inline-flex items-center gap-2 px-8 py-4 bg-white/[0.06] text-white font-semibold rounded-xl hover:bg-white/[0.12] backdrop-blur-md border border-white/10 transition-all duration-300"
            >
              <Phone className="w-5 h-5" /> Call Us Now
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
}