import Image from "next/image";

const cultureItems = [
  {
    title: "品牌理念",
    description: "建一流企业，造一流产品，创一流品牌！",
    image: "/culture-card-1.png",
  },
  {
    title: "企业使命",
    description: "追求卓越品质，满足顾客需求，坚持诚实守信，铸造鼎兴品牌！",
    image: "/culture-card-2.png",
  },
  {
    title: "价值观",
    description: "服务创造价值，品质改变世界",
    image: "/culture-card-3.png",
  },
  {
    title: "行为准则",
    description: "精益求精造精品，至诚至善待客户",
    image: "/culture-card-4.png",
  },
];

export function CorporateCulture() {
  return (
    <section className="relative isolate overflow-hidden bg-[#04388b] py-20 lg:py-24">
      {/* Background texture */}
      <div className="absolute inset-0 opacity-10">
        <Image
          src="/culture-bg.png"
          alt=""
          fill
          className="object-cover"
          sizes="100vw"
          aria-hidden
        />
      </div>

      <div className="relative z-10 mx-auto flex h-full max-w-[1440px] flex-col items-center justify-center px-6 lg:px-[120px]">
        <h2 className="text-[26px] font-bold text-white">企业文化</h2>

        <div className="mt-12 grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {cultureItems.map((item) => (
            <div
              key={item.title}
              className="relative isolate h-[355px] overflow-hidden rounded-[16px] bg-black/20"
            >
              <Image
                src={item.image}
                alt={item.title}
                fill
                className="object-cover opacity-50"
                sizes="(max-width: 1024px) 50vw, 300px"
              />
              <div className="absolute inset-0 bg-black/20" />

              <div className="relative z-10 flex h-full flex-col justify-end p-6">
                <h3 className="text-[16px] font-bold text-white">
                  {item.title}
                </h3>
                <p className="mt-2 text-[12px] font-medium leading-normal text-white">
                  {item.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
