import Link from "next/link";
import { Instagram, MapPin, Phone, Send } from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { footerLinks, site } from "@/lib/data";
import type { BusinessTrustBadge } from "@/lib/meshkee";

export function Footer({
  logoSrc,
  trustBadges = [],
}: {
  logoSrc: string;
  trustBadges?: BusinessTrustBadge[];
}) {
  const badges = trustBadges.filter((badge) => badge.embedHtml?.trim());
  return (
    <footer id="contact" className="mt-6 bg-navy-deep text-white">
      <Container className="grid gap-10 py-12 sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <Placeholder src={logoSrc} alt={site.name} className="h-10 w-auto object-contain" />
          <p className="mt-4 text-[13px] leading-7 text-white/75">{site.tagline}. مشاوره دارویی، اصالت کالا و ارسال سریع از سالاریه قم.</p>
          <div className="mt-5 flex gap-2">
            <a href={site.instagram} className="grid size-9 place-items-center rounded-lg bg-white/10" aria-label="اینستاگرام">
              <Instagram className="size-4" />
            </a>
            <a href={site.eitaa} className="grid size-9 place-items-center rounded-lg bg-white/10" aria-label="ایتا">
              <Send className="size-4" />
            </a>
            <a href={site.whatsapp} className="grid size-9 place-items-center rounded-lg bg-white/10" aria-label="واتساپ">
              <Phone className="size-4" />
            </a>
          </div>
        </div>

        <div>
          <h3 className="mb-4 text-[14px] font-bold">فروشگاه</h3>
          <ul className="space-y-2.5 text-[13px] text-white/75">
            {footerLinks.shop.map((item) => (
              <li key={item.title}>
                <Link href={item.href} className="hover:text-white">
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="mb-4 text-[14px] font-bold">صفحات</h3>
          <ul className="space-y-2.5 text-[13px] text-white/75">
            {footerLinks.pages.map((item) => (
              <li key={item.title}>
                <Link href={item.href} className="hover:text-white">
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="mb-4 text-[14px] font-bold">تماس با ما</h3>
          <p className="flex items-start gap-2 text-[13px] leading-7 text-white/75">
            <MapPin className="mt-1 size-4 shrink-0" />
            {site.address}
          </p>
          <a href={site.phoneHref} className="font-latin mt-3 flex items-center gap-2 text-[13px] text-white/90" dir="ltr">
            <Phone className="size-4" />
            {site.phone}
          </a>
          {badges.length > 0 ? (
            <div className="mt-5 flex flex-wrap items-center gap-3">
              {badges.map((badge) => (
                <div
                  key={badge.kind}
                  className="trust-badge overflow-hidden rounded-lg bg-white p-1 [&_img]:block [&_img]:h-16 [&_img]:w-auto"
                  dangerouslySetInnerHTML={{ __html: badge.embedHtml }}
                />
              ))}
            </div>
          ) : null}
        </div>
      </Container>
      <div className="border-t border-white/10">
        <Container className="flex h-12 items-center justify-center text-[12px] text-white/55">
          کلیه حقوق این فروشگاه متعلق به {site.name} است.
        </Container>
      </div>
    </footer>
  );
}