'use client';

import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';

export default function TrustedBySection() {
  const [mounted, setMounted] = useState(false);
  const [visible, setVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    setMounted(true);

    // 使用 IntersectionObserver 检测元素进入视口
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !visible) {
            setVisible(true);
          }
        });
      },
      {
        threshold: 0.2, // 当20%的元素可见时触发
      }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current);
      }
    };
  }, [visible]);

  // 合作伙伴 logo 数据
  const partners = [
    {
      name: 'BlackRock',
      src: '/nav-ireland0.svg',
      width: 193,
      height: 28,
      className: 'w-[193px] h-[28px]'
    },
    {
      name: 'Coinbase',
      src: '/coinbase-10.svg',
      width: 179,
      height: 32,
      className: 'w-[179px] h-[32px]'
    },
    {
      name: 'Wintermute',
      src: '/wintermute0.svg',
      width: 247,
      height: 40,
      className: 'w-[247px] h-[40px]'
    },
    {
      name: 'Circle',
      src: '/group0.svg',
      width: 156,
      height: 40,
      className: 'w-[156px] h-[40px]'
    },
    {
      name: 'ConsenSys',
      src: '/logo1.svg', // 临时使用一个 logo
      width: 176,
      height: 40,
      className: 'w-[176px] h-[40px]'
    }
  ];

  return (
    <section
      ref={sectionRef}
      className="bg-[#f9fafb] flex flex-col items-center justify-center flex-shrink-0 w-full relative"
      style={{
        borderStyle: 'solid',
        borderColor: '#e5e7eb',
        borderWidth: '0px 0px 1px 0px',
        padding: '80px 0px',
        gap: '32px'
      }}
    >
      {/* 标题 - .text6 */}
      <div
        className="text-[#111827] text-center relative flex items-center justify-center font-inter"
        style={{
          fontSize: '18px',
          lineHeight: '150%',
          fontWeight: 500
        }}
      >
        Trusted by Industry Leaders
      </div>

      {/* Logo容器 - .frame-26 */}
      <div
        className="flex flex-row items-center justify-between flex-shrink-0 w-[1200px] relative"
      >
        {partners.map((partner, index) => (
          <div
            key={partner.name}
            className={`flex-shrink-0 relative overflow-hidden transition-all duration-700 ease-out ${partner.className} ${
              mounted && visible
                ? 'translate-y-0 opacity-100'
                : 'translate-y-12 opacity-0'
            }`}
            style={{
              transitionDelay: `${index * 150}ms`, // 每个logo延迟150ms
              aspectRatio: `${partner.width}/${partner.height}`
            }}
          >
            <Image
              src={partner.src}
              alt={partner.name}
              width={partner.width}
              height={partner.height}
              className="w-full h-full object-contain"
            />
          </div>
        ))}
      </div>
    </section>
  );
}