"use client";

import Link from "next/link";
import type { Locale } from "@/i18n-config";

export default function Footer({ lang, dict }: { lang: Locale; dict: any }) {
  const spectrum = [
    dict.services.items.ai.title,
    dict.services.items.blockchain.title,
    dict.services.items.mobile.title,
    dict.services.items.web.title,
  ];

  const registry = [
    { name: dict.nav.services, href: `/${lang}/services` },
    { name: dict.nav.work,     href: `/${lang}/work` },
    { name: dict.nav.process,  href: `/${lang}/process` },
    { name: dict.nav.blog,     href: `/${lang}/blog` },
    { name: dict.nav.partners, href: `/${lang}/partners` },
    { name: dict.nav.faq,      href: `/${lang}/faq` },
  ];

  return (
    <footer className="bg-[#EDE8E0] border-t border-[#C8C2B8]">

      {/* Big CTA */}
      <div className="border-b border-[#C8C2B8] px-6 py-20">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-8">
          <h2 className="font-display font-black text-4xl sm:text-5xl lg:text-6xl uppercase text-[#0A0A0A] leading-[0.9]">
            Ready to build<br />
            <span className="text-stroke">the impossible?</span>
          </h2>
          <Link
            href={`/${lang}/contact`}
            className="btn-brutal btn-brutal-yellow flex items-center gap-3 px-10 py-5 font-display font-black text-[13px] tracking-widest uppercase cursor-pointer flex-shrink-0"
          >
            {dict.nav.quote}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <line x1="5" y1="12" x2="19" y2="12" />
              <polyline points="12 5 19 12 12 19" />
            </svg>
          </Link>
        </div>
      </div>

      {/* Links */}
      <div className="px-6 py-16 border-b border-[#C8C2B8]">
        <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-12">

          {/* Brand */}
          <div className="col-span-2">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-8 h-8 bg-[#FFE600] border-2 border-[#0A0A0A] flex items-center justify-center font-display font-black text-[13px] text-[#0A0A0A]">
                A
              </div>
              <span className="font-display font-black tracking-tight text-[15px] text-[#0A0A0A] uppercase">
                {dict.nav.brandName}<span className="text-[#A0998E] font-medium">{dict.nav.brandSub}</span>
              </span>
            </div>
            <p className="text-[#8A8480] text-[13px] leading-relaxed max-w-xs">
              {dict.footer.desc}
            </p>
          </div>

          {/* Spectrum */}
          <div>
            <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-5">
              {dict.footer.spectrum}
            </div>
            {spectrum.map(s => (
              <Link
                key={s}
                href={`/${lang}/services`}
                className="block text-[#6A6460] text-[13px] mb-3 hover:text-[#0A0A0A] transition-colors uppercase font-display font-bold tracking-tight"
              >
                {s}
              </Link>
            ))}
          </div>

          {/* Registry */}
          <div>
            <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-5">
              {dict.footer.registry}
            </div>
            {registry.map(s => (
              <Link
                key={s.name}
                href={s.href}
                className="block text-[#6A6460] text-[13px] mb-3 hover:text-[#0A0A0A] transition-colors uppercase font-display font-bold tracking-tight"
              >
                {s.name}
              </Link>
            ))}
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="px-6 py-6">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
          <p className="font-mono text-[10px] tracking-[0.2em] uppercase text-[#C8C2B8]">
            © 2026 Ayris Tech — {dict.footer.rights}
          </p>
          <div className="flex items-center gap-6">
            <Link href="#" className="font-mono text-[10px] tracking-[0.15em] uppercase text-[#C8C2B8] hover:text-[#0A0A0A] transition-colors">
              {dict.footer.privacy}
            </Link>
            <Link href="#" className="font-mono text-[10px] tracking-[0.15em] uppercase text-[#C8C2B8] hover:text-[#0A0A0A] transition-colors">
              {dict.footer.terms}
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}