import { useTranslations } from "next-intl";
import NewsletterForm from "@/components/footer/NewsletterForm";
import Wordmark from "@/components/ui/Wordmark";
import { FacebookIcon, InstagramIcon, LinkedInIcon } from "@/components/icons/social";
import { useNewsletterLabels } from "@/components/footer/newsletter-labels";
import { Separator } from "@/components/ui/separator";
import { site } from "@/config/site";
import { Link } from "@/i18n/navigation";
import type { ComponentProps, ComponentType } from "react";

type Href = ComponentProps<typeof Link>["href"];

type NavItem = {
  key:
    | "aboutUs"
    | "production"
    | "designDevelopment"
    | "gallery"
    | "events"
    | "sustainability"
    | "blog"
    | "contactUs";
  href: Href;
};

// Same eight destinations as the header, in the same order, and labelled from
// the same `Header.nav.*` messages — the footer is the only link block present
// on every page, so a shorter or differently worded list would waste it.
// Keep in sync with `primaryNav` + `ctaNav` in src/components/Header.tsx.
const footerNav: ReadonlyArray<NavItem> = [
  { key: "aboutUs", href: "/about-us" },
  { key: "production", href: "/production-process" },
  { key: "designDevelopment", href: "/design-development" },
  { key: "gallery", href: "/gallery" },
  { key: "events", href: "/news-events" },
  { key: "sustainability", href: "/sustainability" },
  { key: "blog", href: "/blog" },
  { key: "contactUs", href: "/contact-us" },
];

type SocialItem = {
  key: "linkedin" | "facebook" | "instagram";
  url: string;
  /** The component itself, not a string key — shadcn `rules/icons.md`. */
  Icon: ComponentType<{ className?: string }>;
};

const socialLinks: ReadonlyArray<SocialItem> = [
  { key: "linkedin", url: site.social.linkedin, Icon: LinkedInIcon },
  { key: "facebook", url: site.social.facebook, Icon: FacebookIcon },
  { key: "instagram", url: site.social.instagram, Icon: InstagramIcon },
];

export default function Footer() {
  const t = useTranslations("Footer");
  const tNav = useTranslations("Header.nav");
  const newsletterLabels = useNewsletterLabels();

  return (
    <footer className="relative overflow-hidden bg-foreground text-on-inverse-surface">
      <div className="shell pt-14 pb-7 lg:pt-16 lg:pb-8">
        {/* Newsletter */}
        <section aria-labelledby="newsletter-heading" className="mb-12 max-w-160">
          <h2 id="newsletter-heading" className="mb-4 font-display text-h2 text-white">
            {t("newsletter.title")}
          </h2>
          <p className="mb-6 text-base leading-body text-on-inverse-surface/70">
            {t("newsletter.body")}
          </p>
          <NewsletterForm labels={newsletterLabels} />
        </section>

        {/* Brand + social */}
        <Separator className="bg-on-inverse-surface/15" />
        <div className="flex flex-col gap-8 pt-9 lg:flex-row lg:items-start lg:justify-between lg:gap-10 lg:pt-10">
          <div className="max-w-130">
            <Link href="/" className="mb-5 flex">
              <Wordmark tone="inverse" />
            </Link>
            <p className="text-[14.5px] leading-body text-on-inverse-surface/60">
              {t("brand.description")}
            </p>
          </div>

          <div className="flex items-start gap-3.5">
            {socialLinks.map((social) => (
              <a
                key={social.key}
                href={social.url}
                target="_blank"
                // `me` claims the profile as ours (XFN identity relation).
                rel="me noopener noreferrer"
                aria-label={t(`social.${social.key}`)}
                className="flex size-11 items-center justify-center rounded-none border border-on-inverse-surface/45 text-on-inverse-surface transition-colors hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-background"
              >
                <social.Icon className="size-4" />
              </a>
            ))}
          </div>
        </div>

        {/* Legal */}
        <Separator className="mt-10 bg-on-inverse-surface/15" />
        <div className="flex flex-col items-start gap-6 pt-7 lg:flex-row lg:items-center lg:justify-between">
          <nav aria-label={t("navLabel")} className="flex flex-wrap gap-x-6 gap-y-3.5 lg:gap-7">
            {footerNav.map((item) => (
              <Link
                key={item.key}
                href={item.href}
                className="text-micro font-semibold uppercase tracking-caps text-on-inverse-surface/70 transition-colors hover:text-gold-bright"
              >
                {tNav(item.key)}
              </Link>
            ))}
          </nav>
          <p className="text-micro font-semibold uppercase tracking-caps text-on-inverse-surface/60">
            {t("copyright")}
          </p>
        </div>
      </div>
    </footer>
  );
}