'use client';

import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
import { useLanguage } from '@/contexts/LanguageContext';
import { useTheme } from '@/contexts/ThemeContext';
import ConsenSysLogo from './ConsenSysLogo';

export default function TrustedBySection() {
  const { t } = useLanguage();
  const { theme } = useTheme();
  const [animate, setAnimate] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const currentRef = sectionRef.current;
    if (!currentRef) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          setAnimate(true);
          observer.disconnect();
        }
      },
      { threshold: 0.3 }
    );

    observer.observe(currentRef);
    return () => observer.disconnect();
  }, []);

  const isDark = theme === 'dark';

  const partners = [
    {
      name: 'BlackRock',
      src: '/nav-ireland0.svg',
      width: 200,
      height: 40
    },
    {
      name: 'Coinbase',
      src: '/coinbase-10.svg',
      width: 180,
      height: 40
    },
    {
      name: 'Wintermute',
      src: '/wintermute0.svg',
      width: 247,
      height: 40
    },
    {
      name: 'Circle',
      src: '/group0.svg',
      width: 156,
      height: 40
    },
    {
      name: 'ConsenSys',
      src: '',
      width: 220,
      height: 50
    }
  ];

  return (
    <section
      ref={sectionRef}
      className={`flex flex-col items-center justify-center flex-shrink-0 w-full relative border-b ${
        isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-[#f9fafb] border-[#e5e7eb]'
      }`}
      style={{
        padding: '80px 0px',
        gap: '32px'
      }}
    >
      <div
        className={`text-lg font-medium text-center font-domine ${
          isDark ? 'text-[#fafafa]' : 'text-[#111827]'
        }`}
      >
        {t('trusted.title')}
      </div>

      <div className="flex flex-row items-center justify-between flex-shrink-0 w-[1440px] relative">
        {partners.map((partner, index) => (
          <div
            key={partner.name}
            className={`flex-shrink-0 relative overflow-hidden cursor-pointer transition-all ${
              animate ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
            } ${
              isDark
                ? 'hover:brightness-200 hover:invert'
                : 'hover:brightness-0'
            }`}
            style={{
              transition: `transform 0.7s ease-out ${index * 100}ms, opacity 0.7s ease-out ${index * 100}ms, filter 0.3s ease-out`,
              width: `${partner.width}px`,
              height: `${partner.height}px`,
              aspectRatio: `${partner.width}/${partner.height}`
            }}
          >
            {partner.name === 'ConsenSys' ? (
              <ConsenSysLogo width={partner.width} height={partner.height} />
            ) : (
              <Image
                src={partner.src}
                alt={partner.name}
                width={partner.width}
                height={partner.height}
                className="w-full h-full object-contain"
                style={{
                  filter: isDark ? 'brightness(0) invert(1)' : 'brightness(0)'
                }}
              />
            )}
          </div>
        ))}
      </div>
    </section>
  );
}