import { useState, useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import { Box, Typography } from '@mui/material';
import { useInView } from 'react-intersection-observer';

import {
  Users,
  Shield,
  Lock,
  Download,
  Smartphone,
  QrCode,
} from "lucide-react";
import { BorderBeam } from "../lightswind/border-beam";
import LazyImage from "../common/LazyImage";
import records1 from "../../assets/images/records-new-1.svg"
import records2 from "../../assets/images/records-new-2.svg"

import records3 from "../../assets/images/records-new-3.svg"
import MatrimonySwipeCards from "../common/MatrimonySwipeCards";

const AppPromoteSection = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const fadeInUp = {
    hidden: { opacity: 0, y: 60 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6, ease: "easeOut" },
    },
  };

  const staggerContainer = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  };

  const scaleIn = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: { duration: 0.5 },
    },
  };

  const features = [
    {
      icon: records1,
      title: "100% Screened Profiles",
      description:
        "Search by location, community, profession & more from lakhs of active profiles",
      color: "bg-pink-50 dark:bg-pink-900/20",
    },
    {
      icon: records2,
      title: "Verifications by Personal Visit",
      description:
        "Special listing for profiles verified by our agents through personal visits",
      color: "bg-blue-50 dark:bg-blue-900/20",
    },
    {
      icon: records3,
      title: "Control over Privacy",
      description:
        "Restrict unwanted access to contact details & photos/videos",
      color: "bg-purple-50 dark:bg-purple-900/20",
    },
  ];

  return (
    <>
      <section className="md:-mt-[100px]  mx-auto w-[100%] max-w-[1200px] relative z-9  md:my-8 p-2 md:p-4">
        <div
          className="-mt-[20px] md:mt-[0px] 
    rounded-[20px] overflow-hidden bg-white " style={{boxShadow:"0 2px 6px 0 rgba(142, 142, 142, .2)"}}
        >
          {/* Hero Section */}
          <section className="relative p-2 pb-15 flex items-center justify-center overflow-hidden border-none">
            {/* Background Image with Overlay */}
            <div
              className="absolute inset-0 z-0"
              // style={{
              //   backgroundImage: 'url(https://images.unsplash.com/photo-1519741497674-611481863552?w=1200)',
              //   backgroundSize: 'cover',
              //   backgroundPosition: 'center',
              // }}
            >
              {/* <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-black/50"></div> */}
            </div>

            {/* Content */}
            <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
              <motion.div
                initial="hidden"
                animate={isVisible ? "visible" : "hidden"}
                variants={fadeInUp}
                className="text-center"
              >
                
                {/* <motion.h1
                  variants={fadeInUp}
                  className="text-[18px] md:text-[25px] font-bold mt-4 text-black mb-8"
                >
                  Bringing People{" "}
                  <span className="text-pink-400">Together</span>
                </motion.h1> */}
              </motion.div>

              {/* Features Grid */}
              <motion.div
                variants={staggerContainer}
                initial="hidden"
                animate={isVisible ? "visible" : "hidden"}
                className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 max-w-6xl mx-auto"
              >
                {features.map((feature, index) => (
                  <div className="relative  overflow-hidden bg-white rounded-2xl p-2 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden">
                    <BorderBeam
                      colorFrom="#ff0000ff"
                      colorTo="#338105ff"
                      size={90}
                      duration={6}
                      borderThickness={6}
                      glowIntensity={6}
                    />
                    <div className="relative bg-card py-2 px-2 rounded-md z-10">
                      <motion.div
                        key={index}
                        variants={scaleIn}
                        whileHover={{ scale: 1, y: -5 }}
                        className="flex flex-col items-center text-center "
                      >
                        <motion.div
                          className={`w-[80px] h-[80px]  flex items-center justify-center mb-6`}
                          whileHover={{ scale: 1.1}}
                          transition={{ duration: 0.6 }}
                        >
                          <LazyImage
        src={feature.icon}
        className="w-full h-full rounded-lg object-cover"
      />
                        </motion.div>
                        <h3 className="text-[18px] font-semibold text-[#A70710] text-center mb-3">
                          {feature.title}
                        </h3>
                        <p className="text-gray-600  text-justify leading-relaxed">
                          {feature.description}
                        </p>
                      </motion.div>
                    </div>
                  </div>
                ))}
              </motion.div>
            </div>
          </section>

          {/* App Download Section */}
          <section className="relative py-8 bg-[#a707100f]">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
                {/* Left Content */}
                <motion.div
                  initial={{ opacity: 0, x: -50 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6 }}
                >

                  <p className="text-[14px] text-gray-600 mb-2">
                    Connect with your matches anytime, anywhere
                  </p>
                  <h2 className="text-[22px]  font-bold text-gray-900 mb-2">
                   Impress your matches with instant <span className="text-[#A70710]">chats!</span>
                  </h2>
                

                  <div className="mt-6 ">
  {/* <div className="absolute bottom-0 left-0 w-full h-[300px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%)"}} />
 Match Hour */}
 <div className="mb-4">
  <h2 className="text-lg font-semibold text-gray-900 relative after:content-[''] after:block after:w-15  after:h-1 after:bg-[#A70710] after:rounded-full after:mt-1">
    Thirukalyanam Match Hour
  </h2>
  <p className="text-gray-600 mt-2">
    Register to join an online event to connect with members of your community in a short time
  </p>
</div>


  {/* Voice & Video Calling */}

  <div className="mb-4">
  <h2 className="text-lg font-semibold text-gray-900 relative after:content-[''] after:block after:w-15 after:h-1 after:bg-[#A70710] after:rounded-full after:mt-1">
    Voice & Video Calling
  </h2>
  <p className="text-gray-600 mt-2">
     Enjoy secure conversations using our voice & video calling services without revealing your number
  </p>
</div>

  

  {/* Introducing Video Profiles */}

   <div className="mb-4">
  <h2 className="text-lg font-semibold text-gray-900 relative after:content-[''] after:block after:w-15 after:h-1 after:bg-[#A70710] after:rounded-full after:mt-1">
   Introducing Video Profiles
  </h2>
  <p className="text-gray-600 mt-2">
    Stand out amongst others and engage faster! Introduce yourself by adding a video to your profile
  </p>
</div>
  
</div>

                </motion.div>

                {/* Right - Phone Mockup */}
                <motion.div
                  initial={{ opacity: 0, x: 50 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6 }}
                  className="relative"
                >
                  
<MatrimonySwipeCards/>

                </motion.div>
              </div>
            </div>
          </section>

          {/* Stats Section */}
         {/* Stats Section with MUI Counter */}
<motion.section
  className="py-16 bg-[#fff]"
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{ once: true }}
>
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
      {[
        { number: 25, label: "Years of Trust" },
        { number: 10000000, label: "Happy Users" },
        { number: 100, label: "Verified Profiles" },
        { number: 24, label: "Support" },
      ].map((stat, index) => {
        const [ref, inView] = useInView({
          threshold: 0.3,
          triggerOnce: true,
          delay: index * 100,
        });

        const Counter = ({ endValue }) => {
          const [count, setCount] = useState(0);
          
          useEffect(() => {
            if (inView) {
              const duration = 2000; // 2 seconds
              const startTime = Date.now();
              
              const animate = () => {
                const elapsed = Date.now() - startTime;
                const progress = Math.min(elapsed / duration, 1);
                const easeProgress = 1 - Math.pow(1 - progress, 3); // easeOut cubic
                const currentValue = Math.floor(easeProgress * endValue);
                setCount(currentValue);
                
                if (progress < 1) {
                  requestAnimationFrame(animate);
                } else {
                  setCount(endValue);
                }
              };
              animate();
            }
          }, [inView, endValue]);

          return (
            <Typography 
              variant="h3" 
              sx={{ 
                fontSize: { xs: '1.5rem', md: '2rem' }, 
                fontWeight: 700,
                color: '#A70710',
               
                mb: 1,
                fontFamily: 'inherit'
              }}
            >
              {stat.number >= 1000000 
                ? `${(count / 1000000).toFixed(0)}M+`
                : stat.number === 100 
                ? `${count}%`
                : stat.number === 24 
                ? `${count}/7`
                : `+${count}`
              }
            </Typography>
          );
        };

        return (
          <motion.div
            key={index}
            className="text-center"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.1 }}
            style={{background:"#eaf7deff", padding:"20px 5px", borderRadius:"10px"}}
          >
            <Box ref={ref}>
              <Counter endValue={stat.number} />
            </Box>
            <Typography 
              variant="body1" 
              sx={{ 
                color: 'grey.600', 
                fontWeight: 500,
                fontSize: '1.1rem'
              }}
            >
              {stat.label}
            </Typography>
          </motion.div>
        );
      })}
    </div>
  </div>
</motion.section>





        </div>
      </section>
    </>
  );
};

export default AppPromoteSection;