import { useState, useEffect } from "react";
import { motion } from "framer-motion";
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 ">
  {/* Jeevansathi 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">
    Jeevansathi 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 */}
          <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: "10M+", label: "Happy Users" },
                  { number: "100%", label: "Verified Profiles" },
                  { number: "24/7", label: "Support" },
                ].map((stat, index) => (
                  <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 }}
                  >
                    <motion.h3
                      className="text-4xl md:text-5xl font-bold text-pink-500 mb-2"
                      whileHover={{ scale: 1.1 }}
                    >
                      {stat.number}
                    </motion.h3>
                    <p className="text-gray-600 dark:text-gray-400 font-medium">
                      {stat.label}
                    </p>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.section>
        </div>
      </section>
    </>
  );
};

export default AppPromoteSection;