import Image from "next/image";
import Link from "next/link";
import styles from "./Footer.module.css";

const PHONES = ["۰۲۵ - ۳۲۹۴۵۰۸۸", "۰۲۵ - ۳۲۹۴۵۳۵۰", "۰۲۵ - ۳۲۹۴۵۰۷۷"];

const faDigitsToLatin = (s) =>
  s.replace(/[۰-۹]/g, (d) => "۰۱۲۳۴۵۶۷۸۹".indexOf(d)).replace(/\D/g, "");

const INSURANCES = [
  "بیمه بانک تجارت",
  "بیمه بانک ملت",
  "بیمه سامان",
  "بیمه معلم",
  "بیمه نوین",
  "بیمه ایران",
  "بیمه کوثر",
  "بیمه دی",
  "بیمه دانا",
];

const SOCIAL = [
  { label: "اینستاگرام", href: "https://www.instagram.com/neginclinicc", icon: "instagram" },
  { label: "آپارات", href: "https://www.aparat.com/v/3zqwp", icon: "aparat" },
  { label: "تلگرام", href: "https://telegram.me/negin_clinic", icon: "telegram" },
];

function Icon({ name }) {
  if (name === "instagram") {
    return (
      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8">
        <rect x="3" y="3" width="18" height="18" rx="5" />
        <circle cx="12" cy="12" r="4" />
        <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
      </svg>
    );
  }
  if (name === "telegram") {
    return (
      <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
        <path d="M21.9 4.3 18.7 19c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9-8.1c.4-.3-.1-.5-.6-.2L6.7 13 1.9 11.5c-1-.3-1-1 .2-1.5L20.6 3c.9-.3 1.6.2 1.3 1.3z" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.8 13.6V8.4L16 12l-5.8 3.6z" />
    </svg>
  );
}

export default function Footer() {
  return (
    <footer className={styles.footer}>
      <div className={`container ${styles.grid}`}>
        <div className={styles.col}>
          <Image
            src="/assets/files/sJcexIa9R4.png"
            alt="کلینیک دندانپزشکی نگین"
            width={200}
            height={60}
            className={styles.logo}
          />
          <p className={styles.tag}>
            کلینیک دندانپزشکی نگین، ارائه‌دهنده کلیه خدمات دندانپزشکی از جمله:
            ارتودنسی نامرئی، ایمپلنت و زیبایی.
          </p>
          <div className={styles.social}>
            {SOCIAL.map((s) => (
              <a
                key={s.icon}
                href={s.href}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={s.label}
                title={s.label}
              >
                <Icon name={s.icon} />
              </a>
            ))}
          </div>
        </div>

        <div className={styles.col}>
          <h6 className={styles.head}>تلفن</h6>
          <ul className={styles.list}>
            {PHONES.map((p) => (
              <li key={p}>
                <a dir="ltr" href={`tel:+98${faDigitsToLatin(p).replace(/^0/, "")}`}>
                  {p}
                </a>
              </li>
            ))}
          </ul>
          <h6 className={styles.head}>آدرس</h6>
          <p className={styles.addr}>قم، بلوار امین، کوچه ۲۱، شماره ۵ (روبروی صدا و سیما)</p>
        </div>

        <div className={styles.col}>
          <h6 className={styles.head}>بیمه‌های طرف قرارداد</h6>
          <ul className={`${styles.list} ${styles.insList}`}>
            {INSURANCES.map((i) => (
              <li key={i}>{i}</li>
            ))}
          </ul>
        </div>

        <div className={styles.col}>
          <h6 className={styles.head}>دسترسی سریع</h6>
          <ul className={styles.list}>
            <li><Link href="/services">خدمات کلینیک</Link></li>
            <li><Link href="/about-us">درباره ما</Link></li>
            <li><Link href="/contact-us">تماس با ما</Link></li>
            <li><Link href="/blog">مقالات</Link></li>
            <li><Link href="/virtual-tour">تور مجازی</Link></li>
          </ul>
        </div>
      </div>

      {/* bottom row — mirrors the Meshkee footer structure */}
      <div className={styles.copyRow}>
        <div className={`container ${styles.copyInner}`}>
          <span dir="ltr">© {new Date().getFullYear()} Meshkee — مشکی</span>
          <a href="https://www.meshkee.com" target="_blank" rel="noopener noreferrer">
            طراحی و توسعه توسط تیم تجارت الکترونیک مشکی
            <span className={styles.copyEn}>Designed &amp; Developed By Meshkee E-Commerce Team</span>
          </a>
        </div>
      </div>
    </footer>
  );
}