import Image from "next/image";
import { Mail, Facebook, Twitter, Youtube, Instagram } from "lucide-react";

export default function Footer() {
  return (
    <footer className="bg-[#9c6a16] text-white">
      <div className="container mx-auto px-6 py-16">
        <div className="grid gap-12 md:grid-cols-5">
          {/* Logo */}
          <div className="md:col-span-1">
            <div className="flex items-center gap-3">
              <Image
                src="/image/qudo1.png"
                alt="Qudoco"
                width={150}
                height={150}
              />
            </div>
          </div>

          {/* Information */}
          <div>
            <h4 className="mb-4 font-semibold">Information</h4>
            <ul className="space-y-2 text-sm opacity-90">
              <li>Home</li>
              <li>Blog</li>
              <li>Document</li>
            </ul>
          </div>

          {/* Product */}
          <div>
            <h4 className="mb-4 font-semibold">Product</h4>
            <ul className="space-y-2 text-sm opacity-90">
              <li>MediaHUB Content Aggregator</li>
              <li>Multipool Reputation Management</li>
              <li>PR Room Opinion Management</li>
            </ul>
          </div>

          {/* Service */}
          <div>
            <h4 className="mb-4 font-semibold">Service</h4>
            <ul className="space-y-2 text-sm opacity-90">
              <li>Artifintel</li>
              <li>Produksi Video Animasi</li>
              <li>Reelithic</li>
              <li>Qudoin</li>
              <li>Talkshow AI</li>
            </ul>
          </div>

          {/* Get in Touch */}
          <div>
            <h4 className="mb-4 font-semibold">Get in Touch.</h4>
            <p className="mb-4 text-sm opacity-90">
              Indonesia – India – USA – Oman
            </p>

            {/* Email */}
            <div className="flex items-center rounded-full bg-white px-4 py-2 text-gray-700">
              <Mail size={16} className="mr-2" />
              <span className="text-sm flex-1">sales@qudoco.com</span>
              <span className="ml-2 font-semibold">→</span>
            </div>

            {/* Social */}
            <div className="mt-5 flex gap-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-white text-[#9c6a16]">
                <Facebook size={16} />
              </div>
              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-white text-[#9c6a16]">
                <Twitter size={16} />
              </div>
              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-white text-[#9c6a16]">
                <Youtube size={16} />
              </div>
              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-white text-[#9c6a16]">
                <Instagram size={16} />
              </div>
            </div>
          </div>
        </div>

        {/* Divider */}
        <div className="mt-14 border-t border-white/20 pt-6 text-center text-xs opacity-80">
          © 2024 Copyrights by company. All Rights Reserved. Designed by{" "}
          <span className="font-semibold">Qudoco Team</span>
        </div>
      </div>
    </footer>
  );
}