"use client";

import Image from "next/image";
import Link from "next/link";
import { useLocale } from "@/i18n/LocaleProvider";

export function Footer() {
  const { t } = useLocale();
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-line bg-surface">
      <div className="mx-auto grid max-w-6xl gap-8 px-5 py-12 md:grid-cols-5">
        <div className="md:col-span-2">
          <div className="flex items-center gap-2.5">
            <Image
              src="/beeb-logo.png"
              alt="BeebBeeb"
              width={36}
              height={36}
              className="rounded-full"
            />
            <span className="text-lg font-extrabold tracking-tight">{t("brand")}</span>
          </div>
          <p className="mt-3 max-w-xs text-sm text-muted">{t("footer.tagline")}</p>
        </div>

        <div>
          <div className="text-sm font-semibold">{t("footer.product")}</div>
          <ul className="mt-3 space-y-2 text-sm text-muted">
            <li>
              <a href="/#how" className="hover:text-foreground">
                {t("nav.how")}
              </a>
            </li>
            <li>
              <a href="/#services" className="hover:text-foreground">
                {t("nav.services")}
              </a>
            </li>
            <li>
              <a href="/#download" className="hover:text-foreground">
                {t("nav.download")}
              </a>
            </li>
          </ul>
        </div>

        <div>
          <div className="text-sm font-semibold">{t("footer.support")}</div>
          <ul className="mt-3 space-y-2 text-sm text-muted">
            <li>
              <a href="/#investors" className="hover:text-foreground">
                {t("nav.investors")}
              </a>
            </li>
            <li>
              <Link href="/contact" className="hover:text-foreground">
                {t("footer.contact")}
              </Link>
            </li>
          </ul>
        </div>

        <div>
          <div className="text-sm font-semibold">{t("footer.legal")}</div>
          <ul className="mt-3 space-y-2 text-sm text-muted">
            <li>
              <Link href="/terms" className="hover:text-foreground">
                {t("footer.terms")}
              </Link>
            </li>
            <li>
              <Link href="/privacy" className="hover:text-foreground">
                {t("footer.privacy")}
              </Link>
            </li>
            <li>
              <Link href="/contact" className="hover:text-foreground">
                {t("footer.contact")}
              </Link>
            </li>
          </ul>
        </div>
      </div>

      <div className="border-t border-line py-5 text-center text-xs text-muted">
        © {year} {t("brand")}. {t("footer.rights")}
      </div>
    </footer>
  );
}