import { Link } from "@remix-run/react";
import { Instagram, Send } from "lucide-react";
import logo from "~/assets/logo/SVG-07.svg";

type FooterLink = { label: string; to: string };
type FooterCol = { heading: string; links: FooterLink[] };

const COLUMNS: FooterCol[] = [
  {
    heading: "خرید",
    links: [
      { label: "تازه‌ها", to: "/explore" },
      { label: "تخفیف‌ها", to: "/" },
      { label: "کالکشن‌ها", to: "/collections" },
      { label: "برندها", to: "/sellers" },
    ],
  },
  {
    heading: "ویترون",
    links: [
      { label: "درباره ما", to: "/profile/about" },
      { label: "سوالات متداول", to: "/profile/faq" },
    ],
  },
  {
    heading: "پشتیبانی",
    links: [
      { label: "راهنمای خرید", to: "/profile/faq" },
      { label: "پیگیری سفارش", to: "/profile/orders" },
    ],
  },
];

/**
 * Desktop-only footer. Hidden below the `lg` breakpoint.
 */
const DesktopFooter = () => {
  return (
    <footer className="hidden lg:block border-t border-WHITE3 bg-WHITE2">
      <div className="max-w-[1320px] mx-auto px-8 pt-14 pb-8 grid grid-cols-[1.6fr_1fr_1fr_1fr] gap-10">
        <div>
          <div className="flex items-center gap-2.5">
            <img src={logo} alt="ویترون" className="w-6 h-8 object-contain" />
            <b className="text-[22px] font-extrabold text-VITROWN_BLUE">ویترون</b>
          </div>
          <p className="text-GRAY text-[13.5px] max-w-[280px] my-3 leading-8">
            ویترین آنلاین برندهای پوشاک ایران. از بهترین فروشگاه‌ها کشف کن، دنبال
            کن و خرید کن.
          </p>
          <Link
            to="/store/create"
            className="inline-flex items-center justify-center h-[38px] px-3.5 rounded-[10px] bg-BLACK text-white text-[13.5px] font-bold hover:bg-black transition-colors"
          >
            فروشگاه خود را بسازید
          </Link>
        </div>

        {COLUMNS.map((col) => (
          <div key={col.heading}>
            <h4 className="text-[14px] font-bold mb-3.5">{col.heading}</h4>
            <ul className="flex flex-col gap-2.5">
              {col.links.map((l) => (
                <li key={l.label + l.to}>
                  <Link
                    to={l.to}
                    className="text-BLACK2 text-[13.5px] hover:text-BLACK transition-colors"
                  >
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div className="max-w-[1320px] mx-auto px-8 py-5 pb-10 flex justify-between items-center border-t border-WHITE3 text-GRAY text-[12.5px]">
        <span>© ۱۴۰۴ ویترون — تمامی حقوق محفوظ است.</span>
        <div className="flex gap-2.5">
          <a
            href="#"
            aria-label="اینستاگرام"
            className="w-[38px] h-[38px] rounded-full bg-WHITE border border-GRAY3 grid place-items-center text-BLACK2 hover:text-BLACK hover:border-BLACK transition-colors"
          >
            <Instagram size={18} />
          </a>
          <a
            href="#"
            aria-label="تلگرام"
            className="w-[38px] h-[38px] rounded-full bg-WHITE border border-GRAY3 grid place-items-center text-BLACK2 hover:text-BLACK hover:border-BLACK transition-colors"
          >
            <Send size={18} />
          </a>
        </div>
      </div>
    </footer>
  );
};

export default DesktopFooter;