import Link from "next/link";
import { images } from "@/data/assets";
import { nav, site } from "@/data/home";
import {
  portfolioCategoryHref,
  topPortfolioCategories,
} from "@/data/portfolioCategories";

const stats = [
  { value: "112+", label: "بیش از ۱۱۲ وبسایت", labelEn: "WEBSITES" },
  { value: "28+", label: "بیش از ۲۸ لوگو", labelEn: "LOGOS" },
  { value: "7+", label: "بیش از ۷ اپلیکیشن", labelEn: "APPS" },
];

export function Footer() {
  return (
    <footer className="border-t border-line/70 bg-[linear-gradient(180deg,#fafafa_0%,#f3f5f7_100%)]">
      <div className="border-b border-line/60">
        <div className="mx-auto grid max-w-7xl grid-cols-1 divide-y divide-line/60 sm:grid-cols-3 sm:divide-x sm:divide-y-0 sm:divide-line/60">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="flex items-center gap-4 px-5 py-7 lg:gap-5 lg:px-8 lg:py-9"
            >
              <p
                className="latin shrink-0 text-[clamp(2rem,4vw,2.75rem)] font-light leading-none tracking-tight text-ink"
                dir="ltr"
              >
                {stat.value}
              </p>
              <span
                aria-hidden
                className="h-10 w-px shrink-0 bg-line/80 sm:h-12"
              />
              <div className="min-w-0">
                <p className="text-sm leading-6 text-ink-soft">{stat.label}</p>
                <p className="latin mt-1 text-[10px] tracking-[0.22em] text-muted uppercase">
                  {stat.labelEn}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="mx-auto grid max-w-7xl gap-10 px-5 py-12 sm:grid-cols-2 lg:grid-cols-4 lg:gap-8 lg:px-8 lg:py-14">
        <div className="sm:col-span-2 lg:col-span-1">
          <p className="mb-2 text-2xl font-black text-ink">{site.nameFa}</p>
          <p className="latin text-xs uppercase tracking-[0.18em] text-muted">
            {site.taglineEn}
          </p>
          <p className="mt-4 max-w-xs text-sm leading-7 text-muted">
            تیم برنامه‌نویسی و تجارت الکترونیک مشکی
          </p>
        </div>

        <div>
          <p className="mb-4 text-xs text-muted">خدمات</p>
          <div className="flex flex-col gap-2.5 text-sm text-ink-soft">
            {nav
              .filter((item) => item.href !== "/portfolio")
              .map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="link-hover transition"
                >
                  {item.label}
                </Link>
              ))}
          </div>
        </div>

        <div>
          <p className="mb-4 text-xs text-muted">نمونه‌کارها</p>
          <div className="flex flex-col gap-2.5 text-sm text-ink-soft">
            <Link href="/portfolio" className="link-hover transition">
              همه نمونه‌کارها
            </Link>
            {topPortfolioCategories.map((category) => (
              <Link
                key={category.id}
                href={portfolioCategoryHref(category.slug)}
                className="link-hover transition"
              >
                {category.nameFa}
              </Link>
            ))}
          </div>
        </div>

        <div>
          <p className="mb-4 text-xs text-muted">تماس</p>
          <a
            href={site.phoneHref}
            className="latin block text-sm text-ink-soft transition hover:text-ink"
            dir="ltr"
          >
            {site.phone}
          </a>
          <p className="mt-3 max-w-[16rem] text-sm leading-7 text-muted">
            {site.address}
          </p>
          <div className="mt-5 flex flex-wrap gap-2">
            <Link
              href="/about"
              className="inline-flex rounded-full border border-line px-4 py-2 text-xs text-ink-soft transition hover:border-ink/30 hover:text-ink"
            >
              درباره ما
            </Link>
            <Link
              href="/contact"
              className="inline-flex rounded-full border border-line px-4 py-2 text-xs text-ink-soft transition hover:border-ink/30 hover:text-ink"
            >
              تماس با ما
            </Link>
          </div>
        </div>
      </div>

      <div className="footer-bottom-bar">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 px-5 py-4 sm:flex-row lg:px-8">
          <div className="text-xs text-[#999]">
            © {new Date().getFullYear()} Meshkee — مشکی
          </div>
          <a
            href="https://meshkee.com"
            target="_blank"
            rel="noopener noreferrer"
            dir="ltr"
            className="meshkee-credit group inline-flex items-center gap-2.5 px-2.5 py-1.5 text-[#999] transition-colors duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:text-[#555]"
          >
            <span className="meshkee-credit__frame" aria-hidden>
              <span className="meshkee-credit__line meshkee-credit__line--l" />
              <span className="meshkee-credit__line meshkee-credit__line--t" />
              <span className="meshkee-credit__line meshkee-credit__line--r" />
              <span className="meshkee-credit__line meshkee-credit__line--b" />
            </span>
            <img
              src={images.meshkeeCreditLogo}
              alt="Meshkee"
              width={36}
              height={32}
              className="relative h-8 w-auto shrink-0 object-contain opacity-50 transition-opacity duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:opacity-100"
            />
            <span className="relative flex flex-col leading-snug">
              <span className="text-[11px]">Designed And Developed By</span>
              <span className="text-[13px] font-semibold text-[#666] transition-colors duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:text-[#333]">
                Meshkee E-Commerce Team
              </span>
            </span>
          </a>
        </div>
      </div>
    </footer>
  );
}