import { motion } from "motion/react";
import { ArrowRight } from "lucide-react";

export function ServicesCTASection() {
  return (
    <section className="py-16 px-[var(--section-margin-x)] max-lg:px-8 max-md:py-12">
      <div className="max-w-4xl mx-auto text-center">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7 }}
          viewport={{ once: true }}
          className="space-y-8"
        >
          {/* CTA Button */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            viewport={{ once: true }}
          >
            <button className="services-cta-button">
              <div className="services-cta-icon">
                <ArrowRight size={20} />
              </div>
              <span className="services-cta-text">
                Get Started Today
              </span>
            </button>
          </motion.div>

          {/* Supporting Text */}
          <motion.p 
            className="text-sm max-md:text-xs"
            style={{ color: 'var(--color-brand-gray-muted)' }}
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.5 }}
            viewport={{ once: true }}
          >
            Free consultation • No commitment required • Expert guidance
          </motion.p>
        </motion.div>
      </div>
    </section>
  );
}