import Image from "next/image";
import { footerLinks, site } from "@/data/home";

export function Footer() {
  return (
    <footer id="contact" className="border-t-4 border-brand-navy bg-white text-[#333]">
      <div className="container-page grid gap-8 py-12 md:grid-cols-2 lg:grid-cols-4">
        <div>
          <Image
            src="/images/brand/footer-logo.png"
            alt={site.name}
            width={140}
            height={48}
            className="mb-4 h-12 w-auto object-contain"
          />
          <h3 className="mb-3 text-base font-bold">{site.name}</h3>
          <div className="space-y-1 text-sm leading-7 text-[#666]">
            <p>{site.office}</p>
            <p>{site.factory}</p>
            <p>{site.factoryAddress}</p>
            {site.phones.map((phone) => (
              <p key={phone} className="latin-digits" dir="ltr">
                {phone}
              </p>
            ))}
          </div>
        </div>

        <div>
          <h4 className="mb-4 text-sm font-bold">محصولات</h4>
          <ul className="space-y-2 text-sm text-[#666]">
            {footerLinks.products.map((item) => (
              <li key={item.label}>
                <a href={item.href} className="hover:text-brand">
                  {item.label}
                </a>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h4 className="mb-4 text-sm font-bold">راهکارها</h4>
          <ul className="space-y-2 text-sm text-[#666]">
            {footerLinks.solutions.map((item) => (
              <li key={item.label}>
                <a href={item.href} className="hover:text-brand">
                  {item.label}
                </a>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h4 className="mb-4 text-sm font-bold">همراه ما باشید</h4>
          <ul className="space-y-2 text-sm text-[#666]">
            {footerLinks.pages.map((item) => (
              <li key={item.label}>
                <a href={item.href} className="hover:text-brand">
                  {item.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="border-t border-[#e5e5e5] bg-[#f7f7f7]">
        <div className="container-page flex flex-col items-center justify-between gap-3 py-4 text-xs text-[#999] sm:flex-row">
          <div>
            © {new Date().getFullYear()} {site.name}
          </div>
          <a
            href="https://meshkee.com"
            target="_blank"
            rel="noopener noreferrer"
            dir="ltr"
            className="meshkee-credit group inline-flex items-center gap-2.5 px-2.5 py-1.5 text-[#999] transition-colors duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:text-[#555]"
          >
            <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>
            <Image
              src="/images/brand/MeshkeeLogo.png"
              alt="Meshkee"
              width={36}
              height={32}
              className="relative h-8 w-auto shrink-0 object-contain opacity-50 transition-opacity duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:opacity-100"
            />
            <span className="relative flex flex-col leading-snug">
              <span className="text-[11px]">Designed And Developed By</span>
              <span className="text-[13px] font-semibold text-[#666] transition-colors duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:text-[#333]">
                Meshkee E-Commerece Team
              </span>
            </span>
          </a>
        </div>
      </div>
    </footer>
  );
}
