import type { IconType } from 'react-icons';
import {
  FaUserGraduate,
  FaUserShield,
  FaLaptopCode,
  FaMicrophoneLines,
  FaEnvelopeOpenText,
  FaWrench,
  FaRegFileLines,
  FaSpellCheck,
  FaChartPie,
  FaGlobe,
  FaBookOpenReader,
  FaPenRuler,
} from 'react-icons/fa6';

type ServiceItem = {
  icon: IconType;
  label: string;
  href: string;
};

const services: ServiceItem[] = [
  { icon: FaUserGraduate, label: '警队自考', href: '/study' },
  { icon: FaUserShield, label: '警队教育', href: '/scholarship' },
  { icon: FaLaptopCode, label: '常用软件', href: '/software' },
  { icon: FaMicrophoneLines, label: '智能语音', href: '/voice' },
  { icon: FaEnvelopeOpenText, label: '蓝天邮局', href: '/mail' },
  { icon: FaWrench, label: '策划工具', href: '/plan' },
  { icon: FaRegFileLines, label: '办公模板', href: '/office' },
  { icon: FaSpellCheck, label: '智能校对', href: '/ai-check' },
  { icon: FaChartPie, label: '警情调研', href: '/survey' },
  { icon: FaGlobe, label: '上网助手', href: '/net' },
  { icon: FaBookOpenReader, label: '考试平台', href: '/exam' },
  { icon: FaPenRuler, label: '学习平台', href: '/study' },
];

const columns = Array.from({ length: 3 }, (_, colIndex) =>
  services.slice(colIndex * 4, colIndex * 4 + 4)
);

export default function Integrated() {
  return (
    <div className="w-[1514px] h-[573px] mx-auto ">
      <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" />
          <h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
        </div>

        <div className="flex gap-45 h-full px-8 py-6 pb-20 pt-15">
          {columns.map((group, colIdx) => (
            <div key={colIdx} className="flex-1 grid grid-cols-2 gap-x-8 gap-y-6">
              {group.map((service) => (
                <a
                  key={service.label}
                  href={service.href}
                  className="flex flex-col items-center text-[#0f172a] transition hover:text-[#005d93]"
                >
                  <div className="w-16 h-16 flex items-center justify-center rounded-full bg-[#005d93]/10 text-[#005d93] mb-2">
                    <service.icon className="w-8 h-8" aria-hidden />
                  </div>
                  <span className="text-base font-semibold text-center">{service.label}</span>
                </a>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}