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

const data = {
  logo: {
    src: "/block-media/shadcnblocks/block/block-1.svg",
    alt: "لوگوی LeadBridge",
    title: "LeadBridge",
    url: "https://www.ShadcnBlocks",
  },
  tagline: "سرنخ‌های واجد شرایط بسازید",
  personalMessage:
    "فرم‌ها، لندینگ‌ها و امتیازدهی سرنخ را یکپارچه کنید تا تیم فروش سریع‌تر پیگیری کند.",
  ctaText: "رزرو دمو",
  contact: {
    phone: "+۱ (۵۵۵) ۱۲۳-۴۵۶۷",
    email: "hello@leadbridge.io",
    location: "تهران",
    timezone: "IRST",
  },
  menuItems: [
    {
      title: "گزارش‌های موفقیت",
      links: [
        { text: "نمای کلی محصول", url: "#" },
        { text: "کمپین‌های نمونه", url: "#" },
        { text: "قیمت‌گذاری", url: "#" },
        { text: "درباره ما", url: "#" },
      ],
    },
    {
      title: "شبکه‌های اجتماعی",
      links: [
        { text: "توییتر", url: "#" },
        { text: "اینستاگرام", url: "#" },
        { text: "لینکدین", url: "#" },
      ],
    },
  ],
  copyright: "© ۱۴۰۴ LeadBridge. تمامی حقوق محفوظ است.",
  bottomLinks: [
    { text: "شرایط و ضوابط", url: "#" },
    { text: "حریم خصوصی", url: "#" },
  ],
};

interface Footer25Props {
  className?: string;
}

const Footer25 = ({ className }: Footer25Props) => {
  return (
    <section
      className={cn("bg-cover bg-center bg-no-repeat py-32", className)}
      style={{
        backgroundImage:
          "url('/block-media/shadcnblocks/block/photos/daniel-leone-g30P1zcOzXo-unsplash.jpg')",
      }}
    >
      <div className="container">
        <div className="mx-auto max-w-7xl rounded-lg bg-background p-8 shadow-lg md:p-12">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4 lg:gap-12">
            <div className="lg:col-span-1">
              <div className="mb-4 flex items-center gap-4">
                <img
                  src="/block-media/shadcnblocks/block/avatar/cool-dude.jpg"
                  alt="تصویر مشاور فروش"
                  className="h-16 w-16 rounded-full object-cover"
                />
                <h3 className="text-xl font-medium">دمو محصول</h3>
              </div>
              <p className="mb-6 text-sm leading-relaxed text-muted-foreground">
                {data.personalMessage}
              </p>
              <Button>{data.ctaText}</Button>
            </div>
            {data.menuItems.map((menu, idx) => (
              <div key={idx}>
                <h3 className="mb-4 text-sm font-medium tracking-wider text-primary uppercase">
                  {menu.title}
                </h3>
                <ul className="space-y-3">
                  {menu.links.map((link, index) => (
                    <li key={index}>
                      <a
                        href={link.url}
                        className="border-b border-transparent text-muted-foreground transition-all duration-300 ease-in-out hover:border-primary hover:text-primary"
                      >
                        {link.text}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
            <div>
              <h3 className="mb-4 text-sm font-medium tracking-wider text-primary uppercase">
                تماس
              </h3>
              <ul className="space-y-3">
                <li className="text-muted-foreground">{data.contact.phone}</li>
                <li className="text-muted-foreground">{data.contact.email}</li>
                <li className="text-muted-foreground">
                  {data.contact.location} • {data.contact.timezone}
                </li>
              </ul>
            </div>
          </div>
          <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 md:flex-row">
            <p className="text-sm text-muted-foreground">{data.copyright}</p>
            <div className="flex gap-4">
              {data.bottomLinks.map((link, idx) => (
                <a
                  key={idx}
                  href={link.url}
                  className="text-sm text-muted-foreground transition-colors hover:text-primary"
                >
                  {link.text}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Footer25 };