"use client";

import { motion } from "framer-motion";
import { Github, Twitter, Linkedin, Mail } from "lucide-react";
import type { Locale } from "@/lib/i18n";

interface FooterProps {
  locale: Locale;
}

const socialLinks = [
  { icon: <Twitter className="w-4 h-4" />, href: "#", label: "Twitter" },
  { icon: <Linkedin className="w-4 h-4" />, href: "#", label: "LinkedIn" },
  { icon: <Github className="w-4 h-4" />, href: "#", label: "GitHub" },
  { icon: <Mail className="w-4 h-4" />, href: "mailto:support@wakelai.com", label: "Email" }
];

export function Footer({ locale }: FooterProps) {
  const isRTL = locale === "ar";

  const content = {
    en: {
      tagline: "Hire AI employees. Run your company.",
      description: "Pick a job, add your notes, and your AI employee works on your Odoo and answers customers on WhatsApp & Telegram.",
      product: "Product",
      productLinks: ["Pricing", "AI Agents", "Integrations", "API"],
      company: "Company",
      companyLinks: ["About", "Blog", "Careers", "Contact"],
      resources: "Resources",
      resourcesLinks: ["Docs", "Help Center", "Community", "Status"],
      legal: "Legal",
      legalLinks: ["Privacy", "Terms", "Cookies", "Security"],
      copyright: "© 2026 WakeL AI. All rights reserved.",
      certifications: ["SOC 2", "GDPR", "ISO 27001"],
      madeIn: "Built in Saudi Arabia"
    },
    ar: {
      tagline: "وظّف موظّفين أذكياء. أدِر شركتك.",
      description: "اختر الوظيفة، اكتب ملاحظاتك، فيعمل موظّفك الذكي على نظام Odoo ويردّ على عملائك عبر واتساب وتيليجرام.",
      product: "المنتج",
      productLinks: ["الأسعار", "وكلاء AI", "التكاملات", "API"],
      company: "الشركة",
      companyLinks: ["عن الشركة", "المدونة", "الوظائف", "اتصل بنا"],
      resources: "المصادر",
      resourcesLinks: ["التوثيق", "مركز المساعدة", "المجتمع", "الحالة"],
      legal: "قانوني",
      legalLinks: ["الخصوصية", "الشروط", "الكوكيز", "الأمان"],
      copyright: "© 2026 WakeL AI. جميع الحقوق محفوظة.",
      certifications: ["SOC 2", "GDPR", "ISO 27001"],
      madeIn: "صُنع في المملكة العربية السعودية"
    }
  };

  const t = content[locale];

  const linkGroups = [
    { title: t.product, links: t.productLinks },
    { title: t.company, links: t.companyLinks },
    { title: t.resources, links: t.resourcesLinks },
    { title: t.legal, links: t.legalLinks }
  ];

  return (
    <footer className="relative border-t border-white/[0.03]" dir={isRTL ? "rtl" : "ltr"}>
      <div className="absolute inset-0 bg-gradient-to-b from-void-black to-graphite" />
      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-electric-cyan/[0.02] rounded-full blur-3xl" />

      <div className="container-custom relative z-10 pt-16 pb-8">
        {/* Grid */}
        <div className="grid md:grid-cols-5 gap-10 mb-12">
          {/* Brand */}
          <div className="md:col-span-1">
            <div className="flex items-center gap-2.5 mb-4">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-electric-cyan to-soft-emerald flex items-center justify-center">
                <span className="font-space-grotesk font-bold text-void-black text-sm">W</span>
              </div>
              <span className="font-space-grotesk font-bold text-warm-white text-lg">WakeL AI</span>
            </div>
            <p className="text-sm text-warm-white font-space-grotesk font-bold mb-2">{t.tagline}</p>
            <p className="text-xs text-muted-white leading-relaxed mb-6">{t.description}</p>

            <div className="flex items-center gap-2">
              {socialLinks.map((social, i) => (
                <a
                  key={i}
                  href={social.href}
                  aria-label={social.label}
                  className="w-9 h-9 rounded-lg bg-white/[0.03] border border-white/[0.06] flex items-center justify-center text-muted-white hover:text-electric-cyan hover:border-electric-cyan/20 transition-all"
                >
                  {social.icon}
                </a>
              ))}
            </div>
          </div>

          {/* Links */}
          {linkGroups.map((group, i) => (
            <div key={i}>
              <h4 className="font-space-grotesk font-semibold text-xs text-warm-white mb-4 tracking-widest uppercase">
                {group.title}
              </h4>
              <ul className="space-y-2.5">
                {group.links.map((link, j) => (
                  <li key={j}>
                    <a href="#" className="text-sm text-muted-white hover:text-electric-cyan transition-colors">
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom bar */}
        <div className="border-t border-white/[0.03] pt-6">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <p className="text-xs text-muted-white">{t.copyright}</p>
            <div className="flex items-center gap-3">
              {t.certifications.map((cert, i) => (
                <span key={i} className="px-2.5 py-1 rounded-full border border-white/[0.06] text-[10px] text-muted-white font-jetbrains-mono">
                  {cert}
                </span>
              ))}
            </div>
            <p className="text-xs text-muted-white">{t.madeIn}</p>
          </div>
        </div>
      </div>
    </footer>
  );
}