"use client"

import { useState } from "react"
import { Card, Pagination, Button } from "antd"
import { ArrowRightOutlined } from "@ant-design/icons"
import MainTitle from "@/components/MainTitle";
import Image from "next/image";

const { Meta } = Card

// 模拟数据
const solutionsData = [
  {
    id: 1,
    title: "公路基础设施智能监测与预警平台建设方案",
    date: "2024-05-27",
    description:
      "本项目为省高速公路基础设施智能监测与预警平台，桥隧设施的基础数据、电子档案等；应用本平台开展巡养护工作，系统自动生成各类巡检、养护维修文档、合格测量定位应用本平台开展城市桥梁隧道定期检测工作，针对边坡的监测...",
  },
  {
    id: 2,
    title: "数字城市新基建解决方案",
    date: "2024-05-24",
    description:
      '"数字城市"，是在新一代信息技术加速发展的背景下，充分运用物联网、云计算、光网络、移动互联网等技术手段，对公共服务、社会管理、产业运作等活动的各种需求做出智能的响应，将政务、商业、运输、通信、医疗、能源等城市运...',
  },
  {
    id: 3,
    title: "数字孪生可视化平台解决方案",
    date: "2024-05-20",
    description:
      "数字孪生可视化通过高起点规划、高质量建设、高品质管理运维的原则，为用户提供一种身临其境的现场信息体验模式。通过实景摄影制作模型，直观且真实地还原现场风貌；通过模型加载和漫游，使用户沉浸于现场体验；同时，通过...",
  },
  {
    id: 4,
    title: "水库大坝智慧监测解决方案-产品页",
    date: "2024-05-24",
    description:
      "中科盛阳雨水情测报与大坝安全监测系统由水库智能感知、物联网信息通信、云端智慧监控管理平台组成。小型水库的在线监控具有库位、雨量、视频、渗流渗压、应力应变、裂缝监测等数据自动采集、分析、上报功能，自动预警...",
  },
  {
    id: 5,
    title: "智慧环保监测系统解决方案20240513",
    date: "2024-05-16",
    description:
      "智慧环保监测系统由数据采集、传输、存储、显示、控制及应用五大模块组成。数据采集：主要由各类环保检测传感器、摄像机、动环主机、显示屏、支架组成，可选择一体化集成设备，也可以根据现场实际需求灵活配置。本次园区建设...",
  },
  {
    id: 6,
    title: "智慧园区解决方案",
    date: "2024-05-16",
    description:
      "在城市化进程不断加速的同时，传统园区建设也逐渐面临着各种挑战和困境。为适应新的发展需求，智慧园区应运而生。智慧园区是指互联网和物联网等新一代信息化技术在园区管理、服务等方面的应用，通过数字化转型，建立智能化的...",
  },
  {
    id: 7,
    title: "智能交通管理系统解决方案",
    date: "2024-05-15",
    description:
      "智能交通管理系统通过先进的信息技术、数据通信传输技术、电子传感技术、控制技术及计算机技术等有效地集成运用于整个地面交通管理系统而建立的一种在大范围内、全方位发挥作用的，实时、准确、高效的综合交通运输管理系统...",
  },
  {
    id: 8,
    title: "智慧医疗信息化平台",
    date: "2024-05-12",
    description:
      "智慧医疗信息化平台是运用物联网、云计算、大数据、人工智能等新兴技术，构建覆盖诊前、诊中、诊后的线上线下一体化医疗服务模式，实现医疗资源的优化配置和医疗服务的智能化升级，为患者提供更加便民、高效的医疗健康服务...",
  },
  {
    id: 9,
    title: "工业互联网平台解决方案",
    date: "2024-05-10",
    description:
      "工业互联网平台是面向制造业数字化、网络化、智能化需求，构建基于海量数据采集、汇聚、分析的服务体系，支撑制造资源泛在连接、弹性供给、高效配置的工业云平台，包括边缘、平台（工业PaaS）、应用三大核心层级...",
  },
]

const ITEMS_PER_PAGE = 6

export default function Home() {
  const [currentPage, setCurrentPage] = useState(1)

  const totalPages = Math.ceil(solutionsData.length / ITEMS_PER_PAGE)
  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE
  const currentItems = solutionsData.slice(startIndex, startIndex + ITEMS_PER_PAGE)

  const handlePageChange = (page: number) => {
    setCurrentPage(page)
  }

  return (


    <>
      <div>
        <Image src={"/assets/solutions/1.jpg"} alt={"banner"} width={1920} height={1080}/>
      </div>

      <div className={"py-6 sm:py-10"}>
        <MainTitle title={"解决方案"}/>
      </div>

      <div className="" style={{background: "linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%)"}}>
        <div className="container mx-auto px-3 sm:px-4 py-4 sm:py-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6 mb-4 sm:mb-8">
            {currentItems.map((solution) => (
              <Card
                key={solution.id}
                className="h-full shadow-md hover:shadow-lg transition-shadow duration-300"
                style={{borderRadius: "12px"}}
                actions={[
                  <Button
                    type="link"
                    icon={<ArrowRightOutlined/>}
                    className="text-blue-600 hover:text-blue-800"
                    key="more"
                  >
                    了解更多
                  </Button>,
                ]}
              >
                <div className="h-full flex flex-col">
                  <div className="mb-2 sm:mb-3">
                    <h3
                      className="text-base sm:text-lg font-semibold text-gray-800 mb-1 sm:mb-2 line-clamp-2 leading-tight sm:leading-normal">
                      {solution.title}
                    </h3>
                    <p className="text-xs sm:text-sm text-gray-500 mb-2 sm:mb-3">{solution.date}</p>
                  </div>
                  <div className="flex-1">
                    <p className="text-gray-600 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-4">
                      {solution.description}
                    </p>
                  </div>
                </div>
              </Card>
            ))}
          </div>

          <div className="flex justify-center">
            <Pagination
              current={currentPage}
              total={solutionsData.length}
              pageSize={ITEMS_PER_PAGE}
              onChange={handlePageChange}
              showSizeChanger={false}
              showQuickJumper={false}
              showTotal={(total, range) => (
                <span className="hidden sm:inline">
                第 {range[0]}-{range[1]} 条，共 {total} 条
              </span>
              )}
              className="mt-2 sm:mt-4"
              size="small"
              responsive
            />
          </div>
        </div>
      </div>
    </>
  )
}