import React from 'react';
import SubTitle from "@/components/subTitle";
import Link from "next/link";

function ProductionHard({hardIntroduction}: {hardIntroduction: string}) {
  return (
    <>
      <div className={"hidden sm:block w-4/5 mx-auto mt-10"}>
        <SubTitle title="硬件产品"/>
      </div>
      <div
        className="sm:mt-8 bg-[url('/assets/home/18.png')] bg-cover from-blue-600 flex items-center justify-center px-4 py-16">
        <div className="max-w-6xl mx-auto text-center">
          <div className="mb-12">
            <h1 className="text-2xl font-bold text-white mb-4">硬件简介</h1>
            <div className="w-24 h-1 bg-blue-400 mx-auto mb-8"></div>
            <p className="text-white/90 text-lg md:text-xl leading-relaxed max-w-4xl mx-auto">
              {hardIntroduction}
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
            {/* Product 1 - Security Camera */}
            <div className="flex flex-col items-center">
              <div
                className="w-32 h-32 md:w-40 md:h-40 rounded-full bg-white/90 flex items-center justify-center mb-4 shadow-lg bg-[url('/assets/home/19.png')] bg-cover">
              </div>
            </div>

            <div className="flex flex-col items-center">
              <div
                className="w-32 h-32 md:w-40 md:h-40 rounded-full bg-white/90 flex items-center justify-center mb-4 shadow-lg bg-[url('/assets/home/20.png')] bg-cover">
              </div>
            </div>

            <div className="flex flex-col items-center">
              <div
                className="w-32 h-32 md:w-40 md:h-40 rounded-full bg-white/90 flex items-center justify-center mb-4 shadow-lg bg-[url('/assets/home/21.png')] bg-cover">
              </div>
            </div>

            <div className="flex flex-col items-center">
              <div
                className="w-32 h-32 md:w-40 md:h-40 rounded-full bg-white/90 flex items-center justify-center mb-4 shadow-lg bg-[url('/assets/home/22.png')] bg-cover">
              </div>
            </div>
          </div>

          <Link
            href={"/products?keyword=硬件产品"}
            className="inline-block w-60 bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 text-lg font-medium rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl cursor-pointer">
            了解更多
          </Link>
        </div>
      </div>
    </>
  );
}

export default ProductionHard;