"use client";

import { Fingerprint } from "lucide-react";
import { usePathname } from "next/navigation";
import { useLanguage } from "@/components/language-provider";

export function Footer() {
  const { t } = useLanguage();
  const pathname = usePathname();
  if (pathname?.startsWith("/account") || pathname?.startsWith("/admin")) {
    return null;
  }
  return (
    <footer className="border-t border-slate-200 bg-slate-50 dark:border-white/10 dark:bg-ink-soft/60">
      <div className="container-x py-14">
        <div className="grid gap-10 md:grid-cols-4">
          <div className="md:col-span-2">
            <div className="flex items-center gap-2.5 font-semibold text-slate-900 dark:text-white">
              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-gradient">
                <Fingerprint className="h-4 w-4 text-white" />
              </span>
              {process.env.NEXT_PUBLIC_SITE_NAME || "MyAccount Hamsoo"}
            </div>
            <p className="mt-4 max-w-sm text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              {t.footer.tagline}
            </p>
          </div>

          <div>
            <h4 className="text-sm font-semibold text-slate-900 dark:text-white">{t.footer.productCol}</h4>
            <ul className="mt-4 space-y-2 text-sm text-slate-600 dark:text-slate-400">
              <li><a className="hover:text-slate-900 dark:hover:text-white" href="#ecosystem">Bermooda</a></li>
              <li><a className="hover:text-slate-900 dark:hover:text-white" href="#ecosystem">Hamsoo</a></li>
              <li><a className="hover:text-slate-900 dark:hover:text-white" href="#ecosystem">{t.footer.productCol}</a></li>
            </ul>
          </div>

          <div>
            <h4 className="text-sm font-semibold text-slate-900 dark:text-white">{t.footer.platformCol}</h4>
            <ul className="mt-4 space-y-2 text-sm text-slate-600 dark:text-slate-400">
              <li><a className="hover:text-slate-900 dark:hover:text-white" href="#developers">{t.nav.developers}</a></li>
              <li><a className="hover:text-slate-900 dark:hover:text-white" href="#architecture">{t.nav.architecture}</a></li>
              <li><a className="hover:text-slate-900 dark:hover:text-white" href="#security">{t.nav.security}</a></li>
              <li><a className="hover:text-slate-900 dark:hover:text-white" href="#docs">{t.nav.docs}</a></li>
            </ul>
          </div>
        </div>

        <div className="mt-12 flex flex-col items-start justify-between gap-3 border-t border-slate-200 pt-6 text-xs text-slate-500 dark:border-white/10 sm:flex-row sm:items-center">
          <span>© {new Date().getFullYear()} {process.env.NEXT_PUBLIC_SITE_NAME || "MyAccount Hamsoo"}</span>
          <span>{t.footer.legal}</span>
        </div>
      </div>
    </footer>
  );
}