import { motion } from 'framer-motion';
import React, { useState } from 'react';
 
const clients = [
  { name: 'Public Works Department', logo: require('../assets/clientLogos/pwd.png') },
  { name: 'Water Resource Department', logo: require('../assets/clientLogos/wrd.png') },
  { name: 'Maharashtra Jeevan Pradhikaran', logo: require('../assets/clientLogos/mjp.png') },
  { name: 'The City & Industrial Development Corporation of Maharashtra Limited', logo: require('../assets/clientLogos/cidco.png') },
  { name: 'Maharashtra Industrial Development Corporation', logo: require('../assets/clientLogos/midc.png') },
  { name: 'Bengaluru Water Supply and Sewerage Board', logo: require('../assets/clientLogos/bwssb.png') },
  { name: 'Karnataka Urban Infrastructure Development and Finance Corporation', logo: require('../assets/clientLogos/kuidfc.png') },
  { name: 'Krishna Bhagya Jal Nigam Limited', logo: require('../assets/clientLogos/kbjnl.png') },
  { name: 'Karnataka Urban Water Supply And Drainage Board', logo: require('../assets/clientLogos/kuwsdb.png') },
  { name: 'Kerala Water Authority', logo: require('../assets/clientLogos/kwa.png') },
  { name: 'Gail India Limited', logo: require('../assets/clientLogos/gail.png') },
  { name: 'Municipal Corporation', logo: require('../assets/clientLogos/municipal.png') },
  { name: 'Narmada Valley Development Authority', logo: require('../assets/clientLogos/nvda.png') },
  { name: 'Rural Water Supply & Sanitation Department', logo: require('../assets/clientLogos/rwss.png') },
  { name: 'Madhya Pradesh Jal Nigam Maryadit', logo: require('../assets/clientLogos/mpjnm.png') },
  { name: 'Public Health Engineering Department', logo: require('../assets/clientLogos/phed.png') },
  { name: 'Goa Tourism Development Corporation Limited', logo: require('../assets/clientLogos/gtdcl.png') },
  { name: 'Central Railway', logo: require('../assets/clientLogos/cr.png') },
  { name: 'Gujarat Water Infrastructure Limited', logo: require('../assets/clientLogos/gwil.png') },
  { name: 'JUIDCO', logo: require('../assets/clientLogos/judaico.png') },
  { name: 'Hindustan Aeronautics Limited', logo: require('../assets/clientLogos/hal.png') },
  { name: 'Municipal Councils', logo: require('../assets/clientLogos/municipal-council.png') },
  { name: 'Solapur Smart City', logo: require('../assets/clientLogos/solapur.png') },
  { name: 'Vadodara Smart City', logo: require('../assets/clientLogos/vadodara.png') },


];
 
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
};
 
const cardVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: 'spring',
      stiffness: 100,
      damping: 20,
    },
  },
};
 
const hoverVariants = {
  hover: {
    y: -10,
    scale: 1.05,
    boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
    transition: {
      type: "spring",
      stiffness: 400,
      damping: 10
    }
  },
  tap: {
    y: -15,
    scale: 1.1,
    boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
    transition: {
      type: "spring",
      stiffness: 400,
      damping: 10
    }
  }
};
 
const ClientsSection = () => {
  const [selectedCard, setSelectedCard] = useState(null);
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
  const isTablet = typeof window !== 'undefined' && window.innerWidth >= 768 && window.innerWidth < 1024;
 
  let row1, row2, row3;
 
  if (isMobile) {
    row1 = clients.slice(0, 8);
  } else if (isTablet) {
    const chunkSize = Math.ceil(clients.length / 2);
    row1 = clients.slice(0, chunkSize);
    row2 = clients.slice(chunkSize);
  } else {
    const chunkSize = Math.ceil(clients.length / 3);
    row1 = clients.slice(0, chunkSize);
    row2 = clients.slice(chunkSize, chunkSize * 2);
    row3 = clients.slice(chunkSize * 2);
  }
 
  const handleCardClick = (clientKey) => {
    setSelectedCard(selectedCard === clientKey ? null : clientKey);
  };
 
  const renderScrollingRow = (rowItems, rowKey) => (
    <motion.div
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, margin: "-100px" }}
      variants={containerVariants}
      key={rowKey}
      className="w-full"
    >
      <div className="flex overflow-hidden w-full">
        <div className="flex animate-[scroll_30s_linear_infinite] hover:animation-pause">
          {[...rowItems, ...rowItems].map((client, index) => {
            const clientKey = `${rowKey}-${index}`;
            return (
              <motion.div
                key={clientKey}
                variants={cardVariants}
                whileHover="hover"
                whileTap="tap"
                animate={selectedCard === clientKey ? "tap" : "visible"}
                onClick={() => handleCardClick(clientKey)}
                className="inline-flex flex-col items-center justify-center mx-2 md:mx-4 bg-white p-3 md:p-4 rounded-lg shadow-md w-44 h-40 md:w-56 md:h-48 flex-shrink-0 cursor-pointer relative z-0"
                style={{
                  zIndex: selectedCard === clientKey ? 10 : 1
                }}
              >
                <motion.div
                  variants={hoverVariants}
                  className="w-full h-full flex flex-col items-center justify-center"
                >
                  <div className="h-12 md:h-16 flex items-center mb-2 md:mb-3">
                    <img
                      src={client.logo}
                      alt={client.name}
                      className="max-h-full max-w-full object-contain"
                      loading="lazy"
                    />
                  </div>
                  <p className="text-xs md:text-sm font-medium text-blue-900 text-center break-words w-full px-1 md:px-2">
                    {client.name}
                  </p>
                </motion.div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </motion.div>
  );
 
  return (
    <section className="bg-blue-900 py-12 md:py-20 px-0 overflow-hidden relative">
      {/* Backdrop that appears when a card is selected */}
      {selectedCard && (
        <div
          className="fixed inset-0 bg-black bg-opacity-30 z-20"
          onClick={() => setSelectedCard(null)}
        />
      )}
     
      <div className="max-w-7xl mx-auto px-4 relative z-10">
        <motion.h2
          className="text-3xl md:text-4xl font-bold text-white mb-3 md:mb-4 text-center"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          Clients who trust us
        </motion.h2>
        <motion.h3
          className="text-xl md:text-2xl font-semibold text-center text-blue-200 mb-4 md:mb-6"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2, duration: 0.5 }}
        >
          RISING TOGETHER WITH ELITE COLLABORATIONS
        </motion.h3>
        <motion.p
          className="text-center text-blue-100 max-w-4xl mx-auto mb-8 md:mb-12 px-4 text-sm md:text-base"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.4, duration: 0.5 }}
        >
          At LCEPL, we take pride in unveiling our elite portfolio – a testament to our commitment to elevating horizons and seamlessly connecting the landmarks that shape the world around us.
        </motion.p>
      </div>
 
      <div className="space-y-4 md:space-y-6 w-full relative z-10">
        {renderScrollingRow(row1, 'row1')}
        {!isMobile && renderScrollingRow(row2, 'row2')}
        {!isMobile && !isTablet && renderScrollingRow(row3, 'row3')}
      </div>
 
      <style jsx global>{`
        @keyframes scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .animate-\\[scroll_30s_linear_infinite\\] {
          animation: scroll 30s linear infinite;
        }
        @media (max-width: 768px) {
          .animate-\\[scroll_30s_linear_infinite\\] {
            animation: scroll 30s linear infinite;
          }
        }
      `}</style>
    </section>
  );
};
 
export default ClientsSection;