feat: add book transcripts categorisation

.env.example

@@ -0,0 +1,20 @@
+NEXT_PUBLIC_SITE_URL=https://prabhupadasays.org
+
+# BFF API Server (server-side fetches)
+BFF_URL=http://localhost:8080
+
+# BFF API Server (browser-side fetches; must be publicly reachable in prod)
+NEXT_PUBLIC_BFF_URL=http://localhost:8080
+
+# RTF Viewer (development only)
+ALLOW_RTF=true
+NEXT_PUBLIC_OAUTH_ENABLED=true
+
+# SOKETI
+NEXT_PUBLIC_SOKETI_KEY=spsays
+NEXT_PUBLIC_SOKETI_HOST=ws.prabhupadasays.org
+NEXT_PUBLIC_SOKETI_PORT=443
+NEXT_PUBLIC_SOKETI_FORCE_TLS=true
+
+# Analytics
+NEXT_PUBLIC_RYBBIT_HOST=https://analytics.krispire.cloud

.gitignore

@@ -31,7 +31,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+.env
 
 # vercel
 .vercel

app/(app)/(auth)/forgot-password/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import { AuthCard, AuthFooterLink } from "@/components/auth/auth-card";
+import { auth, AuthError } from "@/lib/auth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function onSubmit(e: React.SyntheticEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await auth.forgotPassword(email);
+      setSubmitted(true);
+    } catch (err) {
+      setError(err instanceof AuthError ? err.message : "Something went wrong.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (submitted) {
+    return (
+      <AuthCard
+        title="Check your inbox"
+        description="If an account exists for that email, we've sent a reset link. It will expire in 1 hour."
+        footer={<AuthFooterLink prefix="Back to" href="/login" label="log in" />}
+      >
+        <p className="text-sm text-muted-foreground">
+          Didn&apos;t get an email? Check your spam folder or try again in a minute.
+        </p>
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard
+      title="Reset your password"
+      description="Enter your email and we'll send you a reset link."
+      footer={<AuthFooterLink prefix="Remembered it?" href="/login" label="Log in" />}
+    >
+      <form onSubmit={onSubmit} className="space-y-6">
+        <div className="space-y-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        </div>
+        <br />
+        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        <Button type="submit" disabled={submitting} className="w-full h-11 text-base">
+          {submitting ? "Sending…" : "Send reset link"}
+        </Button>
+      </form>
+    </AuthCard>
+  );
+}

app/(app)/(auth)/layout.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+/**
+ * Shared layout for the auth pages (login, signup, forgot-password,
+ * reset-password). Provides the centered card frame so each page only
+ * has to render its own form.
+ *
+ * Also gates the routes: a signed-in user landing on any /login, /signup,
+ * etc. URL is bounced to /u/me (or the `next` query param if present).
+ * The check happens client-side because auth state lives in
+ * AuthProvider — there's no server-side cookie inspection here yet, and
+ * the redirect is purely cosmetic (logged-in users don't gain anything
+ * from re-seeing these forms, and signing in over an existing session
+ * would just no-op).
+ */
+
+import { Suspense, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAuth } from "@/components/auth/auth-provider";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // useSearchParams forces a CSR bailout during prerender, so Next.js
+  // requires a Suspense boundary anywhere it's read. The gate is the
+  // only consumer here — isolate it so the rest of the layout can still
+  // SSR normally.
+  return (
+    <main className="flex items-center justify-center px-4 py-12 min-h-[90vh]">
+      <Suspense fallback={<AuthShell>{children}</AuthShell>}>
+        <AuthGate>{children}</AuthGate>
+      </Suspense>
+    </main>
+  );
+}
+
+function AuthShell({ children }: { children: React.ReactNode }) {
+  return <div className="w-full max-w-md">{children}</div>;
+}
+
+function AuthGate({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+  const params = useSearchParams();
+
+  useEffect(() => {
+    if (loading || !user) return;
+    const next = params.get("next");
+    router.replace(next && next.startsWith("/") ? next : "/u/me");
+  }, [loading, user, router, params]);
+
+  // Don't flash the form for an instant before the redirect fires.
+  if (!loading && user) {
+    return <p className="text-sm text-muted-foreground">Redirecting…</p>;
+  }
+
+  return <AuthShell>{children}</AuthShell>;
+}

app/(app)/(auth)/login/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { AuthCard, AuthFooterLink } from "@/components/auth/auth-card";
+import { LoginForm } from "@/components/auth/login-form";
+
+function LoginContent() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const next = params.get("next") ?? "/u/me";
+  const oauthError = params.get("oauth_error");
+
+  return (
+    <AuthCard
+      title="Welcome back"
+      description="Log in to access your bookmarks, notes, and collections."
+      footer={
+        <AuthFooterLink prefix="No account?" href="/signup" label="Create one" />
+      }
+    >
+      {oauthError ? (
+        <p className="text-sm text-destructive">
+          {oauthErrorMessage(oauthError)}
+        </p>
+      ) : null}
+      <LoginForm
+        oauthNext={next}
+        onSuccess={() => {
+          router.push(next);
+          router.refresh();
+        }}
+      />
+    </AuthCard>
+  );
+}
+
+function oauthErrorMessage(code: string): string {
+  switch (code) {
+    case "invalid_state":
+    case "missing_state":
+      return "Your sign-in link expired. Please try again.";
+    case "exchange_failed":
+    case "profile_failed":
+      return "Sign-in failed while talking to the provider. Please try again.";
+    case "unknown_provider":
+      return "That sign-in provider isn't configured. Please use email or another method.";
+    case "unavailable":
+      return "Social sign-in is temporarily unavailable. Please use email/password.";
+    case "server":
+      return "Something went wrong on our side. Please try again in a moment.";
+    default:
+      return "Sign-in failed. Please try again.";
+  }
+}
+
+export default function LoginPage() {
+  return (
+    <Suspense fallback={null}>
+      <LoginContent />
+    </Suspense>
+  );
+}

app/(app)/(auth)/reset-password/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Suspense, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { AuthCard, AuthFooterLink } from "@/components/auth/auth-card";
+import { auth, AuthError } from "@/lib/auth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+function ResetPasswordForm() {
+  const params = useSearchParams();
+  const router = useRouter();
+  const token = params.get("token") ?? "";
+
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+
+  if (!token) {
+    return (
+      <AuthCard title="Invalid reset link" description="The link is missing a token. Please request a new one.">
+        <AuthFooterLink prefix="Need a new link?" href="/forgot-password" label="Request one" />
+      </AuthCard>
+    );
+  }
+
+  async function onSubmit(e: React.SyntheticEvent) {
+    e.preventDefault();
+    setError(null);
+    if (password !== confirm) {
+      setError("Passwords do not match.");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await auth.resetPassword(token, password);
+      setDone(true);
+      setTimeout(() => router.push("/login"), 1500);
+    } catch (err) {
+      setError(err instanceof AuthError ? err.message : "Reset failed.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (done) {
+    return (
+      <AuthCard
+        title="Password updated"
+        description="Redirecting you to the login page…"
+      >
+        <AuthFooterLink prefix="Take me there now —" href="/login" label="Log in" />
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard
+      title="Set a new password"
+      description="Choose a strong password you haven't used before."
+    >
+      <form onSubmit={onSubmit} className="space-y-6">
+        <div className="space-y-1.5">
+          <Label htmlFor="password">New password</Label>
+          <Input
+            id="password"
+            type="password"
+            autoComplete="new-password"
+            minLength={8}
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="confirm">Confirm password</Label>
+          <Input
+            id="confirm"
+            type="password"
+            autoComplete="new-password"
+            minLength={8}
+            required
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+          />
+        </div>
+        <br />
+        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        <Button type="submit" disabled={submitting} className="w-full h-11 text-base">
+          {submitting ? "Updating…" : "Update password"}
+        </Button>
+      </form>
+    </AuthCard>
+  );
+}
+
+export default function ResetPasswordPage() {
+  // useSearchParams must be inside Suspense for Next.js streaming.
+  return (
+    <Suspense fallback={null}>
+      <ResetPasswordForm />
+    </Suspense>
+  );
+}

app/(app)/(auth)/signup/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { AuthCard, AuthFooterLink } from "@/components/auth/auth-card";
+import { SignUpForm } from "@/components/auth/signup-form";
+
+export default function SignUpPage() {
+  const router = useRouter();
+  return (
+    <AuthCard
+      title="Create your account"
+      description="Save bookmarks, build collections, and follow Śrīla Prabhupāda's words across devices."
+      footer={
+        <AuthFooterLink prefix="Already registered?" href="/login" label="Log in" />
+      }
+    >
+      <SignUpForm
+        oauthNext="/u/me"
+        onSuccess={() => {
+          router.push("/u/me");
+          router.refresh();
+        }}
+      />
+    </AuthCard>
+  );
+}

app/(app)/about/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { buildOgMeta } from "@/lib/og";
 import {
   BookOpen,
@@ -67,7 +67,7 @@ export function generateMetadata(): Metadata {
   return buildOgMeta({
     title: "About — Prabhupāda Says",
     quote:
-      "Built by a small team of Prabhupādānugas — preserving and presenting the teachings of Śrīla Prabhupāda exactly as he gave them, without alteration.",
+      "Built by a small team of Rupānugas — preserving and presenting the teachings of Śrīla Prabhupāda exactly as he gave them, without alteration.",
   });
 }
 
@@ -96,7 +96,7 @@ export default function AboutPage() {
               <span className="font-medium text-foreground">
                 Prabhupāda Says
               </span>{" "}
-              is built by a small team of Prabhupādānugas — devotees dedicated
+              is built by a small team of Rupānugas. We are dedicated
               to preserving and presenting the teachings of His Divine Grace
               A.C. Bhaktivedanta Swami Prabhupāda exactly as he gave them,
               without alteration, reinterpretation, or institutional bias.

app/(app)/books/bbd/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function BbdChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/bbd/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Beyond Birth and Death" })} />
       <PageHeader sticky>
         <Link
           href="/books/bbd"
@@ -77,12 +81,15 @@ export default async function BbdChapterPage({
         >
           &larr; Beyond Birth and Death
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function BbdChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/bbd/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBbdMeta, getBbdIntroSegments } from "@/lib/bbd";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function BbdPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/bbd", name: "Beyond Birth and Death" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/bg/[chapter]/[verse]/page.tsx

@@ -1,10 +1,11 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 export const dynamic = "force-dynamic";
@@ -101,9 +102,12 @@ export default async function VersePage({
         >
           ← Bhagavad-gītā
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">

app/(app)/books/bg/[chapter]/page.tsx

@@ -0,0 +1,86 @@
+export const dynamic = "force-dynamic";
+
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { getChapterVerseIndex, getProseChapter } from "@/lib/api";
+import { buildOgMeta } from "@/lib/og";
+import { BOOK_NAMES } from "@/lib/constants";
+import { Card, CardContent } from "@/components/ui/card";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ chapter: string }>;
+}): Promise<Metadata> {
+  const { chapter } = await params;
+  // Non-numeric segments are front matter (dedication, foreword, …).
+  if (isNaN(parseInt(chapter))) {
+    const segment = await getProseChapter("bg", 0, chapter);
+    return buildOgMeta({
+      title: BOOK_NAMES["bg"],
+      detail: segment?.title ?? "Front Matter",
+    });
+  }
+  return buildOgMeta({ title: BOOK_NAMES["bg"], detail: `Chapter ${chapter}` });
+}
+
+export default async function ChapterPage({
+  params,
+}: {
+  params: Promise<{ chapter: string }>;
+}) {
+  const { chapter } = await params;
+
+  // Front matter — non-numeric slugs (dedication, foreword, preface,
+  // introduction, disciplic-succession) resolve to prose intro-segments.
+  if (isNaN(parseInt(chapter))) {
+    const segment = await getProseChapter("bg", 0, chapter);
+    if (!segment) notFound();
+
+    return (
+      <div className="min-h-screen bg-background">
+        <PageHeader sticky>
+          <Link
+            href="/books/bg"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            &larr; {BOOK_NAMES["bg"]}
+          </Link>
+          <div className="mt-3 flex items-start justify-between gap-3">
+            <h1 className="text-2xl font-bold text-foreground">
+              {segment.title}
+            </h1>
+            <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+          </div>
+        </PageHeader>
+
+        <main className="max-w-5xl mx-auto px-6 py-8">
+          <Card id="book-content">
+            <CardContent className="py-8 px-6 sm:px-8">
+              <div className="space-y-4">
+                {segment.paragraphs.map((paragraph, i) => (
+                  <div
+                    key={i}
+                    className="text-base text-foreground leading-relaxed"
+                    dangerouslySetInnerHTML={{ __html: paragraph }}
+                  />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </main>
+      </div>
+    );
+  }
+
+  // Numeric chapters — redirect to the first verse.
+  const verseIndex = await getChapterVerseIndex("bg", null, parseInt(chapter));
+  if (verseIndex.length === 0) {
+    notFound();
+  }
+  redirect(`/books/bg/${chapter}/${verseIndex[0].verse}`);
+}

app/(app)/books/bg/page.tsx

@@ -0,0 +1,115 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getBookMeta, getProseChapters } from "@/lib/api";
+import { ogForBook } from "@/lib/og";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
+import { Card, CardContent } from "@/components/ui/card";
+import { ExtractedVerseCount } from "../extracted-verse-count";
+
+export function generateMetadata(): Metadata {
+  return ogForBook("bg");
+}
+
+type ChapterInfo = {
+  number: number;
+  title: string;
+  totalVerses: number;
+};
+
+export default async function BgPage() {
+  const [meta, introSegments] = await Promise.all([
+    getBookMeta("bg"),
+    getProseChapters("bg", 0, "intro-segment"),
+  ]);
+  if (!meta) notFound();
+
+  const intro = meta as unknown as {
+    book: string;
+    title: string;
+    author: string;
+    totalChapters: number;
+    chapters: ChapterInfo[];
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/bg", name: "Bhagavad-gītā As It Is" })} />
+      <PageHeader>
+        <Link
+          href="/books"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          &larr; Books
+        </Link>
+        <h1 className="mt-3 text-3xl font-bold text-foreground">
+          {intro.title}
+        </h1>
+        <p className="mt-1 text-muted-foreground">{intro.author}</p>
+      </PageHeader>
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
+        {/* Front Matter */}
+        {introSegments.length > 0 && (
+          <div>
+            <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3">
+              Front Matter
+            </h2>
+            <Card className="divide-y divide-border py-0">
+              <CardContent className="p-0">
+                <ul className="divide-y divide-border">
+                  {introSegments.map((seg) => (
+                    <li key={seg.slug}>
+                      <Link
+                        href={`/books/bg/${seg.slug}`}
+                        className="flex px-5 py-4 hover:bg-muted transition-colors"
+                      >
+                        <p className="font-medium text-foreground">
+                          {seg.title}
+                        </p>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+
+        {/* Chapters */}
+        <div>
+          <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3">
+            Chapters
+          </h2>
+          <Card className="divide-y divide-border py-0">
+            <CardContent className="p-0">
+              <ul className="divide-y divide-border">
+                {intro.chapters.map((ch) => (
+                  <li key={ch.number}>
+                    <Link
+                      href={`/books/bg/${ch.number}`}
+                      className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
+                    >
+                      <div>
+                        <span className="text-sm text-primary font-medium">
+                          Chapter {ch.number}
+                        </span>
+                        <p className="font-medium text-foreground">
+                          {ch.title}
+                        </p>
+                      </div>
+                      <span className="text-sm text-muted-foreground sm:shrink-0 sm:ml-4">
+                        <ExtractedVerseCount count={ch.totalVerses} />
+                      </span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        </div>
+      </main>
+    </div>
+  );
+}

app/(app)/books/bk/[chapter]/page.tsx

@@ -10,12 +10,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export const dynamic = "force-dynamic";
 
@@ -62,6 +65,7 @@ export default async function BkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/bk/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Bhagavāner Kathā" })} />
       <PageHeader sticky>
         <Link
           href="/books/bk"
@@ -69,12 +73,15 @@ export default async function BkChapterPage({
         >
           &larr; Bhagavāner Kathā
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -92,7 +99,7 @@ export default async function BkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/bk/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBkMeta } from "@/lib/bk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -18,6 +20,7 @@ export default async function BkPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/bk", name: "Bhagavāner Kathā" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/bs/[chapter]/[verse]/page.tsx

@@ -2,7 +2,8 @@ import type { Metadata } from "next";
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import {
   getBookMeta,
@@ -11,8 +12,8 @@ import {
   type VerseIndexEntry,
   type VerseRecord,
 } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 export const dynamic = "force-dynamic";
@@ -187,9 +188,12 @@ export default async function VersePage({
         >
           ← Śrī Brahma-saṁhitā
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">

app/(app)/books/bs/[chapter]/page.tsx

@@ -7,7 +7,8 @@ import { getChapterVerseIndex } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 import { Card, CardContent } from "@/components/ui/card";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import Link from "next/link";
 import fs from "fs";
 import path from "path";
@@ -59,13 +60,16 @@ export default async function BsChapterPage({
           >
             ← Śrī Brahma-saṁhitā
           </Link>
-          <h1 className="mt-3 text-2xl font-bold text-foreground">
-            {segment.title}
-          </h1>
+          <div className="mt-3 flex items-start justify-between gap-3">
+            <h1 className="text-2xl font-bold text-foreground">
+              {segment.title}
+            </h1>
+            <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+          </div>
         </PageHeader>
 
         <main className="max-w-5xl mx-auto px-6 py-8">
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {segment.paragraphs.map((paragraph: string, i: number) => (

app/(app)/books/bs/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";
 import fs from "fs";
@@ -80,6 +82,7 @@ export default async function BsPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/bs", name: "Śrī Brahma-saṁhitā" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/cbhc/[chapter]/page.tsx

@@ -10,12 +10,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export const dynamic = "force-dynamic";
 
@@ -62,6 +65,7 @@ export default async function CbhcChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/cbhc/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Śrī Caitanya-bhāgavata Commentary" })} />
       <PageHeader sticky>
         <Link
           href="/books/cbhc"
@@ -69,12 +73,15 @@ export default async function CbhcChapterPage({
         >
           &larr; Śrī Caitanya-bhāgavata Commentary
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -92,7 +99,7 @@ export default async function CbhcChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/cbhc/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getCbhcMeta } from "@/lib/cbhc";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -18,6 +20,7 @@ export default async function CbhcPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/cbhc", name: "Śrī Caitanya-bhāgavata Commentary" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx

@@ -2,11 +2,12 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 type ChapterInfo = {
@@ -111,9 +112,12 @@ export default async function CcVersePage({
         >
           ← {lilaInfo.name}
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {chapterInfo.title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {chapterInfo.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">

app/(app)/books/cc/[lila]/[chapter]/page.tsx

@@ -0,0 +1,227 @@
+export const dynamic = "force-dynamic";
+
+import type { Metadata } from "next";
+import Link from "next/link";
+import { redirect, notFound } from "next/navigation";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { getBookMeta, getProseChapter, getChapterVerseIndex } from "@/lib/api";
+import { CC_LILAS } from "@/lib/constants";
+import { buildOgMeta } from "@/lib/og";
+import { PageHeader } from "@/components/layout/page-header";
+import { Card, CardContent } from "@/components/ui/card";
+import { buttonVariants } from "@/components/ui/button";
+import { FindInPage } from "@/components/layout/find-in-page";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { cn } from "@/lib/utils";
+
+type ChapterInfo = { number: number; title: string; totalVerses: number };
+type LilaInfo = {
+  key: string;
+  name: string;
+  totalChapters: number;
+  totalVerses: number;
+  chapters: ChapterInfo[];
+};
+type VerseEntry = { verse: number; verseEnd?: number | null; reference: string };
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lila: string; chapter: string }>;
+}): Promise<Metadata> {
+  const { lila, chapter } = await params;
+  const lilaName = CC_LILAS[lila] || lila;
+  return buildOgMeta({
+    title: "Śrī Caitanya-caritāmṛta",
+    detail: `${lilaName}, Chapter ${chapter}`,
+  });
+}
+
+function verseLabel(v: VerseEntry): string {
+  return v.verseEnd ? `${v.verse}–${v.verseEnd}` : String(v.verse);
+}
+
+// ---------------------------------------------------------------------------
+// Top/bottom navigation — mirrors the verse pages' VerseNav: a Contents
+// toggle (mobile) listing this chapter's verses, Previous/Next (chapter), and
+// a "Chapter X of N" label.
+// ---------------------------------------------------------------------------
+function ChapterNav({
+  lila,
+  chapters,
+  current,
+  chapterTitle,
+  verseIndex,
+}: {
+  lila: string;
+  chapters: ChapterInfo[];
+  current: number;
+  chapterTitle: string;
+  verseIndex: VerseEntry[];
+}) {
+  const idx = chapters.findIndex((c) => c.number === current);
+  const prev = idx > 0 ? chapters[idx - 1] : null;
+  const next = idx < chapters.length - 1 ? chapters[idx + 1] : null;
+
+  // The contents drawer lists the active chapter's verses (same as the
+  // verse-page sidebar) so the reader can jump straight in.
+  const groups: MobileNavGroup[] = [
+    {
+      title: "Verses",
+      items: verseIndex.map((v) => ({
+        slug: String(v.verse),
+        label: `Verse ${verseLabel(v)}`,
+        href: `/books/cc/${lila}/${current}/${v.verse}`,
+        type: "verse",
+      })),
+    },
+  ];
+
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center gap-2">
+        <MobileNav
+          groups={groups}
+          currentSlug=""
+          bookTitle={`Chapter ${current}: ${chapterTitle}`}
+        />
+        {prev ? (
+          <Link
+            href={`/books/cc/${lila}/${prev.number}`}
+            className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-1.5")}
+          >
+            <ChevronLeft className="size-4" />
+            <span className="hidden sm:inline">Previous</span>
+          </Link>
+        ) : (
+          <div className="hidden lg:block" />
+        )}
+      </div>
+
+      <span className="text-sm text-muted-foreground">
+        Chapter {current} of {chapters.length}
+      </span>
+
+      {next ? (
+        <Link
+          href={`/books/cc/${lila}/${next.number}`}
+          className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-1.5")}
+        >
+          <span className="hidden sm:inline">Next</span>
+          <ChevronRight className="size-4" />
+        </Link>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
+}
+
+export default async function CcChapterPage({
+  params,
+}: {
+  params: Promise<{ lila: string; chapter: string }>;
+}) {
+  const { lila, chapter } = await params;
+  const chapterNum = parseInt(chapter);
+
+  const [meta, summary, verseIndex] = await Promise.all([
+    getBookMeta("cc"),
+    getProseChapter("cc", 0, `${lila}-${chapterNum}`),
+    getChapterVerseIndex("cc", lila, chapterNum),
+  ]);
+
+  if (!meta) notFound();
+  const lilaInfo = (meta.lilas as LilaInfo[] | undefined)?.find(
+    (l) => l.key === lila,
+  );
+  if (!lilaInfo) notFound();
+  const chapterInfo = lilaInfo.chapters.find((ch) => ch.number === chapterNum);
+  if (!chapterInfo) notFound();
+  if (verseIndex.length === 0) notFound();
+
+  const firstVerse = verseIndex[0].verse;
+
+  // Chapters without a summary (e.g. Ādi 7) go straight to the verses.
+  if (!summary || summary.paragraphs.length === 0) {
+    redirect(`/books/cc/${lila}/${chapterNum}/${firstVerse}`);
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <PageHeader sticky>
+        <Link
+          href={`/books/cc/${lila}`}
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          &larr; {lilaInfo.name}
+        </Link>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapterNum}: {chapterInfo.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
+      </PageHeader>
+
+      <div className="max-w-5xl mx-auto flex">
+        {/* Desktop sidebar — verses of the active chapter (matches the
+            verse-page sidebar) so the reader can jump to any verse. */}
+        <aside className="hidden lg:block w-64 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-165px)] overflow-y-auto py-8 pr-4">
+          <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
+            Verses
+          </h2>
+          <nav className="grid grid-cols-3 gap-1">
+            {verseIndex.map((v) => (
+              <Link
+                key={v.verse}
+                href={`/books/cc/${lila}/${chapterNum}/${v.verse}`}
+                className="px-2 py-1 rounded-md text-sm tabular-nums text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+              >
+                {verseLabel(v)}
+              </Link>
+            ))}
+          </nav>
+        </aside>
+
+        {/* Main — chapter summary */}
+        <main className="flex-1 min-w-0 px-6 py-8 space-y-6">
+          {/* Top navigation */}
+          <ChapterNav
+            lila={lila}
+            chapters={lilaInfo.chapters}
+            current={chapterNum}
+            chapterTitle={chapterInfo.title}
+            verseIndex={verseIndex}
+          />
+
+          <p className="text-sm font-bold uppercase tracking-wider text-muted-foreground">
+            Chapter Summary
+          </p>
+          <Card id="book-content">
+            <CardContent className="py-8 px-6 sm:px-8">
+              <div className="space-y-4">
+                {summary.paragraphs.map((paragraph, i) => (
+                  <div
+                    key={i}
+                    className="text-base text-foreground leading-relaxed"
+                    dangerouslySetInnerHTML={{ __html: paragraph }}
+                  />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Bottom navigation */}
+          <ChapterNav
+            lila={lila}
+            chapters={lilaInfo.chapters}
+            current={chapterNum}
+            chapterTitle={chapterInfo.title}
+            verseIndex={verseIndex}
+          />
+        </main>
+      </div>
+    </div>
+  );
+}

app/(app)/books/cc/[lila]/page.tsx

@@ -1,10 +1,11 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { ExtractedVerseCount } from "../../extracted-verse-count";
-import { getBookMeta } from "@/lib/api";
+import { getBookMeta, getProseChapter } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES, CC_LILAS } from "@/lib/constants";
 
@@ -14,12 +15,15 @@ export async function generateMetadata({
   params: Promise<{ lila: string }>;
 }): Promise<Metadata> {
   const { lila } = await params;
-  const lilaName = CC_LILAS[lila] || lila;
   const bookTitle = BOOK_NAMES["cc"] || "Śrī Caitanya-caritāmṛta";
-  return buildOgMeta({
-    title: bookTitle,
-    detail: lilaName,
-  });
+  // A non-līlā segment (front-flap, preface, introduction) is front matter.
+  if (!CC_LILAS[lila]) {
+    const segment = await getProseChapter("cc", 0, lila);
+    if (segment) {
+      return buildOgMeta({ title: bookTitle, detail: segment.title });
+    }
+  }
+  return buildOgMeta({ title: bookTitle, detail: CC_LILAS[lila] || lila });
 }
 
 type ChapterInfo = {
@@ -47,7 +51,48 @@ export default async function LilaPage({
 
   const lilas = meta.lilas as LilaInfo[];
   const lilaInfo = lilas.find((l) => l.key === lila);
-  if (!lilaInfo) notFound();
+
+  // Front matter — the param is not a līlā key, so resolve it as a prose
+  // intro-segment (front-flap, preface, introduction).
+  if (!lilaInfo) {
+    const segment = await getProseChapter("cc", 0, lila);
+    if (!segment) notFound();
+
+    return (
+      <div className="min-h-screen bg-background">
+        <PageHeader sticky>
+          <Link
+            href="/books/cc"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            &larr; Śrī Caitanya-caritāmṛta
+          </Link>
+          <div className="mt-3 flex items-start justify-between gap-3">
+            <h1 className="text-2xl font-bold text-foreground">
+              {segment.title}
+            </h1>
+            <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+          </div>
+        </PageHeader>
+
+        <main className="max-w-5xl mx-auto px-6 py-8">
+          <Card id="book-content">
+            <CardContent className="py-8 px-6 sm:px-8">
+              <div className="space-y-4">
+                {segment.paragraphs.map((paragraph, i) => (
+                  <div
+                    key={i}
+                    className="text-base text-foreground leading-relaxed"
+                    dangerouslySetInnerHTML={{ __html: paragraph }}
+                  />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </main>
+      </div>
+    );
+  }
 
   const totalVerses = lilaInfo.chapters.reduce(
     (sum, ch) => sum + ch.totalVerses,

app/(app)/books/cc/page.tsx

@@ -1,8 +1,10 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { getBookMeta } from "@/lib/api";
+import { getBookMeta, getProseChapters } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { ExtractedVerseCount } from "../extracted-verse-count";
@@ -26,7 +28,10 @@ export function generateMetadata(): Metadata {
 }
 
 export default async function CcPage() {
-  const meta = await getBookMeta("cc");
+  const [meta, introSegments] = await Promise.all([
+    getBookMeta("cc"),
+    getProseChapters("cc", 0, "intro-segment"),
+  ]);
   if (!meta) {
     return (
       <div className="p-8 text-center text-muted-foreground">
@@ -41,6 +46,7 @@ export default async function CcPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/cc", name: "Śrī Caitanya-caritāmṛta" })} />
       <PageHeader>
         <Link
           href="/books"
@@ -51,7 +57,33 @@ export default async function CcPage() {
         <h1 className="mt-3 text-3xl font-bold text-foreground">{title}</h1>
         <p className="mt-1 text-muted-foreground">{author}</p>
       </PageHeader>
-      <main className="max-w-5xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
+        {introSegments.length > 0 && (
+          <div>
+            <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3">
+              Front Matter
+            </h2>
+            <Card className="divide-y divide-border py-0">
+              <CardContent className="p-0">
+                <ul className="divide-y divide-border">
+                  {introSegments.map((seg) => (
+                    <li key={seg.slug}>
+                      <Link
+                        href={`/books/cc/${seg.slug}`}
+                        className="flex px-5 py-4 hover:bg-muted transition-colors"
+                      >
+                        <p className="font-medium text-foreground">
+                          {seg.title}
+                        </p>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+
         <Card className="divide-y divide-border">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">

app/(app)/books/chapter-viewer.tsx

@@ -6,7 +6,10 @@ import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
+import { BOOK_NAMES } from "@/lib/constants";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -389,8 +392,25 @@ export function ChapterViewer({
 
   return (
     <>
+      {/* Structured data for the currently-shown verse (SSR'd for the initial
+          verse, updates on client navigation). */}
+      {currentVerse ? (
+        <JsonLd
+          data={articleJsonLd({
+            path: `${basePath}/${currentVerseNum}`,
+            headline: `${BOOK_NAMES[book] ?? book} ${currentVerse.reference}`,
+            description: currentVerse.translation,
+            isPartOf: BOOK_NAMES[book] ?? book,
+          })}
+        />
+      ) : null}
+
       {/* ---- Sidebar: Verse Index ---- */}
-      <aside className="hidden lg:block w-64 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
+      {/* Sticky sidebar. The max-h leaves 76px at the viewport bottom for
+          the site footer so the sidebar doesn't slide behind it when the
+          page is scrolled to the bottom. (89 sticky-top + 76 bottom gap
+          = 165, hence calc(100vh - 165px).) */}
+      <aside className="hidden lg:block w-64 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-165px)] overflow-y-auto py-8 pr-4">
         <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
           Verses
         </h2>
@@ -436,7 +456,8 @@ export function ChapterViewer({
           mobileNavBookTitle={mobileNavBookTitle}
         />
 
-        {/* Verse content */}
+        {/* Verse content — id targeted by each page header's FindInPage. */}
+        <div id="book-content">
         {loading && !currentVerse ? (
           <div className="flex items-center justify-center py-24 text-muted-foreground gap-2">
             <Loader2 className="size-5 animate-spin" />
@@ -449,6 +470,7 @@ export function ChapterViewer({
             Verse not found.
           </div>
         )}
+        </div>
 
         {/* Bottom navigation */}
         <VerseNav

app/(app)/books/ds/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -76,6 +79,7 @@ export default async function DsChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/ds/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Dialectic Spiritualism" })} />
       <PageHeader sticky>
         <Link
           href="/books/ds"
@@ -83,12 +87,15 @@ export default async function DsChapterPage({
         >
           &larr; Dialectic Spiritualism
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {parentChapterNum != null && (
-            <span className="text-primary">Chapter {parentChapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {parentChapterNum != null && (
+              <span className="text-primary">Chapter {parentChapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -106,7 +113,7 @@ export default async function DsChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/ds/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getDsMeta, getDsIntroSegments } from "@/lib/ds";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function DsPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/ds", name: "Dialectic Spiritualism" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/ej/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function EjChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/ej/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Easy Journey to Other Planets" })} />
       <PageHeader sticky>
         <Link
           href="/books/ej"
@@ -77,12 +81,15 @@ export default async function EjChapterPage({
         >
           &larr; Easy Journey to Other Planets
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function EjChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/ej/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getEjMeta, getEjIntroSegments } from "@/lib/ej";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function EjPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/ej", name: "Easy Journey to Other Planets" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/ek/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function EkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/ek/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Elevation to Kṛṣṇa Consciousness" })} />
       <PageHeader sticky>
         <Link
           href="/books/ek"
@@ -77,12 +81,15 @@ export default async function EkChapterPage({
         >
           &larr; Elevation to Kṛṣṇa Consciousness
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function EkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/ek/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getEkMeta, getEkIntroSegments } from "@/lib/ek";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function EkPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/ek", name: "Elevation to Kṛṣṇa Consciousness" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/gg/[chapter]/page.tsx

@@ -10,12 +10,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export const dynamic = "force-dynamic";
 
@@ -66,6 +69,7 @@ export default async function GgChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/gg/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Gītār Gān" })} />
       <PageHeader sticky>
         <Link
           href="/books/gg"
@@ -73,12 +77,15 @@ export default async function GgChapterPage({
         >
           &larr; Gītār Gān
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -96,7 +103,7 @@ export default async function GgChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/gg/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getGgMeta, getGgIntroSegments } from "@/lib/gg";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -24,6 +26,7 @@ export default async function GgPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/gg", name: "Gītār Gān" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/hkh/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function HkhChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/hkh/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "The Kṛṣṇa Consciousness Handbook" })} />
       <PageHeader sticky>
         <Link
           href="/books/hkh"
@@ -77,12 +81,15 @@ export default async function HkhChapterPage({
         >
           &larr; The Kṛṣṇa Consciousness Handbook
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function HkhChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/hkh/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getHkhMeta, getHkhIntroSegments } from "@/lib/hkh";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function HkhPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/hkh", name: "The Kṛṣṇa Consciousness Handbook" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/iso/[mantra]/page.tsx

@@ -11,12 +11,15 @@ import {
   type IsoSidebarItem,
 } from "@/lib/iso";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Type guards
@@ -102,6 +105,7 @@ export default async function IsoMantraPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/iso/${slug}`, headline: content.title ?? "Śrī Īśopaniṣad", isPartOf: "Śrī Īśopaniṣad" })} />
       <PageHeader sticky>
         <Link
           href="/books/iso"
@@ -109,15 +113,18 @@ export default async function IsoMantraPage({
         >
           &larr; Śrī Īśopaniṣad
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {verse && (
-            <>
-              <span className="text-primary">{verse.reference}: </span>
-              {verse.bookTitle}
-            </>
-          )}
-          {intro && intro.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {verse && (
+              <>
+                <span className="text-primary">{verse.reference}: </span>
+                {verse.bookTitle}
+              </>
+            )}
+            {intro && intro.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -157,7 +164,7 @@ export default async function IsoMantraPage({
 
 function VerseContent({ verse }: { verse: IsoVerse }) {
   return (
-    <Card>
+    <Card id="book-content">
       <CardContent className="py-8 px-6 sm:px-8 space-y-8">
         {/* Devanagari */}
         <section>
@@ -233,7 +240,7 @@ function VerseContent({ verse }: { verse: IsoVerse }) {
 
 function IntroContent({ intro }: { intro: IsoIntroSegment }) {
   return (
-    <Card>
+    <Card id="book-content">
       <CardContent className="py-8 px-6 sm:px-8">
         <div className="space-y-4">
           {intro.paragraphs.map((paragraph, i) => (

app/(app)/books/iso/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getIsoMeta, getIsoIntroSegments } from "@/lib/iso";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -28,6 +30,7 @@ export default async function IsoPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/iso", name: "Śrī Īśopaniṣad" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/kb/[volume]/[slug]/page.tsx

@@ -6,12 +6,15 @@ import { notFound } from "next/navigation";
 import { getProseChapter, getProseChapters } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export async function generateMetadata({
   params,
@@ -65,6 +68,7 @@ export default async function KbChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/kb/${vol}/${slug}`, headline: chapter.title, description: chapter.paragraphs?.[0], isPartOf: "Kṛṣṇa, The Supreme Personality of Godhead" })} />
       <PageHeader sticky>
         <Link
           href={`/books/kb/${vol}`}
@@ -72,12 +76,15 @@ export default async function KbChapterPage({
         >
           &larr; Volume {vol}
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterLabel && (
-            <span className="text-primary">{chapterLabel}: </span>
-          )}
-          {chapter.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterLabel && (
+              <span className="text-primary">{chapterLabel}: </span>
+            )}
+            {chapter.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function KbChapterPage({
           />
 
           {/* Chapter content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {chapter.paragraphs.map((paragraph, i) => (

app/(app)/books/kb/[volume]/page.tsx

@@ -4,7 +4,7 @@ import { notFound } from "next/navigation";
 import { getBookMeta, getProseChapters } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export async function generateMetadata({

app/(app)/books/kb/page.tsx

@@ -3,7 +3,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 
@@ -27,6 +29,7 @@ export default async function KbPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/kb", name: "Kṛṣṇa, The Supreme Personality of Godhead" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/lcl/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function LclChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/lcl/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Life Comes from Life" })} />
       <PageHeader sticky>
         <Link
           href="/books/lcl"
@@ -77,12 +81,15 @@ export default async function LclChapterPage({
         >
           &larr; Life Comes from Life
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function LclChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/lcl/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLclMeta, getLclIntroSegments } from "@/lib/lcl";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -24,6 +26,7 @@ export default async function LclPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/lcl", name: "Life Comes from Life" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/lob/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export async function generateMetadata({
   params,
@@ -66,6 +69,7 @@ export default async function LobChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/lob/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Light of the Bhāgavata" })} />
       <PageHeader sticky>
         <Link
           href="/books/lob"
@@ -73,12 +77,15 @@ export default async function LobChapterPage({
         >
           &larr; Light of the Bh&#257;gavata
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Text {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Text {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -96,7 +103,7 @@ export default async function LobChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) =>

app/(app)/books/lob/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLobMeta, getLobIntroSegments } from "@/lib/lob";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function LobPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/lob", name: "Light of the Bhāgavata" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/mg/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export async function generateMetadata({
   params,
@@ -66,6 +69,7 @@ export default async function MgChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/mg/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Kṛṣṇa Consciousness: The Matchless Gift" })} />
       <PageHeader sticky>
         <Link
           href="/books/mg"
@@ -73,12 +77,15 @@ export default async function MgChapterPage({
         >
           &larr; Kṛṣṇa Consciousness: The Matchless Gift
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -96,7 +103,7 @@ export default async function MgChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/mg/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getMgMeta, getMgIntroSegments } from "@/lib/mg";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function MgPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/mg", name: "Kṛṣṇa Consciousness: The Matchless Gift" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/mm/[chapter]/[verse]/page.tsx

@@ -1,7 +1,8 @@
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import {
   getBookMeta,
@@ -10,8 +11,8 @@ import {
   type VerseIndexEntry,
   type VerseRecord,
 } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import type { Metadata } from "next";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
@@ -187,9 +188,12 @@ export default async function VersePage({
         >
           ← Mukunda-mālā-stotra
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">

app/(app)/books/mm/[chapter]/page.tsx

@@ -7,7 +7,8 @@ import { getChapterVerseIndex } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 import { Card, CardContent } from "@/components/ui/card";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import Link from "next/link";
 import fs from "fs";
 import path from "path";
@@ -59,13 +60,16 @@ export default async function MmChapterPage({
           >
             ← Mukunda-mālā-stotra
           </Link>
-          <h1 className="mt-3 text-2xl font-bold text-foreground">
-            {segment.title}
-          </h1>
+          <div className="mt-3 flex items-start justify-between gap-3">
+            <h1 className="text-2xl font-bold text-foreground">
+              {segment.title}
+            </h1>
+            <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+          </div>
         </PageHeader>
 
         <main className="max-w-5xl mx-auto px-6 py-8">
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {segment.paragraphs.map((paragraph: string, i: number) => (

app/(app)/books/mm/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";
 import fs from "fs";
@@ -79,6 +81,7 @@ export default async function MmPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/mm", name: "Mukunda-mālā-stotra" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/mog/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function MogChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/mog/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Message of Godhead" })} />
       <PageHeader sticky>
         <Link
           href="/books/mog"
@@ -77,12 +81,15 @@ export default async function MogChapterPage({
         >
           &larr; Message of Godhead
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function MogChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/mog/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getMogMeta, getMogIntroSegments } from "@/lib/mog";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function MogPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/mog", name: "Message of Godhead" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/nbs/[chapter]/[verse]/page.tsx

@@ -4,7 +4,8 @@ import type { Metadata } from "next";
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import {
   getBookMeta,
@@ -14,8 +15,8 @@ import {
   type VerseRecord,
 } from "@/lib/api";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 
 type NbsMeta = {
   book: string;
@@ -192,9 +193,12 @@ export default async function VersePage({
         >
           ← Nārada-bhakti-sūtra
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">

app/(app)/books/nbs/[chapter]/page.tsx

@@ -7,7 +7,8 @@ import { getChapterVerseIndex } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 import { Card, CardContent } from "@/components/ui/card";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import Link from "next/link";
 import fs from "fs";
 import path from "path";
@@ -62,13 +63,16 @@ export default async function NbsChapterPage({
           >
             ← Nārada-bhakti-sūtra
           </Link>
-          <h1 className="mt-3 text-2xl font-bold text-foreground">
-            {segment.title}
-          </h1>
+          <div className="mt-3 flex items-start justify-between gap-3">
+            <h1 className="text-2xl font-bold text-foreground">
+              {segment.title}
+            </h1>
+            <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+          </div>
         </PageHeader>
 
         <main className="max-w-5xl mx-auto px-6 py-8">
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {segment.paragraphs.map((paragraph: string, i: number) => (

app/(app)/books/nbs/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";
 import fs from "fs";
@@ -79,6 +81,7 @@ export default async function NbsPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/nbs", name: "Nārada-bhakti-sūtra" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/nod/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function NodChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/nod/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "The Nectar of Devotion" })} />
       <PageHeader sticky>
         <Link
           href="/books/nod"
@@ -77,12 +81,15 @@ export default async function NodChapterPage({
         >
           &larr; The Nectar of Devotion
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function NodChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/nod/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getNodMeta, getNodIntroSegments } from "@/lib/nod";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -27,6 +29,7 @@ export default async function NodPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/nod", name: "The Nectar of Devotion" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/noi/[text]/page.tsx

@@ -11,12 +11,15 @@ import {
   type NoiSidebarItem,
 } from "@/lib/noi";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Type guards
@@ -93,6 +96,7 @@ export default async function NoiTextPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/noi/${slug}`, headline: content.title ?? "The Nectar of Instruction", isPartOf: "The Nectar of Instruction" })} />
       <PageHeader sticky>
         <Link
           href="/books/noi"
@@ -100,15 +104,18 @@ export default async function NoiTextPage({
         >
           &larr; The Nectar of Instruction
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {verse && (
-            <>
-              <span className="text-primary">Text {verse.text}: </span>
-              {verse.title}
-            </>
-          )}
-          {intro && intro.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {verse && (
+              <>
+                <span className="text-primary">Text {verse.text}: </span>
+                {verse.title}
+              </>
+            )}
+            {intro && intro.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -148,7 +155,7 @@ export default async function NoiTextPage({
 
 function VerseContent({ verse }: { verse: NoiVerse }) {
   return (
-    <Card>
+    <Card id="book-content">
       <CardContent className="py-8 px-6 sm:px-8 space-y-8">
         {/* Devanagari */}
         <section>
@@ -224,7 +231,7 @@ function VerseContent({ verse }: { verse: NoiVerse }) {
 
 function IntroContent({ intro }: { intro: NoiIntroSegment }) {
   return (
-    <Card>
+    <Card id="book-content">
       <CardContent className="py-8 px-6 sm:px-8">
         <div className="space-y-4">
           {intro.paragraphs.map((paragraph, i) => (

app/(app)/books/noi/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getNoiMeta, getNoiIntroSegments } from "@/lib/noi";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -24,6 +26,7 @@ export default async function NoiPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/noi", name: "The Nectar of Instruction" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/ochkm/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function OchkmChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/ochkm/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "On Chanting Hare Kṛṣṇa" })} />
       <PageHeader sticky>
         <Link
           href="/books/ochkm"
@@ -77,12 +81,15 @@ export default async function OchkmChapterPage({
         >
           &larr; On Chanting the Hare Kṛṣṇa Mantra
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function OchkmChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/ochkm/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getOchkmMeta, getOchkmIntroSegments } from "@/lib/ochkm";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function OchkmPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/ochkm", name: "On Chanting Hare Kṛṣṇa" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/owk/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function OwkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/owk/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "On the Way to Kṛṣṇa" })} />
       <PageHeader sticky>
         <Link
           href="/books/owk"
@@ -77,12 +81,15 @@ export default async function OwkChapterPage({
         >
           &larr; On the Way to Kṛṣṇa
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function OwkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/owk/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getOwkMeta, getOwkIntroSegments } from "@/lib/owk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function OwkPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/owk", name: "On the Way to Kṛṣṇa" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { getAllBooks, type BookMeta } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BooksGrid, type BookInfo } from "./books-grid";

app/(app)/books/pk/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -65,6 +68,7 @@ export default async function PkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/pk/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Prabhupāda-Kṛpā" })} />
       <PageHeader sticky>
         <Link
           href="/books/pk"
@@ -72,12 +76,15 @@ export default async function PkChapterPage({
         >
           &larr; Prayers of King Kulaśekhara
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Verse {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Verse {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -95,7 +102,7 @@ export default async function PkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/pk/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getPkMeta } from "@/lib/pk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -18,6 +20,7 @@ export default async function PkPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/pk", name: "Prabhupāda-Kṛpā" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/poy/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function PoyChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/poy/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "The Perfection of Yoga" })} />
       <PageHeader sticky>
         <Link
           href="/books/poy"
@@ -77,12 +81,15 @@ export default async function PoyChapterPage({
         >
           &larr; The Perfection of Yoga
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function PoyChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/poy/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getPoyMeta, getPoyIntroSegments } from "@/lib/poy";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function PoyPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/poy", name: "The Perfection of Yoga" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/pqpa/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function PqpaChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/pqpa/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Perfect Questions, Perfect Answers" })} />
       <PageHeader sticky>
         <Link
           href="/books/pqpa"
@@ -77,12 +81,15 @@ export default async function PqpaChapterPage({
         >
           &larr; Perfect Questions Perfect Answers
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function PqpaChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/pqpa/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getPqpaMeta, getPqpaIntroSegments } from "@/lib/pqpa";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -24,6 +26,7 @@ export default async function PqpaPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/pqpa", name: "Perfect Questions, Perfect Answers" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/rv/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function RvChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/rv/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Rāja-vidyā: The King of Knowledge" })} />
       <PageHeader sticky>
         <Link
           href="/books/rv"
@@ -77,12 +81,15 @@ export default async function RvChapterPage({
         >
           &larr; Rāja-vidyā: The King of Knowledge
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function RvChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/rv/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getRvMeta, getRvIntroSegments } from "@/lib/rv";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -20,6 +22,7 @@ export default async function RvPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/rv", name: "Rāja-vidyā: The King of Knowledge" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx

@@ -2,11 +2,12 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 type ChapterInfo = {
@@ -107,9 +108,12 @@ export default async function SbVersePage({
         >
           ← Canto {cantoInfo.number}: {cantoInfo.title}
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {chapterInfo.title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {chapterInfo.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">

app/(app)/books/sb/[canto]/page.tsx

@@ -1,10 +1,11 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { ExtractedVerseCount } from "../../extracted-verse-count";
-import { getBookMeta } from "@/lib/api";
+import { getBookMeta, getProseChapter } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 
@@ -15,6 +16,11 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { canto } = await params;
   const title = BOOK_NAMES["sb"] || "Śrīmad-Bhāgavatam";
+  // A non-numeric segment (preface, introduction) is front matter.
+  if (isNaN(parseInt(canto))) {
+    const segment = await getProseChapter("sb", 0, canto);
+    if (segment) return buildOgMeta({ title, detail: segment.title });
+  }
   return buildOgMeta({ title, detail: `Canto ${canto}` });
 }
 
@@ -38,6 +44,49 @@ export default async function CantoPage({
 }) {
   const { canto } = await params;
   const cantoNum = parseInt(canto);
+
+  // Front matter — a non-numeric param (preface, introduction) resolves to a
+  // prose intro-segment.
+  if (isNaN(cantoNum)) {
+    const segment = await getProseChapter("sb", 0, canto);
+    if (!segment) notFound();
+
+    return (
+      <div className="min-h-screen bg-background">
+        <PageHeader sticky>
+          <Link
+            href="/books/sb"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            &larr; Śrīmad-Bhāgavatam
+          </Link>
+          <div className="mt-3 flex items-start justify-between gap-3">
+            <h1 className="text-2xl font-bold text-foreground">
+              {segment.title}
+            </h1>
+            <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+          </div>
+        </PageHeader>
+
+        <main className="max-w-5xl mx-auto px-6 py-8">
+          <Card id="book-content">
+            <CardContent className="py-8 px-6 sm:px-8">
+              <div className="space-y-4">
+                {segment.paragraphs.map((paragraph, i) => (
+                  <div
+                    key={i}
+                    className="text-base text-foreground leading-relaxed"
+                    dangerouslySetInnerHTML={{ __html: paragraph }}
+                  />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </main>
+      </div>
+    );
+  }
+
   const meta = await getBookMeta("sb");
   if (!meta) notFound();
 

app/(app)/books/sb/page.tsx

@@ -1,10 +1,12 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { ExtractedVerseCount } from "../extracted-verse-count";
-import { getBookMeta } from "@/lib/api";
+import { getBookMeta, getProseChapters } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
 import { notFound } from "next/navigation";
 
@@ -26,7 +28,10 @@ type CantoInfo = {
 };
 
 export default async function SbPage() {
-  const meta = await getBookMeta("sb");
+  const [meta, introSegments] = await Promise.all([
+    getBookMeta("sb"),
+    getProseChapters("sb", 0, "intro-segment"),
+  ]);
   if (!meta) notFound();
 
   const intro = meta as {
@@ -39,6 +44,7 @@ export default async function SbPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/sb", name: "Śrīmad-Bhāgavatam" })} />
       <PageHeader>
         <Link
           href="/books"
@@ -51,7 +57,33 @@ export default async function SbPage() {
         </h1>
         <p className="mt-1 text-muted-foreground">{intro.author}</p>
       </PageHeader>
-      <main className="max-w-5xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
+        {introSegments.length > 0 && (
+          <div>
+            <h2 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-3">
+              Front Matter
+            </h2>
+            <Card className="divide-y divide-border py-0">
+              <CardContent className="p-0">
+                <ul className="divide-y divide-border">
+                  {introSegments.map((seg) => (
+                    <li key={seg.slug}>
+                      <Link
+                        href={`/books/sb/${seg.slug}`}
+                        className="flex px-5 py-4 hover:bg-muted transition-colors"
+                      >
+                        <p className="font-medium text-foreground">
+                          {seg.title}
+                        </p>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+
         <Card className="divide-y divide-border">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">

app/(app)/books/sb1962/[chapter]/[verse]/page.tsx

@@ -1,10 +1,11 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { FindInPage } from "@/components/layout/find-in-page";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 export const dynamic = "force-dynamic";
@@ -104,9 +105,12 @@ export default async function VersePage({
         >
           ← Śrīmad-Bhāgavatam (1962)
         </Link>
-        <h1 className="mt-2 text-2xl font-bold text-foreground">
-          Chapter {chapter}: {title}
-        </h1>
+        <div className="mt-2 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            Chapter {chapter}: {title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">

app/(app)/books/sb1962/page.tsx

@@ -3,7 +3,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";
 
@@ -32,6 +34,7 @@ export default async function Sb1962Page() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/sb1962", name: "Śrīmad-Bhāgavatam (1962 Edition)" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/ssr/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -76,6 +79,7 @@ export default async function SsrChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/ssr/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "The Science of Self-Realization" })} />
       <PageHeader sticky>
         <Link
           href="/books/ssr"
@@ -83,12 +87,15 @@ export default async function SsrChapterPage({
         >
           &larr; The Science of Self-Realization
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {parentChapterNum != null && (
-            <span className="text-primary">Chapter {parentChapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {parentChapterNum != null && (
+              <span className="text-primary">Chapter {parentChapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -106,7 +113,7 @@ export default async function SsrChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/ssr/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getSsrMeta, getSsrIntroSegments } from "@/lib/ssr";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -24,6 +26,7 @@ export default async function SsrPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/ssr", name: "The Science of Self-Realization" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/sva/[chapter]/page.tsx

@@ -13,12 +13,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -77,6 +80,7 @@ export default async function SvaChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/sva/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Songs of the Vaiṣṇava Ācāryas" })} />
       <PageHeader sticky>
         <Link
           href="/books/sva"
@@ -84,12 +88,15 @@ export default async function SvaChapterPage({
         >
           &larr; Songs of the Vaiṣṇava Ācāryas
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {parentChapterNum != null && (
-            <span className="text-primary">Part {parentChapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {parentChapterNum != null && (
+              <span className="text-primary">Part {parentChapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -107,7 +114,7 @@ export default async function SvaChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/sva/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getSvaMeta, getSvaIntroSegments } from "@/lib/sva";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -24,6 +26,7 @@ export default async function SvaPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/sva", name: "Songs of the Vaiṣṇava Ācāryas" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/tlc/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function TlcChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/tlc/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Teachings of Lord Caitanya" })} />
       <PageHeader sticky>
         <Link
           href="/books/tlc"
@@ -77,12 +81,15 @@ export default async function TlcChapterPage({
         >
           &larr; Teachings of Lord Caitanya
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function TlcChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/tlc/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTlcMeta, getTlcIntroSegments } from "@/lib/tlc";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -25,6 +27,7 @@ export default async function TlcPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/tlc", name: "Teachings of Lord Caitanya" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/tlk/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function TlkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/tlk/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Teachings of Lord Kapila" })} />
       <PageHeader sticky>
         <Link
           href="/books/tlk"
@@ -77,12 +81,15 @@ export default async function TlkChapterPage({
         >
           &larr; Teachings of Lord Kapila
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function TlkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/tlk/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTlkMeta, getTlkIntroSegments } from "@/lib/tlk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -24,6 +26,7 @@ export default async function TlkPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/tlk", name: "Teachings of Lord Kapila" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/tqk/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function TqkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/tqk/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Teachings of Queen Kuntī" })} />
       <PageHeader sticky>
         <Link
           href="/books/tqk"
@@ -77,12 +81,15 @@ export default async function TqkChapterPage({
         >
           &larr; Teachings of Queen Kuntī
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function TqkChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/tqk/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTqkMeta, getTqkIntroSegments } from "@/lib/tqk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -24,6 +26,7 @@ export default async function TqkPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/tqk", name: "Teachings of Queen Kuntī" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/ttp/[chapter]/page.tsx

@@ -12,12 +12,15 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -70,6 +73,7 @@ export default async function TtpChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/ttp/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Teachings of Lord Kapila" })} />
       <PageHeader sticky>
         <Link
           href="/books/ttp"
@@ -77,12 +81,15 @@ export default async function TtpChapterPage({
         >
           &larr; Transcendental Teachings of Prahlāda Mahārāja
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {chapterNum != null && (
-            <span className="text-primary">Chapter {chapterNum}: </span>
-          )}
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {chapterNum != null && (
+              <span className="text-primary">Chapter {chapterNum}: </span>
+            )}
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -100,7 +107,7 @@ export default async function TtpChapterPage({
           />
 
           {/* Content */}
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/ttp/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTtpMeta } from "@/lib/ttp";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -18,6 +20,7 @@ export default async function TtpPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/ttp", name: "Teachings of Lord Kapila" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/books/va/[chapter]/page.tsx

@@ -6,18 +6,20 @@ import { notFound } from "next/navigation";
 import {
   getVaContent,
   getVaSidebarItems,
-  type VaChapter,
   type VaSidebarItem,
 } from "@/lib/va";
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 // ---------------------------------------------------------------------------
 // Metadata
@@ -61,10 +63,9 @@ export default async function VaChapterPage({
   const next =
     currentIdx < sidebarItems.length - 1 ? sidebarItems[currentIdx + 1] : null;
 
-  const chapterNum = (content as VaChapter).chapter;
-
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/books/va/${slug}`, headline: content.title, description: content.paragraphs?.[0], isPartOf: "Vedānta-sūtra Transcript" })} />
       <PageHeader sticky>
         <Link
           href="/books/va"
@@ -72,9 +73,12 @@ export default async function VaChapterPage({
         >
           &larr; Vaiśiṣṭyāṣṭakam
         </Link>
-        <h1 className="mt-3 text-2xl font-bold text-foreground">
-          {content.title}
-        </h1>
+        <div className="mt-3 flex items-start justify-between gap-3">
+          <h1 className="text-2xl font-bold text-foreground">
+            {content.title}
+          </h1>
+          <FindInPage targetId="book-content" className="shrink-0 mt-0.5" />
+        </div>
       </PageHeader>
 
       <div className="max-w-5xl mx-auto flex">
@@ -88,7 +92,7 @@ export default async function VaChapterPage({
             currentSlug={slug}
           />
 
-          <Card>
+          <Card id="book-content">
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">
                 {content.paragraphs.map((paragraph, i) => (

app/(app)/books/va/page.tsx

@@ -5,7 +5,9 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getVaMeta } from "@/lib/va";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { bookJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
@@ -18,6 +20,7 @@ export default async function VaPage() {
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={bookJsonLd({ path: "/books/va", name: "Vedānta-sūtra Transcript" })} />
       <PageHeader>
         <Link
           href="/books"

app/(app)/c/[id]/collection-content.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+/**
+ * Client body for the public collection page (/c/[id]). Split out from
+ * page.tsx so the page itself can stay a server component that exports
+ * `generateMetadata` (rich OG card on link shares). Anyone can view a
+ * public collection; private ones return 403 from the BFF, which we treat
+ * as "not found" to avoid leaking existence.
+ */
+
+import { use, useEffect, useState } from "react";
+import { notFound } from "next/navigation";
+import { Globe, Lock, FolderPlus } from "lucide-react";
+import {
+  collections,
+  SocialError,
+  type Collection,
+  type Post,
+} from "@/lib/social";
+import { PostViews } from "@/components/social/post/post-views";
+
+export function CollectionContent(props: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(props.params);
+  const [c, setC] = useState<Collection | null>(null);
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [missing, setMissing] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    collections
+      .get(id)
+      .then(({ collection, posts }) => {
+        if (cancelled) return;
+        setC(collection);
+        setPosts(posts ?? []);
+      })
+      .catch((err) => {
+        if (
+          err instanceof SocialError &&
+          (err.status === 404 || err.status === 403)
+        ) {
+          setMissing(true);
+        }
+      })
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [id]);
+
+  if (missing) notFound();
+  if (loading || !c)
+    return (
+      <main className="flex-1 max-w-3xl w-full mx-auto px-4 py-12">
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      </main>
+    );
+
+  return (
+    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6 py-10 space-y-8">
+      <header className="rounded-2xl bg-card ring-1 ring-foreground/10 p-6 sm:p-8">
+        <div className="flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          {c.is_public ? (
+            <Globe className="size-3.5" />
+          ) : (
+            <Lock className="size-3.5" />
+          )}
+          {c.is_public ? "Public collection" : "Private collection"}
+        </div>
+        <h1 className="mt-3 font-[family-name:var(--font-title)] font-semibold text-3xl sm:text-4xl text-foreground leading-tight">
+          {c.title}
+        </h1>
+        {c.description ? (
+          <p className="mt-3 text-base text-muted-foreground leading-relaxed">
+            {c.description}
+          </p>
+        ) : null}
+        <p className="mt-4 text-xs text-muted-foreground tabular-nums">
+          {c.item_count} post{c.item_count === 1 ? "" : "s"}
+        </p>
+      </header>
+
+      <section className="space-y-3">
+        {posts.length === 0 ? (
+          <div className="rounded-xl border border-dashed border-border p-8 text-center">
+            <FolderPlus className="size-6 text-muted-foreground mx-auto" />
+            <p className="text-sm text-muted-foreground mt-2">
+              This collection has no items yet.
+            </p>
+          </div>
+        ) : (
+          <PostViews posts={posts} />
+        )}
+      </section>
+    </main>
+  );
+}

app/(app)/c/[id]/page.tsx

@@ -0,0 +1,51 @@
+/**
+ * /c/[id] — public collection.
+ *
+ * Server shell: exports `generateMetadata` so a shared collection link
+ * unfurls with a rich OG card (pointing at /api/og/collection/<id>), then
+ * mounts the client body. The server fetch is unauthenticated, so only
+ * public collections produce a card — private ones fall back to the default
+ * (and never leak).
+ */
+
+import type { Metadata } from "next";
+import { bff } from "@/lib/bff";
+import { ogDefault, ogForCollection } from "@/lib/og";
+import { CollectionContent } from "./collection-content";
+
+type Props = { params: Promise<{ id: string }> };
+
+type CollectionEnvelope = {
+  collection: {
+    id: string;
+    title: string;
+    description: string | null;
+    is_public: boolean;
+    item_count: number;
+  };
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id } = await params;
+  try {
+    const data = await bff<CollectionEnvelope>(
+      `/collections/${encodeURIComponent(id)}`,
+      { revalidate: 60 },
+    );
+    const c = data?.collection;
+    if (!c || !c.is_public) return ogDefault();
+    return ogForCollection({
+      id: c.id,
+      title: c.title,
+      description: c.description,
+      itemCount: c.item_count,
+    });
+  } catch {
+    // Private (403) / unreachable → fall back to the site card.
+    return ogDefault();
+  }
+}
+
+export default function PublicCollectionPage({ params }: Props) {
+  return <CollectionContent params={params} />;
+}

app/(app)/chat/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+/**
+ * /chat — placeholder for the Kautilya AI study companion.
+ *
+ * The actual chat surface (an AI tuned on Śrīla Prabhupāda's books,
+ * letters, and lectures) isn't built yet. Until it ships we render a
+ * coming-soon page so the nav entries (sidebar + bottom bar) have a
+ * real route to point at. When the feature lands, swap this file for
+ * the real chat UI — nav wiring stays the same.
+ */
+
+import Link from "next/link";
+import { Compass } from "lucide-react";
+import { KautilyaIcon } from "@/components/selection-toolbar/shared";
+
+export default function ChatPage() {
+  return (
+    <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-16 sm:py-24">
+      <div className="flex flex-col items-center text-center gap-5">
+        <span
+          aria-hidden
+          className="inline-flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary"
+        >
+          <KautilyaIcon className="size-7" />
+        </span>
+
+        <h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-3xl text-foreground leading-tight text-balance">
+          Kautilya is coming soon
+        </h1>
+
+        <p className="text-sm text-muted-foreground leading-relaxed max-w-md">
+          An AI study companion tuned on Śrīla Prabhupāda&apos;s books,
+          letters, and lectures — ask any question, get answers grounded in
+          his own words with citations back to the source passages. Until
+          it lands, the full library is already waiting.
+        </p>
+
+        <div className="flex flex-col sm:flex-row items-center gap-3 mt-2">
+          <Link
+            href="/search"
+            className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground px-5 h-11 text-sm font-medium hover:bg-primary/90 transition-colors min-w-[12rem]"
+          >
+            <Compass className="size-4" />
+            Explore Knowledgebase
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}

app/(app)/disciples/page.tsx

@@ -2,7 +2,7 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { ogForDisciples } from "@/lib/og";
 import {
   getTotalDiscipleCount,

app/(app)/essays/[slug]/page.tsx

@@ -4,12 +4,14 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ogForEssay, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
+import { JsonLd } from "@/components/seo/json-ld";
+import { articleJsonLd } from "@/lib/jsonld";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 import { bff, bffList } from "@/lib/bff";
 
 // ---------------------------------------------------------------------------
@@ -119,6 +121,7 @@ export default async function EssayPage({
 
   return (
     <div className="min-h-screen bg-background">
+      <JsonLd data={articleJsonLd({ path: `/essays/${slug}`, headline: essay.title, description: essay.paragraphs?.[0], isPartOf: "Essays & Talks" })} />
       <PageHeader sticky>
         <Link
           href="/essays"