import {
  FaAndroid,
  FaApple,
  FaFacebook,
  FaInstagram,
  FaLinkedin,
  FaRedditAlien,
  FaTwitter,
} from "react-icons/fa";

import { cn } from "@/lib/utils";

const sections = [
  {
    title: "محصول",
    links: [
      { name: "نمای کلی", href: "#" },
      { name: "قیمت‌گذاری", href: "#" },
      { name: "صندوق تیکت", href: "#" },
      { name: "چت زنده", href: "#" },
      { name: "پایگاه دانش", href: "#" },
      { name: "رضایت مشتری", href: "#" },
    ],
  },
  {
    title: "شرکت",
    links: [
      { name: "درباره ما", href: "#" },
      { name: "تیم", href: "#" },
      { name: "وبلاگ", href: "#" },
      { name: "فرصت‌های شغلی", href: "#" },
      { name: "تماس", href: "#" },
      { name: "حریم خصوصی", href: "#" },
    ],
  },
  {
    title: "منابع",
    links: [
      { name: "مرکز راهنما", href: "#" },
      { name: "آموزش تیم پشتیبانی", href: "#" },
      { name: "مطالعات موردی", href: "#" },
    ],
  },
  {
    title: "شبکه‌های اجتماعی",
    links: [
      { name: "توییتر", href: "#" },
      { name: "اینستاگرام", href: "#" },
      { name: "لینکدین", href: "#" },
    ],
  },
];

interface Footer5Props {
  className?: string;
}

const Footer5 = ({ className }: Footer5Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <footer>
          <div className="grid grid-cols-2 gap-8 lg:grid-cols-4">
            {sections.map((section, sectionIdx) => (
              <div key={sectionIdx}>
                <h3 className="mb-4 font-bold">{section.title}</h3>
                <ul className="space-y-4 text-muted-foreground">
                  {section.links.map((link, linkIdx) => (
                    <li
                      key={linkIdx}
                      className="font-medium hover:text-primary"
                    >
                      <a href={link.href}>{link.name}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div className="mt-10 gap-10">
            <div className="grid gap-8 lg:grid-cols-4 lg:flex-row">
              <div className="col-span-3">
                <p className="mb-3 font-bold">با تیم پشتیبانی در ارتباط باشید</p>
                <ul className="flex items-center gap-2 text-muted-foreground">
                  <li className="font-medium">
                    <a href="#">
                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
                        <FaFacebook className="size-6" />
                      </span>
                    </a>
                  </li>
                  <li className="font-medium">
                    <a href="#">
                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
                        <FaRedditAlien className="size-6" />
                      </span>
                    </a>
                  </li>
                  <li className="font-medium">
                    <a href="#">
                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
                        <FaTwitter className="size-6" />
                      </span>
                    </a>
                  </li>
                  <li className="font-medium">
                    <a href="#">
                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
                        <FaInstagram className="size-6" />
                      </span>
                    </a>
                  </li>
                  <li className="font-medium">
                    <a href="#">
                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
                        <FaLinkedin className="size-6" />
                      </span>
                    </a>
                  </li>
                </ul>
              </div>
              <div>
                <p className="mb-3 font-bold">اپ پشتیبانی موبایل</p>
                <ul className="flex items-center gap-2 text-muted-foreground">
                  <li className="font-medium">
                    <a href="#">
                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
                        <FaAndroid className="size-6" />
                      </span>
                    </a>
                  </li>
                  <li className="font-medium">
                    <a href="#">
                      <span className="flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary">
                        <FaApple className="size-6" />
                      </span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div className="mt-24 border-t pt-8">
            <p className="text-center text-sm font-medium text-muted-foreground">
              © ۱۴۰۴ HelpDesk Pro. تمامی حقوق محفوظ است.
            </p>
          </div>
        </footer>
      </div>
    </section>
  );
};

export { Footer5 };