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";

export function Footer({ logoSrc }: { logoSrc: string }) {
  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>
          <div className="mt-5 flex gap-3">
            <span className="overflow-hidden rounded-lg bg-white">
              <Placeholder src="/placeholders/enamad.svg" className="size-16 object-cover" />
            </span>
            <span className="overflow-hidden rounded-lg bg-white">
              <Placeholder src="/placeholders/samandehi.svg" className="size-16 object-cover" />
            </span>
          </div>
        </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>
  );
}