import { MapPin, Star, Users } from 'lucide-react';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import CountUpNumber from '../CountUpNumber';
import { fadeInUp, scaleIn, staggerContainer, staggerItem } from '@/utils/animations';

const ProofSection = () => {
  const stats = [
    { value: '150+', label: 'Local businesses served' },
    { value: '99.9%', label: 'Network uptime achieved' },
    { value: '15+', label: 'Years in Coastal Bend' },
    { value: '<2min', label: 'Average response time' }
  ];

  const testimonial = {
    quote: "Bay Area Affiliates transformed our IT infrastructure completely. Their proactive approach means we rarely have downtime, and when issues do arise, they're resolved quickly. Our team can focus on patient care instead of tech problems.",
    author: "Sarah Martinez",
    title: "Operations Manager",
    company: "Coastal Medical Group"
  };

  const headerRef = useRef(null);
  const statsRef = useRef(null);
  const testimonialRef = useRef(null);
  const isHeaderInView = useInView(headerRef, { once: true, margin: "-100px" });
  const isStatsInView = useInView(statsRef, { once: true, margin: "-100px" });
  const isTestimonialInView = useInView(testimonialRef, { once: true, margin: "-100px" });

  return (
    <section className="py-24 bg-background relative overflow-hidden">
      {/* Background decoration */}
      <div className="absolute inset-0 grid-overlay opacity-10"></div>
      <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          ref={headerRef}
          initial="hidden"
          animate={isHeaderInView ? "visible" : "hidden"}
          variants={fadeInUp}
        >
          <div className="text-center mb-16">
            <motion.div
              className="inline-flex items-center px-4 py-2 rounded-full bg-neon/10 border border-neon/30 text-neon text-sm font-medium mb-8"
              animate={{
                boxShadow: [
                  "0 0 20px rgba(51, 102, 255, 0.2)",
                  "0 0 30px rgba(51, 102, 255, 0.4)",
                  "0 0 20px rgba(51, 102, 255, 0.2)"
                ]
              }}
              transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
            >
              <MapPin className="w-4 h-4 mr-2" />
              Proudly serving the Coastal Bend
            </motion.div>

            <h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
              Local expertise for{' '}
              <span className="text-neon">Corpus Christi</span>{' '}
              and surrounding communities
            </h2>

            <p className="text-xl text-foreground-muted max-w-3xl mx-auto">
              We understand the unique challenges of businesses in our region and provide
              tailored solutions that work in the real world.
            </p>
          </div>
        </motion.div>

        {/* Stats */}
        <motion.div
          ref={statsRef}
          initial="hidden"
          animate={isStatsInView ? "visible" : "hidden"}
          variants={staggerContainer}
          className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-20"
        >
          {stats.map((stat, index) => (
            <motion.div
              key={stat.label}
              variants={staggerItem}
              className="text-center"
            >
              <div className="font-heading font-bold text-4xl lg:text-5xl text-neon mb-2">
                <CountUpNumber
                  value={stat.value}
                  duration={2000 + index * 200}
                  className="inline-block"
                />
              </div>
              <motion.div
                className="text-foreground-muted text-sm lg:text-base"
                initial={{ opacity: 0, y: 10 }}
                animate={isStatsInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
                transition={{ delay: index * 0.1 + 0.3, duration: 0.5 }}
              >
                {stat.label}
              </motion.div>
            </motion.div>
          ))}
        </motion.div>

        {/* Testimonial */}
        <motion.div
          ref={testimonialRef}
          initial="hidden"
          animate={isTestimonialInView ? "visible" : "hidden"}
          variants={scaleIn}
        >
          <motion.div
            className="card-dark p-8 lg:p-12 max-w-4xl mx-auto"
            whileHover={{ y: -5, boxShadow: "0 0 40px rgba(51, 102, 255, 0.3)" }}
            transition={{ duration: 0.3 }}
          >
            <div className="flex flex-col lg:flex-row items-start gap-8">
              {/* Quote */}
              <div className="flex-1">
                <motion.div
                  className="flex items-center mb-6"
                  initial="hidden"
                  animate={isTestimonialInView ? "visible" : "hidden"}
                  variants={staggerContainer}
                >
                  {[...Array(5)].map((_, i) => (
                    <motion.div
                      key={i}
                      variants={staggerItem}
                      whileHover={{ scale: 1.2, rotate: 360 }}
                      transition={{ duration: 0.4 }}
                    >
                      <Star className="w-5 h-5 text-neon fill-current" />
                    </motion.div>
                  ))}
                </motion.div>

                <blockquote className="text-lg lg:text-xl text-foreground leading-relaxed mb-6">
                  "{testimonial.quote}"
                </blockquote>

                <div className="flex items-center">
                  <motion.div
                    className="w-12 h-12 bg-neon/20 rounded-full flex items-center justify-center mr-4"
                    animate={{
                      boxShadow: [
                        "0 0 10px rgba(51, 102, 255, 0.3)",
                        "0 0 20px rgba(51, 102, 255, 0.5)",
                        "0 0 10px rgba(51, 102, 255, 0.3)"
                      ]
                    }}
                    transition={{ duration: 2, repeat: Infinity }}
                  >
                    <Users className="w-6 h-6 text-neon" />
                  </motion.div>
                  <div>
                    <div className="font-semibold text-foreground">{testimonial.author}</div>
                    <div className="text-foreground-muted text-sm">
                      {testimonial.title}, {testimonial.company}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>

        {/* Service area */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isTestimonialInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ delay: 0.4, duration: 0.6 }}
          className="mt-16 text-center"
        >
          <h3 className="font-heading font-semibold text-xl text-foreground mb-6">
            Serving businesses throughout the Coastal Bend
          </h3>

          <motion.div
            className="flex flex-wrap justify-center items-center gap-6 text-foreground-muted"
            initial="hidden"
            animate={isTestimonialInView ? "visible" : "hidden"}
            variants={staggerContainer}
          >
            {[
              'Corpus Christi', 'Portland', 'Ingleside', 'Aransas Pass',
              'Rockport', 'Fulton', 'Sinton', 'Mathis'
            ].map((city) => (
              <motion.span
                key={city}
                className="flex items-center text-sm"
                variants={staggerItem}
                whileHover={{ scale: 1.1, color: "rgba(51, 102, 255, 1)" }}
                transition={{ duration: 0.2 }}
              >
                <MapPin className="w-3 h-3 mr-1 text-neon" />
                {city}
              </motion.span>
            ))}
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default ProofSection;