import Link from "next/link";
import { siteConfig } from "@/lib/site";

const LEGAL_LINKS = [
  { href: "/terms", label: "Syarat & Ketentuan" },
  { href: "/privacy", label: "Kebijakan Privasi" },
] as const;

const EXPLORE_LINKS = [
  { href: "/trips", label: "Open Trip" },
  { href: "/people", label: "Cari Teman" },
  { href: "/create-trip", label: "Buat Trip" },
] as const;

export function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="mt-12 border-t border-neutral-200 bg-white">
      <div className="mx-auto max-w-6xl px-4 py-8 sm:py-10">
        <div className="grid gap-8 sm:grid-cols-3">
          <div>
            <Link href="/" className="inline-flex items-center gap-2">
              <span className="text-lg font-bold text-neutral-800">
                Se<span className="text-primary-600">Trip</span>
              </span>
            </Link>
            <p className="mt-2 max-w-xs text-xs text-neutral-500">
              {siteConfig.slogan} Gabung trip & aktivitas, kenal stranger jadi
              travel buddies.
            </p>
          </div>

          <div>
            <p className="mb-3 text-xs font-semibold uppercase tracking-wide text-neutral-500">
              Jelajah
            </p>
            <ul className="space-y-2 text-sm">
              {EXPLORE_LINKS.map((l) => (
                <li key={l.href}>
                  <Link
                    href={l.href}
                    className="text-neutral-600 hover:text-primary-700"
                  >
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <p className="mb-3 text-xs font-semibold uppercase tracking-wide text-neutral-500">
              Kebijakan
            </p>
            <ul className="space-y-2 text-sm">
              {LEGAL_LINKS.map((l) => (
                <li key={l.href}>
                  <Link
                    href={l.href}
                    className="text-neutral-600 hover:text-primary-700"
                  >
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mt-8 flex flex-col items-start justify-between gap-2 border-t border-neutral-100 pt-4 text-xs text-neutral-500 sm:flex-row sm:items-center">
          <p>
            © {year} {siteConfig.name}. Pergi bareng, bukan sendiri.
          </p>
          <p className="text-[11px] text-neutral-400">
            Pembayaran ditahan (escrow) sampai trip selesai · refund manual oleh
            admin
          </p>
        </div>
      </div>
    </footer>
  );
}