Add reading plans: catalog, progress tracking, and custom plans

Replaces the old single-book reading goal with a full Reading Plans page:
9 built-in plans (Whole Bible, OT/NT, topical) with cover photos and
color-themed cards, day-by-day checklists synced to the server per user,
inline "mark today read" in the Bible reader, and user-created plans with
their own book picker and an optional uploaded cover photo.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/pages/HomePage.jsx

@@ -4,21 +4,21 @@ import AuthStatus from '../components/AuthStatus.jsx';
 import AudioPlayer from '../components/AudioPlayer.jsx';
 import {
   bookOptions,
-  CHAPTER_COUNTS,
   formatChunkReference,
   formatRelativeDate,
   loadProjectIndex,
 } from '../utils/bibleUtils.jsx';
 import { loadProjectById } from '../utils/projectStorage.js';
+import { getPlan, getPlanSchedule, formatDayReadings, nextUnreadDayIndex } from '../utils/readingPlans.js';
 
 export default function HomePage() {
   const {
     autoRestoredCount,
     staleLocalProjects,
     projectIndex,
-    readingPlan,
-    createReadingPlan,
-    clearReadingPlan,
+    planProgress,
+    openReadingPlans,
+    readReadingPlanDay,
     audioBook, setAudioBook,
     audioNarrator, setAudioNarrator,
     audioState,
@@ -99,6 +99,14 @@ export default function HomePage() {
             >
               📖 Read Bible
             </button>
+            <button
+              type="button"
+              onClick={openReadingPlans}
+              className="rounded-xl border border-slate-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-700"
+            >
+              <span className="hidden sm:inline">📅 Reading Plans</span>
+              <span className="sm:hidden">📅 Plans</span>
+            </button>
             <button
               type="button"
               onClick={openImportProject}
@@ -233,8 +241,12 @@ export default function HomePage() {
               </div>
             )}
 
-            {/* Reading plan card */}
-            <ReadingPlanCard readingPlan={readingPlan} createReadingPlan={createReadingPlan} clearReadingPlan={clearReadingPlan} openBibleReader={openBibleReader} />
+            {/* Reading plans summary */}
+            <ReadingPlansSummaryCard
+              planProgress={planProgress}
+              openReadingPlans={openReadingPlans}
+              readReadingPlanDay={readReadingPlanDay}
+            />
 
             <div className="mb-4">
               <AudioPlayer
@@ -394,108 +406,73 @@ export default function HomePage() {
   );
 }
 
-function ReadingPlanCard({ readingPlan, createReadingPlan, clearReadingPlan, openBibleReader }) {
-  const [showForm, setShowForm] = useState(false);
-  const [planBook, setPlanBook] = useState(bookOptions[0].abbrev);
-  const [planWeeks, setPlanWeeks] = useState(4);
+function ReadingPlansSummaryCard({ planProgress, openReadingPlans, readReadingPlanDay }) {
+  const active = planProgress.filter((p) => !p.completedAt);
 
-  if (readingPlan) {
-    const pct = readingPlan.totalChapters > 0
-      ? Math.round((readingPlan.chaptersRead.length / readingPlan.totalChapters) * 100)
-      : 0;
-    const daysLeft = Math.max(0, Math.ceil((readingPlan.targetDate - Date.now()) / 86400000));
-    const chapLeft = readingPlan.totalChapters - readingPlan.chaptersRead.length;
-    const paceNeeded = daysLeft > 0 ? (chapLeft / daysLeft).toFixed(1) : '—';
+  if (active.length === 0) {
     return (
-      <div className="mb-4 rounded-3xl border border-emerald-200 bg-emerald-50 p-5 shadow-panel">
-        <div className="flex items-start justify-between gap-3">
-          <div>
-            <p className="text-xs font-semibold uppercase tracking-widest text-emerald-600">Reading Plan</p>
-            <h3 className="mt-1 text-base font-semibold text-slate-900">{readingPlan.bookName}</h3>
-            <p className="mt-0.5 text-sm text-slate-600">
-              {readingPlan.chaptersRead.length} / {readingPlan.totalChapters} chapters · {daysLeft} day{daysLeft !== 1 ? 's' : ''} left · {paceNeeded} ch/day needed
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={openBibleReader}
-              className="rounded-xl bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-emerald-500"
-            >
-              Read
-            </button>
-            <button
-              type="button"
-              onClick={() => { if (window.confirm('Clear reading plan?')) clearReadingPlan(); }}
-              className="rounded-xl border border-emerald-300 px-3 py-1.5 text-sm text-emerald-700 hover:bg-emerald-100"
-            >
-              Clear
-            </button>
-          </div>
+      <div className="mb-4 flex items-center justify-between gap-3 rounded-3xl border border-slate-200 bg-white p-5 shadow-panel">
+        <div>
+          <p className="text-sm font-semibold text-slate-700">Reading Plans</p>
+          <p className="text-xs text-slate-500">Read through the Bible, the Gospels, Psalms, and more — one day at a time.</p>
         </div>
-        <div className="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-emerald-200">
-          <div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${pct}%` }} />
-        </div>
-        <p className="mt-1 text-right text-xs text-emerald-700">{pct}%</p>
-        {readingPlan.chaptersRead.length > 0 && (
-          <p className="mt-1 text-xs text-slate-500">
-            Read: ch. {readingPlan.chaptersRead.slice(0, 12).join(', ')}{readingPlan.chaptersRead.length > 12 ? '…' : ''}
-          </p>
-        )}
+        <button
+          type="button"
+          onClick={openReadingPlans}
+          className="shrink-0 rounded-xl border border-slate-300 px-3 py-1.5 text-sm font-semibold text-slate-700 hover:bg-slate-50"
+        >
+          Browse plans
+        </button>
       </div>
     );
   }
 
   return (
-    <div className="mb-4 rounded-3xl border border-slate-200 bg-white p-5 shadow-panel">
-      {showForm ? (
-        <div className="flex flex-wrap items-center gap-3">
-          <span className="text-sm font-semibold text-slate-700">Read</span>
-          <select
-            value={planBook}
-            onChange={(e) => setPlanBook(e.target.value)}
-            className="rounded-xl border border-slate-300 bg-slate-50 px-2 py-1.5 text-sm text-slate-900 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
-          >
-            {bookOptions.map((b) => (
-              <option key={b.abbrev} value={b.abbrev}>{b.name} ({CHAPTER_COUNTS[b.abbrev] ?? '?'} ch)</option>
-            ))}
-          </select>
-          <span className="text-sm text-slate-600">in</span>
-          <select
-            value={planWeeks}
-            onChange={(e) => setPlanWeeks(Number(e.target.value))}
-            className="rounded-xl border border-slate-300 bg-slate-50 px-2 py-1.5 text-sm text-slate-900 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
-          >
-            {[1,2,3,4,6,8,12,16,26,52].map((w) => <option key={w} value={w}>{w} week{w !== 1 ? 's' : ''}</option>)}
-          </select>
-          <button
-            type="button"
-            onClick={() => {
-              const book = bookOptions.find((b) => b.abbrev === planBook);
-              createReadingPlan(planBook, book?.name ?? planBook, planWeeks);
-              setShowForm(false);
-            }}
-            className="rounded-xl bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-emerald-500"
-          >
-            Start plan
-          </button>
-          <button type="button" onClick={() => setShowForm(false)} className="text-sm text-slate-400 hover:text-slate-600">Cancel</button>
-        </div>
-      ) : (
-        <div className="flex items-center justify-between gap-3">
-          <div>
-            <p className="text-sm font-semibold text-slate-700">Reading Plan</p>
-            <p className="text-xs text-slate-500">Set a goal to read through a book, track chapters as you go.</p>
+    <div className="mb-4 space-y-3">
+      {active.map((progress) => {
+        const plan = getPlan(progress.planId);
+        if (!plan) return null;
+        const schedule = getPlanSchedule(progress.planId);
+        const pct = plan.days > 0 ? Math.round((progress.completedDays.length / plan.days) * 100) : 0;
+        const nextDay = nextUnreadDayIndex(plan, progress.completedDays);
+        const nextRefs = nextDay != null ? schedule[nextDay] : null;
+        return (
+          <div key={progress.id} className="rounded-3xl border border-emerald-200 bg-emerald-50 p-5 shadow-panel">
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-widest text-emerald-600">Reading Plan</p>
+                <h3 className="mt-1 text-base font-semibold text-slate-900">{plan.title}</h3>
+                <p className="mt-0.5 text-sm text-slate-600">
+                  {progress.completedDays.length} / {plan.days} days
+                  {nextRefs && <> · Next: {formatDayReadings(nextRefs)}</>}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                {nextRefs && (
+                  <button
+                    type="button"
+                    onClick={() => readReadingPlanDay(nextRefs[0].book, nextRefs[0].chapter)}
+                    className="rounded-xl bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-emerald-500"
+                  >
+                    Read
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={openReadingPlans}
+                  className="rounded-xl border border-emerald-300 px-3 py-1.5 text-sm text-emerald-700 hover:bg-emerald-100"
+                >
+                  View
+                </button>
+              </div>
+            </div>
+            <div className="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-emerald-200">
+              <div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${pct}%` }} />
+            </div>
+            <p className="mt-1 text-right text-xs text-emerald-700">{pct}%</p>
           </div>
-          <button
-            type="button"
-            onClick={() => setShowForm(true)}
-            className="shrink-0 rounded-xl border border-slate-300 px-3 py-1.5 text-sm font-semibold text-slate-700 hover:bg-slate-50"
-          >
-            Set goal
-          </button>
-        </div>
-      )}
+        );
+      })}
     </div>
   );
 }

src/pages/ReaderPage.jsx

@@ -4,6 +4,7 @@ import { formatCrossRef, speakOriginalWord } from '../utils/wordStudy.js';
 import AuthStatus from '../components/AuthStatus.jsx';
 import AudioPlayer from '../components/AudioPlayer.jsx';
 import { bookOptions, BookmarkIcon, CopyIcon } from '../utils/bibleUtils.jsx';
+import { getPlan, getPlanSchedule, findDayIndexForRef } from '../utils/readingPlans.js';
 import DrawCanvas from './DrawCanvas.jsx';
 
 const NO_STROKES = []; // stable fallback so DrawCanvas doesn't redraw every render
@@ -57,11 +58,26 @@ export default function ReaderPage() {
     readerTextHighlights,
     addTextHighlight,
     removeTextHighlight,
-    readingPlan,
-    markChapterRead,
+    planProgress,
+    toggleDay,
   } = useApp();
 
   const readerBook = bookOptions.find((b) => b.abbrev === readerBookAbbrev);
+
+  // Active reading plans whose schedule includes the chapter currently on screen.
+  const planMatches = useMemo(() => {
+    return planProgress
+      .filter((p) => !p.completedAt)
+      .map((p) => {
+        const plan = getPlan(p.planId);
+        if (!plan) return null;
+        const dayIndex = findDayIndexForRef(getPlanSchedule(p.planId), readerBookAbbrev, readerChapter);
+        if (dayIndex === -1) return null;
+        return { progressId: p.id, plan, dayIndex, done: p.completedDays.includes(dayIndex) };
+      })
+      .filter(Boolean);
+  }, [planProgress, readerBookAbbrev, readerChapter]);
+
   const [readerDrawMode, setReaderDrawMode] = useState(false);
   const [readerWideLayout, setReaderWideLayout] = useState(() => localStorage.getItem('reader-wide') === '1');
   const readerPageInkStrokes = readerInkByPage?.[`${readerBookAbbrev}_${readerChapter}`] ?? NO_STROKES;
@@ -316,19 +332,17 @@ export default function ReaderPage() {
             </select>
           </label>
           <div className="ml-auto flex items-center gap-2">
-            {readingPlan && readingPlan.bookAbbrev === readerBookAbbrev && (() => {
-              const done = readingPlan.chaptersRead.includes(readerChapter);
-              return (
-                <button
-                  type="button"
-                  onClick={() => markChapterRead(readerChapter)}
-                  className={`rounded-xl px-3 py-1.5 text-sm font-semibold transition ${done ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200' : 'border border-emerald-300 bg-white text-emerald-700 hover:bg-emerald-50'}`}
-                  title={done ? 'Click to unmark' : 'Mark this chapter as read in your reading plan'}
-                >
-                  {done ? '✓ Read' : 'Mark as read'}
-                </button>
-              );
-            })()}
+            {planMatches.map(({ progressId, plan, dayIndex, done }) => (
+              <button
+                key={progressId}
+                type="button"
+                onClick={() => toggleDay(progressId, dayIndex, plan.days)}
+                className={`rounded-xl px-3 py-1.5 text-sm font-semibold transition ${done ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200' : 'border border-emerald-300 bg-white text-emerald-700 hover:bg-emerald-50'}`}
+                title={done ? `Click to unmark Day ${dayIndex + 1} of "${plan.title}"` : `Mark Day ${dayIndex + 1} of "${plan.title}" as read`}
+              >
+                {done ? `✓ ${plan.title}` : `Mark read — ${plan.title}`}
+              </button>
+            ))}
             <button type="button" onClick={readerGoToPreviousChapter} disabled={readerChapter <= 1}
               className="rounded-xl border border-slate-300 bg-white px-4 py-1.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-40">
               ‹ Prev

src/pages/ReadingPlansPage.jsx

@@ -0,0 +1,557 @@
+import { useRef, useState } from 'react';
+import { useApp } from '../context/AppContext.js';
+import AuthStatus from '../components/AuthStatus.jsx';
+import { bookOptions, CHAPTER_COUNTS, formatRelativeDate } from '../utils/bibleUtils.jsx';
+import {
+  READING_PLANS,
+  getPlan,
+  getPlanSchedule,
+  formatDayReadings,
+  firstRefOfDay,
+  nextUnreadDayIndex,
+  themeForCategory,
+  ALL_BOOKS,
+  OT_BOOKS,
+  NT_BOOKS,
+  GOSPELS,
+  PENTATEUCH,
+  WISDOM_BOOKS,
+} from '../utils/readingPlans.js';
+
+export default function ReadingPlansPage() {
+  const {
+    goHome,
+    planProgress,
+    customPlans,
+    startPlan,
+    toggleDay,
+    restartPlan,
+    removePlanProgress,
+    addCustomPlan,
+    removeCustomPlan,
+    updateCustomPlan,
+    readReadingPlanDay,
+  } = useApp();
+  const [showBuilder, setShowBuilder] = useState(false);
+
+  const activeProgress = planProgress.filter((p) => !p.completedAt);
+  const completedProgress = planProgress
+    .filter((p) => p.completedAt)
+    .sort((a, b) => b.completedAt - a.completedAt);
+
+  const categoryOrder = ['Whole Bible', 'Old Testament', 'New Testament', 'Topical'];
+  const builtinCategories = categoryOrder.filter((c) => READING_PLANS.some((p) => p.category === c));
+
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-900">
+      <header className="border-b border-slate-200 bg-slate-900 text-white shadow-sm">
+        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-4 py-5 sm:px-6 lg:px-8">
+          <div>
+            <p className="text-sm uppercase tracking-[0.24em] text-slate-300">Bible Study Project</p>
+            <h1 className="mt-2 text-2xl font-semibold">Reading Plans</h1>
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={goHome}
+              className="rounded-xl border border-slate-500 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-700"
+            >
+              ← Back
+            </button>
+            <AuthStatus />
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto max-w-5xl space-y-8 px-4 py-8 sm:px-6 lg:px-8">
+        {activeProgress.length > 0 && (
+          <section>
+            <h2 className="mb-3 text-lg font-semibold text-slate-900">Continue Reading</h2>
+            <div className="space-y-4">
+              {activeProgress.map((progress) => (
+                <ActivePlanCard
+                  key={progress.id}
+                  progress={progress}
+                  onRead={readReadingPlanDay}
+                  onToggleDay={toggleDay}
+                  onRestart={restartPlan}
+                  onRemove={removePlanProgress}
+                />
+              ))}
+            </div>
+          </section>
+        )}
+
+        <section>
+          <div className="mb-3 flex items-center justify-between">
+            <h2 className="text-lg font-semibold text-slate-900">My Plans</h2>
+            {!showBuilder && (
+              <button
+                type="button"
+                onClick={() => setShowBuilder(true)}
+                className="rounded-xl bg-rose-600 px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-rose-500"
+              >
+                + New Plan
+              </button>
+            )}
+          </div>
+          {showBuilder && (
+            <div className="mb-4">
+              <CustomPlanBuilder
+                onCreate={(input) => { addCustomPlan(input); setShowBuilder(false); }}
+                onCancel={() => setShowBuilder(false)}
+              />
+            </div>
+          )}
+          {customPlans.length > 0 ? (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {customPlans.map((plan) => (
+                <PlanCatalogCard
+                  key={plan.id}
+                  plan={plan}
+                  progressForPlan={planProgress.filter((p) => p.planId === plan.id)}
+                  onStart={startPlan}
+                  onDelete={(id) => { if (window.confirm('Delete this plan? Its progress history will be removed too.')) removeCustomPlan(id); }}
+                  onImageChange={(id, image) => updateCustomPlan(id, { image })}
+                />
+              ))}
+            </div>
+          ) : !showBuilder && (
+            <p className="text-sm text-slate-500">You haven't created any plans yet — try "+ New Plan".</p>
+          )}
+        </section>
+
+        {builtinCategories.map((category) => (
+          <section key={category}>
+            <h2 className="mb-3 text-lg font-semibold text-slate-900">{category}</h2>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {READING_PLANS.filter((p) => p.category === category).map((plan) => (
+                <PlanCatalogCard
+                  key={plan.id}
+                  plan={plan}
+                  progressForPlan={planProgress.filter((p) => p.planId === plan.id)}
+                  onStart={startPlan}
+                />
+              ))}
+            </div>
+          </section>
+        ))}
+
+        {completedProgress.length > 0 && (
+          <section>
+            <h2 className="mb-3 text-lg font-semibold text-slate-900">Completed</h2>
+            <div className="space-y-2">
+              {completedProgress.map((progress) => {
+                const plan = getPlan(progress.planId);
+                if (!plan) return null;
+                return (
+                  <div
+                    key={progress.id}
+                    className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-3 shadow-panel"
+                  >
+                    <div>
+                      <p className="text-sm font-semibold text-slate-900">{plan.icon ?? '✓'} {plan.title}</p>
+                      <p className="text-xs text-slate-500">Completed {formatRelativeDate(progress.completedAt)}</p>
+                    </div>
+                    <div className="flex items-center gap-3 text-sm">
+                      <button
+                        type="button"
+                        onClick={() => restartPlan(progress.id)}
+                        className="font-semibold text-slate-700 hover:underline"
+                      >
+                        Start again
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => { if (window.confirm('Remove this from your history?')) removePlanProgress(progress.id); }}
+                        className="text-rose-500 hover:text-rose-700"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+        )}
+      </main>
+    </div>
+  );
+}
+
+function PlanCover({ plan }) {
+  const [imgFailed, setImgFailed] = useState(false);
+  const theme = themeForCategory(plan.category);
+  const showImage = !!plan.image && !imgFailed;
+  return (
+    <div className={`relative flex h-32 items-center justify-center overflow-hidden bg-gradient-to-br ${theme.gradient}`}>
+      {showImage && (
+        <img
+          src={plan.image}
+          alt=""
+          onError={() => setImgFailed(true)}
+          style={{ objectPosition: plan.imageFocus ?? 'center' }}
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      )}
+      {!showImage && <span className="text-4xl drop-shadow">{plan.icon ?? '📖'}</span>}
+    </div>
+  );
+}
+
+function ActivePlanCard({ progress, onRead, onToggleDay, onRestart, onRemove }) {
+  const [expanded, setExpanded] = useState(false);
+  const plan = getPlan(progress.planId);
+  if (!plan) return null;
+
+  const theme = themeForCategory(plan.category);
+  const schedule = getPlanSchedule(progress.planId);
+  const pct = plan.days > 0 ? Math.round((progress.completedDays.length / plan.days) * 100) : 0;
+  const nextDay = nextUnreadDayIndex(plan, progress.completedDays);
+  const nextRefs = nextDay != null ? schedule[nextDay] : null;
+  const nextFirstRef = nextRefs ? firstRefOfDay(nextRefs) : null;
+
+  return (
+    <div className="overflow-hidden rounded-3xl border border-emerald-200 bg-emerald-50 shadow-panel">
+      <div className={`h-1.5 w-full bg-gradient-to-r ${theme.gradient}`} />
+      <div className="p-5">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <p className={`text-xs font-semibold uppercase tracking-widest ${theme.text}`}>{plan.category}</p>
+            <h3 className="mt-1 text-base font-semibold text-slate-900">{plan.icon ?? '📖'} {plan.title}</h3>
+            <p className="mt-0.5 text-sm text-slate-600">
+              {progress.completedDays.length} / {plan.days} days
+              {nextRefs && <> · Next: Day {nextDay + 1} — {formatDayReadings(nextRefs)}</>}
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            {nextFirstRef && (
+              <button
+                type="button"
+                onClick={() => onRead(nextFirstRef.book, nextFirstRef.chapter)}
+                className="rounded-xl bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-emerald-500"
+              >
+                Read
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => setExpanded((e) => !e)}
+              className="rounded-xl border border-emerald-300 px-3 py-1.5 text-sm text-emerald-700 hover:bg-emerald-100"
+            >
+              {expanded ? 'Hide days' : 'View days'}
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-emerald-200">
+          <div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${pct}%` }} />
+        </div>
+        <p className="mt-1 text-right text-xs text-emerald-700">{pct}%</p>
+
+        {expanded && (
+          <div className="mt-3 max-h-72 overflow-y-auto rounded-2xl border border-emerald-100 bg-white p-2">
+            {schedule.map((dayRefs, i) => {
+              const done = progress.completedDays.includes(i);
+              const ref = firstRefOfDay(dayRefs);
+              return (
+                <div key={i} className="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-slate-50">
+                  <input
+                    type="checkbox"
+                    checked={done}
+                    onChange={() => onToggleDay(progress.id, i, plan.days)}
+                    className="h-4 w-4 shrink-0 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500"
+                  />
+                  <span className={done ? 'flex-1 text-slate-400 line-through' : 'flex-1 text-slate-700'}>
+                    Day {i + 1} — {formatDayReadings(dayRefs)}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => onRead(ref.book, ref.chapter)}
+                    className="shrink-0 text-xs font-semibold text-sky-600 hover:underline"
+                  >
+                    Read
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        <div className="mt-3 flex items-center gap-4 text-xs">
+          <button
+            type="button"
+            onClick={() => { if (window.confirm('Restart this plan from day 1?')) onRestart(progress.id); }}
+            className="font-semibold text-slate-500 hover:text-slate-700"
+          >
+            Restart
+          </button>
+          <button
+            type="button"
+            onClick={() => { if (window.confirm('Remove this plan?')) onRemove(progress.id); }}
+            className="font-semibold text-rose-500 hover:text-rose-700"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PlanCatalogCard({ plan, progressForPlan, onStart, onDelete, onImageChange }) {
+  const active = progressForPlan.find((p) => !p.completedAt);
+  const completedCount = progressForPlan.filter((p) => p.completedAt).length;
+  const theme = themeForCategory(plan.category);
+  const fileInputRef = useRef(null);
+  const [imageError, setImageError] = useState('');
+
+  const pickImage = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = ''; // lets the same file be re-picked later
+    if (!file) return;
+    try {
+      setImageError('');
+      onImageChange(plan.id, await resizeImageToDataUrl(file));
+    } catch {
+      setImageError("Couldn't use that image.");
+    }
+  };
+
+  return (
+    <div className="group overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-panel transition hover:shadow-lg">
+      <PlanCover plan={plan} />
+      <div className="flex flex-col gap-2 p-5">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="text-sm font-semibold text-slate-900">{plan.title}</h3>
+          {onDelete && (
+            <button
+              type="button"
+              onClick={() => onDelete(plan.id)}
+              title="Delete plan"
+              className="shrink-0 text-slate-300 transition hover:text-rose-500"
+            >
+              ✕
+            </button>
+          )}
+        </div>
+        <p className="flex-1 text-xs text-slate-500">{plan.description || 'A custom reading plan.'}</p>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${theme.chip}`}>{plan.days} days</span>
+          {completedCount > 0 && <span className="text-xs font-semibold text-emerald-600">✓ Completed {completedCount}×</span>}
+        </div>
+        {onImageChange && (
+          <div className="flex items-center gap-3 text-xs">
+            <button type="button" onClick={() => fileInputRef.current?.click()} className="font-semibold text-slate-500 hover:text-slate-700">
+              {plan.image ? 'Change cover' : '+ Add cover photo'}
+            </button>
+            {plan.image && (
+              <button type="button" onClick={() => onImageChange(plan.id, null)} className="text-slate-400 hover:text-rose-500">
+                Remove
+              </button>
+            )}
+            <input ref={fileInputRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
+          </div>
+        )}
+        {imageError && <p className="text-xs text-rose-500">{imageError}</p>}
+        <button
+          type="button"
+          disabled={!!active}
+          onClick={() => onStart(plan.id)}
+          className="mt-1 rounded-xl bg-slate-900 px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {active ? 'In progress' : completedCount > 0 ? 'Start again' : 'Start plan'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Downscales a picked image file to a reasonable cover-photo size and returns
+// a data URL — no server upload endpoint needed, it's stored right on the plan.
+function resizeImageToDataUrl(file, maxWidth = 960, quality = 0.82) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error('Could not read file.'));
+    reader.onload = () => {
+      const img = new Image();
+      img.onerror = () => reject(new Error('Could not decode image.'));
+      img.onload = () => {
+        const scale = Math.min(1, maxWidth / img.width);
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.round(img.width * scale);
+        canvas.height = Math.round(img.height * scale);
+        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+        resolve(canvas.toDataURL('image/jpeg', quality));
+      };
+      img.src = reader.result;
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+const BOOK_PRESETS = [
+  ['All', ALL_BOOKS],
+  ['None', []],
+  ['Old Testament', OT_BOOKS],
+  ['New Testament', NT_BOOKS],
+  ['Gospels', GOSPELS],
+  ['Pentateuch', PENTATEUCH],
+  ['Psalms', ['PSA']],
+  ['Proverbs', ['PRO']],
+  ['Wisdom', WISDOM_BOOKS],
+];
+
+function CustomPlanBuilder({ onCreate, onCancel }) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [days, setDays] = useState(30);
+  const [books, setBooks] = useState([]);
+  const [image, setImage] = useState(null);
+  const [imageError, setImageError] = useState('');
+  const fileInputRef = useRef(null);
+
+  const toggleBook = (abbrev) => {
+    setBooks((prev) => (prev.includes(abbrev) ? prev.filter((b) => b !== abbrev) : [...prev, abbrev]));
+  };
+
+  const pickImage = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    try {
+      setImageError('');
+      setImage(await resizeImageToDataUrl(file));
+    } catch {
+      setImageError("Couldn't use that image.");
+    }
+  };
+
+  const totalChapters = books.reduce((sum, b) => sum + (CHAPTER_COUNTS[b] ?? 0), 0);
+  const canCreate = title.trim().length > 0 && books.length > 0 && days >= 1;
+
+  return (
+    <div className="rounded-2xl border border-rose-200 bg-white p-5 shadow-panel">
+      <h3 className="mb-3 text-sm font-semibold text-slate-900">New reading plan</h3>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <label className="text-sm text-slate-600">
+          Title
+          <input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="e.g. Advent Readings"
+            className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-200"
+          />
+        </label>
+        <label className="text-sm text-slate-600">
+          Days
+          <input
+            type="number"
+            min="1"
+            max="365"
+            value={days}
+            onChange={(e) => setDays(Number(e.target.value))}
+            className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-200"
+          />
+        </label>
+      </div>
+      <label className="mt-3 block text-sm text-slate-600">
+        Description <span className="text-slate-400">(optional)</span>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={2}
+          className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-200"
+        />
+      </label>
+
+      <div className="mt-3">
+        <span className="text-sm text-slate-600">Cover photo <span className="text-slate-400">(optional)</span></span>
+        <div className="mt-1 flex items-center gap-3">
+          {image ? (
+            <img src={image} alt="" className="h-16 w-28 rounded-lg object-cover" />
+          ) : (
+            <div className="flex h-16 w-28 items-center justify-center rounded-lg bg-slate-100 text-2xl">🖼️</div>
+          )}
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="rounded-xl border border-slate-300 px-3 py-1.5 text-sm font-semibold text-slate-600 hover:bg-slate-50"
+          >
+            {image ? 'Change photo' : 'Choose photo'}
+          </button>
+          {image && (
+            <button type="button" onClick={() => setImage(null)} className="text-sm text-slate-400 hover:text-rose-500">
+              Remove
+            </button>
+          )}
+          <input ref={fileInputRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
+        </div>
+        {imageError && <p className="mt-1 text-xs text-rose-500">{imageError}</p>}
+      </div>
+
+      <div className="mt-4">
+        <div className="mb-2 flex flex-wrap items-center gap-2">
+          <span className="text-sm font-semibold text-slate-700">Books</span>
+          {BOOK_PRESETS.map(([label, list]) => (
+            <button
+              key={label}
+              type="button"
+              onClick={() => setBooks(list)}
+              className="rounded-full border border-slate-300 px-2.5 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-50"
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div className="max-h-48 overflow-y-auto rounded-xl border border-slate-200 p-2">
+            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-slate-400">Old Testament</p>
+            {bookOptions.filter((b) => OT_BOOKS.includes(b.abbrev)).map((b) => (
+              <label key={b.abbrev} className="flex items-center gap-2 rounded-lg px-1 py-1 text-sm hover:bg-slate-50">
+                <input
+                  type="checkbox"
+                  checked={books.includes(b.abbrev)}
+                  onChange={() => toggleBook(b.abbrev)}
+                  className="h-4 w-4 rounded border-slate-300 text-rose-600 focus:ring-rose-500"
+                />
+                {b.name}
+              </label>
+            ))}
+          </div>
+          <div className="max-h-48 overflow-y-auto rounded-xl border border-slate-200 p-2">
+            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-slate-400">New Testament</p>
+            {bookOptions.filter((b) => NT_BOOKS.includes(b.abbrev)).map((b) => (
+              <label key={b.abbrev} className="flex items-center gap-2 rounded-lg px-1 py-1 text-sm hover:bg-slate-50">
+                <input
+                  type="checkbox"
+                  checked={books.includes(b.abbrev)}
+                  onChange={() => toggleBook(b.abbrev)}
+                  className="h-4 w-4 rounded border-slate-300 text-rose-600 focus:ring-rose-500"
+                />
+                {b.name}
+              </label>
+            ))}
+          </div>
+        </div>
+        <p className="mt-2 text-xs text-slate-400">
+          {books.length} book{books.length !== 1 ? 's' : ''} selected · {totalChapters} chapters
+          {days > 0 && totalChapters > 0 && ` · ~${(totalChapters / days).toFixed(1)} ch/day`}
+        </p>
+      </div>
+
+      <div className="mt-4 flex items-center gap-3">
+        <button
+          type="button"
+          disabled={!canCreate}
+          onClick={() => onCreate({ title, description, days, books, image })}
+          className="rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-rose-500 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Create plan
+        </button>
+        <button type="button" onClick={onCancel} className="text-sm text-slate-400 hover:text-slate-600">Cancel</button>
+      </div>
+    </div>
+  );
+}