import Link from "next/link";
import Image from "next/image";
import { MAIN_NAV, PHONE, PHONE_HREF, SITE_NAME, SITE_TAGLINE, SOCIAL } from "@/data/site";
import { categoryHref } from "@/lib/slug";
import type { CategoryNode } from "@/lib/types";
import { InstagramIcon, PhoneIcon, TelegramIcon } from "./icons";
import { toFaDigits } from "@/lib/format";

export default function Footer({
  categories,
  logoUrl,
}: {
  categories: CategoryNode[];
  logoUrl: string;
}) {
  return (
    <footer className="mt-14 border-t border-line bg-surface">
      <div className="boxed grid gap-8 py-10 md:grid-cols-4">
        <div className="md:col-span-2">
          {/* h-9 w-auto so a square dashboard logo and the wide fallback
              wordmark both render undistorted — see Header.tsx. */}
          <Image src={logoUrl} alt={SITE_NAME} width={140} height={40} className="h-9 w-auto object-contain" />
          <p className="mt-3 max-w-md text-[13px] leading-7 text-body">{SITE_TAGLINE}</p>
          <a
            href={PHONE_HREF}
            className="mt-4 inline-flex items-center gap-2 text-[13px] font-bold text-ink transition hover:text-brand"
          >
            <PhoneIcon className="size-4" />
            {PHONE}
          </a>

          <div className="mt-4 flex items-center gap-2">
            <a
              href={SOCIAL.instagram}
              target="_blank"
              rel="noreferrer"
              aria-label="اینستاگرام موبایل معلم"
              className="flex size-9 items-center justify-center rounded-full border border-line text-ink-soft transition hover:border-brand hover:text-brand"
            >
              <InstagramIcon className="size-4.5" />
            </a>
            <a
              href={SOCIAL.telegram}
              target="_blank"
              rel="noreferrer"
              aria-label="تلگرام موبایل معلم"
              className="flex size-9 items-center justify-center rounded-full border border-line text-ink-soft transition hover:border-brand hover:text-brand"
            >
              <TelegramIcon className="size-4.5" />
            </a>
          </div>
        </div>

        <div>
          <h3 className="mb-3 text-[14px]">دسته‌بندی‌ها</h3>
          <ul className="space-y-2">
            {categories.slice(0, 6).map((cat) => (
              <li key={cat.id}>
                <Link
                  href={categoryHref(cat.id, cat.nameFa, cat.name)}
                  className="text-[13px] text-body transition hover:text-brand"
                >
                  {cat.nameFa || cat.name}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="mb-3 text-[14px]">دسترسی سریع</h3>
          <ul className="space-y-2">
            {MAIN_NAV.map((item) => (
              <li key={item.href}>
                <Link href={item.href} className="text-[13px] text-body transition hover:text-brand">
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="border-t border-line py-4 text-center text-[12px] text-body">
        © {toFaDigits(1404)} {SITE_NAME} — تمامی حقوق محفوظ است.
      </div>
    </footer>
  );
}