import Link from "next/link";
import { content } from "@/lib/content";

const quickLinks = [
  { label: content.ar.nav.home, href: "/" },
  { label: content.ar.nav.features, href: "/features" },
  { label: content.ar.nav.pricing, href: "/pricing" },
  { label: content.ar.nav.about, href: "/about" },
  { label: content.ar.nav.contact, href: "/contact" },
];

export default function Footer() {
  return (
    <footer className="bg-navy-800 text-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-10 lg:gap-16">
          {/* Brand Info */}
          <div className="space-y-4">
            <Link href="/" className="inline-flex items-center gap-2 text-xl font-bold">
              <span className="text-sky-400">&#9670;</span>
              الكابتن
            </Link>
            <p className="text-slate-300 text-sm leading-relaxed max-w-xs">
              {content.ar.footer.description}
            </p>
          </div>

          {/* Quick Links */}
          <div className="space-y-4">
            <h3 className="text-base font-semibold">{content.ar.footer.quickLinks}</h3>
            <ul className="space-y-2.5">
              {quickLinks.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-sm text-slate-300 transition-colors hover:text-white"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Info */}
          <div className="space-y-4">
            <h3 className="text-base font-semibold">{content.ar.footer.contactUs}</h3>
            <ul className="space-y-2.5 text-sm text-slate-300">
              <li>
                <a
                  href={`tel:${content.ar.contact.info.phone.replace(/\s/g, "")}`}
                  className="transition-colors hover:text-white"
                  dir="ltr"
                >
                  {content.ar.contact.info.phone}
                </a>
              </li>
              <li>
                <a
                  href={`mailto:${content.ar.contact.info.email}`}
                  className="transition-colors hover:text-white"
                  dir="ltr"
                >
                  {content.ar.contact.info.email}
                </a>
              </li>
              <li>
                <a
                  href={`https://wa.me/${content.ar.contact.info.phone.replace(/[\s+]/g, "")}`}
                  className="transition-colors hover:text-white"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {content.ar.contact.info.whatsapp}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t border-white/10">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-5">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-slate-400">
            <p>
              &copy; {new Date().getFullYear()} الكابتن. {content.ar.footer.rights}
            </p>
            <div className="flex items-center gap-4">
              <Link href="/privacy" className="transition-colors hover:text-white">
                {content.ar.footer.privacy}
              </Link>
              <Link href="/terms" className="transition-colors hover:text-white">
                {content.ar.footer.terms}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
