// components/Footer.tsx
import Image from "next/image";
import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";

export default function Footer() {
  return (
    <footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
      <div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
        {/* Logo */}
        <div className="flex justify-center md:justify-end">
          <Image
            src="/bhayangkara-logo.png"
            alt="Logo"
            width={230}
            height={230}
            className="object-contain"
          />
        </div>

        {/* Subscribe Box */}
        <div className="flex justify-center md:justify-end">
          <div className="  p-8  w-full md:w-[420px]">
            <h2 className="text-2xl font-semibold text-gray-800 leading-snug">
              Subscribe us to get <br />
              the latest news!
            </h2>

            <label className="block mt-6 mb-1 text-sm text-gray-600">
              Email address:
            </label>

            <input
              type="email"
              placeholder="Your email address"
              className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
            />

            <button className="mt-4 bg-green-600 hover:bg-green-500 text-black px-6 py-3 rounded-md font-medium">
              SIGN UP
            </button>
          </div>
        </div>
      </div>

      <div className="flex flex-wrap justify-center gap-8 mt-16 text-gray-600 text-sm">
        <a href="#">About Us</a>
        <a href="#">Contact</a>
        <a href="#">Kode Etik Jurnalistik</a>
        <a href="#">Kebijakan Privasi</a>
        <a href="#">Disclaimer</a>
        <a href="#">Pedoman Media Siber</a>
      </div>

      <div className="flex justify-center gap-8 mt-8 text-gray-700">
        <Facebook className="w-5 h-5 cursor-pointer" />
        <Twitter className="w-5 h-5 cursor-pointer" />
        <Instagram className="w-5 h-5 cursor-pointer" />
        <Youtube className="w-5 h-5 cursor-pointer" />
      </div>

      <p className="text-start text-gray-500 text-sm mt-8 pl-5">
        © 2025 BhayangkaraKita - All Rights Reserved.
      </p>
    </footer>
  );
}