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

const phones = ["09104067935", "۰۲۵۳۳۳۴۲۶۳۳", "۰۲۵۳۳۳۴۲۹۶۷", "۰۲۵۳۳۳۴۲۹۸۳"];

const quickLinks = [
  { label: "صفحه اصلی", href: "/" },
  { label: "محصولات", href: "/products" },
  { label: "مقالات", href: "/blog" },
  { label: "درباره ما", href: "/about" },
  { label: "تماس با ما", href: "/contact" },
];

export default function Footer() {
  return (
    <footer id="footer" className="relative bg-secondary text-white/80 overflow-hidden">
      <Image
        src="/images/footer-shape.png"
        alt=""
        fill
        className="object-cover object-left opacity-10 pointer-events-none select-none"
      />
      <Container className="relative py-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
        <div>
          <Image
            src="/images/footer-logo.png"
            alt="آراد آریسمان"
            width={140}
            height={40}
            className="h-10 w-auto"
          />
          <p className="mt-5 text-sm leading-7 text-white/60">
            شرکت آراد آریسمان، پیشرو در تولید و عرضه افزودنی‌های خوراک، ویتامین‌ها و
            مکمل‌های غذایی دام و طیور با بیش از ۲۳ سال تجربه.
          </p>
        </div>

        <div>
          <h4 className="text-white font-bold mb-5">لینک‌های سریع</h4>
          <ul className="space-y-3 text-sm">
            {quickLinks.map((l) => (
              <li key={l.label}>
                <Link href={l.href} className="hover:text-accent transition-colors">
                  {l.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h4 className="text-white font-bold mb-5">آدرس ما</h4>
          <p className="text-sm leading-7 text-white/60">
            قم، شهرک صنعتی شکوهیه، فاز دو، خیابان شهید بروجردی، نبش کلاهدوز یک، پلاک ۸۶۶
          </p>
        </div>

        <div>
          <h4 className="text-white font-bold mb-5">راه‌های ارتباطی</h4>
          <ul className="space-y-3 text-sm">
            {phones.map((p) => (
              <li key={p}>
                <a href={`tel:${p}`} dir="ltr" className="hover:text-accent transition-colors block text-right">
                  {p}
                </a>
              </li>
            ))}
            <li className="text-white/50">۰۲۵۳۳۳۴۲۹۴۲ (فاکس)</li>
          </ul>
        </div>
      </Container>

      <div className="border-t border-white/10">
        <Container className="py-5 text-center text-sm text-white/50">
          طراحی و توسعه توسط تیم تجارت الکترونیک مشکی
        </Container>
      </div>
    </footer>
  );
}
