import Link from "next/link";
import { SITE, type Lang } from "@/lib/config";
import { Linkedin, Twitter, Instagram } from "lucide-react";

const servicesLinks = [
  {
    href: "/services/booking-automation",
    ar: "أتمتة المواعيد",
    en: "Booking Automation",
  },
  {
    href: "/services/deposits-payments",
    ar: "المدفوعات والعربون",
    en: "Deposits & Payments",
  },
  {
    href: "/features/messages",
    ar: "الرسائل والتحديثات",
    en: "Messages & Updates",
  },
  { href: "/features/growth", ar: "النمو وإدارة العملاء", en: "Growth & CRM" },
  {
    href: "/features/dashboard",
    ar: "لوحة التحكم والتقارير",
    en: "Dashboard & Reports",
  },
  {
    href: "/features/integrations",
    ar: "التكاملات والمؤسسات",
    en: "Integrations & Enterprise",
  },
];

const featuresLinks = [
  { href: "/features/dashboard", ar: "لوحة التحكم", en: "Dashboard" },
  { href: "/features/messages", ar: "الرسائل", en: "Messages" },
  { href: "/features/integrations", ar: "التكاملات", en: "Integrations" },
  { href: "/features/growth", ar: "النمو", en: "Growth" },
];

const industriesLinks = [
  {
    href: "/industries/beauty-wellness",
    ar: "الجمال والعافية",
    en: "Beauty & Wellness",
  },
  { href: "/industries/health-care", ar: "الرعاية الصحية", en: "Healthcare" },
  {
    href: "/industries/food-leisure",
    ar: "المطاعم والترفيه",
    en: "Food & Leisure",
  },
  {
    href: "/industries/mobility-industry",
    ar: "النقل والتنقل",
    en: "Mobility",
  },
  { href: "/industries/education", ar: "المدارس", en: "Schools" },
];

const companyLinks = [
  { href: "/about", ar: "عن ماويدي", en: "About Mawidi" },
  { href: "/contact", ar: "تواصل معنا", en: "Contact Us" },
  { href: "/demo", ar: "احجز عرض", en: "Book Demo" },
  { href: "/pricing", ar: "التسعير", en: "Pricing" },
  { href: "/careers", ar: "الوظائف", en: "Careers" },
];

const resourcesLinks = [
  { href: "/resources", ar: "مركز الموارد", en: "Resource Center" },
  { href: "/blog", ar: "المدونة", en: "Blog" },
  { href: "/case-studies", ar: "قصص النجاح", en: "Case Studies" },
  { href: "/help", ar: "مركز المساعدة", en: "Help Center" },
];

const legalLinks = [
  { href: "/privacy", ar: "سياسة الخصوصية", en: "Privacy Policy" },
  { href: "/terms", ar: "الشروط والأحكام", en: "Terms & Conditions" },
  { href: "/cookies", ar: "سياسة الكوكيز", en: "Cookie Policy" },
  { href: "/security", ar: "الأمان والامتثال", en: "Security & Compliance" },
];

export default function Footer({ lang }: { lang: Lang }) {
  const isAr = lang === "ar";

  const renderLinks = (items: typeof servicesLinks) => (
    <ul className="space-y-3">
      {items.map((item) => (
        <li key={item.href}>
          <Link
            href={`/${lang}${item.href}`}
            className="text-sm text-neutral-400 hover:text-white transition-colors duration-200"
          >
            {isAr ? item.ar : item.en}
          </Link>
        </li>
      ))}
    </ul>
  );

  return (
    <footer className="mt-20 bg-gradient-to-b from-slate-900 to-slate-950 text-white border-t border-slate-800">
      {/* Main Footer Content */}
      <div className="max-w-7xl mx-auto px-6 py-16">
        <div className="grid gap-12 lg:grid-cols-12">
          {/* Company Info - Takes more space */}
          <div className="lg:col-span-4">
            <Link
              href={`/${lang}`}
              className="inline-flex items-center gap-2 mb-6"
            >
              <img
                src="/mawidi-icon.svg"
                alt=""
                className="h-9 w-auto"
                width={36}
                height={32}
              />
              <span className="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-brand-green to-emerald-400">
                {SITE.brand}
              </span>
            </Link>

            <p className="text-sm text-neutral-300 leading-relaxed mb-6 max-w-sm">
              {isAr
                ? "منصة استقبال وتشغيل عبر واتساب تربط كل فرع وسكرتارية بذكاء معتمد رسمياً من واتساب وطاقم بشري يتحدث العربية والإنجليزية."
                : "WhatsApp reception and operations platform combining official WhatsApp automation with a bilingual human team for every branch."}
            </p>

            {/* Contact Info */}
            <div className="space-y-3 mb-8">
              <a
                href={`mailto:${SITE.contact.email}`}
                className="flex items-center gap-3 text-sm text-neutral-400 hover:text-brand-green transition-colors group"
              >
                <span className="text-lg">📧</span>
                <span>{SITE.contact.email}</span>
              </a>

              <a
                href={`https://wa.me/${SITE.contact.whatsapp.replace(/\D/g, "")}`}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-3 text-sm text-neutral-400 hover:text-brand-green transition-colors group"
              >
                <span className="text-lg">💬</span>
                <span>{SITE.contact.whatsapp}</span>
              </a>

              <div className="flex items-start gap-3 text-sm text-neutral-400">
                <span className="text-lg">📍</span>
                <span>
                  {isAr ? SITE.contact.addressAr : SITE.contact.addressEn}
                </span>
              </div>
            </div>

            {/* CTA Buttons */}
            <div className="flex flex-wrap gap-3">
              <Link
                href={`/${lang}/demo`}
                className="inline-flex items-center justify-center px-5 py-2.5 bg-brand-green text-white text-sm font-semibold rounded-lg hover:bg-green-600 transition-all duration-200 transform hover:scale-105"
              >
                {isAr ? "احجز عرض توضيحي" : "Book a Demo"}
              </Link>
              <Link
                href={`/${lang}/signup`}
                className="inline-flex items-center justify-center px-5 py-2.5 border border-brand-green/30 text-brand-green text-sm font-semibold rounded-lg hover:bg-brand-green/10 hover:border-brand-green/50 transition-all duration-200"
              >
                {isAr ? "ابدأ مجاناً" : "Start Free"}
              </Link>
            </div>
          </div>

          {/* Links Grid - Takes remaining space */}
          <div className="lg:col-span-8">
            <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-4">
              {/* Services Column */}
              <div>
                <h3 className="text-sm font-bold uppercase tracking-wider text-white mb-4">
                  {isAr ? "الخدمات" : "Services"}
                </h3>
                {renderLinks(servicesLinks)}
              </div>

              {/* Features & Industries Column */}
              <div>
                <h3 className="text-sm font-bold uppercase tracking-wider text-white mb-4">
                  {isAr ? "المميزات" : "Features"}
                </h3>
                {renderLinks(featuresLinks)}

                <h3 className="text-sm font-bold uppercase tracking-wider text-white mb-4 mt-8">
                  {isAr ? "القطاعات" : "Industries"}
                </h3>
                {renderLinks(industriesLinks)}
              </div>

              {/* Company Column */}
              <div>
                <h3 className="text-sm font-bold uppercase tracking-wider text-white mb-4">
                  {isAr ? "الشركة" : "Company"}
                </h3>
                {renderLinks(companyLinks)}

                <h3 className="text-sm font-bold uppercase tracking-wider text-white mb-4 mt-8">
                  {isAr ? "الموارد" : "Resources"}
                </h3>
                {renderLinks(resourcesLinks)}
              </div>

              {/* Legal Column */}
              <div>
                <h3 className="text-sm font-bold uppercase tracking-wider text-white mb-4">
                  {isAr ? "قانوني" : "Legal"}
                </h3>
                {renderLinks(legalLinks)}

                {/* Social Links */}
                <div className="mt-8">
                  <h3 className="text-sm font-bold uppercase tracking-wider text-white mb-4">
                    {isAr ? "تابعنا" : "Follow Us"}
                  </h3>
                  <div className="flex gap-3">
                    <a
                      href="#"
                      className="w-10 h-10 bg-slate-800 rounded-lg flex items-center justify-center hover:bg-brand-green transition-colors duration-200"
                      aria-label="LinkedIn"
                    >
                      <Linkedin className="w-5 h-5" />
                    </a>
                    <a
                      href="#"
                      className="w-10 h-10 bg-slate-800 rounded-lg flex items-center justify-center hover:bg-brand-green transition-colors duration-200"
                      aria-label="Twitter"
                    >
                      <Twitter className="w-5 h-5" />
                    </a>
                    <a
                      href="#"
                      className="w-10 h-10 bg-slate-800 rounded-lg flex items-center justify-center hover:bg-brand-green transition-colors duration-200"
                      aria-label="Instagram"
                    >
                      <Instagram className="w-5 h-5" />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="bg-black/30 border-t border-slate-800">
        <div className="max-w-7xl mx-auto px-6 py-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-neutral-500">
            <p>
              © {new Date().getFullYear()} {SITE.brand}.{" "}
              {isAr ? "جميع الحقوق محفوظة." : "All rights reserved."}
            </p>
            <div className="flex items-center gap-6">
              <Link
                href={`/${lang}/status`}
                className="hover:text-white transition-colors"
              >
                {isAr ? "حالة النظام" : "System Status"}
              </Link>
              <Link
                href={`/${lang}/privacy`}
                className="hover:text-white transition-colors"
              >
                {isAr ? "الخصوصية" : "Privacy"}
              </Link>
              <Link
                href={`/${lang}/terms`}
                className="hover:text-white transition-colors"
              >
                {isAr ? "الشروط" : "Terms"}
              </Link>
              <Link
                href={`/${lang}/cookies`}
                className="hover:text-white transition-colors"
              >
                {isAr ? "الكوكيز" : "Cookies"}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}