import React from "react"
import BannerCarousel from "@/components/bannerCarousel"
import MainTitle from "@/components/MainTitle";
import FeatureCard from "@/components/FeatureCard";
import ProductionSoft from "@/components/ProductionSoft";
import ProductionHard from "@/components/ProductionHard";
import {IntellectualPropertyStats} from "@/components/IntellectualPropertyStats";
import ServerClient from "@/components/serverClient";

const features: Feature[] = [
  {img: "/assets/home/8.png", title: "产品中心", subtitle: "PRODUCT_CENTER", href: "/products"},
  {img: "/assets/home/9.png", title: "解决方案", subtitle: "SOLUTION", href: "/solutions"},
  {img: "/assets/home/10.png", title: "新闻动态", subtitle: "NEWS", href: "/news"},
  {img: "/assets/home/11.png", title: "服务支持", subtitle: "SERVICE_SUPPORT", href: "/support"},
  {img: "/assets/home/12.png", title: "关于我们", subtitle: "ABOUT_US", href: "/about"},
]

export default function Home() {
  return (
    <>
      <BannerCarousel/>

      <div className="bg-[url('/assets/home/4.png')] w-full">
        <div className="custom-scrollbar overflow-x-auto">
          <div className="flex space-x-5 sm:space-x-6 md:space-x-8 min-w-max px-5 sm:px-6 md:px-10 mx-auto w-max">
            {features.map((f, idx) => (
              <FeatureCard key={idx} {...f} />
            ))}
          </div>
        </div>
      </div>

      <div className={"mt-20"}>
        <MainTitle title="产品中心" titleLetter="PRODUCT_CENTER"/>
      </div>

      <ProductionSoft/>

      <ProductionHard/>

      <IntellectualPropertyStats/>

      <ServerClient/>
    </>
  )
}
