/**
 * SiteFooter — editorial three-column footer.
 *
 * Column 1: Wordmark + dedication
 * Column 2: Explore (links to the main content sections)
 * Column 3: Resources (about, search, profile, etc.)
 *
 * A thin copyright row sits at the bottom.
 */

import Link from "next/link";

const EXPLORE = [
  { href: "/books", label: "Books" },
  { href: "/letters", label: "Letters" },
  { href: "/transcriptions", label: "Lectures" },
  { href: "/essays", label: "Essays" },
  { href: "/magazines", label: "Magazines" },
  { href: "/journals", label: "Journals" },
];

const RESOURCES = [
  { href: "/glossary", label: "Glossary" },
  { href: "/disciples", label: "Disciples" },
  { href: "/other-documents", label: "Other Documents" },
  { href: "/search", label: "Search" },
  { href: "/about", label: "About" },
];

export function SiteFooter() {
  return (
    <footer className="mt-auto border-t border-border bg-secondary text-secondary-foreground">
      {/* Three-column main */}
      <div className="max-w-5xl mx-auto px-4 sm:px-6 py-10 grid grid-cols-1 sm:grid-cols-3 gap-8">
        {/* Brand */}
        <div>
          <Link
            href="/"
            aria-label="Prabhupāda Says — home"
            className="font-[family-name:var(--font-title)] font-semibold uppercase tracking-[0.12em] text-base text-foreground"
          >
            Prabhupāda{" "}
            <span className="text-muted-foreground tracking-[0.22em] font-medium">
              Says
            </span>
          </Link>
          <p className="mt-4 text-sm text-muted-foreground leading-relaxed max-w-xs">
            A complete, searchable library of His Divine Grace A.C. Bhaktivedanta
            Swami Prabhupāda&apos;s books, letters, and teachings.
          </p>
        </div>

        {/* Explore */}
        <FooterColumn title="Explore" items={EXPLORE} />

        {/* Resources */}
        <FooterColumn title="Resources" items={RESOURCES} />
      </div>

      {/* Copyright row */}
      <div className="border-t border-border">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-5 flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-muted-foreground">
          <p>
            © {new Date().getFullYear()} Team Prabhupāda Says · Hare Kṛṣṇa
          </p>
          <p>All glories to Śrīla Prabhupāda</p>
        </div>
      </div>
    </footer>
  );
}

function FooterColumn({
  title,
  items,
}: {
  title: string;
  items: { href: string; label: string }[];
}) {
  return (
    <div>
      <p className="text-[0.72rem] uppercase tracking-[0.2em] font-semibold text-foreground/80">
        {title}
      </p>
      <ul className="mt-4 space-y-2">
        {items.map((item) => (
          <li key={item.href}>
            <Link
              href={item.href}
              className="text-sm text-foreground/80 hover:text-foreground transition-colors"
            >
              {item.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}