import { Globe } from "@/components/magicui/globe";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

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

interface Footer23Props {
  logo?: {
    url: string;
    src: string;
    alt: string;
    title: string;
  };
  className?: string;
}
const Footer23 = ({
  logo = {
    url: "https://www.ShadcnBlocks",
    src: "/block-media/shadcnblocks/block/logos/ShadcnBlockscom-icon.svg",
    alt: "لوگوی SupportDesk",
    title: "SupportDesk",
  },
  className,
}: Footer23Props) => {
  return (
    <section className={cn("", className)}>
      <div className="container">
        <footer>
          <Separator className="my-14" />
          <div className="flex flex-col items-center justify-between gap-6 lg:flex-row">
            <div className="lg:max-w-md">
              <div className="flex items-center justify-start gap-2">
                <a href="https://ShadcnBlocks">
                  <img
                    src={logo.src}
                    alt={logo.alt}
                    title={logo.title}
                    className="h-10"
                  />
                </a>
                <h2 className="text-xl font-semibold tracking-tight">
                  {logo.title}
                </h2>
              </div>
              <p className="mt-4 text-start text-sm text-muted-foreground">
                تیکت‌ها، چت و پایگاه دانش را یکجا مدیریت کنید تا زمان پاسخ کوتاه‌تر شود.
              </p>
            </div>
            <div className="mt-8 flex w-full flex-wrap justify-between gap-12 lg:mt-0 lg:w-fit">
              {sections.map((section, sectionIdx) => (
                <div key={sectionIdx} className="mb-4">
                  <h3 className="mb-4 font-semibold tracking-tight">
                    {section.title}
                  </h3>
                  <ul className="space-y-2 text-sm text-muted-foreground">
                    {section.links.map((link, linkIdx) => (
                      <li key={linkIdx} className="hover:text-primary">
                        <a href={link.href}>{link.name}</a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
          <div className="relative h-52 overflow-hidden lg:h-82">
            <Globe className="absolute top-10 md:scale-125 lg:top-16 lg:scale-150" />
          </div>
        </footer>
      </div>
    </section>
  );
};

export { Footer23 };