import Image from "next/image";
import SubTitle from "@/components/subTitle";
import ContactUs from "@/components/about/ContactUs";
import Recruitment from "@/components/about/Recruitment";
import TopNav from "@/components/about/TopNav";
import Development from "@/components/about/Development";
import Honor from "@/components/about/Honor";
import {serverGet, serverPost} from "@/utils/request";
import AnimatedSection from "@/components/AnimatedSection";

// export const revalidate = 1800

export default async function Home() {

  const res = await serverPost<Page<RecruitmentInfo>, {
    pageNum: number,
    pageSize: number
  }>('/webSite/getRecruitmentInfoByPage', {
    pageNum: 1,
    pageSize: 3
  }, {
    next: {
      revalidate: 30
    },
    cache: "force-cache"
  })
  const honorRes = await serverGet<HonorInfo[]>("/webSite/getHonor", {
    next: {
      revalidate: 1800
    },
    cache: "force-cache"
  })

  const basicInfoRes = await serverGet<BasicInfo[]>("/webSite/getBasicInfo", {
    next: {
      revalidate: 1800
    },
    cache: "force-cache"
  })

  const basicInfo = basicInfoRes.data[0] || {
    address: "",
    companyProfile: "",
    companyProfileUrl: "",
    consultationHotline: "",
    email: "",
    hardwareIntroduction: "",
    id: "",
    qrCodeUrl: "",
    serviceHotline: "",
    softwareIntroduction: "",
    telephone: ""
  };


  return (
    <>
      <AnimatedSection effect="slide" direction="left">
        <div className="hidden sm:block">
          <Image src={"/assets/about/1.png"} alt={"关于我们"} width={1920} height={1080}/>
        </div>
        <div className="sm:hidden">
          <Image src={"/assets/about/23.png"} alt={"关于我们"} width={1920} height={1080}/>
        </div>
      </AnimatedSection>
      <div className="w-full">
        <AnimatedSection effect="slide" direction="right">
          {/* 顶部导航 */}
          <TopNav/>
        </AnimatedSection>
        <div className="max-w-4/5 mx-auto py-4 px-4">
          <SubTitle title={"公司简介"}/>
        </div>

        {/* 公司简介 */}
        <AnimatedSection effect="slide" direction="left">
          <section
            id="section-0"
            className="scroll-mt-50 max-w-[90%] md:max-w-4/5 mx-auto grid grid-cols-1 md:grid-cols-2"
          >
            {/* 左侧文字块 */}
            <div className="bg-[url('/assets/about/16.png')] bg-cover px-6 py-8 sm:px-12 sm:py-10 md:px-24 md:py-18">
              <p className="text-gray-700 leading-6 sm:leading-7 mb-6 sm:mb-12 text-sm sm:text-base">
                {basicInfo.companyProfile}
              </p>
              <p className="text-gray-700 leading-6 sm:leading-7 text-sm sm:text-base">
                {basicInfo.companyProfileTwo}
              </p>

              {/* 图标荣誉 */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 mt-6">
                <div className="text-center flex flex-col items-center gap-2">
                  <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-blue-100 flex items-center justify-center">
                    <Image src={"/assets/about/12.png"} alt={"专精特新小巨人企业"} width={60} height={60}/>
                  </div>
                  <p className="text-xs sm:text-sm">专精特新小巨人企业</p>
                </div>

                <div className="text-center flex flex-col items-center gap-2">
                  <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-blue-100 flex items-center justify-center">
                    <Image src={"/assets/about/13.png"} alt={"创新型中小企业"} width={60} height={60}/>
                  </div>
                  <p className="text-xs sm:text-sm">创新型中小企业</p>
                </div>

                <div className="text-center flex flex-col items-center gap-2">
                  <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-blue-100 flex items-center justify-center">
                    <Image src={"/assets/about/15.png"} alt={"高新技术企业"} width={60} height={60}/>
                  </div>
                  <p className="text-xs sm:text-sm">高新技术企业</p>
                </div>

                <div className="text-center flex flex-col items-center gap-2">
                  <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-blue-100 flex items-center justify-center">
                    <Image src={"/assets/about/14.png"} alt={"省级博士后创新基地"} width={60} height={60}/>
                  </div>
                  <p className="text-xs sm:text-sm">省级博士后创新基地</p>
                </div>
              </div>
            </div>

            {/* 右侧背景图 */}
            <div className="bg-gray-300 w-full h-48 sm:h-64 md:h-auto bg-[url('/assets/about/17.jpg')] bg-cover"></div>
          </section>
        </AnimatedSection>

        {/* 发展历程 */}
        <AnimatedSection effect="slide" direction="right">
          <section id="section-1"
                   className="scroll-mt-10 bg-blue-900 text-white mt-10 py-12 px-4 bg-[url('/assets/about/18.png')] bg-cover">
            <div className="max-w-4/5 mx-auto my-10 sm:my-6">
              <SubTitle title={"发展历程"}/>
            </div>
            <div className={"max-w-4/5 mx-auto"}>
              <Development/>
            </div>
          </section>
        </AnimatedSection>
        {/* 荣誉资质 */}
        <AnimatedSection effect="slide" direction="left">
          <section id="section-2" className="scroll-mt-10 max-w-4/5 mx-auto py-12 px-4">
            <div className="my-10 sm:my-6">
              <SubTitle title="荣誉资质"/>
            </div>
            <Honor honorList={honorRes.data}/>
          </section>
        </AnimatedSection>
        {/* 公司招聘 */}

        <AnimatedSection effect="slide" direction="right">
          <section
            id="section-3"
            className="scroll-mt-10 w-full py-12 px-4 bg-[url('/assets/about/20.png')]"
          >
            <div className="w-4/5 mx-auto my-10 sm:my-6">
              <SubTitle title="公司招聘"/>
            </div>
            <Recruitment list={res.data.records}/>
          </section>
        </AnimatedSection>
        {/* 联系我们 */}
        <AnimatedSection effect="slide" direction="left">
          <ContactUs basicInfo={basicInfo}/>
        </AnimatedSection>
      </div>
    </>
  )
}
