import Image from "next/image";
import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faLocationDot,
  faPhone,
  faEnvelope,
} from "@fortawesome/free-solid-svg-icons";
import {
  faInstagram,
  faTelegram,
  faFacebookF,
} from "@fortawesome/free-brands-svg-icons";
import { siteConfig, footerPageLinks, footerUsefulLinks } from "@/lib/site-config";

const socials = [
  { href: siteConfig.socials.instagram, icon: faInstagram, label: "اینستاگرام" },
  { href: siteConfig.socials.telegram, icon: faTelegram, label: "تلگرام" },
  { href: siteConfig.socials.facebook, icon: faFacebookF, label: "فیسبوک" },
];

export default function Footer() {
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-[#dedede] bg-white">
      <div className="mx-auto max-w-7xl px-5 pt-16 pb-6 sm:px-8">
        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
          {/* Brand + address + socials */}
          <div>
            <Image
              src="/images/brand/logo.png"
              alt={siteConfig.name}
              width={112}
              height={55}
              className="h-9 w-auto"
            />
            <ul className="mt-5 space-y-3 text-sm text-ink-soft">
              <li className="flex items-start gap-2">
                <FontAwesomeIcon icon={faLocationDot} className="mt-1 text-primary" />
                <span>{siteConfig.address}</span>
              </li>
              <li className="flex items-center gap-2">
                <FontAwesomeIcon icon={faPhone} className="text-primary" />
                <a href={`tel:${siteConfig.phone}`} className="hover:text-primary" dir="ltr">
                  {siteConfig.phoneDisplay}
                </a>
              </li>
              <li className="flex items-center gap-2">
                <FontAwesomeIcon icon={faEnvelope} className="text-primary" />
                <a href={`mailto:${siteConfig.email}`} className="hover:text-primary" dir="ltr">
                  {siteConfig.email}
                </a>
              </li>
            </ul>
            <ul className="mt-5 flex items-center gap-3">
              {socials.map((s) => (
                <li key={s.label}>
                  <a
                    href={s.href}
                    target="_blank"
                    rel="noreferrer"
                    aria-label={s.label}
                    className="grid h-9 w-9 place-items-center rounded-full border border-ink/15 text-ink-soft transition-colors hover:border-primary hover:text-primary"
                  >
                    <FontAwesomeIcon icon={s.icon} className="text-sm" />
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Page links */}
          <div>
            <h3 className="font-bold text-lg text-ink">لینک صفحات</h3>
            <ul className="mt-5 space-y-3 text-sm text-ink-soft">
              {footerPageLinks.map((l) => (
                <li key={l.href}>
                  <Link href={l.href} className="hover:text-primary">
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Useful links */}
          <div>
            <h3 className="font-bold text-lg text-ink">لینک‌های مفید</h3>
            <ul className="mt-5 space-y-3 text-sm text-ink-soft">
              {footerUsefulLinks.map((l) => (
                <li key={l.href}>
                  <Link href={l.href} className="hover:text-primary">
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Brand blurb */}
          <div>
            <h3 className="font-bold text-lg text-ink">{siteConfig.name}،</h3>
            <p className="mt-1 text-sm text-ink-soft">{siteConfig.tagline}</p>
            <p className="mt-4 text-sm leading-7 text-ink-soft">{siteConfig.description}</p>
          </div>
        </div>

        <div className="mt-14 flex flex-col gap-4 border-t border-ink/10 pt-6 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs tracking-wide text-ink-soft">
            © {year} تمامی حقوق محفوظ است
          </p>
          <a
            href="https://meshkee.com"
            target="_blank"
            rel="noopener noreferrer"
            dir="ltr"
            className="meshkee-credit"
          >
            <span className="meshkee-credit__frame" aria-hidden="true">
              <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/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 Web Builder Team</span>
            </span>
          </a>
        </div>
      </div>
    </footer>
  );
}