import { useLanguage } from '../i18n/LanguageContext';
import { useData } from '../context/DataContext';

export default function Clients() {
    const { t, language } = useLanguage();
    const { data } = useData();

    const clients = [...data.clients].sort((a, b) => a.order - b.order);

    if (clients.length === 0) return null;

    // Duplicate for seamless marquee
    const duplicated = [...clients, ...clients, ...clients, ...clients];

    return (
        <section id="clients" className="py-24 relative overflow-hidden">
            <div className="max-w-7xl mx-auto px-6 mb-16">
                <h2 className="text-sm font-mono text-[#FF5733] tracking-widest mb-2">{t.clients.badge.toLocaleUpperCase(language)}</h2>
                <h3 className="text-4xl md:text-5xl font-display font-bold">{t.clients.title}</h3>
            </div>

            {/* Marquee of client logos */}
            <div className="w-full overflow-hidden relative">
                {/* Fade masks */}
                <div className="absolute top-0 left-0 w-16 md:w-48 h-full bg-gradient-to-r from-[#050505] to-transparent z-10 pointer-events-none" />
                <div className="absolute top-0 right-0 w-16 md:w-48 h-full bg-gradient-to-l from-[#050505] to-transparent z-10 pointer-events-none" />

                <div className="flex items-center gap-16 md:gap-24 animate-marquee-slow w-max px-8 hover:[animation-play-state:paused]">
                    {duplicated.map((client, index) => (
                        <a
                            key={`${client.id}-${index}`}
                            href={client.website || '#'}
                            target={client.website ? '_blank' : undefined}
                            rel="noopener noreferrer"
                            className="flex-shrink-0 group transition-all duration-500"
                            title={client.name}
                        >
                            <img
                                src={client.logo}
                                alt={client.name}
                                className="h-[50px] md:h-[60px] w-auto object-contain opacity-60 group-hover:opacity-100 transition-all duration-500"
                                style={{ maxWidth: '200px' }}
                            />
                        </a>
                    ))}
                </div>
            </div>
        </section>
    );
}