import Image from "next/image";
import Link from "next/link";
import { navItems, site } from "@/lib/site-data";

const addressBlocks = [
  {
    title: "دفتر مرکزی",
    text: "تهران _ شهرک غرب _ مجتمع تجاری پلاتین _ طبقه چهارم _ مبلمان هومت",
  },
  {
    title: "نماینده فروش",
    text: "قم _ بازار مبل گنجوی _ بلوار نظامی گنجوی _ بین کوی 5 و 7 _ مبلمان هومت",
  },
  {
    title: "کارخانه",
    text: "قم _ بلوار حضرت معصومه _ کوی 35 _ جنب قالیشویی امیرکبیر _ کارخانه مبلمان هومت",
  },
];

export function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-main">
        <div className="footer-brand">
          <Link href="/" className="footer-logo" aria-label={site.name}>
            <Image
              src={site.logo}
              alt={site.name}
              width={220}
              height={40}
              className="footer-logo-img"
            />
          </Link>
          <p>{site.description}</p>
          <a className="footer-phone" href={`tel:${site.phone.replaceAll("-", "")}`}>
            <span className="footer-phone-icon" aria-hidden="true">
              ☎
            </span>
            <span>
              تماس با فروشگاه
              <strong className="ltr-number" dir="ltr" lang="en">
                {site.phone}
              </strong>
            </span>
          </a>
        </div>

        <div className="footer-col">
          <h4>پیوندها</h4>
          <ul>
            <li>
              <Link href="/">صفحه اصلی</Link>
            </li>
            {navItems.map((item) => (
              <li key={item.href}>
                <Link href={item.href}>{item.label}</Link>
              </li>
            ))}
          </ul>
        </div>

        <div className="footer-col footer-addresses">
          <h4>نشانی ما</h4>
          <ul>
            {addressBlocks.map((item) => (
              <li key={item.title}>
                <strong>{item.title}</strong>
                <span>{item.text}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <div className="container 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="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="/assets/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>
      </div>
    </footer>
  );
}