// Direction C — "Lifecycle Spine"
// Left rail follows the operating lifecycle: Design → Govern → Assess → Improve → Sense → (loop)
// Modules attach to phases. The spine is the dominant metaphor.

const C_ACCENT = '#9bc3f6'; // soft blue
const C_INK = window.sketchInk;

const PHASES = [
  { id: 'design',  label: 'Design',   verb: 'design the model',   color: '#dbe9ff' },
  { id: 'govern',  label: 'Govern',   verb: 'set the rules',      color: '#e8def8' },
  { id: 'assess',  label: 'Assess',   verb: 'measure reality',    color: '#fde6cc' },
  { id: 'improve', label: 'Improve',  verb: 'close the gaps',     color: '#dcfae6' },
  { id: 'sense',   label: 'Sense',    verb: 'watch the signals',  color: '#fde2ea' },
];

function Spine({ current = 0, vertical = true, height = 240 }) {
  return (
    <div style={{
      width: vertical ? 130 : '100%',
      height: vertical ? height : 'auto',
      borderRight: vertical ? `1.5px solid ${C_INK}` : 'none',
      background: '#fff',
      padding: 10,
      display: 'flex',
      flexDirection: vertical ? 'column' : 'row',
      gap: vertical ? 6 : 4,
      alignItems: vertical ? 'stretch' : 'center',
    }}>
      <div style={{
        fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700,
        marginBottom: vertical ? 6 : 0, marginRight: vertical ? 0 : 8,
      }}>Method 8</div>
      {PHASES.map((p, i) => (
        <div key={p.id} style={{
          flex: vertical ? 'none' : 1,
          padding: vertical ? '6px 8px' : '4px 6px',
          border: i === current ? `1.6px solid ${C_INK}` : `1.3px dashed ${C_INK}80`,
          background: i === current ? p.color : '#fff',
          borderRadius: window.hand(i + 2),
          display: 'flex', alignItems: 'center', gap: 6,
          fontSize: 11.5,
          fontWeight: i === current ? 700 : 500,
          position: 'relative',
        }}>
          <span style={{
            width: 18, height: 18,
            border: `1.4px solid ${C_INK}`,
            borderRadius: '50%',
            background: i === current ? '#fff' : (i < current ? '#dcfae6' : '#fff'),
            display: 'grid', placeItems: 'center',
            fontFamily: '"Caveat", cursive', fontSize: 13, fontWeight: 700,
            flex: 'none',
          }}>{i < current ? '✓' : i + 1}</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ lineHeight: 1.1 }}>{p.label}</div>
            {vertical && <div style={{ fontSize: 9.5, color: window.sketchInkSoft, lineHeight: 1.1 }}>{p.verb}</div>}
          </div>
          {vertical && i < PHASES.length - 1 && (
            <div style={{
              position: 'absolute', left: 18, bottom: -7,
              width: 0, height: 5,
              borderLeft: `1.3px dashed ${C_INK}`,
            }}/>
          )}
        </div>
      ))}
      {vertical && (
        <div style={{
          marginTop: 6, padding: '4px 7px',
          border: `1.3px dashed ${C_INK}`,
          borderRadius: 99,
          fontSize: 10, color: window.sketchInkSoft,
          textAlign: 'center',
          background: '#fffdf3',
        }}>↻ loop forever</div>
      )}
    </div>
  );
}

// ---- C1: Onboarding — pick where you are on the spine ----
function C1_Onboard() {
  return (
    <SkFrame title="Onboarding" subtitle="pick your starting point" accent={C_ACCENT}>
      <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 10, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 24, fontWeight: 700 }}>where are you, right now?</div>
        <div style={{ fontSize: 12, color: window.sketchInkSoft }}>
          Method 8 runs on a 5-phase loop. Tell us where you are — we'll start there. You can move freely.
        </div>
        <Spine current={-1} vertical={false}/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 5, marginTop: 4 }}>
          {[
            'No model yet · greenfield',
            'Model exists, no governance',
            'Need to know what is broken',
            'Action list, no traction',
            'Want continuous signal',
          ].map((t, i) => (
            <SkBox key={i} seed={i+3} style={{ padding: 7, fontSize: 10.5, lineHeight: 1.2, background: PHASES[i].color, cursor: 'pointer' }}>
              <div style={{ fontWeight: 700, fontSize: 11 }}>{PHASES[i].label}</div>
              <div style={{ fontSize: 10, marginTop: 2 }}>{t}</div>
            </SkBox>
          ))}
        </div>
        <SkAnnot style={{ marginTop: 4, color: '#1e4480' }}>
          ↑ the platform meets you where you are. you don't have to start with operating model design.
        </SkAnnot>
        <div style={{ display: 'flex', gap: 6, marginTop: 'auto' }}>
          <SkBtn>I'm not sure → take a 2-min audit</SkBtn>
          <SkBtn primary accent={C_INK}>begin at Assess →</SkBtn>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- C2: Spine home ----
function C2_Home() {
  return (
    <SkFrame title="Home" subtitle="the loop" accent={C_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        <Spine current={2}/>
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <SkPill accent={PHASES[2].color}>Phase 3 · Assess</SkPill>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 22, fontWeight: 700 }}>measure reality</div>
            <div style={{ flex: 1 }}/>
            <SkBtn>← prev</SkBtn>
            <SkBtn>next →</SkBtn>
          </div>
          <SkBox seed={1} style={{ padding: 8, fontSize: 11.5, lineHeight: 1.3, background: '#fffdf3' }}>
            <b>What you do in Assess.</b> Run org-health diagnostics, standards assessments, and interface checks against the operating model you built in Design and the rules you set in Govern. Outputs become improvement candidates.
          </SkBox>
          <div style={{ fontSize: 11, fontWeight: 700, color: window.sketchInkSoft, textTransform: 'uppercase', letterSpacing: 1 }}>tools available in this phase</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 5 }}>
            {[
              ['Org health diagnostic','run a 12-dim scan'],
              ['Standards assurance','ISO · NDIS · SOC2'],
              ['Interface diagnostic','team ↔ team friction'],
              ['Collaborative workshop','involve the org'],
            ].map(([t, s], i) => (
              <SkBox key={i} seed={i+5} style={{ padding: 7 }}>
                <div style={{ fontSize: 11.5, fontWeight: 700 }}>{t}</div>
                <div style={{ fontSize: 10.5, color: window.sketchInkSoft }}>{s}</div>
              </SkBox>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 'auto' }}>
            <div style={{ fontSize: 10.5, color: window.sketchInkSoft }}>3 assessments this quarter · 1 in progress</div>
            <div style={{ flex: 1 }}/>
            <SkBtn primary accent={C_INK}>start a diagnostic</SkBtn>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- C3: Design phase ----
function C3_Design() {
  return (
    <SkFrame title="Design" subtitle="phase 1" accent={C_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        <Spine current={0}/>
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 7 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <SkPill accent={PHASES[0].color}>Design</SkPill>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>build the operating model</div>
            <div style={{ flex: 1 }}/>
            <SkBtn primary accent={C_INK}>＋ AI templates</SkBtn>
          </div>
          {/* 10-block builder */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 4 }}>
            {[
              ['Strategy','✓'],['Value chain','✓'],['Customers','✓'],['Capabilities','◐'],['Processes','◐'],
              ['Org structure','·'],['Governance','·'],['Data & tech','·'],['People','·'],['Standards','·'],
            ].map(([n, s], i) => (
              <SkBox key={i} seed={i+9} style={{
                padding: '5px 6px',
                background: s === '✓' ? '#dcfae6' : s === '◐' ? '#fef0c7' : '#fff',
                fontSize: 10,
              }}>
                <div style={{ fontWeight: 700 }}>{n}</div>
                <div style={{ fontSize: 9.5, color: window.sketchInkSoft }}>block {i+1} · {s === '✓' ? 'done' : s === '◐' ? 'in progress' : 'todo'}</div>
              </SkBox>
            ))}
          </div>
          <SkBox seed={2} style={{ padding: 8, background: '#fffdf3', fontSize: 11.5, lineHeight: 1.3 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
              <SkAvatar initial="✦" size={16} accent={C_ACCENT}/>
              <b>AI co-builder</b>
              <span style={{ fontSize: 10, color: window.sketchInkSoft }}>· uses your industry, size, regulator</span>
            </div>
            Drafted blocks 1–3 from your starter brief. Suggesting <b>Capabilities</b> next — I'll propose 14, you accept what fits.
          </SkBox>
          <div style={{ display: 'flex', gap: 6, marginTop: 'auto' }}>
            <SkBtn>open block 4</SkBtn>
            <SkBtn>invite collaborator</SkBtn>
            <div style={{ flex: 1 }}/>
            <SkBtn>complete Design →</SkBtn>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- C4: Govern phase ----
function C4_Govern() {
  return (
    <SkFrame title="Govern" subtitle="phase 2" accent={C_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        <Spine current={1}/>
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 7 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <SkPill accent={PHASES[1].color}>Govern</SkPill>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>set decision rights · interfaces</div>
            <div style={{ flex: 1 }}/>
            <SkPill>RACI · 47</SkPill>
          </div>
          {/* RACI grid */}
          <SkBox seed={1} style={{ padding: 7 }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, marginBottom: 4 }}>decision rights · capability owners</div>
            <table style={{ width: '100%', fontSize: 10, borderCollapse: 'collapse' }}>
              <thead>
                <tr style={{ color: window.sketchInkSoft }}>
                  <th style={{ textAlign: 'left', padding: '2px 0' }}>decision</th>
                  <th>COO</th><th>CCO</th><th>CFO</th><th>CRO</th><th>BU</th>
                </tr>
              </thead>
              <tbody>
                {[
                  ['Approve care plan SLA','R','C','I','A','I'],
                  ['Roster pattern change','A','R','I','C','C'],
                  ['New standard adoption','C','A','I','R','I'],
                  ['Vendor selection','C','I','A','R','C'],
                ].map((row, i) => (
                  <tr key={i} style={{ borderTop: `1px dashed ${C_INK}40` }}>
                    {row.map((c, j) => (
                      <td key={j} style={{
                        padding: '3px 0', fontWeight: j === 0 ? 700 : 600,
                        textAlign: j === 0 ? 'left' : 'center',
                        background: c === 'A' ? '#fef0c7' : c === 'R' ? '#dcfae6' : 'transparent',
                      }}>{c}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </SkBox>
          <SkBox seed={2} style={{ padding: 7, background: '#fffdf3', fontSize: 11, lineHeight: 1.3 }}>
            <b>Interface contracts (3 open).</b>
            Ops ↔ Clinical, Finance ↔ Procurement, People ↔ BU heads · AI suggests SLAs from your processes.
          </SkBox>
          <div style={{ display: 'flex', gap: 6, marginTop: 'auto' }}>
            <SkBtn>AI · draft missing contracts</SkBtn>
            <div style={{ flex: 1 }}/>
            <SkBtn primary accent={C_INK}>complete Govern →</SkBtn>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- C5: Assess phase ----
function C5_Assess() {
  return (
    <SkFrame title="Assess" subtitle="phase 3" accent={C_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        <Spine current={2}/>
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <SkPill accent={PHASES[2].color}>Assess</SkPill>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>Q1 org-health scan</div>
            <div style={{ flex: 1 }}/>
            <SkPill accent="#fef0c7">in progress · 67%</SkPill>
          </div>
          {/* matrix */}
          <SkBox seed={1} style={{ padding: 7 }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, marginBottom: 4 }}>12 dimensions × 8 functions</div>
            <div style={{ display: 'grid', gridTemplateColumns: '60px repeat(8, 1fr)', gap: 2, fontSize: 9 }}>
              <div></div>
              {['Ops','HR','Fin','IT','Cl.','Risk','Qty','Ext'].map((f, i) => (
                <div key={i} style={{ textAlign: 'center', fontWeight: 700, color: window.sketchInkSoft }}>{f}</div>
              ))}
              {['Strategy','Process','People','Tech','Risk','Customer'].map((dim, r) => (
                <React.Fragment key={dim}>
                  <div style={{ fontWeight: 700, fontSize: 9.5 }}>{dim}</div>
                  {Array.from({length: 8}).map((_, c) => {
                    const v = Math.abs(Math.sin((r+1)*(c+1) * 1.3)) * 100;
                    const col = v > 75 ? '#079455' : v > 55 ? '#fdb022' : v > 35 ? '#dc6803' : '#d92d20';
                    return <div key={c} style={{ height: 14, background: col, border: `0.8px solid ${C_INK}` }}/>;
                  })}
                </React.Fragment>
              ))}
            </div>
          </SkBox>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 5 }}>
            <SkBox seed={3} style={{ padding: 6, fontSize: 10.5 }}>
              <b>hot spots (3)</b>
              <div style={{ color: window.sketchInkSoft, marginTop: 2 }}>Process × HR · Risk × Ops · People × Cl.</div>
            </SkBox>
            <SkBox seed={4} style={{ padding: 6, fontSize: 10.5 }}>
              <b>standards posture</b>
              <div style={{ color: window.sketchInkSoft, marginTop: 2 }}>ISO 9001 87% · NDIS 73% · ISO 27001 91%</div>
            </SkBox>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 'auto' }}>
            <SkBtn>workshop the gaps</SkBtn>
            <div style={{ flex: 1 }}/>
            <SkBtn primary accent={C_INK}>send to Improve →</SkBtn>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- C6: Improve phase ----
function C6_Improve() {
  return (
    <SkFrame title="Improve" subtitle="phase 4" accent={C_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        <Spine current={3}/>
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <SkPill accent={PHASES[3].color}>Improve</SkPill>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>close the loop</div>
            <div style={{ flex: 1 }}/>
            <SkPill accent="#dcfae6">14 closed · 47 open</SkPill>
          </div>
          {/* gap → action list */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[
              ['Process × HR friction','Define Ops↔HR interface contract','AI · drafted','J. Park','due 2 wks'],
              ['Risk × Ops','Add Risk Committee charter','AI · drafted','R. Singh','due 4 wks'],
              ['NDIS gap','Evidence pack for 4 controls','AI · drafted','Quality','due 9 days'],
              ['People × Cl.','Roster rebalance proposal','draft → review','J. Park','this week'],
            ].map(([gap, action, src, owner, due], i) => (
              <div key={i} style={{
                border: `1.3px solid ${C_INK}`,
                borderRadius: window.hand(i+1),
                padding: '5px 7px',
                background: '#fff',
                display: 'grid', gridTemplateColumns: '1fr 1.2fr 70px 70px 70px',
                gap: 6, alignItems: 'center', fontSize: 10.5,
              }}>
                <div><b>{gap}</b></div>
                <div>→ {action}</div>
                <SkPill accent={src.includes('AI') ? '#fef0c7' : '#d1e9ff'} style={{ fontSize: 9.5 }}>{src}</SkPill>
                <div style={{ fontSize: 10 }}>{owner}</div>
                <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{due}</div>
              </div>
            ))}
          </div>
          <SkAnnot style={{ color: '#1e4480' }}>
            ↑ every gap from Assess becomes a tracked action — with an AI-drafted starting point. consulting work shrinks to <b>approval + nudging</b>.
          </SkAnnot>
          <div style={{ display: 'flex', gap: 6, marginTop: 'auto' }}>
            <SkBtn>filter</SkBtn>
            <div style={{ flex: 1 }}/>
            <SkBtn primary accent={C_INK}>complete Improve →</SkBtn>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- C7: Sense + loop close ----
function C7_Sense() {
  return (
    <SkFrame title="Sense" subtitle="phase 5 · loop closes" accent={C_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        <Spine current={4}/>
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <SkPill accent={PHASES[4].color}>Sense</SkPill>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>live signals → next loop</div>
            <div style={{ flex: 1 }}/>
            <SkPill accent={C_ACCENT}>always-on</SkPill>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 5 }}>
            <SkBox seed={1} style={{ padding: 7, fontSize: 11 }}>
              <b>integrations · 6 live</b>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 3 }}>
                {['SAP','SuccessFactors','ServiceNow','Tableau','Snowflake','M365'].map(t => (
                  <SkPill key={t} style={{ fontSize: 9.5 }}>{t}</SkPill>
                ))}
              </div>
            </SkBox>
            <SkBox seed={2} style={{ padding: 7, fontSize: 11 }}>
              <b>drift detectors · 12 active</b>
              <div style={{ color: window.sketchInkSoft, fontSize: 10.5, marginTop: 2 }}>SLA breach · turnover ↑ · audit gap · cycle time ↑ …</div>
            </SkBox>
          </div>
          <SkBox seed={4} style={{ padding: 8, background: '#fffdf3', fontSize: 11.5, lineHeight: 1.3 }}>
            <b>AI watch · pattern detected.</b><br/>
            care-plan SLA breaches correlate with a roster pattern change 3 wks ago.
            Sending back to <SkPill accent={PHASES[2].color} style={{ fontSize: 10 }}>Assess</SkPill> as a new gap candidate. Loop continues.
          </SkBox>
          <div style={{ position: 'relative', height: 60, marginTop: 4 }}>
            {/* loop arrow */}
            <svg viewBox="0 0 200 60" style={{ width: '100%', height: '100%' }}>
              <path d="M 10 50 Q 100 -10 190 50" fill="none" stroke={C_INK} strokeWidth="1.6" strokeDasharray="4 3"/>
              <polygon points="190,50 184,45 184,55" fill={C_INK}/>
              <text x="100" y="20" textAnchor="middle" fontFamily="Caveat, cursive" fontSize="16" fontWeight="700" fill={C_INK}>→ back to Design / Govern</text>
            </svg>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

window.DirectionC = {
  header: {
    letter: 'C',
    title: 'Lifecycle spine',
    accent: C_ACCENT,
    summary: 'The product is a 5-phase loop: Design → Govern → Assess → Improve → Sense → back. Modules attach to phases. Teams enter at any phase. AI is the throughline that carries work between phases automatically.',
    principle: '"The loop is the product. Modules are stops on it."',
  },
  frames: [
    { id: 'c1', label: '1 · Start anywhere', w: 540, h: 360, render: () => <C1_Onboard/> },
    { id: 'c2', label: '2 · Spine home', w: 540, h: 360, render: () => <C2_Home/> },
    { id: 'c3', label: '3 · Design', w: 540, h: 360, render: () => <C3_Design/> },
    { id: 'c4', label: '4 · Govern', w: 540, h: 360, render: () => <C4_Govern/> },
    { id: 'c5', label: '5 · Assess', w: 540, h: 360, render: () => <C5_Assess/> },
    { id: 'c6', label: '6 · Improve', w: 540, h: 360, render: () => <C6_Improve/> },
    { id: 'c7', label: '7 · Sense → loop', w: 540, h: 360, render: () => <C7_Sense/> },
  ],
};