/opportunity investor deck

www/app/api/gate-status/route.ts

@@ -1,7 +1,8 @@
 import { NextRequest, NextResponse, after } from 'next/server';
 import { consume } from '@/lib/rate-limit';
 import { readVerifiedCookie } from '@/lib/verified-session';
-import { createCrmContact, VIEWED_SOURCE } from '@/lib/crm';
+import { createCrmContact } from '@/lib/crm';
+import { resolveViewedSource } from '@/lib/gate-page';
 import { clientIp } from '@/lib/client-ip';
 
 const PING_LIMIT = 20;
@@ -22,11 +23,14 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
     return NextResponse.json({ verified: false });
   }
 
+  const viewedSource = resolveViewedSource(
+    request.nextUrl.searchParams.get('page')
+  );
   // Each verified page load logs a view in the CRM (source_events counts
   // repeats server-side). Over the ping limit we stop counting but never
   // block the unlock.
   if (consume(`gate-status:${clientIp(request)}`, PING_LIMIT, PING_WINDOW_MS)) {
-    after(() => createCrmContact(session.email, VIEWED_SOURCE));
+    after(() => createCrmContact(session.email, viewedSource));
   }
   return NextResponse.json({ verified: true });
 }

www/app/opportunity/OpportunityClient.tsx

@@ -0,0 +1,60 @@
+'use client';
+import { useEffect, useState } 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 { 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);
+
+  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'
+    );
+  }, []);
+
+  const handleUnlock = () => {
+    try {
+      localStorage.setItem(UNLOCK_KEY, '1');
+    } catch {}
+    setUnlocked(true);
+  };
+
+  const gate = unlocked ? null : (
+    <InlineEmailGate
+      onSuccess={handleUnlock}
+      source={OPPORTUNITY_GATE_SOURCE}
+      page="opportunity"
+      prompt="Enter your email to view the deck"
+    />
+  );
+
+  const pages = unlocked
+    ? [coverPage(null), ...ALL_PAGES.slice(1), ...APPENDIX_PAGES]
+    : [coverPage(gate)];
+
+  return (
+    <>
+      <DeckShell
+        pages={pages}
+        railActs={unlocked ? ACT_STARTS : []}
+        pageMeta={PAGE_META}
+      />
+      {debug && (
+        <DebugCopyEditor refreshKey={unlocked ? 'unlocked' : 'locked'} />
+      )}
+    </>
+  );
+}

www/app/opportunity/components/DebugCopyEditor.tsx

@@ -0,0 +1,302 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+type Entry = { el: HTMLElement; page: string; label: string; original: string };
+
+// Module-level so the React Compiler treats the DOM writes as external to
+// the component (mutating ref contents inside a handler trips its lint).
+function restoreOriginals(list: Entry[]) {
+  for (const e of list) {
+    e.el.textContent = e.original;
+  }
+}
+
+function setSlideHidden(page: string, hidden: boolean) {
+  const section = document.getElementById(`page-${page}`);
+  if (section) section.style.display = hidden ? 'none' : '';
+}
+
+function slideArchetype(page: string): string {
+  const section = document.getElementById(`page-${page}`);
+  return (
+    section
+      ?.querySelector('[data-archetype]')
+      ?.getAttribute('data-archetype') ?? ''
+  );
+}
+
+function slideTitle(page: string): string {
+  const section = document.getElementById(`page-${page}`);
+  const heading = section?.querySelector('h1, h2');
+  return heading?.textContent?.trim() ?? '(untitled)';
+}
+
+// The family-book UI kit icons in public/opportunity/icons/.
+const BAND_ICONS = [
+  'heart',
+  'tree',
+  'home',
+  'notebook',
+  'lightning',
+  'microphone',
+  'stacks',
+  'settings',
+  'battery',
+  'image',
+  'play',
+  'close',
+] as const;
+const DEFAULT_BAND_ICON = 'heart';
+
+function setBandIcon(name: string) {
+  document.documentElement.style.setProperty(
+    '--deck-band-icon',
+    `url('/opportunity/icons/${name}.png')`
+  );
+}
+
+const LAYOUT_VARIANTS = [
+  'Statement',
+  'Statement (splash)',
+  'BigStat',
+  'Split',
+  'Split (flipped)',
+  'EvidenceGrid',
+  'DiagramPage',
+  'Ledger',
+  'Cards',
+  'Cards (3-col)',
+  'PricingTiers',
+] as const;
+
+/**
+ * Live copy-editing tool, mounted only when the URL carries ?debug=true.
+ * Every text block inside the deck pages becomes contentEditable; the Copy
+ * button writes an OLD/NEW diff of everything touched (plus any requested
+ * layout-variant changes) to the clipboard so the edits can be pasted back
+ * and applied to the source files. Layout picks are recorded, not
+ * live-previewed: slides are pre-composed components.
+ */
+export default function DebugCopyEditor({
+  refreshKey,
+}: {
+  refreshKey: string;
+}) {
+  const entries = useRef<Entry[]>([]);
+  const [layoutPicks, setLayoutPicks] = useState<Map<string, string>>(
+    () => new Map()
+  );
+  const [count, setCount] = useState(0);
+  const [copied, setCopied] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState('1');
+  const [currentArchetype, setCurrentArchetype] = useState('');
+  const [deleted, setDeleted] = useState<Map<string, string>>(() => new Map());
+  const [bandIcon, setBandIconState] = useState(DEFAULT_BAND_ICON);
+
+  const pickBandIcon = (name: string) => {
+    setBandIcon(name);
+    setBandIconState(name);
+  };
+
+  useEffect(() => {
+    // Wait a frame so the (un)locked page list has rendered before scanning.
+    const raf = requestAnimationFrame(() => {
+      for (const e of entries.current) {
+        const el = e.el;
+        el.removeAttribute('contenteditable');
+        el.classList.remove('debug-editable');
+      }
+      entries.current = [];
+      const sections = document.querySelectorAll<HTMLElement>(
+        'section[id^="page-"]'
+      );
+      sections.forEach(section => {
+        const page = section.id.replace('page-', '');
+        const targets = section.querySelectorAll<HTMLElement>(
+          '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'
+        );
+        let i = 0;
+        targets.forEach(target => {
+          const el = target;
+          const text = el.textContent ?? '';
+          if (!text.trim()) return;
+          i += 1;
+          try {
+            // Chrome/Safari support plaintext-only, which keeps pasted markup out.
+            el.contentEditable = 'plaintext-only';
+          } catch {
+            el.contentEditable = 'true';
+          }
+          el.classList.add('debug-editable');
+          el.spellcheck = false;
+          entries.current.push({
+            el,
+            page,
+            label: `${el.tagName.toLowerCase()} #${i}`,
+            original: text,
+          });
+        });
+      });
+      setCount(entries.current.length);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [refreshKey]);
+
+  // Track which slide is in view so the layout picker targets it.
+  useEffect(() => {
+    const deck = document.querySelector('.deck');
+    if (!deck) return;
+    let raf = 0;
+    const onScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        let best: { page: string; dist: number } | null = null;
+        document
+          .querySelectorAll<HTMLElement>('section[id^="page-"]')
+          .forEach(section => {
+            const dist = Math.abs(section.getBoundingClientRect().top);
+            if (!best || dist < best.dist) {
+              best = { page: section.id.replace('page-', ''), dist };
+            }
+          });
+        if (best) {
+          const page = (best as { page: string }).page;
+          setCurrentPage(page);
+          setCurrentArchetype(slideArchetype(page));
+        }
+      });
+    };
+    onScroll();
+    deck.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      deck.removeEventListener('scroll', onScroll);
+      cancelAnimationFrame(raf);
+    };
+  }, [refreshKey]);
+
+  const changed = () =>
+    entries.current.filter(
+      e => (e.el.textContent ?? '').trim() !== e.original.trim()
+    );
+
+  const copy = async () => {
+    const edits = changed();
+    const picks = [...layoutPicks.entries()];
+    const removals = [...deleted.entries()];
+    const iconChanged = bandIcon !== DEFAULT_BAND_ICON;
+    if (
+      edits.length === 0 &&
+      picks.length === 0 &&
+      removals.length === 0 &&
+      !iconChanged
+    ) {
+      setCopied('No edits yet');
+      setTimeout(() => setCopied(null), 1500);
+      return;
+    }
+    const lines = ['COPY EDITS from /opportunity?debug=true', ''];
+    for (const e of edits) {
+      lines.push(`[page ${e.page} · ${e.label}]`);
+      lines.push(`OLD: ${e.original.trim()}`);
+      lines.push(`NEW: ${(e.el.textContent ?? '').trim()}`);
+      lines.push('');
+    }
+    for (const [page, variant] of picks) {
+      lines.push(`[page ${page} · layout]`);
+      const current = slideArchetype(page);
+      if (current) lines.push(`OLD LAYOUT: ${current}`);
+      lines.push(`NEW LAYOUT: ${variant}`);
+      lines.push('');
+    }
+    for (const [page, title] of removals) {
+      lines.push(`[page ${page} · slide]`);
+      lines.push(`DELETE SLIDE: ${title}`);
+      lines.push('');
+    }
+    if (iconChanged) {
+      lines.push('[accent box · icon]');
+      lines.push(`OLD ICON: ${DEFAULT_BAND_ICON}`);
+      lines.push(`NEW ICON: ${bandIcon}`);
+      lines.push('');
+    }
+    await navigator.clipboard.writeText(lines.join('\n'));
+    const n =
+      edits.length + picks.length + removals.length + (iconChanged ? 1 : 0);
+    setCopied(`Copied ${n} edit${n === 1 ? '' : 's'}`);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
+  const reset = () => {
+    restoreOriginals(entries.current);
+    for (const page of deleted.keys()) setSlideHidden(page, false);
+    setDeleted(new Map());
+    setLayoutPicks(new Map());
+    pickBandIcon(DEFAULT_BAND_ICON);
+    setCopied('Reset');
+    setTimeout(() => setCopied(null), 1200);
+  };
+
+  const deleteSlide = () => {
+    const title = slideTitle(currentPage);
+    setSlideHidden(currentPage, true);
+    setDeleted(prev => new Map(prev).set(currentPage, title));
+  };
+
+  const pickLayout = (variant: string) => {
+    setLayoutPicks(prev => {
+      const next = new Map(prev);
+      // Re-selecting the slide's real archetype clears the override.
+      if (variant === '' || variant === currentArchetype) {
+        next.delete(currentPage);
+      } else {
+        next.set(currentPage, variant);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className="debug-bar" role="toolbar" aria-label="Copy editor">
+      <span className="debug-bar-hint">
+        debug · p{currentPage} · click text to edit ({count})
+      </span>
+      <label className="debug-bar-hint">
+        layout{' '}
+        <select
+          value={layoutPicks.get(currentPage) ?? currentArchetype}
+          onChange={e => pickLayout(e.target.value)}
+        >
+          <option value="">(bespoke)</option>
+          {LAYOUT_VARIANTS.map(v => (
+            <option key={v} value={v}>
+              {v}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="debug-bar-hint">
+        icon{' '}
+        <select value={bandIcon} onChange={e => pickBandIcon(e.target.value)}>
+          {BAND_ICONS.map(name => (
+            <option key={name} value={name}>
+              {name}
+            </option>
+          ))}
+        </select>
+      </label>
+      <button type="button" onClick={deleteSlide}>
+        Delete slide{deleted.size > 0 ? ` (${deleted.size})` : ''}
+      </button>
+      <button type="button" onClick={copy}>
+        {copied ?? 'Copy edits'}
+      </button>
+      <button type="button" onClick={reset}>
+        Reset
+      </button>
+    </div>
+  );
+}