import Link from "next/link";

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

  const linkClass =
    "text-zinc-400 hover:text-amber-300 transition-colors";

  const sectionTitle =
    "text-[11px] font-semibold uppercase tracking-[0.28em] text-zinc-500";

  return (
    <footer className="border-t border-zinc-900 bg-black/60">
      <div className="mx-auto max-w-6xl px-4 py-12">
        <div className="grid gap-10 md:grid-cols-3">
          {/* Brand */}
          <div>
            <p className="text-[11px] font-semibold uppercase tracking-[0.35em] text-zinc-500">
              Battl Builders
            </p>

            <p className="mt-3 text-sm text-zinc-300">
              Build rifles smarter, not harder.
            </p>

            <p className="mt-2 text-[11px] text-zinc-500">
              Early access platform · Data & pricing may change
            </p>
          </div>

          {/* Explore */}
          <div>
            <p className={sectionTitle}>Explore</p>
            <ul className="mt-4 space-y-2 text-sm">
              <li>
                <Link href="/builder" className={linkClass}>
                  Builder
                </Link>
              </li>

              <li>
                <Link href="/vault" className={linkClass}>
                  My Builds
                </Link>
              </li>
            </ul>
          </div>

          {/* Platform */}
          <div>
            <p className={sectionTitle}>Platform</p>
            <ul className="mt-4 space-y-2 text-sm">
              <li>
                <Link href="/about" className={linkClass}>
                  About
                </Link>
              </li>
              <li>
                <Link href="/privacy" className={linkClass}>
                  Privacy Policy
                </Link>
              </li>
              <li>
                <Link href="/tos" className={linkClass}>
                  Terms of Service
                </Link>
              </li>

              {/* Optional, if you have it */}
              {/* <li>
                <Link href="/contact" className={linkClass}>
                  Contact
                </Link>
              </li> */}
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="mt-10 flex flex-col gap-3 border-t border-zinc-900 pt-6 text-[11px] text-zinc-500 md:flex-row md:items-center md:justify-between">
          <span>© {year} Battl Builders</span>

          <div className="flex flex-col items-center gap-2 md:flex-row md:gap-4">
            <span className="text-zinc-600">
              Built by people who actually build rifles
            </span>

            <span className="hidden text-zinc-700 md:inline">•</span>

            <span className="text-zinc-600">
              <Link href="/tos" className="hover:text-amber-300 transition-colors">
                Terms
              </Link>{" "}
              ·{" "}
              <Link href="/privacy" className="hover:text-amber-300 transition-colors">
                Privacy
              </Link>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}