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

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

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

interface Footer8Props {
  logo?: {
    url: string;
    src: string;
    alt: string;
    title: string;
  };
  className?: string;
}
const Footer8 = ({
  logo = {
    url: "https://www.ShadcnBlocks",
    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
    alt: "لوگوی اپرا‌فلو",
    title: "OperaFlow",
  },
  className,
}: Footer8Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <footer>
          <div className="grid grid-cols-4 justify-between gap-10 lg:grid-cols-6 lg:text-start">
            <div className="col-span-4 flex w-full flex-col gap-6 lg:col-span-2">
              {/* Logo */}
              <div className="flex items-center gap-2 lg:justify-start">
                <a href="https://ShadcnBlocks">
                  <img
                    src={logo.src}
                    alt={logo.alt}
                    title={logo.title}
                    className="h-8"
                  />
                </a>
                <h2 className="text-xl font-semibold">{logo.title}</h2>
              </div>
              <p className="text-muted-foreground">
                فرآیندهای خرید، انبار و مالی را در یک سیستم ERP یکپارچه مدیریت کنید.
              </p>
              <ul className="flex items-center gap-6">
                <li className="font-medium duration-200 hover:scale-110 hover:text-muted-foreground">
                  <a href="#">
                    <FaInstagram className="size-6" />
                  </a>
                </li>
                <li className="font-medium duration-200 hover:scale-110 hover:text-muted-foreground">
                  <a href="#">
                    <FaFacebook className="size-6" />
                  </a>
                </li>
                <li className="font-medium duration-200 hover:scale-110 hover:text-muted-foreground">
                  <a href="#">
                    <FaTwitter className="size-6" />
                  </a>
                </li>
                <li className="font-medium duration-200 hover:scale-110 hover:text-muted-foreground">
                  <a href="#">
                    <FaLinkedin className="size-6" />
                  </a>
                </li>
              </ul>
            </div>
            {sections.map((section, sectionIdx) => (
              <div key={sectionIdx} className="col-span-2 md:col-span-1">
                <h3 className="mb-5 font-medium">{section.title}</h3>
                <ul className="space-y-4 text-sm 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 className="col-span-4 md:col-span-2">
              <h3 className="mb-5 font-medium">به‌روزرسانی محصول</h3>
              <div className="grid gap-1.5">
                <div className="flex w-full items-center gap-2">
                  <Input type="email" placeholder="ایمیل کاری" />
                  <Button type="submit">ثبت‌نام</Button>
                </div>
              </div>
              <p className="mt-1 text-xs font-medium text-muted-foreground">
                با ثبت‌نام،{" "}
                <a href="#" className="text-primary hover:underline">
                  حریم خصوصی
                </a>{" "}
                ما را می‌پذیرید.
              </p>
            </div>
          </div>
          <div className="mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground lg:flex-row lg:items-center lg:text-start">
            <p>
              <span className="me-1 font-bold text-primary">
                OperaFlow
              </span>
              © تمامی حقوق محفوظ است.
            </p>
            <p>
              طراحی‌شده با دقت توسط{" "}
              <a href="https://x.com/ausrobdev" className="text-primary">
                @ausrobdev
              </a>
            </p>
          </div>
        </footer>
      </div>
    </section>
  );
};

export { Footer8 };