import Link from "next/link";
import { getSettings } from "yt-dlp-transcript-common/lib/settings";
import { resolveHomepageSocialLinks } from "yt-dlp-transcript-common/lib/homepage";
import { SocialLinks } from "yt-dlp-transcript-common/components/SocialLinks";
import {
  PROJECT_NAME,
  PROJECT_TAGLINE,
} from "yt-dlp-transcript-common/lib/project";
import { currentHomepage } from "../lib/homepage";
import { FOOTER_NAV } from "../lib/nav";

// The project site's footer. Note the identity split it embodies: the wordmark
// and tagline are PRODUCT strings (the same on every install), while the social
// links remain OPERATOR config — they are this deployment's accounts, not the
// software's.
export default function Footer() {
  const config = currentHomepage();
  const socialLinks = resolveHomepageSocialLinks(config, getSettings());
  return (
    <footer className="mt-20 border-t border-[var(--border)]">
      <div className="max-w-6xl mx-auto px-5 sm:px-6 py-10 flex flex-col gap-8 sm:flex-row sm:justify-between">
        <div className="flex flex-col gap-2 max-w-xs">
          <span className="font-display text-sm font-semibold uppercase tracking-[0.12em] text-[var(--foreground)]">
            {PROJECT_NAME}
          </span>
          <p className="text-sm leading-relaxed text-[var(--muted-foreground)]">
            {PROJECT_TAGLINE}
          </p>
          <p className="mt-1 text-xs text-[var(--faint)]">
            MIT licensed. You run it; you host it; the archive is yours.
          </p>
        </div>

        <nav aria-label="Footer" className="flex flex-col gap-3">
          <span className="label-machine">Sections</span>
          <ul className="flex flex-col gap-2 list-none">
            {FOOTER_NAV.map((item) => (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
                >
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>

        {socialLinks.length > 0 && (
          <div className="flex flex-col gap-3">
            <span className="label-machine">Elsewhere</span>
            <SocialLinks links={socialLinks} placement="footer" />
          </div>
        )}
      </div>
    </footer>
  );
}