import Link from "next/link";
import { Send } from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { branches, navLinks, phones, site } from "@/lib/data";

export function Footer() {
  return (
    <footer className="bg-ink text-white">
      <Container className="grid gap-12 py-16 sm:grid-cols-2 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <div className="inline-block rounded-xl bg-white px-3 py-2">
            <Placeholder src={site.logo} alt={site.name} className="h-14 w-auto object-contain" />
          </div>
          <p className="mt-5 max-w-sm text-[14px] leading-8 text-white/65">{site.description}</p>
          <a
            href={site.telegram}
            target="_blank"
            rel="noreferrer"
            className="mt-5 inline-flex items-center gap-2 text-[13px] hover:text-brand"
          >
            <Send className="size-4" />
            ما را دنبال کنید
          </a>
        </div>

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

        <div className="lg:col-span-3">
          <h3 className="mb-4 text-[13px] font-bold text-white/50">مکان ما</h3>
          <ul className="space-y-4 text-[14px] leading-7 text-white/75">
            {branches.map((branch) => (
              <li key={branch.id}>
                <strong className="text-white">{branch.title}</strong>
                <p className="mt-1">{branch.address}</p>
              </li>
            ))}
          </ul>
        </div>

        <div className="lg:col-span-3">
          <h3 className="mb-4 text-[13px] font-bold text-white/50">تماس با ما</h3>
          <ul className="space-y-2 font-latin text-[20px] tracking-wide">
            {phones.slice(0, 4).map((phone) => (
              <li key={phone.value}>
                <a href={phone.href} className="hover:text-brand" dir="ltr">
                  {phone.value}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </Container>

      <div className="border-t border-white/10 bg-black/40">
        <Container className="py-3">
          <div className="footer-bottom-bar">
            <div className="footer-bottom-site">{site.name}</div>
            <a
              href="https://meshkee.com"
              target="_blank"
              rel="noopener noreferrer"
              dir="ltr"
              className="meshkee-credit"
            >
              <span className="meshkee-credit__frame" aria-hidden>
                <span className="meshkee-credit__line meshkee-credit__line--l" />
                <span className="meshkee-credit__line meshkee-credit__line--t" />
                <span className="meshkee-credit__line meshkee-credit__line--r" />
                <span className="meshkee-credit__line meshkee-credit__line--b" />
              </span>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/images/meshkee-logo-white.png"
                alt="Meshkee"
                className="meshkee-credit__logo"
                width={42}
                height={42}
              />
              <span className="meshkee-credit__text">
                <span className="meshkee-credit__label">Designed And Developed By</span>
                <span className="meshkee-credit__name">Meshkee E-Commerce Team</span>
              </span>
            </a>
          </div>
        </Container>
      </div>
    </footer>
  );
}