import React from 'react';

// 将服务分成三组
const serviceGroup1 = [
  {
    icon: '/picture/1.jpg',
    label: '军队自考',
    href: '/study',
  },
  {
    icon: '/picture/2.jpg',
    label: '军人',
    href: '/scholarship',
  },
  {
    icon: '/picture/7.jpg',
    label: '常用软件',
    href: '/software',
  },
  {
    icon: '/picture/8.jpg',
    label: '智能语音',
    href: '/voice',
  },
];

const serviceGroup2 = [
  {
    icon: '/picture/3.jpg',
    label: '蓝天邮局',
    href: '/mail',
  },
  {
    icon: '/picture/4.jpg',
    label: '策划工具',
    href: '/plan',
  },
  {
    icon: '/picture/9.jpg',
    label: '办公模板',
    href: '/office',
  },
  {
    icon: '/picture/10.jpg',
    label: '智能校对',
    href: '/ai-check',
  },
];

const serviceGroup3 = [
  {
    icon: '/picture/5.jpg',
    label: '情调研',
    href: '/survey',
  },
  {
    icon: '/picture/6.jpg',
    label: '上网助手',
    href: '/net',
  },
  {
    icon: '/picture/11.jpg',
    label: '考试平台',
    href: '/exam',
  },
  {
    icon: '/picture/12.jpg',
    label: '学习平台',
    href: '/study',
  },
];

const Integrated: React.FC = () => {
  return (
    <>
      <div className="w-[1514px] h-[573px] mx-auto absolute bottom-0 left-1/2 transform -translate-x-1/2">
     
        <div className="w-full h-[488px] ">
        <div className="w-full h-[82px] flex items-center pt-30 ml-10">
          <div className="w-3 h-15 bg-[#005d93] mr-3"></div>
          <h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
        </div>
          {/* 三等分flex布局 */}
          <div className="flex justify-between h-full px-8 py-6 pb-20">
            {/* 第一组 */}
            <div className="flex-1  flex flex-wrap justify-center content-center">
              <div className="w-full flex flex-wrap mb-0 mr-50">
                {serviceGroup1.map((service, index) => (
                  <div key={index} className="w-1/2  flex flex-col items-center mb-2">
                    <div className="w-30 h-30 flex items-center justify-center">
                      <img
                        src={service.icon}
                        alt={service.label}
                        style={{ backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
                      />
                    </div>
                    <span className="text-lg  text-center font-medium">
                      {service.label}
                    </span>
                  </div>
                ))}
              </div>
            </div>
            
            {/* 第二组 */}
            <div className="flex-1 flex flex-wrap justify-center content-center">
              <div className="w-full flex flex-wrap mb-0 ml-15 mr-15">
                {serviceGroup2.map((service, index) => (
                  <div key={index} className="w-1/2  flex flex-col items-center mb-2">
                    <div className="w-30 h-30 flex items-center justify-center">
                      <img
                        src={service.icon}
                        alt={service.label}
                        style={{ backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
                      />
                    </div>
                    <span className="text-lg  text-center font-medium">
                      {service.label}
                    </span>
                  </div>
                ))}
              </div>
            </div>
            
            {/* 第三组 */}
            <div className="flex-1  flex flex-wrap justify-center content-center">
              <div className="w-full flex flex-wrap mb-0 ml-50">
                {serviceGroup3.map((service, index) => (
                  <div key={index} className="w-1/2  flex flex-col items-center mb-2">
                    <div className="w-30 h-30 flex items-center justify-center">
                      <img
                        src={service.icon}
                        alt={service.label}
                        style={{ backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
                      />
                    </div>
                    <span className="text-lg  text-center font-medium">
                      {service.label}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Integrated;