import React from 'react';

const CultureBgPage: React.FC = () => {
  // 定义logo数据
  const logos = [
    { id: 1, src: '/logo/1.png', alt: 'Logo 1' },
    { id: 2, src: '/logo/2.png', alt: 'Logo 2' },
    { id: 3, src: '/logo/3.png', alt: 'Logo 3' },
    { id: 4, src: '/logo/4.png', alt: 'Logo 4' },
    { id: 5, src: '/logo/5.png', alt: 'Logo 5' },
    { id: 6, src: '/logo/6.png', alt: 'Logo 6' },
    { id: 7, src: '/logo/7.png', alt: 'Logo 7' },
    { id: 8, src: '/logo/8.png', alt: 'Logo 8' },
    { id: 9, src: '/logo/9.png', alt: 'Logo 9' },
    { id: 10, src: '/logo/10.png', alt: 'Logo 10' },
    { id: 11, src: '/logo/11.png', alt: 'Logo 11' },
    { id: 12, src: '/logo/12.png', alt: 'Logo 12' },
    { id: 13, src: '/logo/13.png', alt: 'Logo 13' },
    { id: 14, src: '/logo/14.png', alt: 'Logo 14' },
    { id: 15, src: '/logo/15.png', alt: 'Logo 15' },
    { id: 16, src: '/logo/16.png', alt: 'Logo 16' },
  ];

  // 分组：上排8个，下排8个
  const topRowLogos = logos.slice(0, 8);
  const bottomRowLogos = logos.slice(8, 16);

  return (
    <div className="h-[700px] w-[1550px]  mx-auto relative">
      <div
        className="h-[200px] w-full  bg-cover"
        style={{
          backgroundImage: 'url(/culture.png)',
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
        }}
      ></div>
      
      <div className="h-[500px] w-full  absolute top-30 flex items-center justify-center p-8">
        <div className="w-full h-full flex flex-col justify-center space-y-16 mb-10">
          
          {/* 上排logo */}
          <div className="flex justify-center items-center space-x-15">
            {topRowLogos.map((logo) => (
              <img
                key={logo.id}
                src={logo.src}
                alt={logo.alt}
                className="w-[130px] h-[130px] object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
                style={{
                  transformOrigin: 'center'
                }}
              />
            ))}
          </div>

          {/* 下排logo */}
          <div className="flex justify-center items-center space-x-15">
            {bottomRowLogos.map((logo) => (
              <img
                key={logo.id}
                src={logo.src}
                alt={logo.alt}
                className="w-[130px] h-[130px] object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
                style={{
                  transformOrigin: 'center'
                }}
              />
            ))}
          </div>
          
        </div>
      </div>
    </div>
  );
};

export default CultureBgPage;