"use client";
import { Facebook, Github, Linkedin, Twitter } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const SOCIAL_LINKS = [
  {
    icon: Github,
    href: "#",
  },
  {
    icon: Linkedin,
    href: "#",
  },
  {
    icon: Facebook,
    href: "#",
  },
  {
    icon: Twitter,
    href: "#",
  },
];

const NAVIGATION = [
  {
    title: "محصول",
    links: [
      { name: "نمای کلی فروش", href: "#" },
      { name: "قابلیت‌های تیم فروش", href: "#" },
    ],
  },
  {
    title: "درباره ما",
    links: [
      { name: "تیم ما", href: "#" },
      { name: "پشتیبانی فروش", href: "#" },
      { name: "شرایط استفاده", href: "#" },
      { name: "امنیت داده", href: "#" },
    ],
  },
  {
    title: "منابع",
    links: [
      { name: "آموزش فروش", href: "#" },
      { name: "مستندات API", href: "#" },
      { name: "راهنمای شروع", href: "#" },
    ],
  },
];

interface Footer15Props {
  className?: string;
}

const Footer15 = ({ className }: Footer15Props) => {
  return (
    <section className={cn("py-32", className)}>
      <footer className="container flex flex-col gap-32">
        <div className="flex w-full flex-col justify-between gap-y-24 lg:flex-row">
          <div className="flex shrink-0 grow-0 basis-auto flex-col items-start justify-start gap-6">
            {/* Logo */}
            <a href="https://ShadcnBlocks">
              <img
                src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg"
                alt="لوگوی DealDesk"
                title="DealDesk"
                className="h-10 dark:invert"
              />
            </a>
            <p className="w-full max-w-54 text-base leading-normal text-muted-foreground md:text-lg">
              فرصت‌ها، فعالیت‌ها و نرخ بستن قرارداد را در یک میز فروش ببینید.
            </p>
            <div className="flex w-full items-center justify-start gap-7">
              {SOCIAL_LINKS.map((item, i) => (
                <a
                  href={item.href}
                  key={`social-link-${i}`}
                  className="flex size-6 opacity-100 transition-opacity hover:opacity-50"
                >
                  <item.icon className="m-auto size-full stroke-foreground" />
                </a>
              ))}
            </div>
            <div className="pt-6">
              <Badge className="rounded-full border-muted bg-background p-0 text-foreground">
                <a href="#" className="flex items-center gap-2 px-3 py-2">
                  <div className="relative size-[0.4375rem]">
                    <span className="absolute inset-0 z-10 m-auto size-[0.6875rem] animate-pulse rounded-full bg-green-400/50" />
                    <span className="absolute inset-0 z-20 m-auto size-full rounded-full bg-green-500" />
                  </div>
                  <div className="text-[0.9375rem] leading-none font-normal">
                    همه سرویس‌های فروش فعال‌اند
                  </div>
                </a>
              </Badge>
            </div>
          </div>
          <div className="flex flex-col gap-24">
            <nav className="flex flex-wrap gap-24 md:gap-40">
              {NAVIGATION.map((section, _) => (
                <div
                  key={section.title}
                  className="flex flex-col items-start justify-start gap-4"
                >
                  <p className="mb-2 text-sm font-semibold text-foreground md:text-base">
                    {section.title}
                  </p>
                  {section.links.map((link, _) => (
                    <a
                      key={link.name}
                      href={link.href}
                      className="text-sm leading-none font-medium text-foreground opacity-50 transition-opacity hover:opacity-100"
                    >
                      {link.name}
                    </a>
                  ))}
                </div>
              ))}
            </nav>
          </div>
        </div>
        <div className="flex flex-col justify-between gap-y-4 md:flex-row">
          <div className="text-sm font-medium text-muted-foreground">
            © ۱۴۰۴ DealDesk
          </div>
          <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
            ساخته‌شده برای تیم‌های فروش{" "}
            <img
              src="/block-media/shadcnblocks/block/flags/united-states.png"
              alt="نشان کیفیت"
              className="h-5 rounded-sm"
            />
          </div>
        </div>
      </footer>
    </section>
  );
};

export { Footer15 };