"use client";

import Link from "next/link";
import Image from "next/image";
import { Instagram, Phone, Mail, MessageSquare } from "lucide-react";
import { useTranslations } from "next-intl";
import Logo from "@/public/logo.png";

export default function Footer() {
  const t = useTranslations("common");

  return (
    <footer className="hidden lg:block w-full bg-white border-t border-gray-200 mt-auto">
      <div className="mx-auto px-4 lg:px-6 max-w-[1520px] py-6">
        <Link
          href="/"
          className="inline-block transition-opacity hover:opacity-80"
        >
          <div className="relative h-34 w-[200px]">
            <Image
              src={Logo}
              alt="Logo"
              fill
              className="object-contain object-left"
            />
          </div>
        </Link>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pb-4">
          {/* Logo and Tagline */}
          <div className="col-span-1 md:col-span-1 space-y-3">
            <p className="text-base text-gray-500 max-w-xs">
              SmartElectronics - yerli we daşary ýurt harytlarynyň onlaýn
              marketi.
            </p>
            <ul className="space-y-3">
              <li>
                <Link
                  className="mt-4 text-base text-gray-500 max-w-xs"
                  href="/info"
                >
                  {t("about_us")}
                </Link>
              </li>
              <li>
                <Link
                  className="mt-4 text-base text-gray-500 max-w-xs"
                  href="/info"
                >
                  {t("contact_us")}
                </Link>
              </li>
            </ul>
          </div>

          {/* Quick Links / Contact Info */}
          <div className="space-y-4">
            <h3 className="font-bold text-gray-900 text-lg">
              {t("contact_us")}
            </h3>
            <div className="flex justify-between">
              <ul className="space-y-3">
                <li>
                  <a
                    href="tel:+99365123456"
                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
                  >
                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
                      <Phone className="h-5 w-5" />
                    </div>
                    <span>+993 65 123456</span>
                  </a>
                </li>
                <li>
                  <a
                    href="https://instagram.com/smartelectronics"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
                  >
                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
                      <Instagram className="h-5 w-5" />
                    </div>
                    <span>@smartelectronics</span>
                  </a>
                </li>
              </ul>
              <ul className="space-y-3">
                {" "}
                <li>
                  <a
                    href="mailto:info@smartelectronics.com"
                    className="flex items-center gap-3 text-gray-600 hover:text-primary transition-colors group"
                  >
                    <div className="p-2 rounded-full bg-gray-50 group-hover:bg-primary/10 transition-colors">
                      <Mail className="h-5 w-5" />
                    </div>
                    <span>info@smartelectronics.com</span>
                  </a>
                </li>
                <li>
                  <div className="flex items-center gap-3 text-gray-600 group">
                    <div className="p-2 rounded-full bg-gray-50">
                      <MessageSquare className="h-5 w-5" />
                    </div>
                    <div className="flex flex-col">
                      <span className="text-xs text-gray-400 font-medium">
                        {t("imo")}
                      </span>
                      <span>+993 65 123456</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          {/* Placeholder for other sections if needed */}
          <div className="hidden md:block"></div>
          <div className="hidden md:block"></div>
        </div>

        <div className="mt-6 pt-6 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400">
          <p>
            © {new Date().getFullYear()} SmartElectronics. All rights reserved.
          </p>
          <div className="flex gap-6">
            <Link href="#" className="hover:text-gray-600 transition-colors">
              Terms
            </Link>
            <Link href="#" className="hover:text-gray-600 transition-colors">
              Privacy
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}
