import {
  FaApple,
  FaDiscord,
  FaRedditAlien,
  FaTelegramPlane,
  FaTwitter,
} from "react-icons/fa";

import { Logo, LogoImage, LogoText } from "@/components/shadcnblocks/logo";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const sections = [
  {
    title: "محصول",
    links: [
      { name: "نمای کلی CRM", 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: "#" },
    ],
  },
];

interface Footer1Props {
  logo?: {
    url: string;
    src: string;
    alt: string;
    title: string;
    className?: string;
  };
  className?: string;
}
const Footer1 = ({
  logo = {
    url: "https://www.ShadcnBlocks",
    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
    alt: "لوگوی پایپ‌لاین",
    title: "Pipeline",
  },
  className,
}: Footer1Props) => {
  return (
    <section className={cn("py-32 pb-16", className)}>
      <div className="container">
        <footer>
          <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
            <Logo url="https://ShadcnBlocks">
              <LogoImage
                src={logo.src}
                alt={logo.alt}
                title={logo.title}
                className="h-10 dark:invert"
              />
              <LogoText className="text-xl">{logo.title}</LogoText>
            </Logo>
            <div className="flex flex-col gap-4 md:flex-row md:items-center">
              <p className="text-lg font-medium">
                هر سرنخ را تا قرارداد، در یک پایپ‌لاین مدیریت کنید.
              </p>
              <div className="flex gap-2">
                <a
                  href="#"
                  className="inline-flex items-center justify-center rounded-lg bg-primary p-2"
                >
                  <FaApple className="size-6 text-background" />
                </a>
                <a
                  href="#"
                  className="inline-flex items-center justify-center rounded-lg bg-primary p-2"
                >
                  <img
                    src="/block-media/shadcnblocks/block/logos/google-play-icon.svg"
                    className="size-6 text-background"
                    alt="گوگل پلی"
                  />
                </a>
              </div>
            </div>
          </div>
          <Separator className="my-14" />
          <div className="grid gap-8 md:grid-cols-2 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>
              <h3 className="mb-4 font-bold">حقوقی</h3>
              <ul className="space-y-4 text-muted-foreground">
                <li className="font-medium hover:text-primary">
                  <a href="#">شرایط و ضوابط</a>
                </li>
                <li className="font-medium hover:text-primary">
                  <a href="#">حریم خصوصی</a>
                </li>
              </ul>
              <h3 className="mt-8 mb-4 font-bold">شبکه‌های اجتماعی</h3>
              <ul className="flex items-center gap-6 text-muted-foreground">
                <li className="font-medium hover:text-primary">
                  <a href="#">
                    <FaDiscord className="size-6" />
                  </a>
                </li>
                <li className="font-medium hover:text-primary">
                  <a href="#">
                    <FaRedditAlien className="size-6" />
                  </a>
                </li>
                <li className="font-medium hover:text-primary">
                  <a href="#">
                    <FaTwitter className="size-6" />
                  </a>
                </li>
                <li className="font-medium hover:text-primary">
                  <a href="#">
                    <FaTelegramPlane className="size-6" />
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <Separator className="my-14" />
          <p className="text-sm text-muted-foreground">
            © ۱۴۰۴ Pipeline. تمامی حقوق محفوظ است.
          </p>
        </footer>
      </div>
    </section>
  );
};

export { Footer1 };