"use client";

import Link from "next/link";
import { Music2, Camera, Play, Briefcase } from "lucide-react";
import { Container } from "@/components/container";
import { Logo } from "@/components/logo";
import { useLanguage } from "@/lib/i18n/context";

// Link labels come from the translation dictionary (footer.columns[i].links[j])
// — hrefs stay fixed here since they don't change with locale.
const footerColumnHrefs = [
  ["#features", "#product-intelligence", "#ai-tools", "#pricing"],
  ["#top", "/contact", "/support", "#top"],
  ["/privacy", "/terms", "/refund-policy", "/cookies", "#disclaimer"],
];

const socialLinks = [
  { label: "TikTok", href: "#", icon: Music2 },
  { label: "Instagram", href: "#", icon: Camera },
  { label: "YouTube", href: "#", icon: Play },
  { label: "LinkedIn", href: "#", icon: Briefcase },
];

export function SiteFooter() {
  const { t } = useLanguage();

  return (
    <footer className="border-t border-border bg-secondary/10">
      <Container className="flex flex-col gap-12 py-14 sm:py-16">
        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1fr]">
          <div className="flex flex-col gap-4">
            <Logo />
            <p className="max-w-xs text-sm text-muted-foreground">
              {t.footer.description}
            </p>
            <div className="flex items-center gap-2">
              {socialLinks.map((social) => (
                <a
                  key={social.label}
                  href={social.href}
                  aria-label={social.label}
                  className="flex size-9 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:border-brand-cyan/40 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                  <social.icon className="size-4" />
                </a>
              ))}
            </div>
          </div>

          {t.footer.columns.map((column, colIndex) => (
            <div key={column.title} className="flex flex-col gap-3">
              <p className="text-sm font-semibold text-foreground">
                {column.title}
              </p>
              <ul className="flex flex-col gap-2.5">
                {column.links.map((label, linkIndex) => (
                  <li key={label}>
                    <a
                      href={footerColumnHrefs[colIndex][linkIndex]}
                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                    >
                      {label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="flex flex-col gap-4 border-t border-border pt-8">
          <p id="disclaimer" className="max-w-3xl text-xs text-muted-foreground">
            {t.footer.disclaimer}
          </p>
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <p className="text-xs text-muted-foreground">
              {t.footer.copyright}
            </p>
            <Link
              href="#top"
              className="text-xs text-muted-foreground transition-colors hover:text-foreground"
            >
              {t.footer.backToTop}
            </Link>
          </div>
        </div>
      </Container>
    </footer>
  );
}