import { ArrowRight, Clock, DollarSign, Phone } from 'lucide-react';
import { Link } from 'react-router-dom';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import { fadeInUp, staggerContainer, staggerItem, buttonHover, buttonTap } from '@/utils/animations';

const CTASection = () => {
  const faqs = [
    {
      icon: Clock,
      question: "How quickly can you start?",
      answer: "Most assessments can begin within 48 hours of contact."
    },
    {
      icon: DollarSign,
      question: "How do you price services?",
      answer: "Transparent monthly pricing based on devices and services needed."
    },
    {
      icon: Phone,
      question: "What's included in support?",
      answer: "24/7 monitoring, helpdesk, proactive maintenance, and SLA guarantees."
    }
  ];

  const headerRef = useRef(null);
  const ctaRef = useRef(null);
  const faqRef = useRef(null);
  const isHeaderInView = useInView(headerRef, { once: true, margin: "-100px" });
  const isCtaInView = useInView(ctaRef, { once: true, margin: "-100px" });
  const isFaqInView = useInView(faqRef, { once: true, margin: "-100px" });

  return (
    <section className="py-24 bg-background-deep relative overflow-hidden">
      {/* Background decoration */}
      <div className="absolute inset-0 grid-overlay opacity-20"></div>
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-neon/5 to-transparent"></div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            ref={headerRef}
            initial="hidden"
            animate={isHeaderInView ? "visible" : "hidden"}
            variants={fadeInUp}
          >
            <h2 className="font-heading font-bold text-4xl sm:text-5xl lg:text-6xl text-foreground mb-6">
              Ready for <motion.span
                className="text-neon text-glow"
                animate={{
                  textShadow: [
                    "0 0 20px rgba(51, 102, 255, 0.5)",
                    "0 0 40px rgba(51, 102, 255, 0.8)",
                    "0 0 20px rgba(51, 102, 255, 0.5)"
                  ]
                }}
                transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
              >
                reliable IT?
              </motion.span>
            </h2>

            <p className="text-xl text-foreground-muted mb-12 leading-relaxed">
              Join 150+ Coastal Bend businesses that trust us with their technology.
              Get started with a free 20-minute assessment.
            </p>
          </motion.div>

          {/* Primary CTAs */}
          <motion.div
            ref={ctaRef}
            initial={{ opacity: 0, y: 30 }}
            animate={isCtaInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ delay: 0.2, duration: 0.6 }}
            className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16"
          >
            <motion.div whileHover={buttonHover} whileTap={buttonTap}>
              <Link
                to="/contact"
                className="btn-neon group flex items-center space-x-2 text-lg px-8 py-4"
              >
                <span>Book a 20-minute assessment</span>
                <motion.div
                  animate={{ x: [0, 3, 0] }}
                  transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
                >
                  <ArrowRight className="w-5 h-5" />
                </motion.div>
              </Link>
            </motion.div>

            <motion.div whileHover={buttonHover} whileTap={buttonTap}>
              <Link
                to="/contact"
                className="btn-ghost group flex items-center space-x-2 text-lg px-8 py-4"
              >
                <span>Send a message</span>
              </Link>
            </motion.div>
          </motion.div>

          {/* Micro FAQ */}
          <motion.div
            ref={faqRef}
            initial="hidden"
            animate={isFaqInView ? "visible" : "hidden"}
            variants={staggerContainer}
            className="grid grid-cols-1 md:grid-cols-3 gap-8"
          >
            {faqs.map((faq, index) => {
              const Icon = faq.icon;

              return (
                <motion.div
                  key={faq.question}
                  variants={staggerItem}
                  className="text-left"
                >
                  <motion.div
                    className="flex items-start space-x-3"
                    whileHover={{ x: 5 }}
                    transition={{ duration: 0.2 }}
                  >
                    <motion.div
                      className="w-8 h-8 bg-neon/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-1"
                      whileHover={{ rotate: 360, scale: 1.1 }}
                      transition={{ duration: 0.5 }}
                    >
                      <Icon className="w-4 h-4 text-neon" />
                    </motion.div>
                    <div>
                      <h3 className="font-semibold text-foreground mb-2">
                        {faq.question}
                      </h3>
                      <p className="text-sm text-foreground-muted">
                        {faq.answer}
                      </p>
                    </div>
                  </motion.div>
                </motion.div>
              );
            })}
          </motion.div>

          {/* Contact info */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isFaqInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
            transition={{ delay: 0.6, duration: 0.6 }}
            className="mt-16 pt-8 border-t border-border/30"
          >
            <p className="text-sm text-foreground-muted mb-4">
              Ready to talk? We're here to help.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center text-sm">
              <motion.a
                href="tel:+1-361-555-0123"
                className="text-neon hover:text-neon/80 transition-colors flex items-center"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <Phone className="w-4 h-4 mr-2" />
                (361) 555-0123
              </motion.a>
              <span className="hidden sm:block text-border">|</span>
              <motion.a
                href="mailto:info@bayareaaffiliates.com"
                className="text-neon hover:text-neon/80 transition-colors"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                info@bayareaaffiliates.com
              </motion.a>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default CTASection;