import Image from "next/image";
import Link from "next/link";
import { Camera, Mail, MessageCircle, Phone } from "lucide-react";

import { siteContent } from "@/app/content";

type FooterContent = Pick<typeof siteContent, "brand" | "contact">;

export function SiteFooter({ content = siteContent }: { content?: FooterContent }) {
  const { brand, contact } = content;

  return (
    <footer className="bg-[#062f21] text-white">
      <div className="mx-auto grid max-w-[1240px] gap-10 px-5 py-14 md:grid-cols-[1.2fr_.8fr_.8fr] lg:px-8">
        <div>
          <div className="flex items-center gap-3">
            <Image src="/alstc-logo.webp" alt="نشان مرکز معاملات آل عصفور" width={64} height={64} className="size-16 rounded-full bg-white object-cover" />
            <div><strong className="block text-lg">{brand.name}</strong><span className="text-xs text-emerald-100/50">ALASFOOR TRADING CENTER</span></div>
          </div>
          <p className="mt-5 max-w-md text-sm leading-7 text-emerald-50/60">{brand.description}</p>
        </div>
        <div>
          <strong className="text-sm text-[#e0b651]">دسترسی سریع</strong>
          <div className="mt-4 grid gap-3 text-sm text-emerald-50/70">
            <Link href="/courses">دوره‌ها</Link><Link href="/coaching">کوچینگ</Link><Link href="/tools">ابزارها</Link><Link href="/knowledge">دانشنامه</Link>
          </div>
        </div>
        <div>
          <strong className="text-sm text-[#e0b651]">ارتباط با ما</strong>
          <div className="mt-4 grid gap-3 text-sm text-emerald-50/70">
            <a className="flex items-center gap-2" href={contact.phoneHref}><Phone className="size-4" />{contact.phoneDisplay}</a>
            <a className="flex items-center gap-2" href={contact.emailHref}><Mail className="size-4" />{contact.email}</a>
            <a className="flex items-center gap-2" href={contact.whatsappHref} target="_blank" rel="noreferrer"><MessageCircle className="size-4" />واتساپ</a>
            <a className="flex items-center gap-2" href={contact.instagramHref} target="_blank" rel="noreferrer"><Camera className="size-4" />{contact.instagram}</a>
          </div>
        </div>
      </div>
      <div className="border-t border-white/10">
        <div className="mx-auto flex max-w-[1240px] flex-col gap-3 px-5 py-5 text-xs text-emerald-50/45 sm:flex-row sm:items-center sm:justify-between lg:px-8">
          <span>© ۱۴۰۵ مرکز معاملات آل عصفور</span>
          <div className="flex gap-4"><Link href="/risk">هشدار ریسک</Link><Link href="/terms">شرایط استفاده</Link><Link href="/privacy">حریم خصوصی</Link></div>
        </div>
      </div>
    </footer>
  );
}