"use client";
import RegionalNews from "./RegionalNews";
import { useEffect, useState } from "react";
import CategorySatker from "./CategorySatker";
import PolriApps from "./PolriApps";
import Link from "next/link";
import SuggestionsModal from "./suggestions";
import Image from "next/image";

export default function DigitalServices() {
  const [isPoldaOpen, setIsPoldaOpen] = useState(false);
  const [isSatkerOpen, setIsSatkerOpen] = useState(false);
  const [isAppsOpen, setIsAppsOpen] = useState(false);
  const [isSuggestionOpen, setIsSuggestionOpen] = useState(false);

  return (
    <div className="border-1 rounded-xl py-2 w-[90%] lg:w-[75%] mx-auto bg-white text-black">
      <div className="text-xl font-semibold w-full ">
        <p className="border-b-2 border-red-600 w-fit mx-auto">
          Polda Satker dan Layanan Digital
        </p>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-5 p-4 justify-center lg:gap-3">
        <a
          onClick={() => setIsPoldaOpen(true)}
          className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
        >
          <Image
            width={480}
            height={480}
            src="/indonesia-map.png"
            alt="indonesia"
            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
          />
          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Polda Jajaran
          </p>
          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Lihat Selengkapnya
          </p>
        </a>
        <a
          onClick={() => setIsSatkerOpen(true)}
          className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
        >
          <Image
            width={480}
            height={480}
            src="/satker.png"
            alt="satker"
            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
          />
          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Satuan Kerja Polri
          </p>
          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Lihat Selengkapnya
          </p>
        </a>
        <a
          onClick={() => setIsAppsOpen(true)}
          className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
        >
          <Image
            width={480}
            height={480}
            src="/presisi.png"
            alt="presisi"
            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
          />
          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Aplikasi Polri
          </p>
          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Lihat Selengkapnya
          </p>
        </a>
        <a
          onClick={() => setIsSuggestionOpen(true)}
          className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
        >
          <Image
            width={480}
            height={480}
            src="/kritik-saran.png"
            alt="kritik-saran"
            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
          />
          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Kritik dan Saran
          </p>
          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Lihat Selengkapnya
          </p>
        </a>
        <Link
          href="https://survey.zohopublic.com/zs/EYCOBO"
          className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
        >
          <Image
            width={480}
            height={480}
            src="/survey.png"
            alt="survey"
            className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
          />
          <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Survey
          </p>
          <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
            Lihat Selengkapnya
          </p>
        </Link>
      </div>
      <RegionalNews
        opened={isPoldaOpen}
        modalStatus={(status) => setIsPoldaOpen(status)}
      />
      <CategorySatker
        opened={isSatkerOpen}
        modalStatus={(status) => setIsSatkerOpen(status)}
      />
      <PolriApps
        opened={isAppsOpen}
        modalStatus={(status) => setIsAppsOpen(status)}
      />
      <SuggestionsModal
        opened={isSuggestionOpen}
        modalStatus={(status) => setIsSuggestionOpen(status)}
      />
    </div>
  );
}