import MainTitle from "@/components/MainTitle";
import Image from "next/image";

export default function ServerClient() {
  // Array of colored blocks to represent different company logos
  const logoBlocks = [
    // Row 1
    { color: "bg-red-500", name: "Huawei" ,url:"/assets/home/clientIcon/1.png"},
    { color: "bg-red-600", name: "China Citic Bank" ,url:"/assets/home/clientIcon/2.png"},
    { color: "bg-orange-500", name: "Dahan Group" ,url:"/assets/home/clientIcon/3.png"},
    { color: "bg-blue-600", name: "Central South University" ,url:"/assets/home/clientIcon/4.png"},
    { color: "bg-red-500", name: "CBN" ,url:"/assets/home/clientIcon/5.png"},

    // Row 2
    { color: "bg-red-700", name: "China Comservice" ,url:"/assets/home/clientIcon/6.png"},
    { color: "bg-blue-500", name: "GRG Banking" ,url:"/assets/home/clientIcon/7.png"},
    { color: "bg-purple-600", name: "Changsha Metro" ,url:"/assets/home/clientIcon/8.png"},
    { color: "bg-blue-700", name: "Inspur" ,url:"/assets/home/clientIcon/9.png"},
    { color: "bg-red-600", name: "Dahua Technology" ,url:"/assets/home/clientIcon/10.png"},

    // Row 3
    { color: "bg-blue-600", name: "Creator" ,url:"/assets/home/clientIcon/11.png"},
    { color: "bg-green-600", name: "Zhongda Victory" ,url:"/assets/home/clientIcon/12.png"},
    { color: "bg-blue-500", name: "China Mobile 5G" ,url:"/assets/home/clientIcon/13.png"},
    { color: "bg-blue-600", name: "Baidu" ,url:"/assets/home/clientIcon/14.png"},
    { color: "bg-red-500", name: "China Tower" ,url:"/assets/home/clientIcon/15.png"},

    // Row 4
    { color: "bg-blue-600", name: "China Telecom" ,url:"/assets/home/clientIcon/16.png"},
    { color: "bg-red-600", name: "China Unicom" ,url:"/assets/home/clientIcon/17.png"},
    { color: "bg-blue-500", name: "Tencent" ,url:"/assets/home/clientIcon/18.png"},
    { color: "bg-gray-800", name: "Ship" ,url:"/assets/home/clientIcon/19.png"},
    { color: "bg-red-600", name: "Red Seal" ,url:"/assets/home/clientIcon/20.png"},
  ]

  return (
    <>
      <div className="bg-[url('/assets/home/24.png')] bg-cover">
        <div className={"pt-20"}>
          <MainTitle title="服务客户" titleLetter="SERVICE_CUSTOMER"/>
        </div>
        <div className="bg-gray-100/30 backdrop-blur-sm p-8">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-3 sm:grid-cols-5 gap-6 p-5 sm:p-10 bg-gray-200 rounded-lg">
              {logoBlocks.map((logo, index) => (
                <div key={index} className="rounded-lg shadow-sm flex items-center justify-center">
                  <div className={`w-full h-full rounded flex items-center justify-center`}>
                    <Image src={logo.url} alt={logo.name} width={1920} height={1920}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
