import { CircleCheck, LifeBuoy, Linkedin } from "lucide-react";

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

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

interface Footer9Props {
  className?: string;
}

const Footer9 = ({ className }: Footer9Props) => {
  return (
    <section className={cn("bg-muted py-32", className)}>
      <div className="container">
        <footer>
          <div className="mb-14 flex flex-col justify-between gap-11 md:items-start xl:flex-row xl:items-center xl:gap-6">
            <div>
              <h1 className="mb-4 text-xl font-semibold">
                فروش آنلاین را ساده‌تر کنید.
              </h1>
              <p className="mb-8 text-xl text-muted-foreground">
                کاتالوگ، سفارش و پرداخت را در یک پلتفرم فروشگاه مدیریت کنید.
              </p>
              <div className="flex items-center gap-3">
                <Button>ساخت فروشگاه</Button>
                <Button variant="outline">مقایسه پلن‌ها</Button>
              </div>
            </div>
            <div className="flex flex-col justify-between gap-6 rounded-2xl bg-background p-6 shadow-lg md:flex-row">
              <div className="flex flex-col items-center justify-center p-10">
                <div className="flex text-2xll font-semibold">
                  ۰<div className="h-full text-xl">€</div>
                </div>
                <div className="text-sm">شروع رایگان</div>
              </div>
              <div className="h-[1px] w-full bg-muted-foreground/30 md:h-auto md:w-[1px]" />
              <ul className="flex flex-col justify-center space-y-3 text-muted-foreground">
                <li className="flex items-center gap-2 font-medium hover:text-primary">
                  <CircleCheck className="h-5 w-5 text-primary" />
                  <p className="text-gray-400">۱ فروشگاه</p>
                </li>
                <li className="flex items-center gap-2 font-medium hover:text-primary">
                  <CircleCheck className="h-5 w-5 text-primary" />
                  <p className="text-gray-400">محصولات نامحدود</p>
                </li>
                <li className="flex items-center gap-2 font-medium hover:text-primary">
                  <CircleCheck className="h-5 w-5 text-primary" />
                  <p className="text-gray-400">آنالیتیکس پایه</p>
                </li>
                <li className="flex items-center gap-2 font-medium hover:text-primary">
                  <CircleCheck className="h-5 w-5 text-primary" />
                  <p className="text-gray-400">پشتیبانی استاندارد</p>
                </li>
              </ul>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-8 border-t pt-20 lg:grid-cols-5">
            {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>
          <div className="mt-20 flex flex-col items-start justify-between gap-4 border-t pt-8 text-center text-sm font-medium text-muted-foreground lg:flex-row lg:items-center">
            <ul className="flex justify-center gap-4 lg:justify-start">
              <li className="hover:text-primary">
                <a href="#">حریم خصوصی</a>
              </li>
              <li className="hover:text-primary">
                <a href="#">شرایط و ضوابط</a>
              </li>
              <li className="hover:text-primary">
                <a href="#">اطلاعات قانونی</a>
              </li>
              <li>
                <p className="text-gray-400">
                  © ۱۴۰۴ ShopPilot. تمامی حقوق محفوظ است.
                </p>
              </li>
            </ul>
            <ul className="flex items-center justify-center gap-4 lg:justify-start">
              <li>
                <p className="text-black">ما را دنبال کنید:</p>
              </li>
              <li>
                <Button className="gap-2 rounded-full" variant="outline">
                  <Linkedin className="h-4 w-4" />
                  لینکدین
                </Button>
              </li>
              <li>
                <Button className="gap-2 rounded-full" variant="outline">
                  <LifeBuoy className="h-4 w-4" />
                  تور محصول
                </Button>
              </li>
            </ul>
          </div>
        </footer>
      </div>
    </section>
  );
};

export { Footer9 };