import { motion } from 'framer-motion';

const TrustedBy = () => {
    // Placeholder logos - in a real app these would be SVGs
    const companies = [
        { name: "TechCorp", color: "bg-blue-400" },
        { name: "SecureNet", color: "bg-indigo-400" },
        { name: "CloudSystems", color: "bg-cyan-400" },
        { name: "FutureData", color: "bg-sky-400" },
        { name: "CyberGuard", color: "bg-teal-400" },
        { name: "NetWorks", color: "bg-emerald-400" },
    ];

    // duplicate for seamless loop
    const logos = [...companies, ...companies, ...companies];

    return (
        <section className="py-10 border-b border-white/5 bg-background-deep relative overflow-hidden">
            <p className="text-center text-sm font-medium text-foreground-muted mb-8 tracking-wider uppercase relative z-10 px-4">
                Trusted by innovative businesses in Corpus Christi
            </p>

            <div className="relative flex overflow-hidden mask-linear-fade">
                {/* Gradient Masks for smooth fade out at edges */}
                <div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-background-deep to-transparent z-10"></div>
                <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-background-deep to-transparent z-10"></div>

                <motion.div
                    className="flex space-x-16 items-center"
                    animate={{ x: ["0%", "-50%"] }}
                    transition={{
                        duration: 30,
                        repeat: Infinity,
                        ease: "linear",
                        repeatType: "loop"
                    }}
                >
                    {logos.map((company, index) => (
                        <div key={index} className="flex items-center space-x-2 opacity-50 grayscale hover:grayscale-0 hover:opacity-100 transition-all duration-300">
                            {/* Fake Logo Icon */}
                            <div className={`w-8 h-8 rounded-lg ${company.color}/20 flex items-center justify-center`}>
                                <div className={`w-4 h-4 rounded-full ${company.color}`}></div>
                            </div>
                            {/* Fake Logo Text */}
                            <span className="text-xl font-bold text-white tracking-tight">{company.name}</span>
                        </div>
                    ))}
                </motion.div>
            </div>
        </section>
    );
};

export default TrustedBy;
