import {
  ArrowRight,
  Facebook,
  Instagram,
  Linkedin,
  Twitter,
} from "lucide-react";

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

const navigation = [
  {
    title: "محصول",
    links: [
      { name: "نمای کلی", href: "#" },
      { name: "کمپین‌های ایمیلی", href: "#" },
      { name: "اتوماسیون ارسال", href: "#" },
      { name: "A/B تست", href: "#" },
    ],
  },
  {
    title: "شرکت",
    links: [
      { name: "درباره ما", href: "#" },
      { name: "قیمت‌گذاری", href: "#" },
    ],
  },
  {
    title: "پشتیبانی",
    links: [
      { name: "سوالات متداول", href: "#" },
      { name: "تماس", href: "#" },
    ],
  },
  {
    title: "حقوقی",
    links: [
      { name: "شرایط و ضوابط", href: "#" },
      { name: "حریم خصوصی", href: "#" },
    ],
  },
];

const socialLinks = [
  { icon: Facebook, href: "https://facebook.com", label: "فیسبوک" },
  { icon: Twitter, href: "https://twitter.com", label: "توییتر" },
  { icon: Linkedin, href: "https://linkedin.com", label: "لینکدین" },
  { icon: Instagram, href: "https://instagram.com", label: "اینستاگرام" },
];

interface Footer13Props {
  className?: string;
}

const Footer13 = ({ className }: Footer13Props) => {
  return (
    <section
      className={cn(
        "bg-primary py-16 text-primary-foreground md:py-24 lg:py-32",
        className,
      )}
    >
      <div className="container">
        <footer>
          <div className="mb-16 rounded-2xl bg-primary-foreground/5 p-8 backdrop-blur-sm md:p-12 lg:p-16">
            <div className="flex flex-col items-center text-center">
              <h2 className="max-w-[800px] text-xl leading-tight font-semibold tracking-tight text-balance md:text-2xll lg:text-2xll">
                اولین کمپین ایمیلی را امروز ارسال کنید.
                <span className="text-sand-600 relative inline-block">
                  باز شدن و کلیک را بسنجید.
                  <span className="bg-sand-600/30 absolute bottom-1 start-0 h-1 w-full rounded-full"></span>
                </span>
              </h2>
              <p className="mt-4 max-w-[600px] text-lg text-primary-foreground/80">
                تیم‌های بازاریابی با MailGrid نرخ تبدیل ایمیل را شفاف و قابل بهبود می‌کنند.
              </p>
              <div className="mt-8 flex flex-col gap-4 sm:flex-row">
                <Button asChild variant="secondary" size="lg" className="group">
                  <a href="/get-started" className="flex items-center gap-2">
                    آزمایش ۷ روزه رایگان
                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
                  </a>
                </Button>
              </div>
            </div>
          </div>

          {/* Newsletter Section */}
          <div className="border-sand-600/20 mb-14 border-b pb-14">
            <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
              <div>
                <h3 className="mb-2 text-xl font-medium">خبرنامه بازاریابی</h3>
                <p className="max-w-md text-primary-foreground/70">
                  قالب‌ها، معیارهای industry و نکات بهبود نرخ باز شدن را دریافت کنید.
                </p>
              </div>
              <div className="flex flex-col gap-3 sm:flex-row">
                <div className="relative grow">
                  <Input
                    type="email"
                    placeholder="ایمیل کاری شما"
                    className="h-12 border-primary-foreground/20 bg-primary-foreground/10 ps-10"
                  />
                </div>
                <Button variant="secondary" type="submit" className="h-12 px-6">
                  ثبت‌نام
                </Button>
              </div>
            </div>
          </div>

          {/* Navigation Section */}
          <nav className="border-sand-600/20 grid grid-cols-2 gap-x-6 gap-y-10 border-b py-10 sm:grid-cols-4 lg:py-16">
            {navigation.map((section) => (
              <div key={section.title}>
                <h3 className="mb-5 text-lg font-semibold">{section.title}</h3>
                <ul className="space-y-4">
                  {section.links.map((link) => (
                    <li key={link.name}>
                      <a
                        href={link.href}
                        className="inline-block text-primary-foreground/80 transition-colors duration-200 hover:text-primary-foreground"
                      >
                        {link.name}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>

          {/* Bottom Section */}
          <div className="mx-auto mt-4 py-8">
            <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
              <p className="font-medium text-primary-foreground/80">
                © {new Date().getFullYear().toLocaleString("fa-IR")} MailGrid -{" "}
                <a
                  href="https://ShadcnBlocks"
                  className="underline transition-colors hover:text-primary-foreground"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  MailGrid
                </a>
              </p>
              <div className="flex items-center gap-6">
                {socialLinks.map((link) => (
                  <a
                    aria-label={link.label}
                    key={link.href}
                    href={link.href}
                    className="text-primary-foreground/70 transition-colors hover:text-primary-foreground"
                  >
                    <link.icon
                      size={20}
                      className="transition-transform hover:scale-110"
                    />
                  </a>
                ))}
              </div>
            </div>
          </div>
        </footer>
      </div>
    </section>
  );
};

export { Footer13 };