import Image from "next/image";

export function AboutIntro() {
  return (
    <section className="bg-white py-16 lg:py-0 lg:h-[572px]">
      <div className="mx-auto flex h-full max-w-[1440px] flex-col items-center justify-center gap-12 px-6 lg:flex-row lg:gap-[120px] lg:px-[120px]">
        {/* Text content */}
        <div className="max-w-[421px] flex-1">
          <p className="text-[12px] text-black">关于鼎兴</p>
          <h2 className="mt-2 text-[26px] font-bold text-[#04388b]">
            鼎兴电子
          </h2>

          <div className="mt-6 space-y-4 text-[12px] leading-[21px] text-[#7f7f7f]">
            <p>
              常州鼎兴是一家以机电一体化、传感器、自动化、微电子等领域为专长的技术型企业。公司主要为：三一重工，振华重工，山河智能，山重建机等知名上市企业配套供应关键传感器及执行装置。公司主要产品为：工程机械用油门旋钮，油位传感器，油门马达及驱动器，自动化码头激光扫描执行器等。现销产品在业内具有较高的市场占有率、知名度与认可度，并畅销海内外。
            </p>
            <p>
              我公司长期与知名院校合作，拥有强大的研发技术团队，和较强的技术创新能力。我们公司致力于将产品做好，做精。为中国智造出一份绵薄之力！
            </p>
          </div>

          <button
            type="button"
            className="mt-8 flex h-[30px] w-[100px] items-center justify-center bg-[#04388b] text-[12px] text-white transition-colors hover:bg-[#032a66]"
          >
            联系我们
          </button>
        </div>

        {/* Factory image */}
        <div className="relative w-full max-w-[400px] flex-shrink-0 lg:w-[400px]">
          <div className="relative aspect-[400/261] w-full overflow-hidden">
            <Image
              src="/about-factory.png"
              alt="鼎兴电子厂房"
              fill
              className="object-cover"
              sizes="(max-width: 1024px) 100vw, 400px"
            />
          </div>
        </div>
      </div>
    </section>
  );
}
