"use client";
import {
  FbIcon,
  Hotline,
  IgIcon,
  Location,
  Mail,
  TtIcon,
  TwIcon,
  WorldIcon,
  YtIcon,
} from "@/components/icons";
import React from "react";

export default function FooterPPID() {
  return (
    <>
      <div
        id="footer-ppid"
        className="scroll-smooth w-full  bg-[#1F1A17] flex flex-col md:grid md:grid-cols-3 lg:grid-cols-4 gap-0 md:gap-3 lg:gap-7 p-2 lg:p-16  text-sm"
      >
        <div className=" flex-col hidden lg:block">
          <img src="/e-ppid.png" alt="logo" />
        </div>
        <div className="text-sm space-y-3 text-white">
          <div className="border-b-2 border-white border-dashed pb-0 md:pb-2 font-semibold">
            Kontak Kami
          </div>
          <div className="flex gap-2">
            <div>
              <Location />
            </div>
            <div>
              Jl Trunojoyo No.3, RT.2/RW.1, Selong, Kec. Kebayoran Baru, Kota
              Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia
            </div>
          </div>
          <div className="flex gap-2">
            <div>
              <Hotline />
            </div>
            <div>Hotline Divisi HumasPolri (021) 72120599</div>
          </div>
          <div className="flex gap-2">
            <div>
              <Hotline />
            </div>
            <div>Call Center 110</div>
          </div>
          <div className="flex gap-2">
            <div>
              <Mail />
            </div>
            <div>ppid@polri.go.id</div>
          </div>
        </div>
        <div>
          <div className="text-sm space-y-3 text-white">
            <div className="border-b-2 border-white border-dashed pb-2 text-white font-semibold">
              Tautan
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div className="flex gap-2">
                <div>
                  <WorldIcon />
                </div>
                <div>Polri.go.id</div>
              </div>
              <div className="flex gap-2">
                <div>
                  <WorldIcon />
                </div>
                <div>TBNews</div>
              </div>
              <div className="flex gap-2">
                <div>
                  <WorldIcon />
                </div>
                <div>Humas Polri</div>
              </div>
              <div className="flex gap-2">
                <div>
                  <WorldIcon />
                </div>
                <div>MediaHub</div>
              </div>
              <div className="flex gap-2">
                <div>
                  <WorldIcon />
                </div>
                <div>Satu Data</div>
              </div>
              <div className="flex gap-2">
                <div>
                  <WorldIcon />
                </div>
                <div>PUSIKNAS</div>
              </div>
              <div className="flex gap-2">
                <div>
                  <WorldIcon />
                </div>
                <div>SPIT</div>
              </div>
              <div className="flex gap-2">
                <div>
                  <WorldIcon />
                </div>
                <div>POLRI TV</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div className="text-sm space-y-3 text-white">
            <div className="border-b-2 border-white border-dashed pb-2 ">
              Social Media Humas
            </div>
            <div className="flex gap-1 lg:gap-3 items-center">
              <div>
                <FbIcon />
              </div>
              <div>
                <IgIcon />
              </div>
              <div>
                <YtIcon />
              </div>
              <div>
                <TwIcon />
              </div>
              <div>
                <TtIcon />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="dark:bg-black text-black dark:text-white text-center py-2 text-xs md:text-sm flex justify-center font-normal">
        &copy; Copyright Humas<p className="text-red-700">&nbsp; POLRI &reg;</p>
        &nbsp; All Rights Reserved
      </div>
    </>
  );
}