import Link from "next/link";
import type { Locale } from "@/i18n/routes";
import { site } from "@/content/site";
import { getLegal } from "@/content/legal";
import { publicPath } from "@/i18n/routes";

function buildInfo() {
  // ENV: NEXT_PUBLIC_BUILD_HASH wird beim Build injected (Dockerfile ARG).
  const hash = process.env.NEXT_PUBLIC_BUILD_HASH ?? "dev";
  const date = process.env.NEXT_PUBLIC_BUILD_DATE ?? new Date().toISOString().slice(0, 10);
  return { hash, date };
}

export function SiteFooter({ locale }: { locale: Locale }) {
  const legal = getLegal(locale);
  const year = new Date().getFullYear();
  const build = buildInfo();
  return (
    <footer className="mt-24 border-t border-hairline bg-[var(--bg-deep)]">
      <div className="mx-auto grid max-w-[var(--max-w)] gap-10 px-4 py-12 md:grid-cols-4 md:px-6">
        <div className="md:col-span-2">
          <div className="mb-3 flex items-center gap-2 font-mono">
            <span className="inline-flex h-6 w-6 items-center justify-center rounded-sm border border-accent text-[11px] font-bold text-accent">e</span>
            <span className="text-[var(--fg)]">{site.handle}</span>
          </div>
          <p className="mb-4 max-w-md text-sm text-[var(--fg-dim)]">{site.tagline}</p>
          <p className="font-mono text-[11px] text-muted">
            build <span className="text-accent">{build.hash.slice(0, 7)}</span> · {build.date}
          </p>
        </div>
        <div>
          <h4 className="mb-3 font-mono text-[10px] uppercase tracking-wider text-muted">eldov.win</h4>
          <ul className="space-y-1.5 text-sm">
            <li><Link href={publicPath(locale, "about")} className="text-[var(--fg-dim)] hover:text-accent">{locale === "de" ? "Über mich" : "About"}</Link></li>
            <li><Link href={publicPath(locale, "projects")} className="text-[var(--fg-dim)] hover:text-accent">{locale === "de" ? "Projekte" : "Projects"}</Link></li>
            <li><Link href={publicPath(locale, "contact")} className="text-[var(--fg-dim)] hover:text-accent">{locale === "de" ? "Kontakt" : "Contact"}</Link></li>
            <li><Link href={publicPath(locale, "legal")} className="text-[var(--fg-dim)] hover:text-accent">{locale === "de" ? "Impressum" : "Legal"}</Link></li>
            <li><Link href={publicPath(locale, "privacy")} className="text-[var(--fg-dim)] hover:text-accent">{locale === "de" ? "Datenschutz" : "Privacy"}</Link></li>
          </ul>
        </div>
        <div>
          <h4 className="mb-3 font-mono text-[10px] uppercase tracking-wider text-muted">elsewhere</h4>
          <ul className="space-y-1.5 text-sm">
            <li><a href="https://gitea.free-warez.win/eldov/eldov-win" target="_blank" rel="noopener noreferrer" className="text-[var(--fg-dim)] hover:text-accent">Gitea · eldov ↗</a></li>
            <li><a href="https://hermes.free-warez.win" target="_blank" rel="noopener noreferrer" className="text-[var(--fg-dim)] hover:text-accent">Hermes ↗</a></li>
            <li><a href="https://free-warez.top" target="_blank" rel="noopener noreferrer" className="text-[var(--fg-dim)] hover:text-accent">free-warez.top ↗</a></li>
            <li><a href="https://w-make.com" target="_blank" rel="noopener noreferrer" className="text-[var(--fg-dim)] hover:text-accent">w-make.com ↗</a></li>
            <li><a href="/admin/login" className="text-muted hover:text-accent">/admin/login</a></li>
          </ul>
        </div>
      </div>
      <div className="border-t border-hairline-2">
        <div className="mx-auto flex max-w-[var(--max-w)] flex-wrap items-center justify-between gap-3 px-4 py-4 font-mono text-[11px] text-muted md:px-6">
          <span>© {year} {legal.name} · {legal.city}</span>
          <span className="flex items-center gap-1.5">
            <span>no tracking · no third-party fonts · no analytics</span>
          </span>
        </div>
      </div>
    </footer>
  );
}
