zksy-website-front/src/components/IntellectualPropertyStats.tsx

import SubTitle from "@/components/subTitle"

export function IntellectualPropertyStats() {
  const stats = [
    {
      number: "1",
      label: "博士后创新实践基地",
    },
    {
      number: "3",
      label: "重点高校产学研合作",
    },
    {
      number: "15+",
      label: "国际管理体系认证",
    },
    {
      number: "20+",
      label: "产品专利",
    },
    {
      number: "80+",
      label: "软件著作权",
    },
  ]

  return (
    <>
      {/*<div className={"hidden sm:block w-4/5 mx-auto mt-10"}>*/}
      {/*  <SubTitle title="知识产权" />*/}
      {/*</div>*/}
      <div className="sm:mt-8 py-8 sm:py-16 px-4 bg-[url('/assets/home/23.png')] bg-cover flex items-center justify-center">
        <div className="w-full sm:w-7/12 mx-auto text-center">
          <div className="mb-8 sm:mb-16">
            <h2 className="text-xl sm:text-2xl font-bold text-[#0f397b] mb-2 text-balance shuheiti">知识产权</h2>
            <p className="text-xs sm:text-sm tracking-widest text-gray-600 uppercase font-medium shuheiti opacity-45">
              COMPANY PROPERTY RIGHTS
            </p>
          </div>

          <div className="grid grid-cols-3 lg:grid-cols-5 gap-4 sm:gap-8 lg:gap-12">
            {stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-3xl sm:text-4xl lg:text-6xl font-bold text-blue-600 mb-2 sm:mb-4">
                  {stat.number}
                </div>
                <p className="text-gray-700 text-xs sm:text-sm lg:text-base font-medium leading-tight sm:leading-relaxed shuheiti px-1">
                  {stat.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  )
}