import Image from "next/image";
import Link from "next/link";

import logo from "@/assets/images/brand/logo.png";
import { contact, nav, site } from "@/data/site";

function PinIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="mt-1 h-4 w-4 shrink-0 text-gold">
      <path
        d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z"
        stroke="currentColor"
        strokeWidth="1.4"
      />
      <circle cx="12" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.4" />
    </svg>
  );
}

function PhoneIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-4 w-4 shrink-0 text-gold">
      <path
        d="M6.5 3.5h3l1.5 4-2 1.5a12 12 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2Z"
        stroke="currentColor"
        strokeWidth="1.4"
      />
    </svg>
  );
}

function MailIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-4 w-4 shrink-0 text-gold">
      <rect x="3" y="5.5" width="18" height="13" rx="2" stroke="currentColor" strokeWidth="1.4" />
      <path d="m3.5 7 8.5 6 8.5-6" stroke="currentColor" strokeWidth="1.4" />
    </svg>
  );
}

function InstagramIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-4 w-4 shrink-0 text-gold">
      <rect x="3.5" y="3.5" width="17" height="17" rx="5" stroke="currentColor" strokeWidth="1.4" />
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.4" />
      <circle cx="17" cy="7" r="1.1" fill="currentColor" />
    </svg>
  );
}

export function SiteFooter() {
  return (
    <footer className="bg-ink-2 pt-20 text-white/70">
      <div className="mx-auto max-w-[1400px] px-5 lg:px-10">
        <div className="grid gap-14 border-b border-white/10 pb-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10">
          {/* Brand */}
          <div className="lg:col-span-1">
            <Image src={logo} alt={site.name} className="h-9 w-auto brightness-0 invert" />
            <p className="mt-7 text-sm leading-[2.1]">
              {site.tagline} — از سال ۱۳۷۹ در حوزه توسعه، سرمایه‌گذاری و اجرای پروژه‌های
              مسکونی، اداری و تجاری.
            </p>
            <Link
              href={contact.instagramUrl}
              className="mt-7 inline-flex h-11 w-11 items-center justify-center rounded-full border border-white/20 transition-colors duration-300 hover:border-gold hover:bg-gold"
              aria-label={`اینستاگرام ${site.name}`}
            >
              <InstagramIcon />
            </Link>
          </div>

          {/* Address */}
          <div>
            <h2 className="mb-7 text-base font-bold text-white">آدرس ما</h2>
            <p className="flex gap-3 text-sm leading-[2.1]">
              <PinIcon />
              {contact.address}
            </p>
          </div>

          {/* Pages */}
          <div>
            <h2 className="mb-7 text-base font-bold text-white">صفحات</h2>
            <ul className="space-y-3.5">
              {nav.map((item) => (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    className="group inline-flex items-center gap-2.5 text-sm transition-colors duration-300 hover:text-white"
                  >
                    <span className="h-1 w-1 rotate-45 bg-gold transition-transform duration-300 group-hover:scale-150" />
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h2 className="mb-7 text-base font-bold text-white">روش های ارتباطی</h2>
            <ul className="space-y-4">
              {contact.phones.map((phone, i) => (
                <li key={phone}>
                  <Link
                    href={`tel:${contact.phoneLinks[i]}`}
                    className="flex items-center gap-3 text-sm transition-colors duration-300 hover:text-white"
                  >
                    <PhoneIcon />
                    {phone}
                  </Link>
                </li>
              ))}
              <li>
                <Link
                  href={contact.instagramUrl}
                  className="flex items-center gap-3 text-sm transition-colors duration-300 hover:text-white"
                >
                  <InstagramIcon />
                  <span className="latin">{contact.instagram}</span>
                </Link>
              </li>
              <li>
                <Link
                  href={`mailto:${contact.email}`}
                  className="flex items-center gap-3 text-sm transition-colors duration-300 hover:text-white"
                >
                  <MailIcon />
                  <span className="latin">{contact.email}</span>
                </Link>
              </li>
            </ul>
          </div>
        </div>

        <div className="flex flex-col items-center justify-between gap-4 py-8 text-center text-xs leading-relaxed md:flex-row md:text-start">
          <p>تمامی حقوق مادی و معنوی این سایت متعلق به سایت رئوفی است.</p>
          <p>طراحی و توسعه توسط تیم تجارت الکترونیک مشکی</p>
        </div>
      </div>
    </footer>
  );
}
