import { useTranslations, useLocale } from "next-intl";
import { MapPin } from "lucide-react";

export function Footer() {
  const t = useTranslations("footer");
  const locale = useLocale();

  return (
    <footer className="border-t border-gray-100 bg-white mt-16">
      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6">
        <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
          {/* Brand */}
          <div className="col-span-2 sm:col-span-1">
            <div className="flex items-center gap-2">
              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-brand-700">
                <MapPin className="h-3.5 w-3.5 text-white" />
              </div>
              <span className="font-bold text-gray-900">
                {locale === "fa" ? "کجا" : "Koja"}
              </span>
            </div>
            <p className="mt-3 text-xs leading-relaxed text-gray-500">{t("tagline")}</p>
          </div>

          {/* Links */}
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">{t("product")}</p>
            <ul className="mt-3 space-y-2">
              <li><a href={`/${locale}/search`} className="text-sm text-gray-600 hover:text-brand-700">{t("forCafes")}</a></li>
            </ul>
          </div>

          <div>
            <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">{t("company")}</p>
            <ul className="mt-3 space-y-2">
              <li><a href="https://meezi.ir" target="_blank" rel="noopener" className="text-sm text-gray-600 hover:text-brand-700">{t("about")}</a></li>
              <li><a href="https://meezi.ir/contact" target="_blank" rel="noopener" className="text-sm text-gray-600 hover:text-brand-700">{t("contact")}</a></li>
            </ul>
          </div>

          <div>
            <p className="text-xs font-semibold uppercase tracking-wider text-gray-400">{t("legal")}</p>
            <ul className="mt-3 space-y-2">
              <li><a href="https://meezi.ir/privacy" target="_blank" rel="noopener" className="text-sm text-gray-600 hover:text-brand-700">{t("privacy")}</a></li>
              <li><a href="https://meezi.ir/terms" target="_blank" rel="noopener" className="text-sm text-gray-600 hover:text-brand-700">{t("terms")}</a></li>
            </ul>
          </div>
        </div>

        <div className="mt-8 border-t border-gray-100 pt-6 text-center text-xs text-gray-400">
          {t("copyright")}
        </div>
      </div>
    </footer>
  );
}
