/** فوتر سایت: لینک‌ها، اطلاعات تماس و نماد اعتماد */
import Link from "next/link";
import { LogoWordmark } from "@/components/brand/Logo";
import { Icon } from "@/components/ui/Icon";
import { site } from "@/lib/site";
import { currentJalaliYear } from "@/lib/format";
import type { NavCategory } from "./types";

/** آیکون‌های ساده شبکه‌های اجتماعی (سفید، هم‌سبک بقیه آیکون‌ها) */
const SOCIALS = [
  {
    key: "instagram",
    label: "اینستاگرام زهورا",
    icon: (
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} aria-hidden="true">
        <rect x="3" y="3" width="18" height="18" rx="5" />
        <circle cx="12" cy="12" r="4.2" />
        <circle cx="17.4" cy="6.6" r="1.1" fill="currentColor" stroke="none" />
      </svg>
    ),
  },
  {
    key: "youtube",
    label: "یوتیوب زهورا",
    icon: (
      <svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true">
        <path fill="currentColor" d="M21.6 7.2a2.6 2.6 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.6 2.6 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.6 2.6 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.6 2.6 0 0 0 1.8-1.8c.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8ZM10 15V9l5.2 3L10 15Z" />
      </svg>
    ),
  },
  {
    key: "tiktok",
    label: "تیک‌تاک زهورا",
    icon: (
      <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true">
        <path fill="currentColor" d="M16.6 3c.4 2.3 1.9 3.9 4.2 4.2v3.1a7.4 7.4 0 0 1-4.1-1.3v6.4A5.6 5.6 0 1 1 11 9.8v3.2a2.5 2.5 0 1 0 2.5 2.4V3h3.1Z" />
      </svg>
    ),
  },
] as const;

const promises = [
  { icon: "shield", title: "ضمانت اصالت", text: "همه کالاها اصل و معتبر" },
  { icon: "truck", title: "ارسال سریع", text: "پست، تیپاکس و پیک تهران" },
  { icon: "return", title: "۷ روز بازگشت", text: "برای کالای باز نشده" },
] as const;

export function Footer({ nav }: { nav: NavCategory[] }) {
  return (
    <footer className="mt-12 bg-ink text-paper">
      <div className="border-b border-paper/10">
        <ul className="container-z grid grid-cols-3 gap-2 py-6 text-center">
          {promises.map((p) => (
            <li key={p.title} className="flex flex-col items-center gap-1.5">
              <Icon name={p.icon} size={24} />
              <p className="text-xs font-bold">{p.title}</p>
              <p className="hidden text-[11px] text-paper/60 sm:block">{p.text}</p>
            </li>
          ))}
        </ul>
      </div>

      <div className="container-z grid gap-10 py-12 md:grid-cols-4">
        <div className="space-y-4">
          <LogoWordmark invert className="h-4 w-auto" />
          <p className="text-xs leading-6 text-paper/60">{site.description}</p>
        </div>

        <div>
          <h3 className="mb-4 text-xs font-bold">فروشگاه</h3>
          <ul className="space-y-2.5 text-xs text-paper/70">
            {nav.map((c) => (
              <li key={c.id}>
                <Link href={c.href} className="hover:text-paper">{c.name}</Link>
              </li>
            ))}
            <li><Link href="/brands" className="hover:text-paper">برندها</Link></li>
            <li><Link href="/mag" className="hover:text-paper">مجله زیبایی</Link></li>
          </ul>
        </div>

        <div>
          <h3 className="mb-4 text-xs font-bold">راهنما</h3>
          <ul className="space-y-2.5 text-xs text-paper/70">
            <li><Link href="/track" className="hover:text-paper">پیگیری سفارش</Link></li>
            <li><Link href="/about" className="hover:text-paper">درباره زهورا</Link></li>
            <li><Link href="/contact" className="hover:text-paper">تماس با ما</Link></li>
            <li><Link href="/terms" className="hover:text-paper">قوانین و شرایط</Link></li>
            <li><Link href="/privacy" className="hover:text-paper">حریم خصوصی</Link></li>
          </ul>
        </div>

        <div className="space-y-3 text-xs text-paper/70">
          <h3 className="mb-4 text-xs font-bold text-paper">ارتباط با ما</h3>
          <p className="flex items-center gap-2"><Icon name="phone" size={16} /> <span dir="ltr">{site.phone}</span></p>
          <p className="flex items-center gap-2"><Icon name="mail" size={16} /> {site.email}</p>
          <p className="flex items-center gap-2"><Icon name="clock" size={16} /> {site.supportHours}</p>
          {/* جای نماد اعتماد الکترونیکی و ساماندهی؛ پس از دریافت، کد رسمی جایگزین می‌شود */}
          <div className="flex gap-3 pt-3">
            <div className="grid size-20 place-items-center rounded-xl border border-paper/20 text-center text-[10px] text-paper/50">نماد اعتماد</div>
            <div className="grid size-20 place-items-center rounded-xl border border-paper/20 text-center text-[10px] text-paper/50">ساماندهی</div>
          </div>
        </div>
      </div>

      <div className="border-t border-paper/20">
        <div className="container-z flex flex-col-reverse items-center gap-5 py-6 md:flex-row md:justify-between md:pb-24">
          <p className="text-[11px] text-paper/50">© {currentJalaliYear()} زهورا. تمامی حقوق محفوظ است.</p>
          <ul className="flex items-center gap-8" aria-label="شبکه‌های اجتماعی">
            {SOCIALS.map((s) => (
              <li key={s.key}>
                <a href={site.social[s.key]} target="_blank" rel="noopener noreferrer" aria-label={s.label} className="block opacity-90 transition-opacity hover:opacity-100">
                  {s.icon}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  );
}