// MOBILE — purpose-built for ≤768px viewports.
// One file. Nav (top bar + drawer), Home, Audio list, Video grid,
// Bible chapter, Blessings, Stories — all designed to actually fit a phone.
// Activated by useMobile() in app.jsx.

// =============================================================================
// Mobile Nav — slim header + hamburger drawer
// =============================================================================
function MobileNav({ active, nav, onMenu }) {
  return (
    <div style={{
      position: "sticky", top: 0, zIndex: 60,
      padding: "calc(10px + env(safe-area-inset-top)) 14px 10px",
      background: "rgba(10,9,7,0.95)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      borderBottom: `1px solid ${T.gold}22`,
      display: "flex", alignItems: "center", justifyContent: "space-between",
    }}>
      <button onClick={onMenu} aria-label="Menu" style={{
        width: 40, height: 40, background: "transparent",
        border: `1px solid ${T.gold}55`, color: T.gold,
        cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0,
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <line x1="4" y1="7" x2="20" y2="7" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="17" x2="20" y2="17" />
        </svg>
      </button>
      <div onClick={() => nav("home")} style={{ cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flex: 1 }}>
        <TribeTruthLogo width={140} />
      </div>
      <button onClick={() => nav("auth")} style={{
        padding: "9px 14px", background: T.gold, color: T.ink,
        border: "none", cursor: "pointer", flexShrink: 0,
        fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 600,
      }}>Join</button>
    </div>
  );
}

const MOBILE_NAV = [
  { id: "home",      label: "Home" },
  { id: "feed",      label: "The Feed" },
  { id: "blessings", label: "Blessings" },
  { id: "book",      label: "The Book" },
  { id: "bible",     label: "Bible" },
  { id: "audio",     label: "Audio" },
  { id: "stories",   label: "Stories" },
  { id: "shadow",    label: "The Shadow of God" },
  { id: "community", label: "Community" },
  { id: "about",     label: "About" },
];

function MobileDrawer({ open, onClose, active, nav }) {
  useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 90,
      background: "rgba(10,9,7,0.8)", backdropFilter: "blur(8px)",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        position: "absolute", top: 0, left: 0, bottom: 0,
        width: "min(320px, 84vw)",
        background: T.bgRise, borderRight: `1px solid ${T.gold}33`,
        padding: "calc(20px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom))",
        overflowY: "auto", display: "flex", flexDirection: "column", gap: 4,
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
          <TribeTruthLogo width={140} />
          <button onClick={onClose} aria-label="Close" style={{
            width: 36, height: 36, background: "transparent",
            border: `1px solid ${T.gold}33`, color: T.gold, cursor: "pointer", fontSize: 14,
          }}>✕</button>
        </div>
        {MOBILE_NAV.map((it) => (
          <button key={it.id} onClick={() => { nav(it.id); onClose(); }} style={{
            background: it.id === active ? `${T.gold}15` : "transparent",
            border: "none", padding: "14px 12px",
            borderLeft: it.id === active ? `2px solid ${T.gold}` : "2px solid transparent",
            fontFamily: "'Cinzel', serif", fontSize: 13,
            letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 500,
            color: it.id === active ? T.gold : T.paper,
            cursor: "pointer", textAlign: "left",
          }}>{it.label}</button>
        ))}
        <div style={{ marginTop: 20, paddingTop: 20, borderTop: `1px solid ${T.gold}22`, display: "flex", flexDirection: "column", gap: 10 }}>
          <button onClick={() => { nav("auth"); onClose(); }} style={{
            padding: "13px 16px", background: "transparent", color: T.paper,
            border: `1px solid ${T.gold}44`, cursor: "pointer",
            fontFamily: "'Cinzel', serif", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
          }}>Sign in</button>
          <button onClick={() => { nav("auth"); onClose(); }} style={{
            padding: "13px 16px", background: T.gold, color: T.ink,
            border: "none", cursor: "pointer",
            fontFamily: "'Cinzel', serif", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 600,
          }}>Join free</button>
        </div>
      </div>
    </div>
  );
}

// =============================================================================
// MOBILE HOME
// =============================================================================
// Mobile prologue/book card with its own mute toggle.
function MobileBookCard({ nav }) {
  const vidRef = React.useRef(null);
  const [muted, setMuted] = React.useState(true);
  const toggleSound = (e) => {
    e.stopPropagation();
    const v = vidRef.current;
    if (!v) return;
    v.muted = !v.muted;
    setMuted(v.muted);
    if (!v.muted) v.play().catch(() => {});
  };
  return (
    <section style={{ padding: "12px 14px 16px" }}>
      <div onClick={() => nav("book")} style={{
        position: "relative", overflow: "hidden", cursor: "pointer",
        background: `linear-gradient(135deg, ${T.bgRise}, #1a160c)`,
        border: `1px solid ${T.gold}66`,
      }}>
        <div style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden", background: "#000" }}>
          <video aria-hidden src={CDN_ASSETS.prologueVideo} autoPlay muted loop playsInline preload="metadata" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: "blur(24px) brightness(0.5)", transform: "scale(1.1)" }} />
          <video ref={vidRef} src={CDN_ASSETS.prologueVideo} poster={CDN_ASSETS.bookPrologue} autoPlay muted loop playsInline preload="metadata" style={{ position: "relative", width: "100%", height: "100%", objectFit: "contain", zIndex: 1 }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(10,9,7,0.15) 45%, rgba(10,9,7,0.96) 100%)", zIndex: 2 }} />
          <div style={{ position: "absolute", top: 12, left: 12, zIndex: 3 }}>
            <SmallCaps color={T.gold} size={9}>The Prologue · Now playing</SmallCaps>
          </div>
          {/* Sound toggle — labeled pill so it reads clearly as "tap to unmute" */}
          <button onClick={toggleSound} aria-label={muted ? "Unmute prologue" : "Mute prologue"} style={{ position: "absolute", top: 10, right: 10, zIndex: 4, display: "flex", alignItems: "center", gap: 6, padding: "0 12px", height: 38, background: muted ? T.gold : "rgba(0,0,0,0.6)", border: `1px solid ${T.gold}`, color: muted ? T.ink : T.gold, cursor: "pointer", backdropFilter: "blur(8px)", fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.16em", fontWeight: 700 }}>
            {muted ? (
              <svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor"><path d="M3 6h2l3-3v10l-3-3H3V6z" /><path d="M11 6l3 3M14 6l-3 3" stroke="currentColor" strokeWidth="1.4" fill="none" /></svg>
            ) : (
              <svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor"><path d="M3 6h2l3-3v10l-3-3H3V6z" /><path d="M11 5a3 3 0 010 6" stroke="currentColor" strokeWidth="1.4" fill="none" /></svg>
            )}
            {muted ? "UNMUTE" : "MUTE"}
          </button>
          <div style={{ position: "absolute", bottom: 12, left: 16, right: 16, zIndex: 3 }}>
            <div style={{ fontFamily: "'Cinzel', serif", fontSize: 24, color: T.paper, letterSpacing: "0.02em", lineHeight: 1.05 }}>The Twelve <span style={{ color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", fontWeight: 400 }}>Blessings.</span></div>
            <p style={{ margin: "4px 0 0", fontSize: 14, color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif" }}>22 chapters · audiobook + read-along</p>
          </div>
        </div>
        <div style={{ padding: 16, borderTop: `1px solid ${T.gold}22`, display: "flex", gap: 10 }}>
          <button onClick={(e) => { e.stopPropagation(); nav("book"); }} style={{ flex: 1, padding: "12px 14px", background: `linear-gradient(135deg, ${T.gold}, ${T.goldDeep})`, color: T.ink, border: "none", cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>▶ Begin the Book</button>
          <button onClick={(e) => { e.stopPropagation(); nav("start"); }} style={{ padding: "12px 16px", background: "transparent", color: T.paper, border: `1px solid ${T.gold}55`, cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", whiteSpace: "nowrap" }}>Start Here</button>
        </div>
      </div>
    </section>
  );
}

function MobileHome({ nav }) {
  const cat = useVideoCatalog();
  const familyStories = useFamilyStories();
  const tribe = TRIBES[(new Date().getMonth()) % 12];
  const prompt = DAILY_PROMPTS[tribe.id]?.[Math.floor(Date.now() / 86400000) % (DAILY_PROMPTS[tribe.id]?.length || 1)] || "";
  const hero = cat.hero;
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      {/* Hero — text only, no full-bleed video */}
      <section style={{ position: "relative", padding: "32px 18px 36px", textAlign: "center", overflow: "hidden" }}>
        <ScrollBg opacity={0.10} blendMode="overlay" />
        <EmberField density={14} intensity={0.35} />
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255,215,0,0.10), transparent 70%)" }} />
        <div style={{ position: "relative" }}>
          <SmallCaps color={T.gold} letterSpacing="0.4em" size={10}>A monthly practice</SmallCaps>
          <h1 style={{ fontFamily: "'Cinzel', serif", fontSize: 32, fontWeight: 500, margin: "16px 0 14px", color: T.paper, letterSpacing: "0.02em", lineHeight: 1.1 }}>
            The Word, set to a<br/>
            <span style={{ color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", fontWeight: 400 }}>daily rhythm.</span>
          </h1>
          <p style={{ fontSize: 15, color: T.paperDim, fontStyle: "italic", margin: 0, fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.5 }}>
            Twelve Blessings, the whole Bible, a community walking through the year together.
          </p>
        </div>
      </section>

      {/* START HERE — prominent onboarding entry, right under the hero */}
      <section style={{ padding: "8px 14px 4px" }}>
        <div onClick={() => nav("start")} style={{
          position: "relative", overflow: "hidden", cursor: "pointer",
          border: `1px solid ${T.gold}`, background: `linear-gradient(135deg, ${T.bgRise}, #1a160c)`,
          padding: "16px 18px", display: "flex", alignItems: "center", gap: 14,
        }}>
          <div style={{ width: 42, height: 42, flexShrink: 0, borderRadius: "50%", border: `1px solid ${T.gold}`, display: "flex", alignItems: "center", justifyContent: "center", color: T.gold, fontSize: 18 }}>✦</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <SmallCaps color={T.gold} size={9}>New to TribeTruth?</SmallCaps>
            <div style={{ marginTop: 3, fontFamily: "'Cinzel', serif", fontSize: 19, color: T.paper, letterSpacing: "0.02em" }}>Start Here.</div>
            <p style={{ margin: "2px 0 0", fontSize: 13, color: T.paperDim, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.35 }}>A short invitation to the practice — and how to begin.</p>
          </div>
          <div style={{ color: T.gold, fontSize: 18, flexShrink: 0 }}>→</div>
        </div>
      </section>

      {/* THE BOOK — main feature, right under the hero (with mute toggle) */}
      <MobileBookCard nav={nav} />

      {/* THE PRACTICE — three pillars, right below the book */}
      <section style={{ padding: "8px 14px 24px" }}>
        <SmallCaps color={T.goldDeep} size={10}>The practice</SmallCaps>
        <h2 style={{ marginTop: 8, fontFamily: "'Cinzel', serif", fontSize: 26, color: T.paper, fontWeight: 500, letterSpacing: "0.02em" }}>Three rooms.</h2>
        <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            { eyebrow: "Read", title: "The Whole Bible.", body: "All 66 books, KJV, free. Plans, notes.", page: "bible" },
            { eyebrow: "Listen", title: "Twelve Blessings.", body: "A blessing for every month. Read it, hear it, live with it.", page: "blessings", featured: true },
            { eyebrow: "Walk together", title: "The Community.", body: "Forum, reflections, classes, prayer.", page: "community" },
          ].map(c => (
            <div key={c.page} onClick={() => nav(c.page)} style={{
              padding: "18px 16px",
              background: c.featured ? T.bgWarm : T.bgRise,
              border: `1px solid ${c.featured ? T.gold + "55" : T.gold + "22"}`,
              cursor: "pointer",
            }}>
              <SmallCaps color={T.goldDeep} size={9}>{c.eyebrow}</SmallCaps>
              <div style={{ marginTop: 6, fontFamily: "'Cinzel', serif", fontSize: 20, color: T.paper, letterSpacing: "0.02em" }}>{c.title}</div>
              <p style={{ marginTop: 4, fontSize: 14, color: T.paperDim, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", margin: "4px 0 0", lineHeight: 1.4 }}>{c.body}</p>
              <div style={{ marginTop: 10, fontSize: 10, color: T.gold, fontFamily: "'Cinzel', serif", letterSpacing: "0.22em", textTransform: "uppercase" }}>Open →</div>
            </div>
          ))}
        </div>
      </section>

      {/* Today's blessing — kept accessible below the practice */}
      <section style={{ padding: "8px 14px 16px" }}>
        <div onClick={() => nav("blessings", { id: tribe.id })} style={{
          position: "relative", overflow: "hidden", cursor: "pointer",
          border: `1px solid ${T.gold}44`, background: T.bgWarm,
        }}>
          <div style={{ position: "relative", aspectRatio: "16/9", overflow: "hidden" }}>
            <img src={tribeImg(tribe, "hero")} alt={tribe.name} onError={(e) => { e.currentTarget.src = tribeImg(tribe, "header"); }} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 40%, rgba(10,9,7,0.95) 100%)" }} />
            <div style={{ position: "absolute", top: 12, left: 12 }}>
              <SmallCaps color={T.gold} size={9}>Today's Blessing · Month {tribe.n}</SmallCaps>
            </div>
            <div style={{ position: "absolute", bottom: 12, left: 16, right: 16 }}>
              <h3 style={{ fontFamily: "'Cinzel', serif", fontSize: 24, fontWeight: 500, color: T.paper, margin: 0, letterSpacing: "0.02em" }}>{tribe.name}</h3>
              <p style={{ fontSize: 14, color: T.gold, fontStyle: "italic", margin: "4px 0 0", fontFamily: "'Cormorant Garamond', serif" }}>{tribe.blessing}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Overall Feed CTA */}
      <section style={{ padding: "0 14px 8px" }}>
        <div onClick={() => nav("feed")} style={{ padding: "16px 18px", background: `linear-gradient(135deg, ${T.gold}, ${T.goldDeep})`, color: T.ink, cursor: "pointer", display: "flex", alignItems: "center", gap: 14 }}>
          <div style={{ fontSize: 24 }}>▶</div>
          <div>
            <div style={{ fontFamily: "'Cinzel', serif", fontSize: 17, fontWeight: 600, letterSpacing: "0.02em" }}>The Feed</div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 13, fontStyle: "italic", opacity: 0.85 }}>Videos, stories & reflections — shuffled.</div>
          </div>
        </div>
      </section>

      {/* (Twelve Blessings grid is on /blessings — not the home.) */}

      {/* Featured videos — moved up, before three pillars */}
      <section style={{ padding: "16px 14px 24px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 14 }}>
          <div>
            <SmallCaps color={T.goldDeep} size={10}>Music videos</SmallCaps>
            <h2 style={{ marginTop: 6, fontFamily: "'Cinzel', serif", fontSize: 24, color: T.paper, fontWeight: 500, letterSpacing: "0.02em" }}>Scripture, sung.</h2>
          </div>
          <button onClick={() => nav("shadow", { sub: "videos" })} style={{ background: "transparent", border: "none", color: T.gold, fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", cursor: "pointer", padding: 0 }}>All →</button>
        </div>
        {/* Horizontal scroll row of 9:16 videos */}
        <div style={{ display: "flex", gap: 10, overflowX: "auto", scrollSnapType: "x mandatory", padding: "4px 0 12px", margin: "0 -14px", paddingLeft: 14, paddingRight: 14, WebkitOverflowScrolling: "touch" }}>
          {cat.featured.slice(0, 6).map(v => v && (
            <div key={v.id} style={{ width: 150, flexShrink: 0, scrollSnapAlign: "start" }}>
              <MobileVideoCard video={v} nav={(_, params) => nav("feed", { id: params.id })} />
            </div>
          ))}
        </div>
        <button onClick={() => nav("feed", { kind: "music" })} style={{ marginTop: 8, width: "100%", padding: "16px 0", background: `linear-gradient(135deg, ${T.gold}, ${T.goldDeep})`, color: T.ink, border: "none", cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 700 }}>
          ▶ Music Video Feed
        </button>
      </section>

      {/* Biblical Stories — horizontal scroll */}
      <section style={{ padding: "16px 14px 8px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 12 }}>
          <div>
            <SmallCaps color={T.goldDeep} size={10}>Biblical Stories</SmallCaps>
            <h2 style={{ marginTop: 6, fontFamily: "'Cinzel', serif", fontSize: 22, color: T.paper, fontWeight: 500, letterSpacing: "0.02em" }}>The tribes, narrated.</h2>
          </div>
          <button onClick={() => nav("feed", { kind: "stories" })} style={{ background: "transparent", border: "none", color: T.gold, fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", cursor: "pointer", padding: 0 }}>Feed →</button>
        </div>
        <div style={{ display: "flex", gap: 10, overflowX: "auto", padding: "4px 0 12px", margin: "0 -14px", paddingLeft: 14, paddingRight: 14, WebkitOverflowScrolling: "touch" }}>
          {[{ id: "jacob", n: 13, name: "Jacob", img: CDN_ASSETS.jacobHeader },
            ...TRIBES.map(t => ({ id: t.id, n: t.n, name: t.name, img: tribeImg(t) }))
          ].map(s => (
            <div key={s.id} onClick={() => nav("feed", { kind: "stories", id: "story-" + s.id })} style={{ width: 120, flexShrink: 0, position: "relative", overflow: "hidden", border: `1px solid ${T.gold}22`, cursor: "pointer", aspectRatio: "4/5" }}>
              <img src={s.img} alt={s.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} loading="lazy" />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 45%, rgba(10,9,7,0.95) 100%)" }} />
              <div style={{ position: "absolute", left: 8, bottom: 8, right: 8, fontFamily: "'Cinzel', serif", fontSize: 13, color: T.paper, letterSpacing: "0.02em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{s.name}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Family Bible Stories — horizontal scroll (9:16 video posters) */}
      <section style={{ padding: "8px 14px 8px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 12 }}>
          <div>
            <SmallCaps color={T.goldDeep} size={10}>Family Bible Stories</SmallCaps>
            <h2 style={{ marginTop: 6, fontFamily: "'Cinzel', serif", fontSize: 22, color: T.paper, fontWeight: 500, letterSpacing: "0.02em" }}>For the kitchen table.</h2>
          </div>
          <button onClick={() => nav("feed", { kind: "family" })} style={{ background: "transparent", border: "none", color: T.gold, fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", cursor: "pointer", padding: 0 }}>Feed →</button>
        </div>
        <div style={{ display: "flex", gap: 10, overflowX: "auto", padding: "4px 0 12px", margin: "0 -14px", paddingLeft: 14, paddingRight: 14, WebkitOverflowScrolling: "touch" }}>
          {(familyStories || []).map(f => (
            <div key={f.id} onClick={() => nav("feed", { kind: "family", id: f.id })} style={{ width: 124, flexShrink: 0, position: "relative", overflow: "hidden", border: `1px solid ${T.gold}22`, cursor: "pointer", aspectRatio: "9/16", background: T.bg }}>
              <video src={f.shorts + "#t=2"} muted playsInline preload="metadata" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(10,9,7,0.1) 40%, rgba(10,9,7,0.95) 100%)" }} />
              <div style={{ position: "absolute", top: 8, left: 8, width: 30, height: 30, borderRadius: "50%", background: `${T.gold}cc`, color: T.ink, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12 }}>▶</div>
              <div style={{ position: "absolute", left: 8, bottom: 8, right: 8, fontFamily: "'Cinzel', serif", fontSize: 12, color: T.paper, letterSpacing: "0.01em", lineHeight: 1.25 }}>{f.title}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Inspirations — horizontal scroll */}
      <section style={{ padding: "8px 14px 16px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 12 }}>
          <div>
            <SmallCaps color={T.goldDeep} size={10}>Inspirations</SmallCaps>
            <h2 style={{ marginTop: 6, fontFamily: "'Cinzel', serif", fontSize: 22, color: T.paper, fontWeight: 500, letterSpacing: "0.02em" }}>Short reflections.</h2>
          </div>
          <button onClick={() => nav("feed", { kind: "inspirations" })} style={{ background: "transparent", border: "none", color: T.gold, fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", cursor: "pointer", padding: 0 }}>View →</button>
        </div>
        <div style={{ display: "flex", gap: 10, overflowX: "auto", padding: "4px 0 12px", margin: "0 -14px", paddingLeft: 14, paddingRight: 14, WebkitOverflowScrolling: "touch" }}>
          {(window.inspirationsFor ? window.inspirationsFor(1) : []).map(item => (
            <div key={item.id} onClick={() => nav("feed", { kind: "inspirations", id: "insp-1-" + item.id })} style={{ width: 130, flexShrink: 0, position: "relative", overflow: "hidden", border: `1px solid ${T.gold}22`, cursor: "pointer", aspectRatio: "1/1" }}>
              <img src={item.thumbUrl} alt={`Reflection ${item.id}`} style={{ width: "100%", height: "100%", objectFit: "cover" }} loading="lazy" />
              <div style={{ position: "absolute", inset: 0, background: `${T.bg}44`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ width: 34, height: 34, borderRadius: "50%", background: `${T.gold}cc`, color: T.ink, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13 }}>▶</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Three pillars — stacked rows */}
      {/* (The practice / three pillars moved up, right below the book feature) */}

      {/* (Book card moved up — right after the hero) */}
      {/* (Music videos moved up — before three pillars) */}

      {/* Audio albums — vertical list */}
      <section style={{ padding: "16px 14px 32px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 14 }}>
          <div>
            <SmallCaps color={T.goldDeep} size={10}>Audio</SmallCaps>
            <h2 style={{ marginTop: 6, fontFamily: "'Cinzel', serif", fontSize: 24, color: T.paper, fontWeight: 500, letterSpacing: "0.02em" }}>Press play.</h2>
          </div>
          <button onClick={() => nav("audio")} style={{ background: "transparent", border: "none", color: T.gold, fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", cursor: "pointer", padding: 0 }}>All →</button>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {ALBUMS.slice(0, 4).map(a => (
            <div key={a.id} onClick={() => nav("audio", { album: a.id })} style={{
              display: "flex", gap: 12, alignItems: "center",
              padding: 10, background: T.bgRise, border: `1px solid ${T.gold}22`, cursor: "pointer",
            }}>
              <img src={a.cover} alt="" style={{ width: 64, height: 64, objectFit: "cover", flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <SmallCaps color={T.goldDeep} size={9}>{a.tracks.length} tracks</SmallCaps>
                <div style={{ marginTop: 2, fontFamily: "'Cinzel', serif", fontSize: 15, color: T.paper, letterSpacing: "0.01em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.title}</div>
                <div style={{ marginTop: 2, fontSize: 12, color: T.paperFaint, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.artist}</div>
              </div>
              <div style={{ fontSize: 18, color: T.gold }}>▸</div>
            </div>
          ))}
        </div>
      </section>

      {/* Footer spacer */}
      <div style={{ height: 40 }} />
    </div>
  );
}

// =============================================================================
// Mobile video card (9:16 portrait)
// =============================================================================
function MobileVideoCard({ video, nav }) {
  return (
    <div onClick={() => nav("feed", { id: video.id })} style={{
      width: "100%", aspectRatio: "9/16",
      background: "#000", border: `1px solid ${T.gold}22`,
      position: "relative", overflow: "hidden", cursor: "pointer",
    }}>
      <video src={video.shorts} muted loop playsInline preload="metadata"
        style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      {video.scripture && (
        <div style={{
          position: "absolute", top: 8, left: 8,
          fontSize: 8, color: T.gold,
          fontFamily: "'Cinzel', serif", letterSpacing: "0.18em", textTransform: "uppercase",
          textShadow: "0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7)",
        }}>{video.scripture}</div>
      )}
      <div style={{ position: "absolute", bottom: 8, left: 8, right: 8 }}>
        <div style={{
          fontFamily: "'Cinzel', serif", fontSize: 12, color: T.paper,
          lineHeight: 1.2, letterSpacing: "0.02em",
          textShadow: "0 1px 6px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.7)",
        }}>{video.title}</div>
      </div>
    </div>
  );
}

// =============================================================================
// Mobile shell — wraps any desktop page if no mobile variant exists.
// Most desktop pages are already responsive-enough; the home is the worst
// offender, so MobileHome replaces it. Other pages use the desktop page,
// but get the mobile nav + drawer chrome.
// =============================================================================
function MobileShell({ active, nav, params, page }) {
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => { setMenuOpen(false); }, [active]);

  // Route to mobile-native pages where they exist, fall back to desktop.
  const MOBILE_PAGES = {
    home: MobileHome,
    blessings: MobileBlessings,
    book: MobileBook,
    bible: MobileBible,
    audio: MobileAudio,
    stories: MobileStories,
    shadow: MobileShadow,
    community: MobileCommunity,
    about: MobileAbout,
    feed: VideoFeedPage,
  };
  const PageToRender = MOBILE_PAGES[active] || PAGES_LOOKUP[page] || HomePage;
  const isFeed = active === "feed";

  return (
    <div style={{ minHeight: "100vh", background: T.bg, color: T.paper, fontFamily: "'EB Garamond', Georgia, serif", paddingBottom: isFeed ? 0 : 80 }}>
      {!isFeed && <MobileNav active={active} nav={nav} onMenu={() => setMenuOpen(true)} />}
      <MobileDrawer open={menuOpen} onClose={() => setMenuOpen(false)} active={active} nav={nav} />
      <PageToRender nav={nav} params={params} />
      {!isFeed && <MobileFooter nav={nav} />}
      {!isFeed && (active === "home" || active === "shadow") && <FeedLaunchButton nav={nav} />}
    </div>
  );
}

function MobileFooter({ nav }) {
  return (
    <footer style={{ padding: "30px 18px 30px", borderTop: `1px solid ${T.gold}22`, background: T.bgDeep || T.bg, textAlign: "center" }}>
      <TribeTruthLogo width={140} />
      <p style={{ marginTop: 16, fontSize: 14, color: T.paperDim, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif" }}>
        A monthly practice of scripture.<br/>tribe-truth.com
      </p>
      <p style={{ marginTop: 18, fontSize: 10, color: T.ash, fontFamily: "'Cinzel', serif", letterSpacing: "0.22em", textTransform: "uppercase" }}>
        © 2026 · Soli Deo Gloria
      </p>
    </footer>
  );
}

// Lookup table the shell uses. Filled by app.jsx once PAGES is available.
let PAGES_LOOKUP = {};
function registerMobilePages(p) { PAGES_LOOKUP = p; }

// =============================================================================
// MOBILE BLESSINGS — index + detail
// =============================================================================
function MobileBlessings({ nav, params }) {
  if (params?.id) return <MobileBlessingDetail nav={nav} id={params.id} />;
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ padding: "32px 18px 16px", textAlign: "center" }}>
        <SmallCaps color={T.gold} letterSpacing="0.4em" size={10}>The monthly practice</SmallCaps>
        <h1 style={{ fontFamily: "'Cinzel', serif", fontSize: 30, fontWeight: 500, margin: "14px 0 10px", color: T.paper, letterSpacing: "0.02em", lineHeight: 1.1 }}>
          The Twelve <span style={{ color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", fontWeight: 400 }}>Blessings.</span>
        </h1>
        <p style={{ fontSize: 15, color: T.paperDim, fontStyle: "italic", margin: 0, fontFamily: "'Cormorant Garamond', serif", lineHeight: 1.5 }}>
          A blessing for every month — named for the twelve tribes of Israel.
        </p>
      </section>
      <section style={{ padding: "12px 14px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {TRIBES.map((t) => (
            <div key={t.id} onClick={() => nav("blessings", { id: t.id })} style={{ position: "relative", overflow: "hidden", border: `1px solid ${T.gold}22`, cursor: "pointer", aspectRatio: "4/5" }}>
              <img src={tribeImg(t)} alt={t.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} loading="lazy" />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 35%, rgba(10,9,7,0.95) 100%)" }} />
              <div style={{ position: "absolute", top: 8, left: 8 }}>
                <SmallCaps color={T.gold} size={8}>{String(t.n).padStart(2, "0")}</SmallCaps>
              </div>
              <div style={{ position: "absolute", bottom: 10, left: 10, right: 10 }}>
                <div style={{ fontFamily: "'Cinzel', serif", fontSize: 16, color: T.paper, letterSpacing: "0.02em" }}>{t.name}</div>
                <div style={{ fontSize: 11, color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", marginTop: 2, lineHeight: 1.3 }}>{t.blessing}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function MobileBlessingDetail({ nav, id }) {
  const tribe = TRIBES.find(t => t.id === id);
  if (!tribe) return <MobileBlessings nav={nav} />;
  const instrTrack = {
    id: `twelve-${tribe.n}`, n: tribe.n,
    title: `${tribe.name}'s Blessing`,
    audio: tribe.instrumental,
    albumId: "twelve", albumTitle: "The Twelve Blessings",
    artist: "Instrumentals", cover: CDN_ASSETS.covers.twelve,
    blessing: tribe.blessing,
  };
  const allInstr = ALBUMS.find(a => a.id === "twelve").tracks.map((t) => ({
    ...t, id: `twelve-${t.n}`, albumId: "twelve",
    albumTitle: "The Twelve Blessings", artist: "Instrumentals",
    cover: CDN_ASSETS.covers.twelve,
  }));
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ position: "relative", overflow: "hidden", aspectRatio: "4/3" }}>
        <img src={tribeImg(tribe, "hero")} alt={tribe.name} onError={(e) => { e.currentTarget.src = tribeImg(tribe, "header"); }} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(10,9,7,0.4) 0%, rgba(10,9,7,0.9) 100%)" }} />
        <div style={{ position: "absolute", inset: 0, padding: "18px 16px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <button onClick={() => nav("blessings")} style={{ alignSelf: "flex-start", background: "rgba(0,0,0,0.4)", border: `1px solid ${T.gold}44`, color: T.paper, padding: "8px 12px", fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", cursor: "pointer" }}>← All</button>
          <div>
            <SmallCaps color={T.gold} size={9}>Month {String(tribe.n).padStart(2, "0")}</SmallCaps>
            <h1 style={{ fontFamily: "'Cinzel', serif", fontSize: 40, fontWeight: 500, margin: "8px 0 4px", color: T.paper, letterSpacing: "0.02em", lineHeight: 0.95 }}>{tribe.name}</h1>
            <p style={{ fontSize: 17, color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", margin: 0 }}>{tribe.blessing}</p>
          </div>
        </div>
      </section>
      <section style={{ padding: "16px 14px" }}>
        <div style={{ padding: 14, background: T.bgRise, border: `1px solid ${T.gold}33`, display: "flex", alignItems: "center", gap: 14 }}>
          <PlayButton track={instrTrack} queue={allInstr} queueLabel="The Twelve Blessings" size="md" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <SmallCaps color={T.gold} size={9}>Instrumental score</SmallCaps>
            <div style={{ fontFamily: "'Cinzel', serif", fontSize: 14, color: T.paper, marginTop: 2 }}>{tribe.name}&rsquo;s Blessing</div>
          </div>
        </div>
      </section>
      <section style={{ padding: "16px 14px" }}>
        <SmallCaps color={T.goldDeep} size={10}>The Blessing</SmallCaps>
        <h2 style={{ fontFamily: "'Cinzel', serif", fontSize: 20, fontWeight: 500, color: T.paper, margin: "10px 0 0", letterSpacing: "0.02em" }}>{blessingTitleFor(tribe.id)}</h2>
        <p style={{ marginTop: 10, fontFamily: "'Cormorant Garamond', serif", fontSize: 16, lineHeight: 1.65, color: T.paper, fontStyle: "italic", margin: "10px 0 0", whiteSpace: "pre-line" }}>
          {blessingTextFor(tribe.id)}
        </p>
      </section>
      <section style={{ padding: "16px 14px 32px" }}>
        <SmallCaps color={T.goldDeep} size={10}>Scripture</SmallCaps>
        {blessingScripturesFor(tribe.id).map((s, i) => (
          <div key={i} style={{ marginTop: 12, padding: 16, background: T.bgRise, border: `1px solid ${T.gold}22` }}>
            <SmallCaps color={T.gold} size={10}>{s.ref}</SmallCaps>
            <p style={{ marginTop: 8, fontFamily: "'Cormorant Garamond', serif", fontSize: 15, lineHeight: 1.55, color: T.paperDim, fontStyle: "italic", margin: "8px 0 0" }}>
              {s.text}
            </p>
          </div>
        ))}
      </section>
    </div>
  );
}

// =============================================================================
// MOBILE BOOK — index + chapter
// =============================================================================
function MobileBook({ nav, params }) {
  if (params?.chapter) return <MobileBookChapter nav={nav} chapterN={Number(params.chapter)} />;
  const queue = BOOK_CHAPTERS.map((c) => ({
    id: `book-${c.n}`, n: c.n, title: c.title, audio: c.audio,
    albumId: "book", albumTitle: "The Twelve Blessings Book",
    artist: "Audiobook", cover: CDN_ASSETS.bookPrologue,
  }));
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ position: "relative", overflow: "hidden", padding: "20px 16px 16px" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: `url(${CDN_ASSETS.bookBg})`, backgroundSize: "cover", opacity: 0.15 }} />
        <div style={{ position: "relative", display: "flex", gap: 14, alignItems: "center" }}>
          <img src={CDN_ASSETS.bookPrologue} alt="" style={{ width: 110, height: 110, objectFit: "cover", border: `1px solid ${T.gold}55`, flexShrink: 0 }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <SmallCaps color={T.gold} size={9}>The Book</SmallCaps>
            <h1 style={{ fontFamily: "'Cinzel', serif", fontSize: 22, fontWeight: 500, margin: "6px 0 4px", color: T.paper, letterSpacing: "0.02em", lineHeight: 1.1 }}>
              The Twelve <span style={{ color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", fontWeight: 400 }}>Blessings Book</span>
            </h1>
            <div style={{ fontSize: 12, color: T.paperFaint, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif" }}>22 chapters · ~3 hours</div>
          </div>
        </div>
      </section>
      <section style={{ padding: "12px 14px 32px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {queue.map((t, i) => (
            <div key={t.id} style={{
              display: "grid", gridTemplateColumns: "auto 24px 1fr auto", alignItems: "center", gap: 10,
              padding: "10px 12px", background: T.bgRise, border: `1px solid ${T.gold}22`,
            }}>
              <PlayButton track={t} queue={queue} queueLabel="The Twelve Blessings Book" size="sm" />
              <SmallCaps color={T.goldDeep} size={9}>{String(t.n).padStart(2, "0")}</SmallCaps>
              <div onClick={() => nav("book", { chapter: t.n })} style={{ minWidth: 0, cursor: "pointer" }}>
                <div style={{ fontFamily: "'Cinzel', serif", fontSize: 13, color: T.paper, lineHeight: 1.25, letterSpacing: "0.01em" }}>{BOOK_CHAPTERS[i].title}</div>
              </div>
              <button onClick={() => nav("book", { chapter: t.n })} style={{ padding: "5px 9px", background: "transparent", border: `1px solid ${T.gold}33`, color: T.gold, cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase" }}>Read</button>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function MobileBookChapter({ nav, chapterN }) {
  const ch = BOOK_CHAPTERS.find(c => c.n === chapterN) || BOOK_CHAPTERS[0];
  const idx = BOOK_CHAPTERS.indexOf(ch);
  const prev = BOOK_CHAPTERS[idx - 1];
  const next = BOOK_CHAPTERS[idx + 1];
  const [blocks, setBlocks] = useState(null);
  useEffect(() => {
    let cancelled = false;
    const cands = ch.jsonCandidates || [];
    if (!cands.length) {
      setBlocks((window.BOOK_FALLBACK_BLOCKS || {})[ch.n] || []);
      return;
    }
    setBlocks(null);
    (async () => {
      for (const url of cands) {
        try {
          const r = await fetch(url);
          if (!r.ok) continue;
          const d = await r.json();
          if (cancelled) return;
          const bl = Array.isArray(d) ? d : (d.blocks || d.story || d.sections);
          if (Array.isArray(bl) && bl.length) { setBlocks(bl); return; }
        } catch { /* try next */ }
      }
      if (!cancelled) setBlocks((window.BOOK_FALLBACK_BLOCKS || {})[ch.n] || []);
    })();
    return () => { cancelled = true; };
  }, [chapterN]);
  const queue = BOOK_CHAPTERS.map((c) => ({
    id: `book-${c.n}`, n: c.n, title: c.title, audio: c.audio,
    albumId: "book", albumTitle: "The Twelve Blessings Book",
    artist: "Audiobook", cover: CDN_ASSETS.bookPrologue,
  }));
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ position: "relative", padding: "16px 14px 14px", borderBottom: `1px solid ${T.gold}22` }}>
        <button onClick={() => nav("book")} style={{ background: "transparent", border: "none", color: T.paperDim, cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", padding: 0, marginBottom: 12 }}>← The Book</button>
        <SmallCaps color={T.gold} size={9}>Chapter {String(ch.n).padStart(2, "0")} of {BOOK_CHAPTERS.length}</SmallCaps>
        <h1 style={{ fontFamily: "'Cinzel', serif", fontSize: 22, fontWeight: 500, margin: "8px 0 12px", color: T.paper, letterSpacing: "0.02em", lineHeight: 1.15 }}>{ch.title}</h1>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <PlayButton track={queue[idx]} queue={queue} queueLabel="The Twelve Blessings Book" size="md" />
          <div style={{ fontSize: 12, color: T.paperDim, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif" }}>Listen alongside the text</div>
        </div>
      </section>
      <section style={{ padding: "20px 16px 28px" }}>
        {blocks && blocks.length > 0 ? blocks.map((b, i) => {
          if (b.type === "scripture") {
            return (
              <div key={i} style={{ margin: "20px 0", padding: "14px 16px", borderLeft: `3px solid ${T.gold}`, background: `${T.gold}08` }}>
                <p style={{ margin: 0, fontFamily: "'Cinzel', serif", fontSize: 17, lineHeight: 1.45, color: T.paper, fontStyle: "italic" }}>&ldquo;{b.quote || b.text}&rdquo;</p>
                {b.reference && <div style={{ marginTop: 8, fontSize: 10, color: T.gold, fontFamily: "'Cinzel', serif", letterSpacing: "0.2em", textTransform: "uppercase" }}>{b.reference}</div>}
              </div>
            );
          }
          return <p key={i} style={{ fontFamily: "'EB Garamond', serif", fontSize: 17, lineHeight: 1.7, color: T.paper, margin: "0 0 18px" }}>{b.text}</p>;
        }) : (
          <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, color: T.paperFaint, fontStyle: "italic", textAlign: "center" }}>Press play above to hear this chapter.</p>
        )}
        <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between", gap: 12, paddingTop: 20, borderTop: `1px solid ${T.gold}22` }}>
          {prev ? <button onClick={() => nav("book", { chapter: prev.n })} style={{ flex: 1, background: "transparent", border: `1px solid ${T.gold}33`, color: T.paper, padding: "10px 12px", cursor: "pointer", textAlign: "left", fontFamily: "'Cinzel', serif" }}>
            <div style={{ fontSize: 9, color: T.paperFaint, letterSpacing: "0.2em", textTransform: "uppercase" }}>← Prev</div>
            <div style={{ marginTop: 4, fontSize: 12, color: T.paper, lineHeight: 1.2 }}>{prev.title}</div>
          </button> : <div style={{ flex: 1 }} />}
          {next ? <button onClick={() => nav("book", { chapter: next.n })} style={{ flex: 1, background: "transparent", border: `1px solid ${T.gold}33`, color: T.paper, padding: "10px 12px", cursor: "pointer", textAlign: "right", fontFamily: "'Cinzel', serif" }}>
            <div style={{ fontSize: 9, color: T.paperFaint, letterSpacing: "0.2em", textTransform: "uppercase" }}>Next →</div>
            <div style={{ marginTop: 4, fontSize: 12, color: T.paper, lineHeight: 1.2 }}>{next.title}</div>
          </button> : <div style={{ flex: 1 }} />}
        </div>
      </section>
    </div>
  );
}

// =============================================================================
// MOBILE AUDIO — hub + album detail
// =============================================================================
function MobileAudio({ nav, params }) {
  if (params?.album) return <MobileAudioAlbum nav={nav} albumId={params.album} />;
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ padding: "28px 18px 8px", textAlign: "center" }}>
        <SmallCaps color={T.gold} letterSpacing="0.4em" size={10}>Audio Hub</SmallCaps>
        <h1 style={{ fontFamily: "'Cinzel', serif", fontSize: 30, fontWeight: 500, margin: "12px 0 8px", color: T.paper, letterSpacing: "0.02em", lineHeight: 1.1 }}>
          Press play, <span style={{ color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", fontWeight: 400 }}>sit with it.</span>
        </h1>
        <p style={{ fontSize: 15, color: T.paperDim, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", margin: 0, lineHeight: 1.5 }}>
          Recitations, sung Psalms, audiobook, narrated stories — all free.
        </p>
      </section>
      <section style={{ padding: "20px 14px 12px" }}>
        <SmallCaps color={T.goldDeep} size={9}>Categories</SmallCaps>
        <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 8 }}>
          {[
            { eyebrow: "Audiobook", title: "The Twelve Blessings Book", body: "22 chapters", img: CDN_ASSETS.bookPrologue, onClick: () => nav("book") },
            { eyebrow: "The Twelve · sung", title: "Twelve Blessings (Sung)", body: "One for every tribe", img: CDN_ASSETS.covers.twelve, onClick: () => nav("audio", { album: "blessings-sung" }) },
            { eyebrow: "Stories", title: "Biblical Stories", body: "Jacob + the twelve tribes", img: CDN_ASSETS.jacobHeader, onClick: () => nav("stories") },
            { eyebrow: "Instrumentals", title: "Twelve Blessing Scores", body: "12 original instrumentals", img: CDN_ASSETS.covers.twelve, onClick: () => nav("audio", { album: "twelve" }) },
          ].map((c, i) => (
            <div key={i} onClick={c.onClick} style={{ display: "flex", gap: 12, alignItems: "center", padding: 10, background: T.bgRise, border: `1px solid ${T.gold}22`, cursor: "pointer" }}>
              <img src={c.img} alt="" style={{ width: 60, height: 60, objectFit: "cover", flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <SmallCaps color={T.gold} size={8}>{c.eyebrow}</SmallCaps>
                <div style={{ marginTop: 3, fontFamily: "'Cinzel', serif", fontSize: 14, color: T.paper, letterSpacing: "0.02em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.title}</div>
                <div style={{ fontSize: 11, color: T.paperFaint, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic" }}>{c.body}</div>
              </div>
              <div style={{ color: T.gold, fontSize: 16 }}>▸</div>
            </div>
          ))}
        </div>
      </section>
      <section style={{ padding: "20px 14px 32px" }}>
        <SmallCaps color={T.goldDeep} size={9}>The Shadow of God · Psalm albums</SmallCaps>
        <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 8 }}>
          {ALBUMS.slice(0, 4).map(a => (
            <div key={a.id} onClick={() => nav("audio", { album: a.id })} style={{ display: "flex", gap: 12, alignItems: "center", padding: 10, background: T.bgRise, border: `1px solid ${T.gold}22`, cursor: "pointer" }}>
              <img src={a.cover} alt="" style={{ width: 60, height: 60, objectFit: "cover", flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <SmallCaps color={T.goldDeep} size={8}>{a.tracks.length} tracks</SmallCaps>
                <div style={{ marginTop: 3, fontFamily: "'Cinzel', serif", fontSize: 14, color: T.paper, letterSpacing: "0.02em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.title}</div>
                <div style={{ fontSize: 11, color: T.paperFaint, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic" }}>{a.artist}</div>
              </div>
              <div style={{ color: T.gold, fontSize: 16 }}>▸</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function MobileAudioAlbum({ nav, albumId }) {
  const album = ALBUMS.find(a => a.id === albumId);
  if (!album) return <MobileAudio nav={nav} />;
  const queue = album.tracks.map((t) => ({
    ...t, id: `${album.id}-${t.n}`, albumId: album.id,
    albumTitle: album.title, artist: album.artist, cover: album.cover,
  }));
  const p = usePlayer();
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ position: "relative", padding: "16px 14px 18px", borderBottom: `1px solid ${T.gold}22` }}>
        <button onClick={() => nav("audio")} style={{ background: "transparent", border: "none", color: T.paperDim, cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", padding: 0, marginBottom: 12 }}>← Audio</button>
        <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
          <img src={album.cover} alt="" style={{ width: 110, height: 110, objectFit: "cover", border: `1px solid ${T.gold}44`, flexShrink: 0 }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <SmallCaps color={T.gold} size={9}>{album.year} · {album.tracks.length} tracks</SmallCaps>
            <h1 style={{ fontFamily: "'Cinzel', serif", fontSize: 22, fontWeight: 500, margin: "6px 0 4px", color: T.paper, letterSpacing: "0.02em", lineHeight: 1.15 }}>{album.title}</h1>
            <p style={{ fontSize: 12, color: T.paperDim, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", margin: 0, lineHeight: 1.4 }}>{album.blurb}</p>
          </div>
        </div>
        <button onClick={() => p.playTrack(queue[0], { queue, queueLabel: album.title })} style={{ marginTop: 12, width: "100%", padding: "13px 0", background: T.gold, color: T.ink, border: "none", cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", fontWeight: 600 }}>▶ Play Album</button>
      </section>
      <section style={{ padding: "8px 0 32px" }}>
        {queue.map(t => (
          <div key={t.id} onClick={() => p.playTrack(t, { queue, queueLabel: album.title })} style={{
            display: "grid", gridTemplateColumns: "auto 24px 1fr auto", gap: 10, alignItems: "center",
            padding: "10px 14px", borderBottom: `1px solid ${T.gold}11`,
            background: p.isCurrent(t.id) ? `${T.gold}10` : "transparent",
          }}>
            <PlayButton track={t} queue={queue} queueLabel={album.title} size="sm" />
            <SmallCaps color={T.goldDeep} size={9}>{String(t.n).padStart(2, "0")}</SmallCaps>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: "'Cinzel', serif", fontSize: 13, color: T.paper, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", letterSpacing: "0.01em" }}>{t.title}</div>
              {t.psalm && <div style={{ fontSize: 10, color: T.paperFaint, fontFamily: "ui-monospace, monospace", letterSpacing: "0.12em" }}>Psalm {t.psalm}</div>}
            </div>
            <span style={{ fontSize: 18, color: T.gold }}>▸</span>
          </div>
        ))}
      </section>
    </div>
  );
}

// =============================================================================
// MOBILE BIBLE
// =============================================================================
function MobileBible({ nav, params }) {
  const books = window.BIBLE_BOOKS || [];
  const cache = window.BIBLE_CACHE || {};
  const initial = books.find(b => b.name === params?.book || b.file === params?.book) || books.find(b => b.file === "Psalms") || books[0];
  const [bookFile, setBookFile] = useState(initial?.file || "Psalms");
  const [chapter, setChapter] = useState(params?.chapter ? Number(params.chapter) : 36);
  const [data, setData] = useState(cache[bookFile] || null);
  const [state, setState] = useState(cache[bookFile] ? "loaded" : "loading");
  const book = books.find(b => b.file === bookFile);

  // React to external nav
  useEffect(() => {
    if (params?.book) {
      const m = books.find(b => b.name === params.book || b.file === params.book);
      if (m && m.file !== bookFile) setBookFile(m.file);
    }
    if (params?.chapter) setChapter(Number(params.chapter));
  }, [params?.book, params?.chapter]);

  // Fetch
  useEffect(() => {
    if (!book) return;
    if (cache[book.file]) { setData(cache[book.file]); setState("loaded"); return; }
    setState("loading"); setData(null);
    fetch(`${CDN}/biblestudy/Bible-kjv-master/${book.file}.json`)
      .then(r => { if (!r.ok) throw new Error("x"); return r.json(); })
      .then(d => { cache[book.file] = d; setData(d); setState("loaded"); })
      .catch(() => {
        const fb = window.KJV_FALLBACK && window.KJV_FALLBACK[book.file];
        if (fb) { setData(fb); setState("preview"); }
        else { setData(null); setState("missing"); }
      });
  }, [bookFile]);

  const chapters = data?.chapters || [];
  const chapterNums = chapters.map(c => Number(c.chapter));
  const current = chapters.find(c => Number(c.chapter) === chapter) || chapters[0];
  const curIdx = chapterNums.indexOf(current ? Number(current.chapter) : chapter);
  const crossLink = book?.name === "Psalms" ? trackForPsalm(chapter) : null;

  const goChapter = (delta) => {
    const ni = curIdx + delta;
    if (ni >= 0 && ni < chapterNums.length) setChapter(chapterNums[ni]);
  };

  return (
    <div style={{ background: T.bg, color: T.paper, position: "relative" }}>
      <BibleAmbient />
      {/* Pickers */}
      <section style={{ padding: "16px 14px 12px", position: "sticky", top: "calc(56px + env(safe-area-inset-top))", zIndex: 20, background: "rgba(10,9,7,0.96)", backdropFilter: "blur(10px)", borderBottom: `1px solid ${T.gold}22` }}>
        <SmallCaps color={T.gold} letterSpacing="0.4em" size={9}>King James Version</SmallCaps>
        <div style={{ marginTop: 10, display: "flex", gap: 8 }}>
          <select value={bookFile} onChange={(e) => { setBookFile(e.target.value); setChapter(1); }}
            style={{ flex: 2, padding: "11px 10px", background: T.bgRise, color: T.paper, border: `1px solid ${T.gold}44`, fontFamily: "'Cinzel', serif", fontSize: 13, outline: "none" }}>
            {books.map(b => <option key={b.file} value={b.file}>{b.name}</option>)}
          </select>
          <select value={chapter} onChange={(e) => setChapter(Number(e.target.value))}
            style={{ flex: 1, padding: "11px 10px", background: T.bgRise, color: T.paper, border: `1px solid ${T.gold}44`, fontFamily: "'Cinzel', serif", fontSize: 13, outline: "none" }}>
            {(chapterNums.length ? chapterNums : [chapter]).map(n => <option key={n} value={n}>Ch. {n}</option>)}
          </select>
        </div>
      </section>

      {/* Title */}
      <section style={{ padding: "20px 16px 8px", position: "relative", zIndex: 1 }}>
        <h1 style={{ fontFamily: "'Cinzel', serif", fontSize: 34, fontWeight: 500, margin: 0, color: T.paper, letterSpacing: "0.02em", lineHeight: 1 }}>
          {book?.name} <span style={{ color: T.gold }}>{chapter}</span>
        </h1>
      </section>

      {/* Cross-link to song */}
      {crossLink && (
        <section style={{ padding: "8px 14px" }}>
          <CrossLinkBar track={crossLink} />
        </section>
      )}

      {/* Verses */}
      <section style={{ padding: "12px 18px 32px", position: "relative", zIndex: 1 }}>
        {state === "loading" && <div style={{ padding: 40, textAlign: "center", color: T.paperFaint, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic" }}>Loading scripture…</div>}
        {state === "preview" && (
          <div style={{ marginBottom: 18, padding: "10px 14px", background: `${T.gold}10`, border: `1px dashed ${T.gold}44`, fontSize: 12, color: T.paperDim, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic" }}>
            Preview — a few bundled chapters. The live site streams the full KJV.
          </div>
        )}
        {state === "missing" && <div style={{ padding: 40, textAlign: "center", color: T.paperFaint, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic" }}>Couldn&rsquo;t load {book?.name}.</div>}
        {current && (
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 19, lineHeight: 1.75, color: T.paper }}>
            {current.verses.map(v => (
              <p key={v.verse} style={{ margin: "0 0 14px" }}>
                <span style={{ fontSize: 11, color: T.goldDeep, fontFamily: "'Cinzel', serif", marginRight: 8, verticalAlign: "super" }}>{v.verse}</span>
                {v.text}
              </p>
            ))}
          </div>
        )}
        {/* Prev/next */}
        <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", gap: 12 }}>
          <button onClick={() => goChapter(-1)} disabled={curIdx <= 0}
            style={{ flex: 1, padding: "12px 0", background: "transparent", border: `1px solid ${curIdx <= 0 ? T.ash : T.gold + "55"}`, color: curIdx <= 0 ? T.ash : T.gold, cursor: curIdx <= 0 ? "default" : "pointer", fontFamily: "'Cinzel', serif", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>← Prev</button>
          <button onClick={() => goChapter(1)} disabled={curIdx >= chapterNums.length - 1}
            style={{ flex: 1, padding: "12px 0", background: "transparent", border: `1px solid ${curIdx >= chapterNums.length - 1 ? T.ash : T.gold + "55"}`, color: curIdx >= chapterNums.length - 1 ? T.ash : T.gold, cursor: curIdx >= chapterNums.length - 1 ? "default" : "pointer", fontFamily: "'Cinzel', serif", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>Next →</button>
        </div>
      </section>
    </div>
  );
}

// =============================================================================
// MOBILE STORIES
// =============================================================================
function MobileStories({ nav, params }) {
  if (params?.id) return <StoriesPage nav={nav} params={params} />;
  const stories = [
    { id: "jacob", n: 13, name: "Jacob", subtitle: "The patriarch", img: CDN_ASSETS.jacobHeader },
    ...TRIBES.map(t => ({ id: t.id, n: t.n, name: t.name, subtitle: t.blessing, img: tribeImg(t) })),
  ];
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ padding: "28px 18px 12px", textAlign: "center" }}>
        <SmallCaps color={T.gold} letterSpacing="0.4em" size={10}>Biblical Stories</SmallCaps>
        <h1 style={{ fontFamily: "'Cinzel', serif", fontSize: 28, fontWeight: 500, margin: "12px 0 8px", color: T.paper, letterSpacing: "0.02em", lineHeight: 1.1 }}>
          Stories of the <span style={{ color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", fontWeight: 400 }}>Twelve Tribes.</span>
        </h1>
      </section>
      <section style={{ padding: "12px 14px 32px" }}>
        <div onClick={() => nav("stories", { id: "jacob" })} style={{ position: "relative", overflow: "hidden", border: `1px solid ${T.gold}33`, marginBottom: 12, cursor: "pointer", aspectRatio: "16/10" }}>
          <img src={stories[0].img} alt="Jacob" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(10,9,7,0.95), rgba(10,9,7,0.4) 70%, transparent)" }} />
          <div style={{ position: "absolute", left: 16, bottom: 16, right: 16 }}>
            <SmallCaps color={T.gold} size={9}>The Patriarch</SmallCaps>
            <h3 style={{ fontFamily: "'Cinzel', serif", fontSize: 24, fontWeight: 500, color: T.paper, margin: "6px 0 2px", letterSpacing: "0.02em" }}>Jacob — Israel</h3>
            <p style={{ fontSize: 13, color: T.paper, fontStyle: "italic", margin: 0, fontFamily: "'Cormorant Garamond', serif" }}>The father whose twelve sons became the twelve tribes.</p>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {stories.slice(1).map(s => (
            <div key={s.id} onClick={() => nav("stories", { id: s.id })} style={{ position: "relative", overflow: "hidden", border: `1px solid ${T.gold}22`, cursor: "pointer", aspectRatio: "4/3" }}>
              <img src={s.img} alt={s.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(10,9,7,0.95) 100%)" }} />
              <div style={{ position: "absolute", left: 10, bottom: 10, right: 10 }}>
                <SmallCaps color={T.gold} size={8}>{String(s.n).padStart(2, "0")}</SmallCaps>
                <div style={{ marginTop: 3, fontFamily: "'Cinzel', serif", fontSize: 14, color: T.paper, letterSpacing: "0.02em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{s.name}</div>
                <div style={{ fontSize: 10, color: T.paperDim, fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", lineHeight: 1.3 }}>{s.subtitle}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

// =============================================================================
// MOBILE SHADOW — band sub-pages
// =============================================================================
function MobileShadow({ nav, params }) {
  const sub = params?.sub;
  if (sub === "song" && params?.id) return <MobileSongDetail nav={nav} id={params.id} />;
  if (sub === "videos") return <MobileShadowVideos nav={nav} />;
  if (sub === "album" && params?.id) return <MobileAudioAlbum nav={nav} albumId={params.id} />;
  return <MobileShadowHome nav={nav} />;
}

function MobileShadowHome({ nav }) {
  const cat = useVideoCatalog();
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ position: "relative", padding: "28px 18px", textAlign: "center", overflow: "hidden" }}>
        <ScrollBg opacity={0.1} blendMode="overlay" />
        <EmberField density={14} intensity={0.35} />
        <div style={{ position: "relative" }}>
          <SmallCaps color={T.gold} letterSpacing="0.4em" size={10}>A music project within TribeTruth</SmallCaps>
          <div style={{ marginTop: 20, marginBottom: 16, display: "flex", justifyContent: "center" }}>
            <Logo width={240} glow />
          </div>
          <p style={{ fontSize: 16, color: T.paper, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", margin: 0, lineHeight: 1.45 }}>
            Songs from the shadow of His wings.
          </p>
          <button onClick={() => nav("shadow", { sub: "videos" })} style={{ marginTop: 18, padding: "12px 22px", background: T.gold, color: T.ink, border: "none", cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", fontWeight: 600 }}>▶ Watch Videos</button>
        </div>
      </section>
      <section style={{ padding: "16px 14px 24px" }}>
        <SmallCaps color={T.goldDeep} size={10}>Featured</SmallCaps>
        <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {cat.featured.slice(0, 6).map(v => v && (
            <MobileVideoCard key={v.id} video={v} nav={(_, params) => nav("feed", { id: params.id })} />
          ))}
        </div>
      </section>
      <section style={{ padding: "8px 14px 24px" }}>
        <SmallCaps color={T.goldDeep} size={10}>Albums</SmallCaps>
        <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 8 }}>
          {ALBUMS.slice(0, 4).map(a => (
            <div key={a.id} onClick={() => nav("shadow", { sub: "album", id: a.id })} style={{ display: "flex", gap: 12, alignItems: "center", padding: 10, background: T.bgRise, border: `1px solid ${T.gold}22`, cursor: "pointer" }}>
              <img src={a.cover} alt="" style={{ width: 56, height: 56, objectFit: "cover", flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <SmallCaps color={T.goldDeep} size={8}>{a.tracks.length} tracks</SmallCaps>
                <div style={{ marginTop: 2, fontFamily: "'Cinzel', serif", fontSize: 13, color: T.paper, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.title}</div>
              </div>
              <span style={{ color: T.gold, fontSize: 16 }}>▸</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function MobileShadowVideos({ nav }) {
  const cat = useVideoCatalog();
  const [filter, setFilter] = useState("all");
  const filters = [
    { id: "all", label: `All${cat.videos.length ? " · " + cat.videos.length : ""}` },
    ...cat.collections.map(c => ({ id: c.id, label: c.title })),
  ];
  const shown = filter === "all" ? cat.videos : cat.videos.filter(v => v.collectionId === filter);
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ padding: "20px 16px 12px" }}>
        <button onClick={() => nav("shadow")} style={{ background: "transparent", border: "none", color: T.paperDim, cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", padding: 0, marginBottom: 12 }}>← The Shadow of God</button>
        <SmallCaps color={T.gold} letterSpacing="0.4em" size={10}>Gallery</SmallCaps>
        <h1 style={{ marginTop: 8, fontFamily: "'Cinzel', serif", fontSize: 28, fontWeight: 500, color: T.paper, letterSpacing: "0.02em", lineHeight: 1.1 }}>Music <span style={{ color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", fontWeight: 400 }}>Videos</span></h1>
      </section>
      <section style={{ padding: "8px 14px 8px", overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
        <div style={{ display: "flex", gap: 6, minWidth: "max-content" }}>
          {filters.map(f => (
            <button key={f.id} onClick={() => setFilter(f.id)} style={{
              padding: "8px 12px", background: filter === f.id ? T.gold : "transparent",
              color: filter === f.id ? T.ink : T.paperDim,
              border: `1px solid ${filter === f.id ? T.gold : T.gold + "33"}`,
              fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
              fontWeight: filter === f.id ? 600 : 500, cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0,
            }}>{f.label}</button>
          ))}
        </div>
      </section>
      <section style={{ padding: "12px 14px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {shown.map(v => (
            <MobileVideoCard key={v.id} video={v} nav={(_, params) => nav("feed", { id: params.id })} />
          ))}
        </div>
      </section>
    </div>
  );
}

function MobileSongDetail({ nav, id }) {
  const cat = useVideoCatalog();
  const v = cat.find(id) || cat.hero;
  if (!v) return null;
  const coll = cat.collections.find(c => c.id === v.collectionId);
  const siblings = (coll?.videos || []).filter(x => x.id !== v.id).slice(0, 4);
  const audioTrack = v.psalm ? ALL_TRACKS.find(t => t.psalm === v.psalm) : null;
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ padding: "12px 14px 0" }}>
        <button onClick={() => nav("shadow", { sub: "videos" })} style={{ background: "transparent", border: "none", color: T.paperDim, cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", padding: 0 }}>← All Videos</button>
      </section>
      <section style={{ padding: "12px 14px" }}>
        <div style={{ width: "100%", maxWidth: 360, margin: "0 auto" }}>
          <FullVideoPlayer src={v.full} />
        </div>
      </section>
      <section style={{ padding: "8px 16px 16px" }}>
        <SmallCaps color={T.gold} size={9}>{v.scripture}</SmallCaps>
        <h1 style={{ marginTop: 8, fontFamily: "'Cinzel', serif", fontSize: 26, fontWeight: 500, color: T.paper, letterSpacing: "0.02em", lineHeight: 1.15 }}>{v.title}</h1>
        <p style={{ marginTop: 6, fontSize: 14, color: T.paperDim, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif" }}>
          From {v.collectionTitle}. <a href={v.full} target="_blank" rel="noopener noreferrer" style={{ color: T.gold, fontStyle: "normal", textDecoration: "underline", textUnderlineOffset: "3px" }}>Full Video</a>.
        </p>
      </section>
      {audioTrack && (
        <section style={{ padding: "0 14px 16px" }}>
          <CrossListenCard track={audioTrack} />
        </section>
      )}
      <SongLyrics video={v} />
      {siblings.length > 0 && (
        <section style={{ padding: "12px 14px 32px", borderTop: `1px solid ${T.gold}1a` }}>
          <SmallCaps color={T.goldDeep} size={10}>More from {coll.title}</SmallCaps>
          <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            {siblings.map(s => <MobileVideoCard key={s.id} video={s} nav={(_, params) => nav("feed", { id: params.id })} />)}
          </div>
        </section>
      )}
    </div>
  );
}

// =============================================================================
// MOBILE COMMUNITY / ABOUT — light wrappers
// =============================================================================
function MobileCommunity({ nav }) { return <CommunityPage nav={nav} />; }
function MobileAbout({ nav }) {
  return (
    <div style={{ background: T.bg, color: T.paper }}>
      <section style={{ padding: "32px 18px 16px", textAlign: "center" }}>
        <SmallCaps color={T.gold} letterSpacing="0.4em" size={10}>About</SmallCaps>
        <h1 style={{ marginTop: 14, fontFamily: "'Cinzel', serif", fontSize: 28, fontWeight: 500, color: T.paper, letterSpacing: "0.02em", lineHeight: 1.1 }}>
          What is <span style={{ color: T.gold, fontStyle: "italic", fontFamily: "'Cormorant Garamond', serif", fontWeight: 400 }}>TribeTruth?</span>
        </h1>
      </section>
      <section style={{ padding: "12px 18px 32px" }}>
        <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, lineHeight: 1.65, color: T.paper, fontStyle: "italic" }}>
          TribeTruth is a daily-rhythm Bible practice. The Twelve Blessings —
          one for every month of the year, named for the twelve tribes of
          Israel — read it, hear it sung, sit with it, journal on it, walk
          through the year together.
        </p>
        <p style={{ marginTop: 16, fontFamily: "'Cormorant Garamond', serif", fontSize: 16, lineHeight: 1.65, color: T.paperDim }}>
          The Shadow of God is the music project within TribeTruth — AI music
          videos and sung Psalms that serve as the soundtrack to the practice.
        </p>
      </section>
    </div>
  );
}

Object.assign(window, {
  MobileNav, MobileDrawer, MobileHome, MobileShell, MobileVideoCard, MobileFooter, registerMobilePages,
  MobileBlessings, MobileBlessingDetail, MobileBook, MobileBookChapter,
  MobileAudio, MobileAudioAlbum, MobileBible, MobileStories,
  MobileShadow, MobileShadowHome, MobileShadowVideos, MobileSongDetail,
  MobileCommunity, MobileAbout,
});