import SubTitle from "@/components/subTitle";
import Image from "next/image";

export default function ServicePage() {
  return (
    <>
      <div>
        <Image src={"/assets/support/1.png"} alt={"banner"} width={1920} height={1080} />
      </div>
      {/* After-sales Service Section */}
      <section className="py-16 px-4 bg-[#EFF5FB]">
        <div className="max-w-4/5 mx-auto">
          {/* Section Title */}
          <div className="mb-12 sm:text-left text-center">
            <SubTitle title={"售后服务"}/>
          </div>

          {/* Service Cards Grid */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {/* Card 1 */}
            <div className="text-center">
              <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500} />
              </div>
              <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">提供专属保障</h3>
              <p className="text-gray-600 text-sm leading-relaxed">单独安排技术专家，保障快速响应</p>
            </div>

            {/* Card 2 */}
            <div className="text-center">
              <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500} />
              </div>
              <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">7*24*365远程运维</h3>
              <p className="text-gray-600 text-sm leading-relaxed">远程线上维护，服务不间断</p>
            </div>

            {/* Card 3 */}
            <div className="text-center">
              <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500} />
              </div>
              <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">透明公开</h3>
              <p className="text-gray-600 text-sm leading-relaxed">服务过程进度，线上公开透明化</p>
            </div>

            {/* Card 4 */}
            <div className="text-center">
              <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                <Image src={"/assets/support/2.png"} alt={"提供专属保障"} width={500} height={500} />
              </div>
              <h3 className="text-2xl font-semibold mb-2 text-[#0F397B]">主动排除故障</h3>
              <p className="text-gray-600 text-sm leading-relaxed">实现&#34;救火式&#34;向&#34;预防式&#34;产品运维转型</p>
            </div>
          </div>
        </div>
      </section>

      {/* Service Consultation Section */}
      <section className="bg-[url('/assets/support/3.png')] bg-cover py-16 px-4 relative overflow-hidden">
        {/* Background Light Effects */}
        <div className="absolute right-0 top-1/2 transform -translate-y-1/2 w-96 h-96 opacity-30">
          <div className="w-full h-full bg-gradient-radial from-blue-400 via-blue-600 to-transparent rounded-full blur-3xl"></div>
        </div>
        <div className="absolute right-20 top-1/2 transform -translate-y-1/2 w-64 h-64 opacity-20">
          <div className="w-full h-full bg-gradient-radial from-cyan-300 via-blue-500 to-transparent rounded-full blur-2xl"></div>
        </div>

        <div className="max-w-4/5 mx-auto relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            {/* Left Content */}
            <div className="text-white">
              {/* Section Title */}
              <div className="mb-8 sm:text-left text-center">
                <SubTitle title={"服务咨询"} color={"#fff"}/>
              </div>

              {/* Contact Information */}
              <div className="space-y-6">
                <div>
                  <p className="text-gray-300 mb-2">中科盛阳服务热线：</p>
                  <p className="text-4xl font-bold">0731-85315153</p>
                </div>

                <div className="space-y-2">
                  <p className="text-gray-300">如需自选以下业务，您可以直接拨打相关热线电话：</p>
                  <p className="text-gray-300">24小时产品售前咨询服务热线：400-666-7001</p>
                </div>
              </div>
            </div>

            {/* Right Side - Light Effects Area */}
            <div className="hidden lg:block">
              {/* This space is for the light effects which are handled by the background */}
            </div>
          </div>
        </div>
      </section>
    </>
  )
}