feat: add sb front matter

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

@@ -4,7 +4,7 @@ import { PageHeader } from "@/components/layout/page-header";
 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 +26,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 {
@@ -51,7 +54,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">