import Link from "next/link";
import Logo from "./Logo";
import { headerNavLinks, siteInfo } from "@/data/site";
import { categoryHref } from "@/lib/slug";
import type { CategoryNode } from "@/lib/types";
import { socialLinks } from "./socialLinks";
import { MailIcon, PhoneIcon, PinIcon } from "./icons";

export default function Footer({ categoryColumns }: { categoryColumns: CategoryNode[] }) {
  const categoryItems = categoryColumns.flatMap((col) => col.children).slice(0, 6);

  return (
    <footer id="contact" className="bg-brand text-white/70 mt-auto">
      <div className="boxed py-12 md:py-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
        <div>
          <Logo dark />
          <p className="mt-4 text-sm leading-7 text-white/55">
            مرجع تخصصی پوشاک بچگانه؛ لباس‌های شاد و باکیفیت برای نوزادان،
            دختران و پسران با ارسال به سراسر کشور.
          </p>
          <div className="mt-5 flex items-center gap-3">
            {socialLinks.map(({ icon: Icon, label, href }) => (
              <a
                key={label}
                href={href}
                aria-label={label}
                className="flex items-center justify-center size-9 rounded-full border border-white/15 transition-all duration-200 hover:border-gold hover:bg-gold hover:text-ink hover:scale-110"
              >
                <Icon className="size-4" />
              </a>
            ))}
          </div>
        </div>

        <div>
          <h3 className="text-white font-bold text-sm mb-4">دسترسی سریع</h3>
          <ul className="space-y-2.5 text-sm">
            {headerNavLinks.map((link) => (
              <li key={link.title}>
                {link.href.startsWith("#") ? (
                  <a href={link.href} className="hover:text-gold transition-colors">
                    {link.title}
                  </a>
                ) : (
                  <Link href={link.href} className="hover:text-gold transition-colors">
                    {link.title}
                  </Link>
                )}
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="text-white font-bold text-sm mb-4">دسته‌بندی‌ها</h3>
          <ul className="space-y-2.5 text-sm">
            {categoryItems.map((cat) => (
              <li key={cat.id}>
                <Link href={categoryHref(cat)} className="hover:text-gold transition-colors">
                  {cat.nameFa}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="text-white font-bold text-sm mb-4">ارتباط با ما</h3>
          <ul className="space-y-3.5 text-sm">
            <li className="flex items-start gap-2.5">
              <PhoneIcon className="size-4 mt-0.5 text-gold shrink-0" />
              <span dir="ltr">{siteInfo.phone}</span>
            </li>
            <li className="flex items-start gap-2.5">
              <PinIcon className="size-4 mt-0.5 text-gold shrink-0" />
              <span>{siteInfo.address}</span>
            </li>
          </ul>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="boxed py-5 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-white/45">
          <span>
            © {new Date().getFullYear()} تمامی حقوق برای فروشگاه {siteInfo.name} محفوظ است.
          </span>
          <span className="font-en tracking-wider">KIDONE STORE</span>
        </div>
      </div>

      <div className="bg-brand-dark">
        <div dir="ltr" className="boxed py-3 flex items-center justify-center gap-2 text-white/55 text-xs">
          <MailIcon className="size-4 shrink-0" />
          <span>طراحی و توسعه توسط تیم تجارت الکترونیک مشکی</span>
        </div>
      </div>
    </footer>
  );
}