import Image from "next/image";
import Link from "next/link";
import { ArrowUpLeft, Camera, MapPin, MessageCircle, Phone, Send } from "lucide-react";
import { contact } from "@/data/site";

export function Footer() {
  return (
    <footer id="site-footer" className="footer">
      <div className="container footer-grid">
        <div className="footer-about">
          <Image src="/images/logo.png" alt="گلسموند" width={174} height={72} />
          <p>
            آینه هوشمند گلسموند؛ اولین تولیدکننده آینه‌های هوشمند ضد بخار با طراحی
            انحصاری، استانداردهای جهانی و خدمات پس از فروش مطمئن.
          </p>
          <div className="socials">
            <a href={contact.instagram} target="_blank" rel="noreferrer" aria-label="اینستاگرام">
              <Camera />
            </a>
            <a href="/" aria-label="تلگرام">
              <Send />
            </a>
            <a href={contact.whatsapp} target="_blank" rel="noreferrer" aria-label="واتساپ">
              <MessageCircle />
            </a>
          </div>
        </div>

        <div>
          <h3>دسترسی سریع</h3>
          <ul className="footer-links">
            <li><Link href="/">صفحه اصلی</Link></li>
            <li><Link href="/products">محصولات</Link></li>
            <li><Link href="/blog">مقالات</Link></li>
            <li><Link href="/features">ویژگی‌ها</Link></li>
            <li><Link href="/about">درباره ما</Link></li>
            <li><Link href="/contact">تماس با ما</Link></li>
          </ul>
        </div>

        <div>
          <h3>ارتباط با ما</h3>
          <ul className="footer-contact">
            <li>
              <MapPin />
              <span>{contact.address}</span>
            </li>
            <li>
              <Phone />
              <a href={contact.mobileHref}>{contact.mobile}</a>
            </li>
          </ul>
          <Link href="/contact" className="footer-cta">
            ارسال پیام
            <ArrowUpLeft />
          </Link>
        </div>
      </div>

      <div className="footer-bottom">
        <div className="container footer-bottom-inner">
          <span>تمام حقوق برای گلسموند محفوظ است.</span>
          <a
            href="https://meshkee.com"
            target="_blank"
            rel="noopener noreferrer"
            dir="ltr"
            className="meshkee-credit"
          >
            <span className="meshkee-credit-frame" aria-hidden="true">
              <i className="line-l" />
              <i className="line-t" />
              <i className="line-r" />
              <i className="line-b" />
            </span>
            <Image
              src="/images/meshkee-logo-white.png"
              alt="Meshkee"
              width={42}
              height={42}
              className="meshkee-credit-logo"
            />
            <span className="meshkee-credit-text">
              <span>Designed And Developed By</span>
              <strong>Meshkee E-Commerce Team</strong>
            </span>
          </a>
        </div>
      </div>
    </footer>
  );
}