"use client";

import Link from "next/link";
import {
  CirclePlay,
  Link as LinkIcon,
  Share2,
  X,
} from "lucide-react";
import { LogoMark } from "@/components/ui/LogoMark";
import { useTranslations } from "next-intl";

import { cn } from "@/lib/utils";

interface FooterLink {
  label: string;
  href: string;
}

interface FooterColumnProps {
  title: string;
  links: FooterLink[];
}

const socialIcons = [
  { key: "socialX" as const, href: "https://twitter.com", icon: X },
  { key: "socialInstagram" as const, href: "https://instagram.com", icon: Share2 },
  { key: "socialLinkedIn" as const, href: "https://linkedin.com", icon: LinkIcon },
  { key: "socialYouTube" as const, href: "https://youtube.com", icon: CirclePlay },
];

function FooterColumn({ title, links }: FooterColumnProps) {
  return (
    <div>
      <h3 className="font-heading text-sm font-semibold text-white">{title}</h3>
      <ul className="mt-4 space-y-3">
        {links.map((link) => (
          <li key={link.href}>
            <Link
              href={link.href}
              className="text-sm text-neutral-400 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 rounded-sm"
            >
              {link.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export function Footer() {
  const t = useTranslations("footer");
  const year = new Date().getFullYear();

  const productLinks: FooterLink[] = [
    { label: t("videoMaker"), href: "/video-maker" },
    { label: t("imageMaker"), href: "/image-maker" },
    { label: t("templates"), href: "#templates" },
    { label: t("pricingLink"), href: "#pricing" },
  ];

  const companyLinks: FooterLink[] = [
    { label: t("about"), href: "/about" },
    { label: t("blog"), href: "/blog" },
    { label: t("careers"), href: "/careers" },
    { label: t("contact"), href: "/contact" },
  ];

  const legalLinks: FooterLink[] = [
    { label: t("privacy"), href: "/privacy" },
    { label: t("terms"), href: "/terms" },
    { label: t("cookies"), href: "/cookies" },
  ];

  return (
    <footer className="bg-slate-900 text-neutral-300">
      <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-12">
          <div>
            <Link
              href="/"
              className="inline-flex items-center gap-2 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900"
            >
              <LogoMark size={36} />
              <span className="font-heading text-lg font-bold text-white">
                {t("brandName")}
              </span>
            </Link>
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-neutral-400">
              {t("description")}
            </p>
            <div className="mt-6 flex items-center gap-3">
              {socialIcons.map((social) => {
                const Icon = social.icon;
                return (
                  <a
                    key={social.key}
                    href={social.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={t(social.key)}
                    className={cn(
                      "flex h-9 w-9 items-center justify-center rounded-lg border border-slate-700 text-neutral-400 transition-colors hover:border-slate-600 hover:bg-slate-800 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900"
                    )}
                  >
                    <Icon className="h-4 w-4" aria-hidden />
                  </a>
                );
              })}
            </div>
          </div>

          <FooterColumn title={t("products")} links={productLinks} />
          <FooterColumn title={t("company")} links={companyLinks} />
          <FooterColumn title={t("legal")} links={legalLinks} />
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-800 pt-8 sm:flex-row">
          <p className="text-sm text-neutral-400">
            {t("rights", { year })}
          </p>
          <p className="text-sm text-neutral-400">{t("madeWith")}</p>
        </div>
      </div>
    </footer>
  );
}
