import { GitFork, Link2, Mail, ArrowUp, Heart, MapPin } from "lucide-react";
import { useTranslations } from "next-intl";

const quickLinks = [
  { href: "#experience", label: "Experience" },
  { href: "#tech-stack", label: "Tech Stack" },
  { href: "#projects", label: "Projects" },
  { href: "#contact", label: "Contact" },
];

export function Footer() {
  const t = useTranslations("Footer");
  const tNav = useTranslations("Navigation");

  return (
    <footer className="relative border-t border-border/50 bg-card/50">
      {/* Gradient top line */}
      <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-accent/50 to-transparent" />

      <div className="max-w-6xl mx-auto px-6 py-16">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
          {/* Brand & tagline */}
          <div className="md:col-span-1">
            <div className="flex items-center gap-2 mb-4">
              <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-accent to-purple-500 flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-accent/25">
                A
              </div>
              <span className="font-mono font-bold text-lg tracking-tight">
                ando<span className="text-accent">.dev</span>
              </span>
            </div>
            <p className="text-sm text-muted-foreground leading-relaxed mb-4 max-w-xs">
              {t("description")}
            </p>
            <div className="flex items-center gap-1.5 text-xs text-muted-foreground/60">
              <MapPin size={12} />
              <span>Jakarta, Indonesia</span>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="text-sm font-bold mb-4 uppercase tracking-wider text-muted-foreground">
              {t("quickLinksTitle", { fallback: "Quick Links" })}
            </h4>
            <div className="space-y-2.5">
              {quickLinks.map((link) => (
                <a
                  key={link.href}
                  href={link.href}
                  className="block text-sm text-muted-foreground hover:text-accent transition-colors"
                >
                  {tNav(link.label?.toLowerCase() === "tech stack" ? "techStack" : link.label.toLowerCase() as any)}
                </a>
              ))}
            </div>
          </div>

          {/* Social & Back to top */}
          <div className="flex flex-col items-start md:items-end gap-6">
            <div>
              <h4 className="text-sm font-bold mb-4 uppercase tracking-wider text-muted-foreground md:text-right">
                {t("connectTitle", { fallback: "Connect" })}
              </h4>
              <div className="flex items-center gap-3">
                <a
                  href="https://www.linkedin.com/in/yolando-asri-e-g-manullang/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2.5 rounded-xl bg-muted/50 border border-border/50 hover:bg-accent hover:text-accent-foreground hover:border-accent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-accent/20"
                  aria-label="LinkedIn"
                >
                  <Link2 size={18} />
                </a>
                <a
                  href="mailto:yolandomanullang@gmail.com"
                  className="p-2.5 rounded-xl bg-muted/50 border border-border/50 hover:bg-accent hover:text-accent-foreground hover:border-accent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-accent/20"
                  aria-label="Email"
                >
                  <Mail size={18} />
                </a>
              </div>
            </div>

            {/* Back to top */}
            <a
              href="#"
              className="flex items-center gap-2 text-sm text-muted-foreground hover:text-accent transition-colors group mt-auto"
            >
              {t("backToTop")}
              <ArrowUp
                size={14}
                className="transition-transform group-hover:-translate-y-1"
              />
            </a>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="mt-12 pt-6 border-t border-border/30 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-muted-foreground font-mono">
            © {new Date().getFullYear()} {t("copyright")}
          </p>
          <p className="text-xs text-muted-foreground/60 flex items-center gap-1">
            Crafted with <Heart size={10} className="text-red-500 fill-red-500" /> using Next.js & Tailwind
          </p>
        </div>
      </div>
    </footer>
  );
}
