// cache-bust: 1779468723-8d9735
// =========================================================
// members.jsx — Members area dashboard (logged-in feel)
// 1440 wide. Sidebar + main + right rail.
// Shows progress, current lesson, locked modules, build log.
// =========================================================

const DM = window.BL_DATA;
const { useState: useStateM } = React;

function MembersArea() {
  const [activeMod, setActiveMod] = useStateM('m1');
  const [activeEp, setActiveEp] = useStateM('1.5');

  const mod = DM.modules.find(m => m.id === activeMod);
  const ep = mod.episodes.find(e => e.n === activeEp) || mod.episodes[mod.episodes.length - 1];

  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '256px 1fr 320px',
      height: '100%', background: 'var(--paper)',
      fontFamily: 'var(--sans)',
    }}>
      <MSidebar activeMod={activeMod} activeEp={activeEp}
                onPickMod={setActiveMod} onPickEp={setActiveEp} />
      <MMain mod={mod} ep={ep} />
      <MRightRail mod={mod} ep={ep} />
    </div>
  );
}

// ───────────────────────────────── Sidebar
function MSidebar({ activeMod, activeEp, onPickMod, onPickEp }) {
  const totalEps = DM.modules.reduce((a, m) => a + m.episodes.length, 0);
  const watchedCount = 6;
  const pct = Math.round((watchedCount / totalEps) * 100);

  return (
    <aside style={{
      background: 'var(--surface-1)', borderRight: '1px solid var(--line-paper)',
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* logo / brand */}
      <div style={{ padding: '20px 18px', borderBottom: '1px solid var(--line-paper)' }}>
        <LandingLogo />
      </div>

      {/* user / progress */}
      <div style={{ padding: '18px 18px 16px', borderBottom: '1px solid var(--line-paper)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'linear-gradient(135deg, var(--accent-soft), var(--accent))',
            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--serif)', fontSize: 16,
          }}>M</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>marcos@…</div>
            <div className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)' }}>Yearly · 4d streak</div>
          </div>
        </div>

        <div style={{ marginTop: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-dim)', marginBottom: 6 }}>
            <span className="bl-mono" style={{ letterSpacing: '.06em' }}>YOUR PROGRESS</span>
            <span className="bl-mono">{watchedCount}/{totalEps}</span>
          </div>
          <div style={{ height: 4, background: 'var(--paper-2)', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: `${pct}%`, height: '100%', background: 'var(--accent)' }}></div>
          </div>
        </div>
      </div>

      {/* nav */}
      <div style={{ padding: '14px 8px 0', flex: 1, overflowY: 'auto' }}>
        <div className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.08em', padding: '6px 10px' }}>
          MODULES
        </div>
        {DM.modules.map(m => {
          const isActive = m.id === activeMod;
          const completed = m.id === 'm1' ? 2 : 0;
          return (
            <div key={m.id}>
              <div
                onClick={() => onPickMod(m.id)}
                style={{
                  padding: '8px 10px', borderRadius: 6,
                  display: 'flex', alignItems: 'center', gap: 10,
                  background: isActive ? 'var(--paper-2)' : 'transparent',
                  cursor: 'pointer',
                }}>
                <span style={{
                  width: 24, height: 24, borderRadius: 6,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--mono)', fontSize: 10,
                  background: isActive ? 'var(--accent)' : 'var(--paper-2)',
                  color: isActive ? '#fff' : 'var(--ink-mute)',
                  border: isActive ? 'none' : '1px solid var(--line-paper)',
                }}>{m.n}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{m.title}</div>
                  <div className="bl-mono" style={{ fontSize: 9.5, color: 'var(--ink-mute)' }}>{completed}/{m.episodes.length} · {m.duration}</div>
                </div>
              </div>
              {isActive && (
                <div style={{ padding: '4px 0 8px 30px' }}>
                  {m.episodes.map(e => {
                    const isPlaying = e.n === activeEp;
                    const watched = ['1.1', '1.2'].includes(e.n);
                    return (
                      <div key={e.n}
                        onClick={() => onPickEp(e.n)}
                        style={{
                          display: 'flex', alignItems: 'center', gap: 8,
                          padding: '5px 10px 5px 4px', borderRadius: 4,
                          cursor: 'pointer',
                          background: isPlaying ? 'rgba(217,104,70,.08)' : 'transparent',
                          borderLeft: isPlaying ? '2px solid var(--accent)' : '2px solid transparent',
                        }}>
                        <span style={{
                          width: 14, height: 14, borderRadius: '50%',
                          background: watched ? 'var(--sage)' : 'transparent',
                          border: watched ? 'none' : '1px solid var(--line-paper-2)',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          color: '#fff', fontSize: 8, flex: '0 0 auto',
                        }}>{watched && '✓'}</span>
                        <span style={{
                          fontSize: 12, color: isPlaying ? 'var(--ink)' : 'var(--ink-dim)',
                          flex: 1, minWidth: 0,
                          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                          fontWeight: isPlaying ? 500 : 400,
                        }}>{e.title}</span>
                        <span className="bl-mono" style={{ fontSize: 9, color: 'var(--ink-mute)' }}>{e.dur}</span>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}

        <div className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.08em', padding: '14px 10px 6px' }}>
          RESOURCES
        </div>
        {[
          ['Patch-script template', '◆'],
          ['D1 schemas',             '◇'],
          ['Prompt library',         '◈'],
          ['reloadin5.com source',   '⊹'],
          ['Discord (private)',      '◐'],
        ].map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 10px', cursor: 'pointer', borderRadius: 6 }}>
            <span style={{ width: 24, color: 'var(--accent)', fontSize: 14, textAlign: 'center' }}>{r[1]}</span>
            <span style={{ fontSize: 13, color: 'var(--ink-dim)' }}>{r[0]}</span>
          </div>
        ))}
      </div>

      {/* footer */}
      <div style={{ padding: '14px 18px', borderTop: '1px solid var(--line-paper)', background: 'var(--paper-2)' }}>
        <div className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.04em' }}>
          ▲ Next drop · ep 2.6 · Sun 9am
        </div>
      </div>
    </aside>
  );
}

// ───────────────────────────────── Main player area
function MMain({ mod, ep }) {
  return (
    <main style={{ overflow: 'auto', padding: '20px 28px 40px' }}>
      {/* breadcrumb + actions */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        <span className="bl-mono" style={{ fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '.04em' }}>
          MODULE {mod.n} / {mod.title.toUpperCase()} / EP {ep.n}
        </span>
        <span style={{ flex: 1 }}></span>
        <button className="bl-btn bl-btn-ghost" style={{ padding: '7px 12px', fontSize: 12 }}>
          ⇣ download patch script
        </button>
        <button className="bl-btn bl-btn-ghost" style={{ padding: '7px 12px', fontSize: 12 }}>
          ✎ notes
        </button>
      </div>

      {/* video player */}
      <MPlayer ep={ep} />

      {/* title + metadata */}
      <div style={{ marginTop: 24, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24 }}>
        <div style={{ flex: 1 }}>
          <h1 className="bl-serif" style={{ fontSize: 36, lineHeight: 1.1, color: 'var(--ink)' }}>{ep.title}</h1>
          <div style={{ marginTop: 10, display: 'flex', gap: 14, alignItems: 'center' }}>
            <span className="bl-mono" style={{ fontSize: 11, color: 'var(--ink-mute)' }}>{ep.dur}</span>
            <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--line-paper-2)' }}></span>
            <span className="bl-mono" style={{ fontSize: 11, color: 'var(--ink-mute)' }}>shipped today</span>
            <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--line-paper-2)' }}></span>
            <span className="bl-chip bl-chip-sage" style={{ fontSize: 10 }}>NEW</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="bl-btn bl-btn-ghost" style={{ padding: '10px 14px', fontSize: 13 }}>← prev</button>
          <button className="bl-btn bl-btn-primary" style={{ padding: '10px 16px', fontSize: 13 }}>mark watched · next →</button>
        </div>
      </div>

      {/* tabs */}
      <div style={{ marginTop: 28, borderBottom: '1px solid var(--line-paper)', display: 'flex', gap: 28 }}>
        {['Overview', 'Transcript', 'Code · 3 files', 'Discussion · 14'].map((t, i) => (
          <div key={i} style={{
            padding: '12px 0',
            borderBottom: i === 0 ? '2px solid var(--accent)' : '2px solid transparent',
            fontSize: 13.5,
            color: i === 0 ? 'var(--ink)' : 'var(--ink-mute)',
            fontWeight: i === 0 ? 500 : 400,
            cursor: 'pointer',
          }}>{t}</div>
        ))}
      </div>

      {/* overview body -- driven by window.BL_SCRIPTS, see scripts-data.js */}
      <EpisodeOverview ep={ep} />
    </main>
  );
}

function MPlayer({ ep }) {
  return (
    <div style={{ position: 'relative', borderRadius: 'var(--r-md)', overflow: 'hidden', boxShadow: 'var(--shadow-card)' }}>
      <div style={{
        position: 'relative',
        aspectRatio: '16/9', background: '#0a0807',
      }}>
        {/* screen-share mock */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(at 30% 20%, rgba(217,104,70,.08), transparent 60%), #0a0807',
        }}></div>

        {/* claude window left */}
        <div style={{
          position: 'absolute', top: '6%', left: '3%', width: '46%', height: '88%',
          background: 'var(--dark-2)', border: '1px solid var(--line-dark)',
          borderRadius: 6, display: 'grid', gridTemplateRows: '20px 1fr',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '0 6px', borderBottom: '1px solid var(--line-dark)' }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#ff5f57' }}></span>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#febc2e' }}></span>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#28c840' }}></span>
            <span className="bl-mono" style={{ fontSize: 7.5, color: 'var(--bone-mute)', marginLeft: 6 }}>Claude · project: reloadin5</span>
          </div>
          <div style={{ padding: '8px 10px', fontSize: 8, lineHeight: 1.55, fontFamily: 'var(--mono)', color: 'var(--bone-dim)' }}>
            <div style={{ color: 'var(--accent-soft)' }}>{'> '}you</div>
            <div style={{ color: 'var(--bone)' }}>Set up the GitHub MCP, point it at reloadin5, and confirm read access.</div>
            <div style={{ marginTop: 6, color: 'var(--sage)' }}>{'> '}claude</div>
            <div>I see the repo. 1,148 commits, last push 17m ago. Add these to claude_desktop_config.json:</div>
            <div style={{ marginTop: 4, padding: '6px 8px', background: 'var(--dark-3)', borderRadius: 4, color: 'var(--bone-mute)' }}>
              "github": {"{"}<br/>
              &nbsp;&nbsp;"command": "npx",<br/>
              &nbsp;&nbsp;"args": ["@modelcontextprotocol/server-github"],<br/>
              &nbsp;&nbsp;"env": {"{ \"GITHUB_TOKEN\": \""}<span style={{ filter: 'blur(3px)', background: 'rgba(217,104,70,.18)' }}>ghp_••••••</span>{"\" }"}<br/>
              {"}"}
            </div>
          </div>
        </div>

        {/* terminal right */}
        <div style={{
          position: 'absolute', top: '10%', right: '3%', width: '46%', height: '50%',
          background: 'var(--dark)', border: '1px solid var(--line-dark)',
          borderRadius: 6, display: 'grid', gridTemplateRows: '20px 1fr',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '0 6px', borderBottom: '1px solid var(--line-dark)' }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#ff5f57' }}></span>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#febc2e' }}></span>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#28c840' }}></span>
            <span className="bl-mono" style={{ fontSize: 7.5, color: 'var(--bone-mute)', marginLeft: 6 }}>~/reloadin5 · zsh</span>
          </div>
          <div style={{ padding: '8px 10px', fontSize: 8, lineHeight: 1.6, fontFamily: 'var(--mono)', color: 'var(--bone-dim)' }}>
            <div><span style={{ color: 'var(--sage)' }}>$</span> cat ~/Library/Application\ Support/Claude/claude_desktop_config.json</div>
            <div style={{ color: 'var(--bone-mute)' }}>{`{"mcpServers": { "github": { ... } }}`}</div>
            <div><span style={{ color: 'var(--sage)' }}>$</span> gh auth status</div>
            <div style={{ color: 'var(--sage)' }}>✓ Logged in to github.com as <span style={{ filter: 'blur(3px)' }}>•••••••</span></div>
            <div><span style={{ color: 'var(--sage)' }}>$</span> ls -la .git/</div>
            <div style={{ color: 'var(--bone-mute)' }}>total 56K · HEAD · config · refs/</div>
          </div>
        </div>

        {/* terminal-bottom */}
        <div style={{
          position: 'absolute', bottom: '4%', right: '3%', width: '46%', height: '32%',
          background: 'var(--dark)', border: '1px solid var(--line-dark)',
          borderRadius: 6, padding: '8px 10px', fontSize: 8, fontFamily: 'var(--mono)', color: 'var(--bone-dim)',
        }}>
          <div className="bl-mono" style={{ fontSize: 7.5, color: 'var(--bone-mute)', marginBottom: 4 }}>npx wrangler tail · live</div>
          <div style={{ color: 'var(--sage)' }}>GET /api/me 200 · 4ms · cf-iad</div>
          <div style={{ color: 'var(--sage)' }}>POST /api/labs/award 200 · 12ms</div>
          <div style={{ color: 'var(--amber)' }}>GET /api/ai/check 200 · 1.2s</div>
        </div>

        {/* presenter face cam */}
        <div style={{
          position: 'absolute', bottom: 16, left: 16,
          width: 110, height: 110, borderRadius: '50%',
          background: 'linear-gradient(135deg, var(--accent-soft), var(--accent-deep))',
          border: '3px solid #fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontFamily: 'var(--serif)', fontSize: 36,
          boxShadow: '0 10px 30px rgba(0,0,0,.4)',
        }}>SQ</div>

        {/* redaction pill */}
        <div style={{
          position: 'absolute', top: 18, right: 18,
          background: 'var(--accent)', color: '#fff',
          padding: '5px 10px', borderRadius: 4,
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.06em',
        }}>● REC · auto-redact on</div>
      </div>

      {/* controls */}
      <div style={{ background: 'var(--dark-3)', padding: '12px 18px', color: 'var(--bone)' }}>
        <div style={{ position: 'relative', height: 4, background: 'var(--dark-4)', borderRadius: 2, marginBottom: 12 }}>
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '42%', background: 'var(--accent)', borderRadius: 2 }}></div>
          <div style={{ position: 'absolute', left: '42%', top: -3, width: 10, height: 10, borderRadius: '50%', background: 'var(--accent-glow)', boxShadow: '0 0 0 4px rgba(217,104,70,.18)' }}></div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <button style={{ width: 30, height: 30, borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="#fff"><rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/></svg>
          </button>
          <span className="bl-mono" style={{ fontSize: 11 }}>02:26 / {ep.dur}</span>
          <span className="bl-mono" style={{ fontSize: 10, color: 'var(--bone-mute)', marginLeft: 4 }}>chapter 02 · enable memory</span>
          <span style={{ flex: 1 }}></span>
          <span className="bl-chip bl-chip-dark" style={{ fontSize: 10 }}>1.25×</span>
          <span className="bl-chip bl-chip-dark" style={{ fontSize: 10 }}>CC</span>
          <span className="bl-chip bl-chip-dark" style={{ fontSize: 10 }}>HD</span>
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" style={{ color: 'var(--bone-mute)' }}>
            <path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" stroke="currentColor" strokeWidth="1.4"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────── Right rail
function MRightRail({ mod, ep }) {
  return (
    <aside style={{
      background: 'var(--surface-1)', borderLeft: '1px solid var(--line-paper)',
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line-paper)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="bl-mono" style={{ fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '.08em', flex: 1 }}>SESSION</span>
        <span className="bl-mono" style={{ fontSize: 10, color: 'var(--sage)' }}>● live build log</span>
      </div>

      {/* xp + streak */}
      <div style={{ padding: '18px 18px 14px', borderBottom: '1px solid var(--line-paper)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <div style={{ padding: '12px 14px', background: 'var(--accent-tint)', borderRadius: 8 }}>
            <div className="bl-mono" style={{ fontSize: 10, color: 'var(--accent-deep)', letterSpacing: '.06em' }}>WATCH STREAK</div>
            <div className="bl-serif" style={{ fontSize: 28, color: 'var(--ink)', marginTop: 4 }}>4<span style={{ fontSize: 13, color: 'var(--ink-dim)' }}>&nbsp;days</span></div>
          </div>
          <div style={{ padding: '12px 14px', background: 'var(--paper-2)', borderRadius: 8 }}>
            <div className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.06em' }}>EPS WATCHED</div>
            <div className="bl-serif" style={{ fontSize: 28, color: 'var(--ink)', marginTop: 4 }}>6<span style={{ fontSize: 13, color: 'var(--ink-dim)' }}>&nbsp;/&nbsp;27</span></div>
          </div>
        </div>
      </div>

      {/* AI assistant */}
      <div style={{ padding: '16px 18px', borderBottom: '1px solid var(--line-paper)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }}></span>
          <span className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.08em' }}>ASK CLAUDE · ABOUT THIS LESSON</span>
        </div>
        <div style={{ marginTop: 12, padding: '10px 12px', background: 'var(--paper-2)', borderRadius: 8, fontSize: 12.5, color: 'var(--ink-2)' }}>
          "Why does Claude Desktop need project files turned on? Can I just paste files in the chat?"
        </div>
        <div style={{ marginTop: 6, padding: '10px 12px', background: 'rgba(217,104,70,.06)', border: '1px solid var(--accent-soft)', borderRadius: 8, fontSize: 12.5, color: 'var(--ink-2)' }}>
          Project files give the model durable context across sessions. Pasting works for one-shots but you lose the
          repo map next conversation. <span style={{ color: 'var(--accent-deep)', cursor: 'pointer' }}>more →</span>
        </div>

        <div style={{
          display: 'flex', gap: 6, marginTop: 10,
          background: 'var(--paper-2)', border: '1px solid var(--line-paper)',
          padding: '6px 10px', borderRadius: 999,
        }}>
          <input placeholder="ask anything…" style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', fontSize: 12.5 }}/>
          <span className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)' }}>↵</span>
        </div>
      </div>

      {/* upcoming */}
      <div style={{ padding: '16px 18px', flex: 1, overflowY: 'auto' }}>
        <div className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.08em', marginBottom: 10 }}>
          UP NEXT
        </div>
        {[
          { mod: '02', ep: '2.1', t: 'A landing page that converts', dur: '7:04' },
          { mod: '02', ep: '2.2', t: 'Auth without Auth0 — JWT + magic links', dur: '10:21' },
          { mod: '02', ep: '2.3', t: 'Schema design — the 8 tables', dur: '8:47' },
        ].map((u, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderBottom: i === 2 ? 'none' : '1px solid var(--line-paper)' }}>
            <span style={{ width: 28, height: 28, borderRadius: 4, background: 'var(--paper-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
              <BLPlay size={11} color="var(--accent)" />
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)' }}>EP {u.ep} · {u.dur}</div>
              <div style={{ fontSize: 13, color: 'var(--ink)', marginTop: 2 }}>{u.t}</div>
            </div>
          </div>
        ))}

        <div className="bl-mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.08em', margin: '18px 0 10px' }}>
          ACHIEVEMENTS
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {[
            { e: '◆', n: 'First push',      got: true },
            { e: '⌬', n: 'Idempotent',      got: true },
            { e: '◈', n: '5-day streak',    got: false },
            { e: '⊹', n: 'Ship it Friday',  got: false },
          ].map((a, i) => (
            <div key={i} style={{
              aspectRatio: '1', borderRadius: 8,
              background: a.got ? 'var(--accent-tint)' : 'var(--paper-2)',
              border: a.got ? '1px solid var(--accent-soft)' : '1px dashed var(--line-paper-2)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              opacity: a.got ? 1 : 0.5,
            }}>
              <span style={{ fontSize: 18, color: a.got ? 'var(--accent-deep)' : 'var(--ink-mute)' }}>{a.e}</span>
              <span className="bl-mono" style={{ fontSize: 8, color: 'var(--ink-mute)', marginTop: 4, textAlign: 'center' }}>{a.n}</span>
            </div>
          ))}
        </div>
      </div>
    </aside>
  );
}


// ─────────────────────────────────────────────────────────────
// EpisodeOverview -- per-episode beat-sheet rendering
// Sourced from window.BL_SCRIPTS (see scripts-data.js).
// Falls back gracefully if a script is missing for this episode.
// ─────────────────────────────────────────────────────────────
function EpisodeOverview({ ep }) {
  const script = (window.BL_SCRIPTS || {})[ep.n];

  if (!script) {
    return (
      <div style={{
        marginTop: 22, padding: '40px 22px',
        background: 'var(--paper-2)', borderRadius: 8,
        textAlign: 'center', color: 'var(--ink-mute)',
        fontFamily: 'var(--mono)', fontSize: 13,
      }}>
        <div style={{ fontSize: 22, marginBottom: 8 }}>{'\u270E'}</div>
        <div style={{ fontWeight: 500, color: 'var(--ink-2)', marginBottom: 4 }}>
          Episode notes coming soon.
        </div>
        <div style={{ fontSize: 11 }}>EP {ep.n}</div>
        <button onClick={() => { window.location.hash = '#ep/' + ep.n; }} style={{ marginTop: 16, background: 'var(--accent)', color: '#fff', border: 'none', borderRadius: 6, padding: '8px 14px', fontSize: 12, fontFamily: 'var(--mono)', cursor: 'pointer', letterSpacing: '.04em' }}>
          Preview lesson →
        </button>
      </div>
    );
  }

  return (
    <React.Fragment>
    <button onClick={() => { window.location.hash = '#ep/' + ep.n; }} style={{ marginTop: 18, background: 'var(--accent)', color: '#fff', border: 'none', borderRadius: 6, padding: '10px 18px', fontSize: 13, fontFamily: 'var(--mono)', cursor: 'pointer', letterSpacing: '.04em' }}>
      Start lesson →
    </button>
    <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32 }}>
      {/* LEFT COLUMN: hook + beat sheet */}
      <div>
        {script.hook && (
          <div style={{
            marginBottom: 22, padding: '14px 16px',
            background: 'var(--paper-2)',
            borderLeft: '3px solid var(--accent)',
            borderRadius: 4,
          }}>
            <div className="bl-mono" style={{
              fontSize: 10, color: 'var(--accent)',
              letterSpacing: '.08em', marginBottom: 6,
            }}>HOOK</div>
            <p style={{
              fontSize: 15, lineHeight: 1.55,
              color: 'var(--ink)', margin: 0, fontStyle: 'italic',
            }}>
              {'\u201C'}{script.hook}{'\u201D'}
            </p>
          </div>
        )}

        {script.beats && script.beats.length > 0 && (
          <div>
            <div className="bl-mono" style={{
              fontSize: 11, color: 'var(--ink-mute)',
              letterSpacing: '.08em', marginBottom: 12,
            }}>
              BEAT SHEET {script.duration ? ' \u00b7 ' + script.duration : ''}
            </div>
            {script.beats.map((b, i) => (
              <div key={i} style={{
                display: 'flex', gap: 14, padding: '10px 0',
                borderBottom: i < script.beats.length - 1
                  ? '1px solid var(--line-paper)' : 'none',
              }}>
                <span className="bl-mono" style={{
                  fontSize: 11, color: 'var(--accent)',
                  flex: '0 0 80px', paddingTop: 2,
                }}>
                  {b.time || '\u2014'}
                </span>
                <span style={{
                  fontSize: 14, color: 'var(--ink)',
                  lineHeight: 1.55, flex: 1,
                }}>
                  {b.text}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* RIGHT COLUMN: pinned commands OR recording status placeholder */}
      <div>
        {script.commands ? (
          <div className="bl-card" style={{ padding: '18px 20px', background: 'var(--paper-2)' }}>
            <div className="bl-mono" style={{
              fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.08em',
            }}>
              {'\u2605'} PINNED COMMANDS \u00b7 COPY-PASTE
            </div>
            <pre className="bl-mono" style={{
              margin: '10px 0 0', fontSize: 11.5, lineHeight: 1.55,
              color: 'var(--ink-2)', whiteSpace: 'pre-wrap',
              background: 'var(--surface-1)', padding: 12, borderRadius: 6,
              border: '1px solid var(--line-paper)',
            }}>{script.commands}</pre>
          </div>
        ) : (
          <div className="bl-card" style={{ padding: '18px 20px', background: 'var(--paper-2)' }}>
            <div className="bl-mono" style={{
              fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '.08em',
            }}>
              {'\u25CF'} EPISODE STATUS
            </div>
            <div style={{ marginTop: 12, fontSize: 13, lineHeight: 1.6, color: 'var(--ink-2)' }}>
              <div style={{ marginBottom: 8, fontWeight: 500 }}>Recording in progress.</div>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>
                The video for this episode follows the beat sheet on the left.
                Read first, watch when it ships.
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
    </React.Fragment>
  );
}

Object.assign(window, { MembersArea });
// cf-cache-bust: 20260522-170707
