"use client";
import Image from "next/image";
import Link from "next/link";
import { TEXT } from "@/branding";
import { IMAGES } from "@/branding/images";
import { useTranslation } from "@/i18n";

export function Footer() {
  const { t } = useTranslation();

  return (
    <footer
      className="border-t mt-auto"
      style={{
        background: "var(--bg)",
        borderColor: "var(--border)",
      }}
    >
      <div className="max-w-6xl mx-auto px-6 py-8">
        <div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-6">
          {/* Logo */}
          <Link href="/" className="flex items-center shrink-0">
            {/* Light mode logo */}
            <Image
              src={IMAGES.logoBlack}
              alt={TEXT.app.name}
              width={140}
              height={42}
              className="block dark:hidden object-contain"
              style={{ height: 42, width: "auto" }}
            />
            {/* Dark mode logo */}
            <Image
              src={IMAGES.logoWhite}
              alt={TEXT.app.name}
              width={140}
              height={42}
              className="hidden dark:block object-contain"
              style={{ height: 42, width: "auto" }}
            />
          </Link>

          {/* Nav links */}
          <div className="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2">
            {[
              { href: "/", label: t("nav_home") },
              { href: "/shorts", label: t("nav_shorts") },
              { href: "/music", label: t("nav_music") },
              { href: "/feeds", label: t("nav_feeds") },
            ].map(({ href, label }) => (
              <Link
                key={href}
                href={href}
                className="text-xs transition-colors hover:underline"
                style={{ color: "var(--text-muted)" }}
              >
                {label}
              </Link>
            ))}
          </div>
        </div>

        {/* Bottom bar */}
        <div
          className="mt-6 pt-4 border-t flex flex-col sm:flex-row items-center justify-between gap-2"
          style={{ borderColor: "var(--border)" }}
        >
          <p className="text-[11px]" style={{ color: "var(--text-muted)" }}>
            © {new Date().getFullYear()} {TEXT.app.name}. All rights reserved.
          </p>
          <p className="text-[11px]" style={{ color: "var(--text-muted)" }}>
            {TEXT.app.tagline}
          </p>
        </div>
      </div>
    </footer>
  );
}