import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/routing";
import { Icon } from "@iconify/react/dist/iconify.js";
import Image from "next/image";
import React from "react";

type Channel = {
  name: string;
  logo: string;
  url: string;
};

const channels: Channel[] = [
  {
    name: "Divisi Humas Polri",
    logo: "/assets/portal-humas.png",
    url: "https://portal.humas.polri.go.id/",
  },
  {
    name: "Media Hub",
    logo: "/assets/mediahub-logo.gif",
    url: "/polda/kaltara",
  },
  {
    name: "SPIT",
    logo: "/assets/logo-spit.png",
    url: "https://spit.humas.polri.go.id/",
  },
  {
    name: "Polri TV",
    logo: "/assets/polriTv.png",
    url: "https://tvradio.polri.go.id/",
  },
  {
    name: "TBNews",
    logo: "/assets/img/logo-tbn.png",
    url: "/tbnews/polda-kaltara",
  },
  {
    name: "INP",
    logo: "/assets/logo-inp.png",
    url: "https://inp.polri.go.id/",
  },
];

const ContactUsKaltara = () => {
  return (
    <div className="min-h-[300px] lg:min-h-[300px] text-black px-4 lg:px-[115px] pb-20">
      <div className="w-full px-4 py-4 bg-white">
        <h2 className="text-center text-xl md:text-2xl font-semibold mb-6">Channel Divisi Humas Polri</h2>

        {/* Mobile version pakai grid, Desktop pakai flex */}
        <div className="grid grid-cols-3 gap-4 sm:flex sm:justify-between sm:flex-wrap">
          {channels.map((channel, index) => (
            <Link key={index} href={channel.url} passHref>
              <div key={index} className="w-16 h-16 sm:w-[170px] sm:h-[80px] relative mx-auto">
                <Image  priority={true} src={channel.logo} alt={channel.name} width={1920} height={1080} className="object-contain w-full h-full" />
              </div>
            </Link>
          ))}
        </div>
      </div>

      <div className="w-full py-8 border-t-2">
        <div className="flex flex-col md:flex-row items-start gap-4 lg:gap-44">
          {/* Logo */}
          <div className="flex flex-col items-center space-x-4">
            <Image  priority={true} src="/assets/logo-humas-polri.png" alt="logo" width={1920} height={1080} className="h-[100px] lg:h-[200px] w-[100px] lg:w-[200px]" />
            {/* <p className="text-[#bb3523] font-bold">Copyright @TribrataNews Kaltara</p> */}
          </div>

          {/* Contact Us */}
          <div className="mt-8 md:mt-0 w-full lg:w-[500px]">
            <h2 className="text-[#bb3523] text-xl font-bold">Kontak Kami</h2>
            <hr className="border-t-2 border-dotted border-[#bb3523] my-2" />
            <div className="gap-[20px]">
              <div className="flex flex-row gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <path fill="#000" d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7" />
                </svg>
                <p className="flex items-center text-sm gap-2 font-sans">Jalan Komjen Dr. H.M. Jasin No.86, Bumi Rahayu, Kec. Tj. Selor, Kabupaten Bulungan, Kalimantan Utara 77212</p>
              </div>

              <p className="flex items-center text-sm font-sans mt-2 gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                  <g fill="none">
                    <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                    <path
                      fill="#000"
                      d="M6.857 2.445C8 3.278 8.89 4.415 9.65 5.503l.442.644l.417.615a1.504 1.504 0 0 1-.256 1.986l-1.951 1.449a.48.48 0 0 0-.142.616c.442.803 1.228 1.999 2.128 2.899s2.153 1.738 3.012 2.23a.483.483 0 0 0 .644-.162l1.27-1.933a1.503 1.503 0 0 1 2.056-.332l.663.459c1.239.86 2.57 1.837 3.588 3.14a1.47 1.47 0 0 1 .189 1.484c-.837 1.953-2.955 3.616-5.158 3.535l-.3-.017l-.233-.02l-.258-.03l-.281-.038l-.305-.05l-.16-.03l-.336-.072l-.176-.04l-.366-.094l-.385-.11l-.402-.13c-1.846-.626-4.189-1.856-6.593-4.26s-3.633-4.746-4.259-6.592l-.13-.402l-.11-.385l-.094-.366l-.078-.346a12 12 0 0 1-.063-.326l-.05-.305l-.04-.281l-.029-.258l-.02-.233l-.016-.3c-.081-2.196 1.6-4.329 3.544-5.162a1.47 1.47 0 0 1 1.445.159m8.135 3.595l.116.013a3.5 3.5 0 0 1 2.858 2.96a1 1 0 0 1-1.958.393l-.023-.115a1.5 1.5 0 0 0-1.07-1.233l-.155-.035a1 1 0 0 1 .232-1.983M15 3a6 6 0 0 1 6 6a1 1 0 0 1-1.993.117L19 9a4 4 0 0 0-3.738-3.991L15 5a1 1 0 1 1 0-2"
                    />
                  </g>
                </svg>
                Hotline Divisi HumasPolri (021) 72120599
              </p>
              <p className="flex items-center text-sm font-sans mt-2 gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                  <g fill="none">
                    <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                    <path
                      fill="#000"
                      d="M6.857 2.445C8 3.278 8.89 4.415 9.65 5.503l.442.644l.417.615a1.504 1.504 0 0 1-.256 1.986l-1.951 1.449a.48.48 0 0 0-.142.616c.442.803 1.228 1.999 2.128 2.899s2.153 1.738 3.012 2.23a.483.483 0 0 0 .644-.162l1.27-1.933a1.503 1.503 0 0 1 2.056-.332l.663.459c1.239.86 2.57 1.837 3.588 3.14a1.47 1.47 0 0 1 .189 1.484c-.837 1.953-2.955 3.616-5.158 3.535l-.3-.017l-.233-.02l-.258-.03l-.281-.038l-.305-.05l-.16-.03l-.336-.072l-.176-.04l-.366-.094l-.385-.11l-.402-.13c-1.846-.626-4.189-1.856-6.593-4.26s-3.633-4.746-4.259-6.592l-.13-.402l-.11-.385l-.094-.366l-.078-.346a12 12 0 0 1-.063-.326l-.05-.305l-.04-.281l-.029-.258l-.02-.233l-.016-.3c-.081-2.196 1.6-4.329 3.544-5.162a1.47 1.47 0 0 1 1.445.159m8.135 3.595l.116.013a3.5 3.5 0 0 1 2.858 2.96a1 1 0 0 1-1.958.393l-.023-.115a1.5 1.5 0 0 0-1.07-1.233l-.155-.035a1 1 0 0 1 .232-1.983M15 3a6 6 0 0 1 6 6a1 1 0 0 1-1.993.117L19 9a4 4 0 0 0-3.738-3.991L15 5a1 1 0 1 1 0-2"
                    />
                  </g>
                </svg>{" "}
                Call Center 110
              </p>
              <p className="flex items-center text-sm font-sans mt-2 gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                  <path fill="#000" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z" />
                </svg>
                ppid@polri.go.id
              </p>
            </div>
          </div>

          {/* Links */}
          <div className="mt-8 md:mt-0">
            <h2 className="text-xl font-bold text-[#bb3523]">Tautan</h2>
            <hr className="border-t-2 border-dotted border-[#bb3523] my-2" />
            <div className="flex flex-col">
              <Link href="https://polri.go.id/" className="flex items-center gap-2 text-sm font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                  <path
                    fill="#000"
                    d="M11 16c0-1.393.078-2.734.222-4h9.556c.144 1.266.222 2.607.222 4s-.078 2.734-.222 4h-9.556A36 36 0 0 1 11 16m-1.79 4A38 38 0 0 1 9 16c0-1.379.073-2.72.21-4H2.58A14 14 0 0 0 2 16c0 1.39.203 2.733.58 4zm-5.863 2h6.138c.314 1.86.771 3.547 1.344 4.978c.369.922.793 1.758 1.272 2.472A14.04 14.04 0 0 1 3.347 22m8.168 0h8.97c-.29 1.6-.69 3.032-1.17 4.235c-.516 1.288-1.104 2.262-1.706 2.9c-.6.634-1.144.865-1.609.865s-1.009-.231-1.609-.866c-.602-.637-1.19-1.611-1.705-2.899c-.481-1.203-.881-2.636-1.171-4.235m11 0c-.314 1.86-.771 3.547-1.344 4.978c-.369.922-.793 1.758-1.272 2.472A14.04 14.04 0 0 0 28.653 22zm6.905-2c.377-1.267.58-2.61.58-4s-.203-2.733-.58-4h-6.63c.137 1.28.21 2.621.21 4s-.073 2.72-.21 4zM19.314 5.765c.481 1.203.881 2.636 1.171 4.235h-8.97c.29-1.6.69-3.032 1.17-4.235c.516-1.288 1.104-2.263 1.706-2.9c.598-.631 1.14-.863 1.604-.865h.008c.464 0 1.007.233 1.606.866c.602.636 1.19 1.611 1.705 2.899M22.515 10h6.138a14.04 14.04 0 0 0-8.754-7.45c.479.714.903 1.55 1.272 2.472c.573 1.431 1.03 3.118 1.344 4.978M3.347 10h6.138c.314-1.86.771-3.547 1.344-4.978c.369-.922.793-1.758 1.272-2.472A14.04 14.04 0 0 0 3.347 10"
                  />
                </svg>
                Tentang Kami{" "}
              </Link>
              <Link href="https://tribratanews.polri.go.id/" className="flex items-center mt-2 text-sm gap-2 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                  <path
                    fill="#000"
                    d="M11 16c0-1.393.078-2.734.222-4h9.556c.144 1.266.222 2.607.222 4s-.078 2.734-.222 4h-9.556A36 36 0 0 1 11 16m-1.79 4A38 38 0 0 1 9 16c0-1.379.073-2.72.21-4H2.58A14 14 0 0 0 2 16c0 1.39.203 2.733.58 4zm-5.863 2h6.138c.314 1.86.771 3.547 1.344 4.978c.369.922.793 1.758 1.272 2.472A14.04 14.04 0 0 1 3.347 22m8.168 0h8.97c-.29 1.6-.69 3.032-1.17 4.235c-.516 1.288-1.104 2.262-1.706 2.9c-.6.634-1.144.865-1.609.865s-1.009-.231-1.609-.866c-.602-.637-1.19-1.611-1.705-2.899c-.481-1.203-.881-2.636-1.171-4.235m11 0c-.314 1.86-.771 3.547-1.344 4.978c-.369.922-.793 1.758-1.272 2.472A14.04 14.04 0 0 0 28.653 22zm6.905-2c.377-1.267.58-2.61.58-4s-.203-2.733-.58-4h-6.63c.137 1.28.21 2.621.21 4s-.073 2.72-.21 4zM19.314 5.765c.481 1.203.881 2.636 1.171 4.235h-8.97c.29-1.6.69-3.032 1.17-4.235c.516-1.288 1.104-2.263 1.706-2.9c.598-.631 1.14-.863 1.604-.865h.008c.464 0 1.007.233 1.606.866c.602.636 1.19 1.611 1.705 2.899M22.515 10h6.138a14.04 14.04 0 0 0-8.754-7.45c.479.714.903 1.55 1.272 2.472c.573 1.431 1.03 3.118 1.344 4.978M3.347 10h6.138c.314-1.86.771-3.547 1.344-4.978c.369-.922.793-1.758 1.272-2.472A14.04 14.04 0 0 0 3.347 10"
                  />
                </svg>
                Redaksi
              </Link>
              <Link href="https://www.humas.polri.go.id/" className="flex items-center mt-2 text-sm gap-2 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                  <path
                    fill="#000"
                    d="M11 16c0-1.393.078-2.734.222-4h9.556c.144 1.266.222 2.607.222 4s-.078 2.734-.222 4h-9.556A36 36 0 0 1 11 16m-1.79 4A38 38 0 0 1 9 16c0-1.379.073-2.72.21-4H2.58A14 14 0 0 0 2 16c0 1.39.203 2.733.58 4zm-5.863 2h6.138c.314 1.86.771 3.547 1.344 4.978c.369.922.793 1.758 1.272 2.472A14.04 14.04 0 0 1 3.347 22m8.168 0h8.97c-.29 1.6-.69 3.032-1.17 4.235c-.516 1.288-1.104 2.262-1.706 2.9c-.6.634-1.144.865-1.609.865s-1.009-.231-1.609-.866c-.602-.637-1.19-1.611-1.705-2.899c-.481-1.203-.881-2.636-1.171-4.235m11 0c-.314 1.86-.771 3.547-1.344 4.978c-.369.922-.793 1.758-1.272 2.472A14.04 14.04 0 0 0 28.653 22zm6.905-2c.377-1.267.58-2.61.58-4s-.203-2.733-.58-4h-6.63c.137 1.28.21 2.621.21 4s-.073 2.72-.21 4zM19.314 5.765c.481 1.203.881 2.636 1.171 4.235h-8.97c.29-1.6.69-3.032 1.17-4.235c.516-1.288 1.104-2.263 1.706-2.9c.598-.631 1.14-.863 1.604-.865h.008c.464 0 1.007.233 1.606.866c.602.636 1.19 1.611 1.705 2.899M22.515 10h6.138a14.04 14.04 0 0 0-8.754-7.45c.479.714.903 1.55 1.272 2.472c.573 1.431 1.03 3.118 1.344 4.978M3.347 10h6.138c.314-1.86.771-3.547 1.344-4.978c.369-.922.793-1.758 1.272-2.472A14.04 14.04 0 0 0 3.347 10"
                  />
                </svg>
                Pedoman Media Siber
              </Link>
              <Link href="https://new.netidhub.com/" className="flex items-center mt-2 text-sm gap-2 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                  <path
                    fill="#000"
                    d="M11 16c0-1.393.078-2.734.222-4h9.556c.144 1.266.222 2.607.222 4s-.078 2.734-.222 4h-9.556A36 36 0 0 1 11 16m-1.79 4A38 38 0 0 1 9 16c0-1.379.073-2.72.21-4H2.58A14 14 0 0 0 2 16c0 1.39.203 2.733.58 4zm-5.863 2h6.138c.314 1.86.771 3.547 1.344 4.978c.369.922.793 1.758 1.272 2.472A14.04 14.04 0 0 1 3.347 22m8.168 0h8.97c-.29 1.6-.69 3.032-1.17 4.235c-.516 1.288-1.104 2.262-1.706 2.9c-.6.634-1.144.865-1.609.865s-1.009-.231-1.609-.866c-.602-.637-1.19-1.611-1.705-2.899c-.481-1.203-.881-2.636-1.171-4.235m11 0c-.314 1.86-.771 3.547-1.344 4.978c-.369.922-.793 1.758-1.272 2.472A14.04 14.04 0 0 0 28.653 22zm6.905-2c.377-1.267.58-2.61.58-4s-.203-2.733-.58-4h-6.63c.137 1.28.21 2.621.21 4s-.073 2.72-.21 4zM19.314 5.765c.481 1.203.881 2.636 1.171 4.235h-8.97c.29-1.6.69-3.032 1.17-4.235c.516-1.288 1.104-2.263 1.706-2.9c.598-.631 1.14-.863 1.604-.865h.008c.464 0 1.007.233 1.606.866c.602.636 1.19 1.611 1.705 2.899M22.515 10h6.138a14.04 14.04 0 0 0-8.754-7.45c.479.714.903 1.55 1.272 2.472c.573 1.431 1.03 3.118 1.344 4.978M3.347 10h6.138c.314-1.86.771-3.547 1.344-4.978c.369-.922.793-1.758 1.272-2.472A14.04 14.04 0 0 0 3.347 10"
                  />
                </svg>
                Index
              </Link>
            </div>

            {/* login */}
            <Link href="/auth">
              <Button className="flex justify-center items-center bg-[#c03724] rounded-full gap-3 p-2 w-fit h-fit mt-4">
                <Icon icon="material-symbols:lock" className="text-white" />
                <p className="text-white">Kontributor Wilayah</p>
              </Button>
            </Link>
          </div>

          {/* Social Media */}
          {/* <div className="mt-8 md:mt-0">
            <h2 className="text-lg font-bold">Sosial Media Humas</h2>
            <hr className="border-t-2 border-dotted border-black my-2" />
            <div className="flex gap-4">
              <a href="#">
                <Icon icon="fa6-brands:square-x-twitter" className="w-6 h-6" />
              </a>
              <a href="#">
                <Icon icon="skill-icons:instagram" className="w-6 h-6" />
              </a>
              <a href="#">
                <Icon icon="devicon:facebook" className="w-6 h-6" />
              </a>
              <a href="#">
                <Icon icon="hugeicons:tiktok" className="w-6 h-6" />
              </a>
              <a href="#">
                <Icon icon="fa-brands:youtube-square" className="w-6 h-6" />
              </a>
            </div>
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default ContactUsKaltara;