/opportunity: asset pass, ragged-edge system, perf and lint fixes

www/app/opportunity/OpportunityClient.tsx

@@ -1,35 +1,50 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useState, useSyncExternalStore } from 'react';
 import InlineEmailGate from '@/components/InlineEmailGate';
 import { OPPORTUNITY_GATE_SOURCE } from '@/lib/crm';
 import DeckShell from './components/DeckShell';
 import DebugCopyEditor from './components/DebugCopyEditor';
-import { ALL_PAGES, APPENDIX_PAGES, ACT_STARTS, PAGE_META } from './content';
+import { ALL_PAGES, APPENDIX_PAGES, PAGE_META } from './content';
 import { coverPage } from './content/act1';
 import './opportunity.css';
 
 const UNLOCK_KEY = 'fi_opportunity_unlocked_v1';
 
-export default function OpportunityClient() {
-  const [unlocked, setUnlocked] = useState(false);
-  const [debug, setDebug] = useState(false);
+// Client-only reads, expressed as external stores so hydration stays clean
+// (server snapshot false) without a setState-in-effect cascade. Reading
+// window.location instead of useSearchParams keeps the page statically
+// prerenderable (no Suspense boundary required).
+const emptySubscribe = () => () => {};
+const readStoredUnlock = () => {
+  try {
+    return localStorage.getItem(UNLOCK_KEY) === '1';
+  } catch {
+    return false;
+  }
+};
+const readDebugFlag = () =>
+  new URLSearchParams(window.location.search).get('debug') === 'true';
+const serverSnapshot = () => false;
 
-  useEffect(() => {
-    try {
-      if (localStorage.getItem(UNLOCK_KEY) === '1') setUnlocked(true);
-    } catch {}
-    // window.location instead of useSearchParams keeps the page statically
-    // prerenderable (no Suspense boundary required).
-    setDebug(
-      new URLSearchParams(window.location.search).get('debug') === 'true'
-    );
-  }, []);
+export default function OpportunityClient() {
+  const storedUnlock = useSyncExternalStore(
+    emptySubscribe,
+    readStoredUnlock,
+    serverSnapshot
+  );
+  const debug = useSyncExternalStore(
+    emptySubscribe,
+    readDebugFlag,
+    serverSnapshot
+  );
+  const [unlockedNow, setUnlockedNow] = useState(false);
+  const unlocked = unlockedNow || storedUnlock;
 
   const handleUnlock = () => {
     try {
       localStorage.setItem(UNLOCK_KEY, '1');
     } catch {}
-    setUnlocked(true);
+    setUnlockedNow(true);
   };
 
   const gate = unlocked ? null : (
@@ -47,11 +62,7 @@ export default function OpportunityClient() {
 
   return (
     <>
-      <DeckShell
-        pages={pages}
-        railActs={unlocked ? ACT_STARTS : []}
-        pageMeta={PAGE_META}
-      />
+      <DeckShell pages={pages} pageMeta={PAGE_META} />
       {debug && (
         <DebugCopyEditor refreshKey={unlocked ? 'unlocked' : 'locked'} />
       )}

www/app/opportunity/components/DebugCopyEditor.tsx

@@ -47,7 +47,7 @@ const BAND_ICONS = [
   'play',
   'close',
 ] as const;
-const DEFAULT_BAND_ICON = 'heart';
+const DEFAULT_BAND_ICON = 'tree';
 
 function setBandIcon(name: string) {
   document.documentElement.style.setProperty(
@@ -117,7 +117,7 @@ export default function DebugCopyEditor({
           'h1, h2, h3, h4, p, figcaption, li, td, th, ' +
             '.deck-stat-tile-value, .deck-stat-tile-label, ' +
             '.deck-tier-price, .deck-tier-meta, ' +
-            '.deck-ledger-label, .deck-ledger-value'
+            '.deck-ledger-label, .deck-ledger-value, .deck-media-caption'
         );
         let i = 0;
         targets.forEach(target => {

www/app/opportunity/components/DeckShell.tsx

@@ -5,11 +5,9 @@ import DriftingLeaves from './DriftingLeaves';
 
 export default function DeckShell({
   pages,
-  railActs,
   pageMeta,
 }: {
   pages: ReactNode[];
-  railActs: Array<{ page: number }>;
   pageMeta: Array<{
     act: string;
     counter: string;
@@ -73,7 +71,6 @@ export default function DeckShell({
     return () => observer.disconnect();
   }, [pages.length]);
 
-  const actStarts = new Set(railActs.map(a => a.page));
   return (
     <div className="deck">
       <div className="deck-ambient" aria-hidden="true">
@@ -95,20 +92,6 @@ export default function DeckShell({
         dark={pageMeta[current - 1]?.dark === true}
       />
       {pages}
-      <nav
-        className={`deck-rail${pageMeta[current - 1]?.dark ? ' deck-rail-dark' : ''}`}
-        aria-label="Deck pages"
-      >
-        {pages.map((_, i) => (
-          <a
-            key={i}
-            href={`#page-${i + 1}`}
-            aria-label={`Page ${i + 1}`}
-            className={`${i + 1 === current ? 'active ' : ''}${actStarts.has(i + 1) ? 'act-start' : ''}`}
-            onClick={() => setCurrent(i + 1)}
-          />
-        ))}
-      </nav>
     </div>
   );
 }

www/app/opportunity/components/DeckVideo.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/** Ambient looping video that only plays while its slide is on screen, so
+ * off-screen slides cost no decode work. */
+export default function DeckVideo({
+  src,
+  className,
+  label,
+  poster,
+}: {
+  src: string;
+  className?: string;
+  label: string;
+  poster?: string;
+}) {
+  const ref = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const observer = new IntersectionObserver(
+      entries => {
+        const entry = entries[entries.length - 1];
+        clearTimeout(timer);
+        if (entry.isIntersecting) {
+          // Let the scroll snap settle before decode starts.
+          timer = setTimeout(() => {
+            el.play().catch(() => {});
+          }, 250);
+        } else {
+          el.pause();
+        }
+      },
+      { threshold: 0.6 }
+    );
+    observer.observe(el);
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <video
+      ref={ref}
+      src={src}
+      poster={poster}
+      className={className}
+      muted
+      loop
+      playsInline
+      preload="metadata"
+      aria-label={label}
+    />
+  );
+}

www/app/opportunity/components/MediaGallery.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+
+type Slide = {
+  /** Null renders an FPO placeholder until the real photo lands. */
+  src: string | null;
+  alt: string;
+  caption: ReactNode;
+};
+
+/** Framed photo with a thumbnail rail: clicking a thumb swaps the photo and
+ * its caption together. */
+export default function MediaGallery({ slides }: { slides: Slide[] }) {
+  const [active, setActive] = useState(0);
+  const current = slides[active];
+  return (
+    <div className="deck-gallery">
+      <div className="deck-media-figure deck-gallery-main">
+        <span className="deck-gallery-frame">
+          {current.src ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={current.src} alt={current.alt} />
+          ) : (
+            <span className="deck-gallery-fpo">{current.alt}</span>
+          )}
+        </span>
+        <span className="deck-media-caption">{current.caption}</span>
+      </div>
+      <div className="deck-gallery-thumbs" aria-label="Photos">
+        {slides.map((slide, i) => (
+          <button
+            key={i}
+            type="button"
+            aria-pressed={i === active}
+            aria-label={slide.alt}
+            className={i === active ? 'active' : undefined}
+            onClick={() => setActive(i)}
+          >
+            {slide.src ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img src={slide.src} alt="" />
+            ) : (
+              <span>{i + 1}</span>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

www/app/opportunity/components/archetypes.tsx

@@ -282,7 +282,7 @@ export function PricingTiers({
 }
 
 /** Accent-box callout. The act theme sets the background via .deck-band;
- * the icon comes from the --deck-band-icon CSS variable (heart by default,
+ * the icon comes from the --deck-band-icon CSS variable (tree by default,
  * swappable live from the ?debug=true bar). */
 export function Band({
   children,