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

export function Footer() {
  const t = useTranslations("footer");
  const locale = useLocale();
  const base = `/${locale}`;

  return (
    <footer className="border-t border-gray-200 bg-gray-50">
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-5">
          {/* Brand */}
          <div className="col-span-2">
            <div className="flex items-center gap-2.5">
              <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-brand-700">
                <svg viewBox="0 0 24 24" className="h-4 w-4 fill-white" aria-hidden>
                  <path d="M3 6h18v2H3V6zm2 4h14v2H5v-2zm-2 4h18v2H3v-2zm4 4h10v2H7v-2z" />
                </svg>
              </div>
              <span className="text-base font-bold text-gray-900">میزی</span>
            </div>
            <p className="mt-3 max-w-xs text-sm leading-relaxed text-gray-500">
              {t("description")}
            </p>
          </div>

          {/* Product */}
          <div>
            <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
              {t("product")}
            </h3>
            <ul className="space-y-2">
              {[
                { label: t("features"), href: `${base}/features` },
                { label: t("solutions"), href: `${base}/solutions` },
                { label: t("pricing"), href: `${base}/pricing` },
                { label: t("tour"), href: `${base}/tour` },
                { label: t("printerGuide"), href: `${base}/printer-guide` },
              ].map((l) => (
                <li key={l.href}>
                  <a href={l.href} className="text-sm text-gray-600 hover:text-brand-700">
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Company */}
          <div>
            <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
              {t("company")}
            </h3>
            <ul className="space-y-2">
              {[
                { label: t("about"), href: `${base}/about` },
                { label: t("blog"), href: `${base}/blog` },
                { label: t("careers"), href: `${base}/careers` },
              ].map((l) => (
                <li key={l.href}>
                  <a href={l.href} className="text-sm text-gray-600 hover:text-brand-700">
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Support */}
          <div>
            <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
              {t("support")}
            </h3>
            <ul className="space-y-2">
              {[
                { label: t("contact"), href: `${base}/contact` },
                { label: t("docs"), href: `${base}/docs` },
                { label: t("status"), href: `${base}/status` },
                { label: t("privacy"), href: `${base}/privacy` },
                { label: t("terms"), href: `${base}/terms` },
              ].map((l) => (
                <li key={l.href}>
                  <a href={l.href} className="text-sm text-gray-600 hover:text-brand-700">
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

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