import React from 'react';
import { motion } from 'framer-motion';
import videoSrc from '../assets/video.mp4';
import SectorsSlider from '../components/SectorsSlider';
import CounterCard from '../components/CounterCard';
import '../styles/Home.css';
import IndiaMap from "../components/IndiaMap";
import ClientsSection from '../components/ClientsSection';
import '../styles/CounterCard.css';

// Animation variants
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.3,
      when: "beforeChildren"
    }
  }
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.5,
      ease: "easeOut"
    }
  }
};

const fadeIn = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: 0.8 }
  }
};

const Home = () => {
  return (
    <div className="w-full bg-gradient-to-b from-blue-50 via-gray-50 to-white">
      {/* Hero Video Section */}
      <motion.div 
        initial="hidden"
        animate="visible"
        variants={fadeIn}
        className="relative w-full h-[60vh] overflow-hidden"
      >
        <div className="absolute inset-0 bg-gradient-to-r from-blue-900/40 to-blue-600/30 z-10"></div>
        <video
          className="absolute top-0 left-0 w-full h-full object-cover z-0"
          src={videoSrc}
          autoPlay
          loop
          muted
          playsInline
        />
       <motion.div 
        variants={containerVariants}
        className="absolute top-0 left-0 w-full h-full z-20 flex items-center justify-center overflow-visible"
      >
        <motion.div 
          variants={itemVariants} 
          className="text-center text-white px-4 max-w-4xl"
        >
          <h1 className="text-3xl md:text-5xl lg:text-5xl font-extrabold mb-6 drop-shadow-lg leading-snug md:leading-normal bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-100">
           Building the Future Restoring the Past
          </h1>

          <p className="text-lg md:text-xl lg:text-2xl font-medium drop-shadow max-w-2xl mx-auto bg-blue-900/30 backdrop-blur-sm rounded-lg p-4">
            CONSTRUCTING WITH EXCELLENCE. DELIVERING PRIDE FOR GENERATIONS
          </p>
        </motion.div>
      </motion.div>

      </motion.div>

      {/* Floating particles background */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
        {[...Array(20)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute rounded-full bg-blue-200/30"
            initial={{
              x: Math.random() * 100,
              y: Math.random() * 100,
              width: Math.random() * 10 + 5,
              height: Math.random() * 10 + 5,
            }}
            animate={{
              y: [0, Math.random() * 100 - 50],
              x: [0, Math.random() * 100 - 50],
              transition: {
                duration: Math.random() * 10 + 10,
                repeat: Infinity,
                repeatType: "reverse",
                ease: "easeInOut",
              },
            }}
          />
        ))}
      </div>

      {/* Sector Slider */}
      <motion.div 
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 0.8 }}
        viewport={{ once: true }}
        className="relative py-12 bg-gradient-to-br from-blue-50 to-blue-100"
      >
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMxRTg0RkYiIGZpbGwtb3BhY2l0eT0iMC4yIj48cGF0aCBkPSJNMzYgMzRjMC0yLjIgMS44LTQgNC00czQgMS44IDQgNC0xLjggNC00IDQtNC0xLjgtNC00eiIvPjwvZz48L2c+PC9zdmc+')]"></div>
        </div>
        <SectorsSlider />
      </motion.div>

      {/* About Section */}
      <motion.section 
        initial="hidden"
        whileInView="visible"
        variants={containerVariants}
        viewport={{ once: true, margin: "-100px" }}
        className="relative py-16 px-4 md:px-8 lg:px-20 bg-white rounded-t-3xl shadow-xl overflow-hidden"
      >
        {/* Decorative corner */}
        <div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/5 clip-path-polygon-[0_0,_100%_0,_100%_100%]"></div>
        
        
      </motion.section>
{/* Vision & Mission Section */}
<motion.section 
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  transition={{ duration: 0.6 }}
  viewport={{ once: true }}
  className="relative py-20 px-4 md:px-8 lg:px-20 bg-gradient-to-br from-blue-900 to-blue-800 overflow-hidden"
>
  {/* Decorative elements */}
  <div className="absolute top-0 left-0 w-full h-full opacity-10">
    <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNGRkYiIGZpbGwtb3BhY2l0eT0iMC4yIj48cGF0aCBkPSJNMzYgMzRjMC0yLjIgMS44LTQgNC00czQgMS44IDQgNC0xLjggNC00IDQtNC0xLjgtNC00eiIvPjwvZz48L2c+PC9zdmc+')]"></div>
  </div>
  
  <motion.div 
    initial={{ y: 30, opacity: 0 }}
    whileInView={{ y: 0, opacity: 1 }}
    transition={{ duration: 0.6 }}
    viewport={{ once: true }}
    className="max-w-7xl mx-auto relative z-10"
  >
    <h2 className="text-4xl font-bold text-center text-white mb-16 relative pb-2">
      <span className="relative inline-block">
        Vision & Mission
        <motion.span 
          initial={{ scaleX: 0 }}
          whileInView={{ scaleX: 1 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="absolute bottom-0 left-0 w-full h-1 bg-red-500 z-0 transform origin-center"
        />
      </span>
    </h2>

    <div className="grid md:grid-cols-2 gap-8 mb-16">
      {/* Vision */}
      <motion.div 
        initial={{ x: -50, opacity: 0 }}
        whileInView={{ x: 0, opacity: 1 }}
        transition={{ duration: 0.5 }}
        viewport={{ once: true }}
        className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all border-l-4 border-blue-500 hover:border-blue-400"
      >
        <div className="flex items-start mb-6">
          <div className="bg-blue-100 p-3 rounded-full mr-4">
            <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
          </div>
          <div>
            <h3 className="text-xl font-bold text-blue-900 mb-2">Vision</h3>
            <p className="text-gray-700">
              To be a company at the forefront of engineering and construction, renowned for excellence, quality, performance, and reliability.
            </p>
          </div>
        </div>
      </motion.div>

      {/* Mission */}
      <motion.div 
        initial={{ x: 50, opacity: 0 }}
        whileInView={{ x: 0, opacity: 1 }}
        transition={{ duration: 0.5 }}
        viewport={{ once: true }}
        className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all border-l-4 border-red-500 hover:border-red-400"
      >
        <div className="flex items-start mb-6">
          <div className="bg-blue-100 p-3 rounded-full mr-4">
            <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <div>
            <h3 className="text-xl font-bold text-blue-900 mb-2">Mission</h3>
            <p className="text-gray-700">
              To complete every project undertaken with sincerity, excellence, and in a time-bound manner, meeting all expectations of the client.
            </p>
          </div>
        </div>
      </motion.div>
    </div>           
  </motion.div>
</motion.section>

      {/* Clients Section */}
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 0.8 }}
        viewport={{ once: true }}
        className="relative py-20 bg-gradient-to-br from-white to-blue-50 overflow-hidden"
      >
        {/* Decorative elements */}
        <div className="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-blue-200/20"></div>
        <div className="absolute -bottom-20 -left-20 w-80 h-80 rounded-full bg-blue-300/10"></div>
        
        <ClientsSection />
      </motion.div>

      {/* Map Section */}
      <motion.section 
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        viewport={{ once: true }}
        className="relative py-20 px-4 md:px-8 lg:px-20 text-white"
      >
        {/* Animated background */}
        <div className="absolute inset-0 overflow-hidden opacity-10">
          {[...Array(10)].map((_, i) => (
            <motion.div
              key={i}
              className="absolute rounded-full bg-white"
              initial={{
                x: Math.random() * 100,
                y: Math.random() * 100,
                width: Math.random() * 20 + 5,
                height: Math.random() * 20 + 5,
                opacity: Math.random() * 0.3,
              }}
              animate={{
                y: [0, Math.random() * 100 - 50],
                x: [0, Math.random() * 100 - 50],
                transition: {
                  duration: Math.random() * 15 + 15,
                  repeat: Infinity,
                  repeatType: "reverse",
                  ease: "easeInOut",
                },
              }}
            />
          ))}
        </div>
        
        <div className="max-w-7xl mx-auto text-center relative z-10">
          <h2 className="text-4xl font-bold mb-4 relative inline-block text-blue-900">
            <span className="relative z-10">
              Our Presence Across India
              <motion.span 
                initial={{ scaleX: 0 }}
                whileInView={{ scaleX: 1 }}
                transition={{ duration: 0.6 }}
                viewport={{ once: true }}
                className="absolute bottom-0 left-0 w-full h-1 bg-red-500 z-0 transform origin-center"
              />
            </span>
          </h2>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            We have successfully delivered projects in multiple states across India, with a growing national footprint.
          </p>
          <motion.div 
            initial={{ scale: 0.95 }}
            whileInView={{ scale: 1 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
            className="bg-white/10 backdrop-blur-sm p-6 rounded-xl shadow-lg border border-blue-400/30"
          >
            <IndiaMap />
          </motion.div>
        </div>
      </motion.section>
    </div>
  );
};

export default Home;