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

import { Logo, LogoImage, LogoText } from "@/components/shadcnblocks/logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

const sections = [
  {
    title: "محصول",
    links: [
      { name: "نمای کلی", href: "#" },
      { name: "قیمت‌گذاری", href: "#" },
      { name: "داشبورد KPI", 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 Footer3Props {
  logo?: {
    url: string;
    src: string;
    alt: string;
    title: string;
  };
  className?: string;
}
const Footer3 = ({
  logo = {
    url: "https://www.ShadcnBlocks",
    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
    alt: "لوگوی اینسایت‌هاب",
    title: "InsightHub",
  },
  className,
}: Footer3Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <footer>
          <Logo url="https://ShadcnBlocks">
            <LogoImage
              src={logo.src}
              alt={logo.alt}
              title={logo.title}
              className="h-10"
            />
            <LogoText className="text-xl">{logo.title}</LogoText>
          </Logo>
          <div className="mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl: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 className="lg:col-span-2 xl:col-span-1">
              <ul className="mb-10 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">
                      <FaDiscord 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">
                      <FaTelegramPlane 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 className="grid w-full max-w-sm items-center gap-1.5">
                <Label htmlFor="email">گزارش‌های هفتگی را دریافت کنید</Label>
                <div className="flex w-full max-w-sm items-center gap-2">
                  <Input type="email" placeholder="ایمیل کاری" />
                  <Button type="submit">ثبت‌نام</Button>
                </div>
                <p className="mt-1 text-xs text-muted-foreground">
                  با ثبت‌نام،{" "}
                  <a href="#" className="text-primary hover:underline">
                    حریم خصوصی
                  </a>{" "}
                  ما را می‌پذیرید.
                </p>
              </div>
            </div>
          </div>
          <div className="mt-24 flex flex-col flex-wrap justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center">
            <p>© ۱۴۰۴ InsightHub. تمامی حقوق محفوظ است.</p>
            <ul className="flex gap-4">
              <li className="whitespace-nowrap underline hover:text-primary">
                <a href="#">شرایط و ضوابط</a>
              </li>
              <li className="whitespace-nowrap underline hover:text-primary">
                <a href="#">حریم خصوصی</a>
              </li>
            </ul>
          </div>
        </footer>
      </div>
    </section>
  );
};

export { Footer3 };