// Direction F — "Managed program over modular OS"
// The synthesis: D is the architecture (modular apps + shared foundation),
// C is the engagement (a sequenced program the managed service assembles).
// Entitlement layer: client sees the WHOLE OS, has keys only to what they bought.

const F_ACCENT = '#5cc5b6'; // teal — "the resolved direction"
const F_INK = window.sketchInk;

// The five lifecycle phases, each carrying its apps (ties D's 6 apps onto C's spine)
const OS_PHASES = [
  { id: 'design',  label: 'Design',  apps: ['Operating Model'] },
  { id: 'govern',  label: 'Govern',  apps: ['Interface Mgmt', 'Operating Model'] },
  { id: 'assess',  label: 'Assess',  apps: ['Org Health', 'Standards & Assurance'] },
  { id: 'improve', label: 'Improve', apps: ['Continuous Improve'] },
  { id: 'sense',   label: 'Sense',   apps: ['Operational Intel'] },
];

// Reusable wayfinding device: the full OS spine with per-phase access state.
// state per phase: 'active' (engaged, has keys) · 'done' · 'locked' (visible, no keys)
function OSMap({ states, compact, showApps = true, height }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'stretch', gap: 0,
      border: `1.5px solid ${F_INK}`,
      borderRadius: window.hand(7),
      background: '#fff',
      padding: compact ? '7px 8px' : '10px 10px',
      height,
    }}>
      {OS_PHASES.map((p, i) => {
        const st = states[p.id] || 'locked';
        const lit = st === 'active';
        const done = st === 'done';
        const locked = st === 'locked';
        return (
          <React.Fragment key={p.id}>
            <div style={{
              flex: 1,
              display: 'flex', flexDirection: 'column', gap: 4,
              alignItems: 'center',
              opacity: locked ? 0.5 : 1,
              filter: locked ? 'grayscale(0.8)' : 'none',
            }}>
              <div style={{
                width: '100%',
                padding: compact ? '3px 4px' : '4px 6px',
                textAlign: 'center',
                border: `1.4px ${locked ? 'dashed' : 'solid'} ${F_INK}`,
                borderRadius: window.hand(i + 2),
                background: lit ? F_ACCENT : done ? '#dcfae6' : '#fff',
                fontSize: compact ? 11 : 12, fontWeight: 700,
                position: 'relative',
                boxShadow: lit ? `2px 2px 0 ${F_INK}` : 'none',
              }}>
                {p.label}
                {locked && (
                  <span style={{
                    position: 'absolute', top: -7, right: -7,
                    width: 16, height: 16, borderRadius: '50%',
                    border: `1.3px solid ${F_INK}`, background: '#fff',
                    display: 'grid', placeItems: 'center', fontSize: 9,
                  }}>🔒</span>
                )}
                {done && (
                  <span style={{
                    position: 'absolute', top: -7, right: -7,
                    width: 16, height: 16, borderRadius: '50%',
                    border: `1.3px solid ${F_INK}`, background: '#dcfae6',
                    display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700,
                  }}>✓</span>
                )}
              </div>
              {showApps && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
                  {p.apps.map(a => (
                    <div key={a} style={{
                      fontSize: 8.5, lineHeight: 1.1, textAlign: 'center',
                      padding: '2px 3px',
                      border: `1px ${locked ? 'dashed' : 'solid'} ${F_INK}80`,
                      borderRadius: 4,
                      background: lit ? '#fff' : 'transparent',
                      color: locked ? window.sketchInkSoft : F_INK,
                      fontWeight: lit ? 700 : 500,
                    }}>{a}</div>
                  ))}
                </div>
              )}
            </div>
            {i < OS_PHASES.length - 1 && (
              <div style={{
                width: compact ? 14 : 20,
                display: 'grid', placeItems: 'center',
                fontSize: 13, color: F_INK, fontWeight: 700,
                paddingTop: compact ? 6 : 8,
                alignSelf: 'flex-start',
              }}>→</div>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ---- F1: Client home — full OS visible, scoped keys ----
function F1_ClientHome() {
  return (
    <SkFrame title="Subicare Health" subtitle="client home" accent={F_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 9, height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 22, fontWeight: 700 }}>Welcome back, Priya</div>
          <SkPill accent={F_ACCENT}>Program · Gap Assessment</SkPill>
          <div style={{ flex: 1 }}/>
          <SkPill>powered by Method 8</SkPill>
        </div>
        {/* The OS map — the whole operating system, your stop lit */}
        <div>
          <div style={{ fontSize: 10.5, color: window.sketchInkSoft, fontWeight: 700, marginBottom: 4, textTransform: 'uppercase', letterSpacing: 1 }}>
            your operating system · end to end
          </div>
          <OSMap states={{ design: 'locked', govern: 'locked', assess: 'active', improve: 'locked', sense: 'locked' }}/>
        </div>
        <SkAnnot style={{ color: '#1d7a6e' }}>
          ↑ you see the <b>whole OS</b> — you hold the keys to <b>Assess</b>. the rest shows what "end to end" means with us.
        </SkAnnot>
        {/* Your active workspace */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, flex: 1, minHeight: 0 }}>
          <SkBox seed={2} style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 5 }}>
            <div style={{ fontSize: 11, fontWeight: 700 }}>your apps · 2 active</div>
            <SkModuleTile label="Org Health" icon="♡" accent="#fde6cc" style={{ minWidth: 0 }}/>
            <SkModuleTile label="Standards & Assurance" icon="✓" accent="#dcfae6" style={{ minWidth: 0 }}/>
          </SkBox>
          <SkBox seed={3} style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 5 }}>
            <div style={{ fontSize: 11, fontWeight: 700 }}>next up</div>
            <div style={{ fontSize: 11, lineHeight: 1.3, color: window.sketchInkSoft }}>Gap assessment · 67% complete. 4 evidence items open before your readout with Method 8 team on Apr 2.</div>
            <SkBtn primary accent={F_INK} style={{ alignSelf: 'flex-start', marginTop: 'auto' }}>resume assessment →</SkBtn>
          </SkBox>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- F2: Method 8 team program builder (back-of-house) ----
function F2_ProgramBuilder() {
  return (
    <SkFrame title="Method 8 team · program builder" subtitle="assemble the engagement" accent={F_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        {/* catalog */}
        <div style={{ width: 150, borderRight: `1.5px solid ${F_INK}`, padding: 8, background: '#fff', display: 'flex', flexDirection: 'column', gap: 5 }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: window.sketchInkSoft, textTransform: 'uppercase', letterSpacing: 1 }}>full catalog</div>
          {[
            ['Operating Model','◇','#dbe9ff'],
            ['Org Health','♡','#fde6cc'],
            ['Standards & Assurance','✓','#dcfae6'],
            ['Interface Mgmt','⇄','#fde2ea'],
            ['Continuous Improve','↻','#fef0c7'],
            ['Operational Intel','✦','#e8def8'],
          ].map(([n, ic, c], i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 5,
              padding: '4px 6px',
              border: `1.3px ${i === 1 || i === 2 ? 'solid' : 'dashed'} ${F_INK}`,
              borderRadius: window.hand(i + 1),
              background: i === 1 || i === 2 ? c : '#fff',
              fontSize: 10, fontWeight: 700,
            }}>
              <span style={{ width: 16, height: 16, border: `1.2px solid ${F_INK}`, borderRadius: 4, background: '#fff', display: 'grid', placeItems: 'center', fontSize: 11 }}>{ic}</span>
              <span style={{ flex: 1, lineHeight: 1.05 }}>{n}</span>
              <span style={{ fontSize: 11 }}>{i === 1 || i === 2 ? '✓' : '+'}</span>
            </div>
          ))}
          <SkAnnot style={{ color: '#1d7a6e', fontSize: 12, marginTop: 4 }}>drag into the program →</SkAnnot>
        </div>
        {/* program canvas */}
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 7 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>Subicare · Gap Assessment</div>
            <SkPill accent="#fef0c7">draft</SkPill>
            <div style={{ flex: 1 }}/>
            <SkBtn>set client access</SkBtn>
          </div>
          {/* sequenced phases */}
          <OSMap states={{ design: 'locked', govern: 'locked', assess: 'active', improve: 'active', sense: 'locked' }} compact/>
          <div style={{ fontSize: 10.5, fontWeight: 700, marginTop: 2 }}>program steps (what the client will walk)</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[
              ['1','Kickoff & scoping','Method 8 team','—'],
              ['2','Gap assessment','client + AI','Org Health · Standards'],
              ['3','Findings readout','Method 8 team','—'],
              ['4','Recommendations','AI draft → Method 8 team','Continuous Improve'],
            ].map(([n, t, who, apps], i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '20px 1.3fr 1fr 1.2fr', gap: 6, alignItems: 'center',
                border: `1.3px solid ${F_INK}`, borderRadius: window.hand(i + 3),
                padding: '4px 7px', fontSize: 10.5, background: '#fff',
              }}>
                <span style={{ fontFamily: '"Caveat", cursive', fontSize: 16, fontWeight: 700 }}>{n}</span>
                <span style={{ fontWeight: 700 }}>{t}</span>
                <span style={{ color: window.sketchInkSoft }}>{who}</span>
                <span style={{ fontSize: 9.5, color: window.sketchInkSoft }}>{apps}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 'auto' }}>
            <SkBtn>save template</SkBtn>
            <div style={{ flex: 1 }}/>
            <SkBtn primary accent={F_INK}>publish to client →</SkBtn>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- F3: Client program view (looks like C, but scoped) ----
function F3_ScopedJourney() {
  const steps = [
    ['Kickoff & scoping', 'done', 'Method 8 team · Mar 12'],
    ['Gap assessment', 'active', 'you + AI · in progress'],
    ['Findings readout', 'next', 'Method 8 team · Apr 2'],
    ['Recommendations', 'locked', 'after readout'],
  ];
  return (
    <SkFrame title="Your program" subtitle="gap assessment journey" accent={F_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        {/* vertical spine */}
        <div style={{ width: 200, borderRight: `1.5px solid ${F_INK}`, padding: 10, background: '#fff', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 17, fontWeight: 700 }}>your steps</div>
          {steps.map(([t, st, sub], i) => (
            <div key={i} style={{
              display: 'flex', gap: 7, alignItems: 'flex-start',
              opacity: st === 'locked' ? 0.5 : 1,
            }}>
              <div style={{
                width: 22, height: 22, flex: 'none',
                border: `1.4px ${st === 'locked' ? 'dashed' : 'solid'} ${F_INK}`,
                borderRadius: '50%',
                background: st === 'done' ? '#dcfae6' : st === 'active' ? F_ACCENT : '#fff',
                display: 'grid', placeItems: 'center',
                fontFamily: '"Caveat", cursive', fontSize: 13, fontWeight: 700,
              }}>{st === 'done' ? '✓' : st === 'locked' ? '🔒' : i + 1}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11.5, fontWeight: 700, lineHeight: 1.1 }}>{t}</div>
                <div style={{ fontSize: 9.5, color: window.sketchInkSoft }}>{sub}</div>
              </div>
            </div>
          ))}
          <div style={{ marginTop: 'auto', fontSize: 9.5, color: window.sketchInkSoft, lineHeight: 1.3, paddingTop: 6, borderTop: `1px dashed ${F_INK}40` }}>
            this is a slice of the full OS, sequenced for you by Method 8 team.
          </div>
        </div>
        {/* current step content */}
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 7 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <SkPill accent={F_ACCENT}>step 2 of 4</SkPill>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 19, fontWeight: 700 }}>gap assessment</div>
          </div>
          <SkBox seed={1} style={{ padding: 8, fontSize: 11, lineHeight: 1.3, background: '#f0fbf9' }}>
            Two apps are open for this step. Complete both, then Method 8 team runs your findings readout.
          </SkBox>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              ['Org Health', '♡', '#fde6cc', '67%', '8 of 12 dims scanned'],
              ['Standards & Assurance', '✓', '#dcfae6', '73%', 'ISO 9001 · NDIS'],
            ].map(([n, ic, c, pct, sub], i) => (
              <SkBox key={i} seed={i + 4} style={{ padding: 8, background: '#fff' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 24, height: 24, border: `1.3px solid ${F_INK}`, borderRadius: 6, background: c, display: 'grid', placeItems: 'center', fontSize: 14, fontWeight: 700 }}>{ic}</span>
                  <div style={{ fontSize: 11.5, fontWeight: 700, lineHeight: 1.05 }}>{n}</div>
                </div>
                <div style={{ fontSize: 10, color: window.sketchInkSoft, margin: '4px 0' }}>{sub}</div>
                <div style={{ height: 6, background: '#eee', border: `1px solid ${F_INK}`, borderRadius: 3, overflow: 'hidden' }}>
                  <div style={{ width: pct, height: '100%', background: F_ACCENT }}/>
                </div>
                <SkBtn primary accent={F_INK} style={{ marginTop: 6, width: '100%' }}>open</SkBtn>
              </SkBox>
            ))}
          </div>
          <SkAnnot style={{ color: '#1d7a6e', marginTop: 'auto' }}>↑ same lifecycle shape as C — but only the steps & apps they bought.</SkAnnot>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- F4: The gap assessment itself (the work they bought) ----
function F4_GapAssessment() {
  return (
    <SkFrame title="Standards & Assurance" subtitle="gap assessment" accent={F_ACCENT}>
      <div style={{ padding: 11, display: 'flex', flexDirection: 'column', gap: 7, height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 19, fontWeight: 700 }}>ISO 9001 · gap assessment</div>
          <SkPill accent="#fef0c7">73% · 4 gaps</SkPill>
          <div style={{ flex: 1 }}/>
          <SkBtn>AI · suggest evidence</SkBtn>
        </div>
        {/* clause checklist */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {[
            ['4.x Context of org','met','evidence on file'],
            ['6.x Planning / risk','gap','no risk register linked'],
            ['7.x Support / competence','met','training matrix v2'],
            ['8.x Operation','partial','2 SOPs missing'],
            ['9.x Performance eval','gap','no mgmt review (90d)'],
            ['10.x Improvement','gap','CAPA log incomplete'],
          ].map(([clause, st, note], i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1.2fr 70px 1.4fr', gap: 6, alignItems: 'center',
              border: `1.3px solid ${F_INK}`, borderRadius: window.hand(i + 1),
              padding: '4px 8px', fontSize: 10.5,
              background: st === 'gap' ? '#fef0f0' : '#fff',
            }}>
              <span style={{ fontWeight: 700 }}>{clause}</span>
              <span style={{
                textAlign: 'center', fontSize: 9.5, fontWeight: 700,
                padding: '1px 0', borderRadius: 99,
                border: `1.1px solid ${F_INK}`,
                background: st === 'met' ? '#dcfae6' : st === 'partial' ? '#fef0c7' : '#fee4e2',
              }}>{st}</span>
              <span style={{ color: window.sketchInkSoft, fontSize: 10 }}>{note}</span>
            </div>
          ))}
        </div>
        <SkBox seed={8} style={{ padding: 7, fontSize: 10.5, lineHeight: 1.3, background: '#f0fbf9', marginTop: 'auto' }}>
          <b>maps to your operating model (locked).</b> each gap is pinned to a process / capability node — Method 8 team uses this in your findings readout, and it's the seed for a future <b>Continuous Improve</b> engagement.
        </SkBox>
      </div>
    </SkFrame>
  );
}

// ---- F5: The full-OS reveal / what comes next ----
function F5_FullOSReveal() {
  return (
    <SkFrame title="The full operating system" subtitle="what end-to-end looks like" accent={F_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 9, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 19, fontWeight: 700 }}>you've completed Assess. here's the rest of the journey.</div>
        <OSMap states={{ design: 'locked', govern: 'locked', assess: 'done', improve: 'locked', sense: 'locked' }}/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, flex: 1, minHeight: 0 }}>
          {[
            ['Improve', '↻', 'Turn your 4 gaps into a tracked improvement program — AI-drafted, Method 8 team-run.', 'recommended next'],
            ['Govern', '⚖', 'Lock decision rights & interface contracts so gaps don\'t reopen.', ''],
            ['Sense', '✦', 'Always-on drift detection so you never need another point-in-time audit.', ''],
          ].map(([n, ic, body, tag], i) => (
            <div key={i} style={{
              border: `1.4px dashed ${F_INK}`,
              borderRadius: window.hand(i + 2),
              padding: 9, background: '#fff',
              display: 'flex', flexDirection: 'column', gap: 5,
              opacity: 0.92,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 24, height: 24, border: `1.3px solid ${F_INK}`, borderRadius: 6, background: '#f3f0e6', display: 'grid', placeItems: 'center', fontSize: 14 }}>{ic}</span>
                <span style={{ fontSize: 12, fontWeight: 700 }}>{n}</span>
                <span style={{ marginLeft: 'auto', fontSize: 11 }}>🔒</span>
              </div>
              <div style={{ fontSize: 10, lineHeight: 1.3, color: window.sketchInkSoft }}>{body}</div>
              {tag && <SkPill accent={F_ACCENT} style={{ fontSize: 9, alignSelf: 'flex-start' }}>{tag}</SkPill>}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <SkAnnot style={{ color: '#1d7a6e', flex: 1 }}>↑ the upsell is the product telling its own story — not a sales deck.</SkAnnot>
          <SkBtn primary accent={F_INK}>talk to Method 8 team about Improve</SkBtn>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- F6: Managed-service swimlanes ----
function F6_ManagedService() {
  const lanes = [
    ['Method 8 team', '#5cc5b6', ['scope program', 'findings readout', 'curate model', 'run adoption']],
    ['Method 8 AI', '#e8def8', ['scan org data', 'draft evidence', 'draft recommendations', 'flag drift']],
    ['Client', '#fde6cc', ['provide access', 'complete assessment', 'approve findings', 'act on plan']],
  ];
  const cols = ['Kickoff', 'Assess', 'Readout', 'Improve'];
  return (
    <SkFrame title="Managed service" subtitle="who does what" accent={F_ACCENT}>
      <div style={{ padding: 11, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>the platform does the work · Method 8 team directs · client decides</div>
        {/* column headers */}
        <div style={{ display: 'grid', gridTemplateColumns: '90px repeat(4, 1fr)', gap: 5 }}>
          <div/>
          {cols.map(c => (
            <div key={c} style={{ textAlign: 'center', fontSize: 10.5, fontWeight: 700, padding: '2px 0', borderBottom: `1.4px solid ${F_INK}` }}>{c}</div>
          ))}
        </div>
        {/* lanes */}
        {lanes.map(([who, color, acts], li) => (
          <div key={li} style={{ display: 'grid', gridTemplateColumns: '90px repeat(4, 1fr)', gap: 5, alignItems: 'stretch' }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 5,
              padding: '4px 6px', fontSize: 10.5, fontWeight: 700,
              border: `1.4px solid ${F_INK}`, borderRadius: window.hand(li + 1),
              background: color,
            }}>{who}</div>
            {acts.map((a, ci) => (
              <div key={ci} style={{
                padding: '5px 6px', fontSize: 10, lineHeight: 1.15,
                border: `1.2px solid ${F_INK}`, borderRadius: window.hand(li + ci + 2),
                background: '#fff', textAlign: 'center',
                display: 'grid', placeItems: 'center',
              }}>{a}</div>
            ))}
          </div>
        ))}
        <SkBox seed={9} style={{ padding: 8, fontSize: 10.5, lineHeight: 1.3, background: '#f0fbf9', marginTop: 'auto' }}>
          <b>the consulting doesn't disappear — it moves up a layer.</b> Method 8 team stops producing artifacts by hand and starts directing the program, curating AI output, and running the human moments (kickoff, readout, adoption).
        </SkBox>
      </div>
    </SkFrame>
  );
}

// ---- F7: How it fits — D is the architecture, C is the program ----
function F7_HowItFits() {
  return (
    <SkFrame title="How it fits" subtitle="D architecture · C program · entitlement gate" accent={F_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        {/* Layer 3: client view */}
        <div style={{
          border: `1.6px solid ${F_INK}`, borderRadius: window.hand(2),
          background: F_ACCENT, padding: '7px 10px',
          boxShadow: `2px 2px 0 ${F_INK}`,
        }}>
          <div style={{ fontSize: 11.5, fontWeight: 700 }}>3 · what the client sees → a scoped journey (C-shaped)</div>
          <div style={{ fontSize: 10, marginTop: 1 }}>full OS visible · keys only to engaged apps</div>
        </div>
        <div style={{ textAlign: 'center', fontSize: 14, fontWeight: 700, color: F_INK }}>▲ entitlement gate ▲</div>
        {/* Layer 2: program */}
        <div style={{
          border: `1.6px dashed ${F_INK}`, borderRadius: window.hand(5),
          background: '#fffdf3', padding: '7px 10px',
        }}>
          <div style={{ fontSize: 11.5, fontWeight: 700 }}>2 · the program → Method 8 team selects + sequences (the C layer)</div>
          <div style={{ marginTop: 4 }}>
            <OSMap states={{ design: 'locked', govern: 'locked', assess: 'active', improve: 'active', sense: 'locked' }} compact showApps={false} />
          </div>
        </div>
        <div style={{ textAlign: 'center', fontSize: 14, fontWeight: 700, color: F_INK }}>▲ assembled from ▲</div>
        {/* Layer 1: D foundation */}
        <div style={{
          border: `1.6px solid ${F_INK}`, borderRadius: window.hand(8),
          background: '#f5efff', padding: '8px 10px',
        }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, marginBottom: 5 }}>1 · the architecture → six modular apps + shared org foundation (the D layer)</div>
          <div style={{ display: 'flex', gap: 4, marginBottom: 5 }}>
            {[['Op. Model','◇'],['Org Health','♡'],['Assurance','✓'],['Interfaces','⇄'],['Improve','↻'],['Intel','✦']].map(([n, ic], i) => (
              <div key={i} style={{ flex: 1 }}><SkModuleTile label={n} icon={ic} accent="#fff" style={{ minWidth: 0, padding: '5px 6px' }}/></div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {['operating model','people graph','standards library','signal stream'].map(t => (
              <SkPill key={t} accent="#fff" style={{ fontSize: 9 }}>{t}</SkPill>
            ))}
          </div>
        </div>
        <SkAnnot style={{ color: '#1d7a6e', textAlign: 'center' }}>
          D gives the parts · C gives the shape · the gate scopes access — one client buys one stop, sees the whole road.
        </SkAnnot>
      </div>
    </SkFrame>
  );
}

window.DirectionF = {
  header: {
    letter: 'F',
    title: 'Managed program over modular OS',
    accent: F_ACCENT,
    summary: 'The synthesis of D + C. The platform is a modular suite (D) over a shared foundation. The managed service assembles a sequenced program (C) per client from those parts. An entitlement layer scopes access — the client sees the whole OS end-to-end but holds keys only to what they engaged.',
    principle: '"Buy one stop. See the whole road."',
  },
  frames: [
    { id: 'f1', label: '1 · Client home', w: 540, h: 360, render: () => <F1_ClientHome/> },
    { id: 'f2', label: '2 · Method 8 team program builder', w: 540, h: 360, render: () => <F2_ProgramBuilder/> },
    { id: 'f3', label: '3 · Scoped journey (C)', w: 540, h: 360, render: () => <F3_ScopedJourney/> },
    { id: 'f4', label: '4 · The gap assessment', w: 540, h: 360, render: () => <F4_GapAssessment/> },
    { id: 'f5', label: '5 · Full-OS reveal', w: 540, h: 360, render: () => <F5_FullOSReveal/> },
    { id: 'f6', label: '6 · Managed-service lanes', w: 540, h: 360, render: () => <F6_ManagedService/> },
    { id: 'f7', label: '7 · How it fits', w: 540, h: 360, render: () => <F7_HowItFits/> },
  ],
};