import { motion } from "framer-motion";
import { GridPattern } from "./GridPattern";
import Flag from 'react-world-flags';

const companyLogos = [
  { name: "TechFlow Solutions", logo: null, width: "140" },
  { name: "DataSync Pro", logo: null, width: "120" },
  { name: "CloudNova Systems", logo: null, width: "140" },
  { name: "AMOZ", logo: null, width: "90" },
  { name: "SimpliTend", logo: null, width: "120" },
  // { name: "Seezun", logo: null, width: "100" },
  { name: "TradersCircuit", logo: null, width: "140" },
  { name: "FreeU", logo: null, width: "90" },
  { name: "Amble", logo: null, width: "100" },
  { name: "Lean In World", logo: null, width: "130" },
  { name: "WOKA", logo: null, width: "90" },
  { name: "SSA", logo: null, width: "80" },
  { name: "Dorf Ketal", logo: null, width: "120" },
  { name: "Agromate", logo: null, width: "120" },
  { name: "Regroup", logo: null, width: "110" },
  { name: "CAD IT Solutions", logo: null, width: "150" },
  { name: "Tanami Capital", logo: null, width: "140" },
  { name: "SuperMoney Advisor", logo: null, width: "170" },
  { name: "Prosperty Platform", logo: null, width: "160" },
  { name: "Moving Cargo", logo: null, width: "130" },
  { name: "GSF Mobile", logo: null, width: "120" },
  { name: "Farm Feeder", logo: null, width: "120" },
  { name: "Melbourne City Card", logo: null, width: "170" },
  { name: "ByteForge Labs", logo: null, width: "130" },
  { name: "CodeCraft Studio", logo: null, width: "140" },
  { name: "DevStream Tech", logo: null, width: "130" },
  { name: "NextGen Solutions", logo: null, width: "150" },
  { name: "ProdPush Platform", logo: null, width: "140" },
  { name: "ScaleUp Ventures", logo: null, width: "140" },
  { name: "AlphaVision Labs", logo: null, width: "140" },
  { name: "CloudSync Systems", logo: null, width: "140" },
  { name: "TechNova Group", logo: null, width: "130" },
  { name: "DataFlow Pro", logo: null, width: "120" },
  { name: "InnovateLab", logo: null, width: "120" }
];

// const countryFlags = [
//   {
//     name: "United States",
//     alt: "United States flag icon",
//     flagSvg: (
//       <svg viewBox="0 0 24 18" className="w-8 h-6">
//         <rect width="24" height="18" fill="#B22234"/>
//         <rect width="24" height="1.38" y="1.38" fill="white"/>
//         <rect width="24" height="1.38" y="4.15" fill="white"/>
//         <rect width="24" height="1.38" y="6.92" fill="white"/>
//         <rect width="24" height="1.38" y="9.69" fill="white"/>
//         <rect width="24" height="1.38" y="12.46" fill="white"/>
//         <rect width="24" height="1.38" y="15.23" fill="white"/>
//         <rect width="9.6" height="9.69" fill="#3C3B6E"/>
//       </svg>
//     )
//   },
//   {
//     name: "United Kingdom",
//     alt: "United Kingdom flag icon",
//     flagSvg: (
//       <svg viewBox="0 0 24 18" className="w-8 h-6">
//         <rect width="24" height="18" fill="#012169"/>
//         <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
//         <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
//         <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
//         <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
//       </svg>
//     )
//   },
//   {
//     name: "India",
//     alt: "India flag icon",
//     flagSvg: (
//       <svg viewBox="0 0 24 18" className="w-8 h-6">
//         <rect width="24" height="6" fill="#FF9933"/>
//         <rect width="24" height="6" y="6" fill="white"/>
//         <rect width="24" height="6" y="12" fill="#138808"/>
//         <circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
//         <g transform="translate(12,9)">
//           {Array.from({length: 24}, (_, i) => (
//             <line key={i} x1="0" y1="-1.5" x2="0" y2="-1.8" stroke="#000080" strokeWidth="0.1" transform={`rotate(${i * 15})`}/>
//           ))}
//         </g>
//       </svg>
//     )
//   },
//   {
//     name: "Canada",
//     alt: "Canada flag icon",
//     flagSvg: (
//       <svg viewBox="0 0 24 18" className="w-8 h-6">
//         <rect width="6" height="18" fill="#FF0000"/>
//         <rect width="12" height="18" x="6" fill="white"/>
//         <rect width="6" height="18" x="18" fill="#FF0000"/>
//         <path d="M12 4L13 7H16L13.5 9L14.5 12L12 10L9.5 12L10.5 9L8 7H11L12 4Z" fill="#FF0000"/>
//       </svg>
//     )
//   },
//   {
//     name: "Australia",
//     alt: "Australia flag icon",
//     flagSvg: (
//       <svg viewBox="0 0 24 18" className="w-8 h-6">
//         <rect width="24" height="18" fill="#012169"/>
//         <g transform="scale(0.5)">
//           <rect width="24" height="9" fill="#012169"/>
//           <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
//           <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
//           <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
//           <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
//         </g>
//         <g fill="white">
//           <circle cx="18" cy="6" r="0.5"/>
//           <circle cx="20" cy="8" r="0.3"/>
//           <circle cx="19" cy="10" r="0.4"/>
//           <circle cx="21" cy="12" r="0.3"/>
//           <circle cx="18" cy="14" r="0.5"/>
//         </g>
//       </svg>
//     )
//   }
// ];

const countryFlags = [
  { name: "United States", code: "US", alt: "United States flag" },
  { name: "United Kingdom", code: "GB", alt: "United Kingdom flag" },
  { name: "India", code: "IN", alt: "India flag" },
  { name: "Canada", code: "CA", alt: "Canada flag" },
  { name: "Australia", code: "AU", alt: "Australia flag" }
];
const ProjectImageCircles = () => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.8, delay: 0.3 }}
    viewport={{ once: true }}
    className="flex items-center justify-center mb-12"
  >
    <div className="flex items-center">
      {countryFlags.map((flag, index) => (
        <motion.div
          key={index}
          initial={{ opacity: 0, scale: 0 }}
          whileInView={{ opacity: 1, scale: 1 }}
          transition={{
            duration: 0.5,
            delay: 0.5 + (index * 0.1),
            type: "spring",
            stiffness: 200
          }}
          viewport={{ once: true }}
          whileHover={{
            scale: 1.1,
            zIndex: 10,
            transition: { duration: 0.2 }
          }}
          className="relative w-16 h-16 cursor-pointer group"
          style={{
            marginLeft: index > 0 ? '-8px' : '0',
            zIndex: countryFlags.length - index
          }}
        >
          {/* Circular container */}
          <div className="absolute inset-0 flex items-center justify-center w-16 h-16 overflow-hidden transition-all duration-300 border-2 rounded-full shadow-lg bg-white/10 backdrop-blur-sm border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 group-hover:shadow-xl">
            <div
              className="flex items-center justify-center w-10 h-8 transition-transform duration-300 transform group-hover:scale-110"
              role="img"
              aria-label={flag.alt}
            >
              <Flag code={flag.code} style={{ width: '40px', height: '30px' }} />
            </div>
          </div>

          {/* Subtle glow effect */}
          <div className="absolute inset-0 w-16 h-16 transition-opacity duration-300 rounded-full opacity-0 bg-gradient-to-br from-accent/10 to-transparent group-hover:opacity-100"></div>

          {/* Tooltip */}
          <div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg border border-white/10 z-50">
            <div className="text-center">
              <div className="font-medium text-accent">{flag.name}</div>
            </div>
            <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-3 border-r-3 border-t-3 border-transparent border-t-[#0E0E0E]"></div>
          </div>
        </motion.div>
      ))}
    </div>
  </motion.div>
);

const LogoCard = ({ name, width }: { name: string; width: string }) => (
  <div
    className="flex items-center justify-center h-16 px-6 transition-all duration-300 border shadow-lg bg-white/8 rounded-xl border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 backdrop-blur-sm group"
    style={{ minWidth: `${width}px` }}
  >
    <span className="text-sm font-medium leading-tight text-center transition-colors duration-300 text-white/80 group-hover:text-white/95">
      {name}
    </span>
  </div>
);

const MarqueeRow = ({ logos }: { logos: typeof companyLogos }) => (
  <motion.div
    animate={{
      x: [0, -3200],
    }}
    transition={{
      x: {
        repeat: Infinity,
        repeatType: "loop",
        duration: 120,
        ease: "linear",
      },
    }}
    className="flex items-center gap-6"
    style={{
      width: "fit-content",
    }}
  >
    {[...logos, ...logos].map((company, index) => (
      <LogoCard key={`${company.name}-${index}`} name={company.name} width={company.width} />
    ))}
  </motion.div>
);

export const ClientLogos = () => {
  return (
    <section className="relative py-20 bg-[#121212] border-y border-white/5 overflow-hidden">
      <GridPattern strokeDasharray="4 2" />

      <div className="container relative z-10 px-6 mx-auto lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-8 text-center"
        >
          <h2 className="mb-6 text-3xl font-semibold text-white lg:text-4xl">
            Trusted by Founders and CTOs Across 15+ Countries
          </h2>
        </motion.div>

        {/* Project Image Circles */}
        <ProjectImageCircles />

        {/* Company Logos Ticker */}
        <div className="overflow-hidden">
          <MarqueeRow logos={companyLogos} />
        </div>
      </div>
    </section>
  );
};