'use client';

import { useTranslation } from 'react-i18next';
import { Facebook, Instagram, Linkedin, Twitter, ArrowRight, Package } from 'lucide-react';
import Link from 'next/link';

export function Footer() {
  const { t } = useTranslation();

  const companyLinks = [
    { label: t('nav.home'), href: '/' },
    { label: t('footer.about'), href: '#' },
    { label: t('footer.careers'), href: '#' },
    { label: t('footer.contact'), href: '/contact' },
  ];

  const services = [
    { label: t('footer.delivery'), href: '#' },
    { label: t('footer.cod'), href: '#' },
    { label: t('footer.tracking'), href: '#' },
    { label: t('nav.tariffs'), href: '/tariffs' },
  ];

  const resources = [
    { label: t('footer.privacy'), href: '/privacy' },
    { label: t('footer.terms'), href: '/terms' },
  ];

  const socialLinks = [
    { icon: Facebook, href: '#', label: 'Facebook' },
    { icon: Instagram, href: '#', label: 'Instagram' },
    { icon: Twitter, href: '#', label: 'Twitter' },
    { icon: Linkedin, href: '#', label: 'LinkedIn' },
  ];

  return (
    <>
      {/* CTA Banner Section */}
      <section className="relative px-4 sm:px-6 lg:px-8 pb-0 z-20">
        <div className="max-w-[1400px] mx-auto">
          <div className="relative bg-gradient-to-br from-[#2d3875] via-[#3A4A9C] to-[#2d3875] rounded-3xl overflow-hidden shadow-2xl">
            {/* Decorative Background Elements */}
            <div className="absolute inset-0 opacity-10">
              <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-400 rounded-full blur-[100px]" />
              <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-indigo-400 rounded-full blur-[100px]" />
            </div>

            {/* Dot Pattern Overlay */}
            <div className="absolute inset-0 opacity-[0.15]" style={{
              backgroundImage: `radial-gradient(circle, white 1px, transparent 1px)`,
              backgroundSize: '24px 24px',
            }} />

            <div className="relative z-10 px-6 sm:px-12 lg:px-16 py-16 lg:py-20">
              <div className="grid lg:grid-cols-2 gap-12 items-center">
                {/* Left Content */}
                <div>
                  <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4 leading-tight">
                    {t('cta.title', 'Prêt à rejoindre nos clients satisfaits ?')}
                  </h2>
                  <p className="text-blue-100 text-lg mb-8 leading-relaxed">
                    {t('cta.subtitle', "Rejoignez des centaines d'e-commerçants marocains qui optimisent leurs livraisons avec Dropex.")}
                  </p>
                  <Link
                    href="/contact"
                    className="inline-flex items-center gap-2 bg-white text-[#3A4A9C] px-8 py-4 rounded-xl font-semibold hover:bg-gray-100 transition-all hover:scale-105 shadow-xl hover:shadow-2xl"
                  >
                    {t('cta.button', 'Démarrer gratuitement')}
                    <ArrowRight className="w-5 h-5" />
                  </Link>
                </div>

                {/* Right Decorative Element */}
                <div className="hidden lg:block relative">
                  <div className="relative w-full h-80">
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="w-[500px] h-[500px] rounded-full border-2 border-white/10 flex items-center justify-center">
                        <div className="w-[400px] h-[400px] rounded-full border-2 border-white/10 flex items-center justify-center">
                          <div className="w-[300px] h-[300px] rounded-full border-2 border-white/20" />
                        </div>
                      </div>
                    </div>

                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="bg-white/10 backdrop-blur-sm p-8 rounded-3xl border border-white/20">
                        <Package className="w-24 h-24 text-white" strokeWidth={1.5} />
                      </div>
                    </div>

                    <div className="absolute top-1/4 left-1/4 w-3 h-3 bg-white rounded-full animate-pulse" />
                    <div className="absolute top-1/3 right-1/3 w-2 h-2 bg-blue-200 rounded-full animate-pulse" style={{ animationDelay: '0.5s' }} />
                    <div className="absolute bottom-1/3 left-1/3 w-2 h-2 bg-blue-200 rounded-full animate-pulse" style={{ animationDelay: '1s' }} />
                    <div className="absolute bottom-1/4 right-1/4 w-3 h-3 bg-white rounded-full animate-pulse" style={{ animationDelay: '1.5s' }} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer Section */}
      <footer className="relative bg-gradient-to-br from-gray-900 via-[#1a1f3a] to-gray-900 text-gray-300 overflow-hidden -mt-40 pt-52 z-10" role="contentinfo">
        <div className="absolute inset-0 opacity-[0.03]">
          <div className="absolute top-20 right-20 w-96 h-96 bg-[#3A4A9C] rounded-full blur-[120px]" />
          <div className="absolute bottom-20 left-20 w-96 h-96 bg-blue-600 rounded-full blur-[120px]" />
        </div>

        <div className="absolute inset-0 opacity-[0.02]" style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        }} />

        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="py-16">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
              {/* Brand */}
              <div className="lg:col-span-5">
                <img src="/logo.png" alt="Dropex" width={120} height={48} className="h-12 w-auto mb-4 brightness-0 invert" />
                <p className="text-gray-400 text-sm leading-relaxed max-w-sm mb-6">
                  {t('hero.subheadline')}
                </p>

                <div className="flex gap-4">
                  {socialLinks.map((social, index) => {
                    const Icon = social.icon;
                    return (
                      <a
                        key={index}
                        href={social.href}
                        aria-label={social.label}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        <Icon className="w-5 h-5" />
                      </a>
                    );
                  })}
                </div>
              </div>

              {/* Link Columns */}
              <div className="lg:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8 lg:gap-12">
                {/* Company */}
                <nav aria-label="Company links">
                  <h3 className="text-white font-semibold mb-4 text-sm">{t('footer.company')}</h3>
                  <ul className="space-y-3">
                    {companyLinks.map((link, index) => (
                      <li key={index}>
                        <Link
                          href={link.href}
                          className="text-gray-400 hover:text-white transition-colors text-sm"
                        >
                          {link.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </nav>

                {/* Services */}
                <nav aria-label="Services links">
                  <h3 className="text-white font-semibold mb-4 text-sm">{t('footer.services')}</h3>
                  <ul className="space-y-3">
                    {services.map((link, index) => (
                      <li key={index}>
                        <Link
                          href={link.href}
                          className="text-gray-400 hover:text-white transition-colors text-sm"
                        >
                          {link.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </nav>

                {/* Legal */}
                <nav aria-label="Resources links">
                  <h3 className="text-white font-semibold mb-4 text-sm">{t('footer.legal')}</h3>
                  <ul className="space-y-3">
                    {resources.map((link, index) => (
                      <li key={index}>
                        <Link
                          href={link.href}
                          className="text-gray-400 hover:text-white transition-colors text-sm"
                        >
                          {link.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </nav>
              </div>
            </div>
          </div>

          {/* Bottom Bar */}
          <div className="border-t border-white/10 py-6">
            <div className="flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-gray-500">
              <p>{t('footer.rights')}</p>
              <div className="flex items-center gap-6">
                <Link href="/privacy" className="hover:text-gray-300 transition-colors">
                  {t('footer.privacy')}
                </Link>
                <Link href="/terms" className="hover:text-gray-300 transition-colors">
                  {t('footer.terms')}
                </Link>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}