import Link from "next/link";
import Logo from "./Logo";
import { headerNavLinks, siteInfo } from "@/data/site";
import type { CategoryNode } from "@/lib/types";
import {
  InstagramIcon,
  MailIcon,
  PhoneIcon,
  PinIcon,
  TelegramIcon,
  WhatsappIcon,
} 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">
            <a
              href="#"
              aria-label="اینستاگرام"
              className="flex items-center justify-center size-9 rounded-full border border-white/15 hover:border-gold hover:text-gold transition-colors"
            >
              <InstagramIcon className="size-4" />
            </a>
            <a
              href="#"
              aria-label="تلگرام"
              className="flex items-center justify-center size-9 rounded-full border border-white/15 hover:border-gold hover:text-gold transition-colors"
            >
              <TelegramIcon className="size-4" />
            </a>
            <a
              href="#"
              aria-label="واتساپ"
              className="flex items-center justify-center size-9 rounded-full border border-white/15 hover:border-gold hover:text-gold transition-colors"
            >
              <WhatsappIcon 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}>
                <a href={link.href} className="hover:text-gold transition-colors">
                  {link.title}
                </a>
              </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={`/products?category=${cat.slug}`} 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>
  );
}