feat: add transcripts with audio links

app/transcriptions/page.tsx

@@ -1,19 +1,41 @@
+export const dynamic = "force-dynamic";
+
 import type { Metadata } from "next";
 import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
 import { buildOgMeta } from "@/lib/og";
-import { Mic, Clock } from "lucide-react";
+import {
+  getTranscriptionYears,
+  getTranscriptionPlaces,
+  getTotalTranscriptionCount,
+  getTranscriptionIndex,
+} from "@/lib/transcriptions";
+import { TranscriptionsNav } from "./transcriptions-nav";
+import { TranscriptionsBrowser } from "./transcriptions-browser";
 
 export function generateMetadata(): Metadata {
   return buildOgMeta({
     title: "Transcriptions",
-    detail: "Lectures & conversations",
+    detail: "3,700+ lectures & conversations (1966–1977)",
     quote:
       "Transcriptions of Śrīla Prabhupāda's lectures, morning walks, room conversations, and dialogues — the living voice of the Founder-Ācārya preserved in text.",
   });
 }
 
-export default function TranscriptionsPage() {
+export default async function TranscriptionsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ view?: string }>;
+}) {
+  const { view = "year" } = await searchParams;
+
+  const [years, places, totalCount, index] = await Promise.all([
+    getTranscriptionYears(),
+    getTranscriptionPlaces(),
+    getTotalTranscriptionCount(),
+    getTranscriptionIndex(),
+  ]);
+
   return (
     <div className="min-h-screen bg-background">
       <PageHeader>
@@ -27,31 +49,21 @@ export default function TranscriptionsPage() {
           Transcriptions
         </h1>
         <p className="mt-1 text-muted-foreground">
-          Lectures &amp; conversations of Śrīla Prabhupāda
+          {totalCount.toLocaleString()} lectures &amp; conversations of Śrīla
+          Prabhupāda (1966–1977)
         </p>
       </PageHeader>
 
-      <main className="max-w-5xl mx-auto px-6 py-8">
-        <div className="flex flex-col items-center justify-center py-24 text-center">
-          <div className="flex items-center justify-center size-20 rounded-2xl bg-primary/10 text-primary mb-6">
-            <Mic className="size-10" />
-          </div>
+      <main className="max-w-4xl mx-auto px-6 py-8 space-y-6">
+        <TranscriptionsNav currentView={view} />
 
-          <h2 className="text-2xl font-bold text-foreground mb-2">
-            Coming Soon
-          </h2>
-
-          <p className="text-muted-foreground max-w-md mb-8">
-            We are working on indexing thousands of transcriptions of Śrīla
-            Prabhupāda&apos;s lectures, morning walks, room conversations, and
-            dialogues into our database. This section will be available shortly.
-          </p>
-
-          <div className="flex items-center gap-2 text-sm text-muted-foreground/60">
-            <Clock className="size-4" />
-            <span>Under active development</span>
-          </div>
-        </div>
+        <TranscriptionsBrowser
+          currentView={view}
+          years={years}
+          places={places}
+          lectureCount={index.typeDistribution.lecture}
+          conversationCount={index.typeDistribution.conversation}
+        />
       </main>
     </div>
   );