import { useTranslations } from "next-intl";
import { Link } from "@/lib/i18n/navigation";
import { Github, Linkedin, Send } from "lucide-react";

const socialLinks = [
  { icon: Github, href: "https://github.com/alitaghavi", label: "GitHub" },
  { icon: Linkedin, href: "https://linkedin.com/in/alitaghavi", label: "LinkedIn" },
  { icon: Send, href: "https://t.me/alitaghavi", label: "Telegram" },
];

const navLinks = [
  { href: "/writing", labelKey: "writing" },
  { href: "/work", labelKey: "work" },
  { href: "/about", labelKey: "about" },
  { href: "/resume", labelKey: "resume" },
  { href: "/shop", labelKey: "shop" },
  { href: "/uses", labelKey: "uses" },
  { href: "/contact", labelKey: "contact" },
] as const;

export function Footer() {
  const t = useTranslations("nav");
  const tf = useTranslations("footer");

  return (
    <footer className="relative z-10 border-t border-border bg-surface/50">
      <div className="mx-auto max-w-6xl px-6 py-12">
        <div className="flex flex-col gap-8 md:flex-row md:items-start md:justify-between">
          {/* Brand */}
          <div className="flex flex-col gap-3">
            <Link href="/" className="font-mono text-sm font-bold text-text-primary hover:text-accent transition-colors">
              <span className="text-accent">//</span> ali taghavi
            </Link>
            <p className="max-w-xs text-sm text-text-secondary leading-relaxed">
              CEO @ NODE-Group · Builder · Strategist
            </p>
          </div>

          {/* Nav links */}
          <nav className="flex flex-wrap gap-x-6 gap-y-2">
            {navLinks.map(({ href, labelKey }) => (
              <Link
                key={href}
                href={href}
                className="text-sm text-text-secondary hover:text-text-primary transition-colors"
              >
                {t(labelKey)}
              </Link>
            ))}
          </nav>

          {/* Social */}
          <div className="flex items-center gap-3">
            {socialLinks.map(({ icon: Icon, href, label }) => (
              <a
                key={href}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={label}
                className="flex h-9 w-9 items-center justify-center rounded-full border border-border text-text-secondary transition-all hover:border-accent/40 hover:text-accent hover:bg-accent-muted"
              >
                <Icon size={16} />
              </a>
            ))}
          </div>
        </div>

        {/* Bottom bar */}
        <div className="mt-10 flex flex-col items-center justify-between gap-3 border-t border-border pt-6 text-xs text-text-secondary md:flex-row">
          <span>© {new Date().getFullYear()} Ali Taghavi — {tf("rights")}</span>
          <span className="font-mono">NODE-Group · Tehran, Iran</span>
        </div>
      </div>
    </footer>
  );
}
