spsays-training/components/knowledgebase-index.tsx

/**
 * KnowledgebaseIndex — the books / letters / lectures / essays / etc.
 * directory layout. Rendered as the search page's empty state so an
 * untyped search bar still gives users an editorial entry point into the
 * library.
 *
 * Two sections, top to bottom:
 *   1. Start here — three primary entry points (Books, Letters, Lectures)
 *                   rendered as full-width feature tiles with longer copy.
 *   2. Explore    — a six-card asymmetric grid for the remaining sections.
 *
 * No hero block; the parent page (Search) carries its own hero so two
 * heroes don't stack on top of each other.
 */

import Link from "next/link";
import {
  ArrowUpRight,
  BookA,
  BookOpen,
  FileStack,
  Mail,
  Mic,
  Newspaper,
  NotebookPen,
  PenLine,
  Users,
} from "lucide-react";

type Feature = {
  href: string;
  label: string;
  blurb: string;
  count?: string;
  icon: React.ComponentType<{ className?: string }>;
};

const FEATURED: Feature[] = [
  {
    href: "/books",
    label: "Books",
    blurb:
      "Bhagavad-gītā, Śrīmad-Bhāgavatam, Caitanya-caritāmṛta and 34 more — each verse with Devanāgarī, transliteration, synonyms, translation and purport.",
    count: "37 books",
    icon: BookOpen,
  },
  {
    href: "/letters",
    label: "Letters",
    blurb:
      "Three decades of personal correspondence to disciples, family, and officials. Browse by year, recipient, or location.",
    count: "6,866 letters",
    icon: Mail,
  },
  {
    href: "/transcriptions",
    label: "Lectures & Conversations",
    blurb:
      "Lectures, morning walks, room conversations, and dialogues — the living voice of the Founder-Ācārya preserved in text and audio.",
    count: "3,787 transcripts",
    icon: Mic,
  },
];

const EXPLORE: Feature[] = [
  {
    href: "/essays",
    label: "Essays",
    blurb: "Foundational standalone essays.",
    count: "23 essays",
    icon: PenLine,
  },
  {
    href: "/magazines",
    label: "Back to Godhead",
    blurb: "The original 1944 – 1973 magazine archive.",
    count: "1,124 articles",
    icon: Newspaper,
  },
  {
    href: "/journals",
    label: "Journals",
    blurb: "The Jaladuta Diary and The Beginning.",
    count: "300 entries",
    icon: NotebookPen,
  },
  {
    href: "/glossary",
    label: "Glossary",
    blurb: "Sanskrit and Vedic terms with definitions.",
    count: "2,749 terms",
    icon: BookA,
  },
  {
    href: "/disciples",
    label: "Disciples",
    blurb: "Initiated disciples 1966 – 1977.",
    count: "4,747 names",
    icon: Users,
  },
  {
    href: "/other-documents",
    label: "Other Documents",
    blurb: "Miscellaneous analyses and writings.",
    count: "12 documents",
    icon: FileStack,
  },
];

export function KnowledgebaseIndex() {
  return (
    <div>
      <section className="py-4">
        <SectionHeading eyebrow="Start here" title="Three doors in" />
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5">
          {FEATURED.map((f) => (
            <FeaturedTile key={f.href} feature={f} />
          ))}
        </div>
      </section>

      <section className="py-6 sm:py-8">
        <SectionHeading eyebrow="Explore" title="The wider library" />
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
          {EXPLORE.map((f) => (
            <ExploreTile key={f.href} feature={f} />
          ))}
        </div>
      </section>
    </div>
  );
}

function FeaturedTile({ feature }: { feature: Feature }) {
  const Icon = feature.icon;
  return (
    <Link
      href={feature.href}
      className="group relative flex flex-col h-full rounded-2xl bg-card ring-1 ring-foreground/10 hover:ring-foreground/25 hover:shadow-md transition-all p-6"
    >
      <div className="flex items-start justify-between">
        <div className="flex items-center justify-center size-11 rounded-xl bg-primary/12 text-primary">
          <Icon className="size-5" />
        </div>
        <ArrowUpRight className="size-4 text-muted-foreground/60 group-hover:text-foreground transition-colors" />
      </div>

      <h3 className="mt-5 font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-[1.6rem] leading-tight text-foreground">
        {feature.label}
      </h3>

      <p className="mt-2 text-sm text-muted-foreground leading-relaxed flex-1">
        {feature.blurb}
      </p>

      {feature.count ? (
        <p className="mt-5 text-xs uppercase tracking-[0.14em] font-medium text-muted-foreground">
          {feature.count}
        </p>
      ) : null}
    </Link>
  );
}

function ExploreTile({ feature }: { feature: Feature }) {
  const Icon = feature.icon;
  return (
    <Link
      href={feature.href}
      className="group flex items-start gap-4 rounded-xl bg-card/70 ring-1 ring-foreground/8 hover:ring-foreground/20 hover:bg-card transition-all p-4 sm:p-5"
    >
      <div className="flex items-center justify-center size-9 rounded-lg bg-secondary text-secondary-foreground/80 shrink-0">
        <Icon className="size-4" />
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between gap-2">
          <h4 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground leading-tight">
            {feature.label}
          </h4>
          <ArrowUpRight className="size-3.5 text-muted-foreground/50 group-hover:text-foreground transition-colors shrink-0" />
        </div>
        <p className="text-sm text-muted-foreground mt-1 leading-relaxed">
          {feature.blurb}
        </p>
        {feature.count ? (
          <p className="text-xs uppercase tracking-[0.14em] font-medium text-muted-foreground/80 mt-2">
            {feature.count}
          </p>
        ) : null}
      </div>
    </Link>
  );
}

function SectionHeading({
  eyebrow,
  title,
}: {
  eyebrow: string;
  title: string;
}) {
  return (
    <div className="mb-6 flex items-baseline gap-4">
      <span className="text-xs uppercase tracking-[0.2em] font-semibold text-muted-foreground">
        {eyebrow}
      </span>
      <span className="flex-1 h-px bg-border" />
      <h2 className="font-[family-name:var(--font-title)] font-semibold text-xl sm:text-2xl text-foreground">
        {title}
      </h2>
    </div>
  );
}