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

export default function Footer() {
  return (
    <footer className="bg-[#f9f9f9] text-black py-6 border-t border-gray-200">
      <div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
        {/* Kiri */}
        <div className="flex flex-col md:flex-col items-start gap-6 text-sm text-gray-700">
          <div className="flex items-center gap-2">
            <Globe className="w-4 h-4" />
            <span>Indonesia</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={2}
              stroke="currentColor"
              className="w-4 h-4"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </div>

          <p className="text-center md:text-left text-gray-600">
            © 2025 Qudo Buana Nawakara. Semua Hak Dilindungi.
          </p>
        </div>

        {/* Tengah - Sosial Media */}

        {/* Kanan */}
        <div className="flex flex-col md:flex-row items-center gap-4">
          <div className="flex items-center justify-center gap-4 text-black">
            <Instagram className="w-5 h-5 hover:text-gray-500 cursor-pointer" />
            <Facebook className="w-5 h-5 hover:text-gray-500 cursor-pointer" />
            <Twitter className="w-5 h-5 hover:text-gray-500 cursor-pointer" />
            <Youtube className="w-5 h-5 hover:text-gray-500 cursor-pointer" />
            <Music2 className="w-5 h-5 hover:text-gray-500 cursor-pointer" />{" "}
            {/* untuk TikTok */}
          </div>
          <div className="flex items-center gap-4">
            <div className="flex flex-col">
              <Image
                src="/kan.png"
                alt="KAN Logo"
                width={280}
                height={88}
                className="object-contain"
              />
            </div>
          </div>

          <div className="flex flex-col gap-2">
            <Image
              src="/appstore.png"
              alt="App Store"
              width={130}
              height={40}
              className="object-contain cursor-pointer"
            />
            <Image
              src="/google.png"
              alt="Google Play"
              width={130}
              height={40}
              className="object-contain cursor-pointer"
            />
          </div>
        </div>
      </div>
    </footer>
  );
}