"use client";

import React from "react";
import Link from "next/link";

const subsystems = [
  {
    name: "城市生命线驾驶舱",
    img: "/1.png",
    url: '/test5',
  },
  {
    name: "生命线预警联动处置平台",
    img: "/2.png",
    url: '/test6',
  },
  {
    name: "生命线物联网平台",
    img: "/3.png",
    url: '/test7',
  },
  {
    name: "燃气管网安全运行监测子系统",
    img: "/4.png",
    url: '/test8',
  },
  {
    name: "供水管网安全运行监测子系统",
    img: "/5.png",
    url: '/test9',
  },
  {
    name: "排水管网安全运行监测子系统",
    img: "/6.png",
    url: '/test10',
  },
  {
    name: "窨井盖安全运行监测子系统",
    img: "/7.png",
    url: '/test11',
  },
];

export default function CityLifelinePortal() {

  return (
    <div className="min-h-full w-full bg-slate-50 p-10 font-sans flex flex-col">
      <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
        {subsystems.map((s) => (
          <Link key={s.name} href={s.url}>
            <div
              className="bg-white rounded-3xl shadow-xl cursor-pointer hover:shadow-2xl hover:bg-sky-50 transition transform hover:scale-110 flex flex-col overflow-hidden border-4 border-transparent hover:border-sky-200"
            >
              <div className="w-full h-56 overflow-hidden">
                <img src={s.img} alt={s.name} className="w-full h-full object-cover"/>
              </div>
              <div className="p-6 flex flex-col items-center justify-center text-center">
                <div className="text-xl font-semibold text-slate-800 mb-3">{s.name}</div>
                <div className="text-slate-500 text-base">点击进入</div>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}