// Direction B — "Execution Cockpit"
// Dashboard-first: what's broken, what's drifting, what's improving.
// Operating model is in the background — the cockpit is the front door.

const B_ACCENT = '#7ed1a6'; // green
const B_INK = window.sketchInk;

function HealthRing({ value = 72, size = 88, color = '#079455' }) {
  const r = (size - 12) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - value / 100);
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={r} stroke={B_INK} strokeWidth={1.4} fill="none" opacity={0.25}/>
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={6} fill="none"
          strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
          transform={`rotate(-90 ${size/2} ${size/2})`}/>
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'grid', placeItems: 'center',
        fontFamily: '"Caveat", cursive', fontSize: size * 0.35, fontWeight: 700,
      }}>{value}</div>
    </div>
  );
}

function Spark({ data, color = B_INK, height = 28, width = 90 }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const r = max - min || 1;
  const pts = data.map((v, i) => `${(i / (data.length-1)) * width},${height - ((v - min) / r) * (height - 4) - 2}`).join(' ');
  return (
    <svg width={width} height={height} style={{ display: 'block' }}>
      <polyline points={pts} stroke={color} strokeWidth={1.5} fill="none" strokeLinejoin="round"/>
    </svg>
  );
}

// ---- B1: Sign in straight to cockpit ----
function B1_Signin() {
  return (
    <SkFrame title="Sign in" subtitle="straight to the cockpit" accent={B_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', height: '100%' }}>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 26, lineHeight: 1.05, fontWeight: 700 }}>
            Morning, Priya.
          </div>
          <div style={{ fontSize: 12, color: window.sketchInkSoft }}>
            3 things need you today.
          </div>
          {[
            ['🔴','Care plan SLA breached', '12 cases · Ops ↔ Clinical'],
            ['🟡','ISO 9001 audit in 9 days', '4 evidence items open'],
            ['🟢','Improvements: 6 closed this week', 'auto-summary ready'],
          ].map(([dot, t, s], i) => (
            <SkBox key={i} seed={i+2} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 14 }}>{dot}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 700 }}>{t}</div>
                <div style={{ fontSize: 10.5, color: window.sketchInkSoft }}>{s}</div>
              </div>
              <SkBtn>open</SkBtn>
            </SkBox>
          ))}
          <SkBtn primary accent={B_INK} style={{ alignSelf: 'flex-start' }}>open cockpit →</SkBtn>
        </div>
        <div style={{ background: '#ecfdf3', padding: 16, borderLeft: `1.5px solid ${B_INK}`, display: 'flex', flexDirection: 'column', gap: 8, justifyContent: 'center' }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>org health · live</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <HealthRing value={72} color="#dc6803"/>
            <div style={{ fontSize: 11, lineHeight: 1.3 }}>
              <div><b>↓ 4 pts</b> this week</div>
              <div>3 signals worsening</div>
              <div>2 signals recovering</div>
            </div>
          </div>
          <SkAnnot style={{ color: '#5e8a4f', marginTop: 4 }}>
            ↑ the org has a pulse.<br/>you check it like email.
          </SkAnnot>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- B2: Cockpit home ----
function B2_Cockpit() {
  const nav = ['Cockpit','Improvements','Standards','Interfaces','Model','Briefing','Settings'];
  return (
    <SkFrame title="Cockpit" subtitle="home" accent={B_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        <SkNav items={nav} current={0} accent={B_ACCENT}/>
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0, overflow: 'hidden' }}>
          {/* Top KPI strip */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 6 }}>
            {[
              ['Org health','72','↓4','#dc6803'],
              ['Standards','87%','↑2','#079455'],
              ['Open actions','47','▶','#1570ef'],
              ['Drift signals','9','↑3','#b42318'],
            ].map(([k, v, d, c], i) => (
              <SkBox key={i} seed={i+1} style={{ padding: '6px 8px' }}>
                <div style={{ fontSize: 10, color: window.sketchInkSoft, fontWeight: 700 }}>{k}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
                  <div style={{ fontFamily: '"Caveat", cursive', fontSize: 24, fontWeight: 700, color: c }}>{v}</div>
                  <div style={{ fontSize: 10, fontWeight: 700, color: c }}>{d}</div>
                </div>
                <Spark data={[3,5,4,6,4,2,1]} width={120} height={20}/>
              </SkBox>
            ))}
          </div>
          {/* Drift feed + actions */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 6, flex: 1, minHeight: 0 }}>
            <SkBox seed={9} style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
                drift feed
                <SkPill accent="#fee4e2">3 new</SkPill>
              </div>
              {[
                ['Care plan SLA · 12 cases','Ops ↔ Clinical','3h'],
                ['Roster errors · spike','People','today'],
                ['Audit evidence · 4 gaps','Standards','yesterday'],
                ['Member onboarding ↑18m','Processes','2d'],
              ].map(([t, where, ago], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, paddingTop: 3, borderTop: i ? `1px dashed ${B_INK}40` : 'none' }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: i < 2 ? '#d92d20' : '#dc6803' }}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 700 }}>{t}</div>
                    <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{where}</div>
                  </div>
                  <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{ago}</div>
                </div>
              ))}
            </SkBox>
            <SkBox seed={11} style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ fontSize: 11, fontWeight: 700 }}>actions for you</div>
              {[
                ['Review AI weekly briefing','5 min'],
                ['Approve 3 improvement items','2 min'],
                ['Sign-off ISO evidence pack','15 min'],
              ].map(([t, s], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 0', borderTop: i ? `1px dashed ${B_INK}40` : 'none' }}>
                  <input type="checkbox" style={{ width: 12, height: 12 }}/>
                  <div style={{ flex: 1, fontSize: 11 }}>
                    <div style={{ fontWeight: 700 }}>{t}</div>
                    <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{s}</div>
                  </div>
                </div>
              ))}
              <SkBtn primary accent={B_INK} style={{ alignSelf: 'flex-start', marginTop: 4 }}>start with top item</SkBtn>
            </SkBox>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- B3: Drift signal → trace to root ----
function B3_Trace() {
  return (
    <SkFrame title="Drift signal" subtitle="trace to root" accent={B_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>
          Care plan SLA breach · root cause trace
        </div>
        {/* Trace chain */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 24px 1fr 24px 1fr', alignItems: 'center', gap: 4 }}>
          <SkBox seed={1} style={{ padding: 7, background: '#fee4e2' }}>
            <div style={{ fontSize: 10, color: window.sketchInkSoft, fontWeight: 700 }}>signal</div>
            <div style={{ fontSize: 12, fontWeight: 700 }}>12 SLA breaches</div>
            <div style={{ fontSize: 10 }}>past 14d, ↑180%</div>
          </SkBox>
          <div style={{ textAlign: 'center', fontWeight: 700 }}>→</div>
          <SkBox seed={2} style={{ padding: 7, background: '#fef0c7' }}>
            <div style={{ fontSize: 10, color: window.sketchInkSoft, fontWeight: 700 }}>process</div>
            <div style={{ fontSize: 12, fontWeight: 700 }}>Intake → Plan handoff</div>
            <div style={{ fontSize: 10 }}>Step 4 waits avg 6.2d</div>
          </SkBox>
          <div style={{ textAlign: 'center', fontWeight: 700 }}>→</div>
          <SkBox seed={3} style={{ padding: 7, background: '#d1e9ff' }}>
            <div style={{ fontSize: 10, color: window.sketchInkSoft, fontWeight: 700 }}>interface</div>
            <div style={{ fontSize: 12, fontWeight: 700 }}>Ops ↔ Clinical</div>
            <div style={{ fontSize: 10 }}>no SLA agreed</div>
          </SkBox>
        </div>
        {/* Root */}
        <SkBox seed={5} style={{ padding: 8, background: '#fff8e1' }}>
          <div style={{ fontSize: 10, color: window.sketchInkSoft, fontWeight: 700 }}>root cause (AI)</div>
          <div style={{ fontSize: 12, lineHeight: 1.3 }}>
            <b>Care plan handoff has no agreed SLA between Operations and Clinical.</b>
            New rostering pattern (introduced 3 wks ago) shifted load onto Tue/Wed —
            Clinical capacity drops on those days. Two issues compounding.
          </div>
        </SkBox>
        <div style={{ display: 'flex', gap: 6 }}>
          <SkBtn>open Ops ↔ Clinical interface</SkBtn>
          <SkBtn>see roster pattern</SkBtn>
          <div style={{ flex: 1 }}/>
          <SkBtn primary accent={B_INK}>create improvement (AI draft)</SkBtn>
        </div>
        <SkAnnot style={{ color: '#5e8a4f' }}>↑ what an analyst used to do for 2 days, the platform does in seconds.</SkAnnot>
      </div>
    </SkFrame>
  );
}

// ---- B4: Improvements board ----
function B4_Improvements() {
  const cols = [
    { name: 'New', accent: '#fff', items: [
      ['Define Ops↔Clinical SLA','AI · today','P1'],
      ['Rostering capacity rule','AI · today','P2'],
      ['Audit prep · evidence pack','Quality','P1'],
    ]},
    { name: 'In progress', accent: '#fef0c7', items: [
      ['Member onboarding redesign','J. Park','P2'],
      ['Risk committee charter','R. Singh','P1'],
    ]},
    { name: 'Review', accent: '#d1e9ff', items: [
      ['Incident severity taxonomy','AI draft','P2'],
    ]},
    { name: 'Done · 14d', accent: '#dcfae6', items: [
      ['NDIS practice mapping','✓','P2'],
      ['Decision rights v1','✓','P1'],
      ['+ 4 more','',''],
    ]},
  ];
  return (
    <SkFrame title="Improvements" subtitle="continuous queue" accent={B_ACCENT}>
      <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 6, height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>improvements · 47 open</div>
          <SkPill accent="#fee4e2">9 high priority</SkPill>
          <SkPill accent={B_ACCENT}>AI drafted 12 this week</SkPill>
          <div style={{ flex: 1 }}/>
          <SkBtn>filter</SkBtn>
          <SkBtn primary accent={B_INK}>＋ from a drift signal</SkBtn>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 5, flex: 1, minHeight: 0 }}>
          {cols.map((col, ci) => (
            <SkBox key={ci} seed={ci+2} style={{ padding: 6, background: col.accent, display: 'flex', flexDirection: 'column', gap: 4 }}>
              <div style={{ fontSize: 10.5, fontWeight: 700 }}>{col.name} · {col.items.length}</div>
              {col.items.map(([t, by, p], ii) => (
                <div key={ii} style={{
                  background: '#fff',
                  border: `1.3px solid ${B_INK}`,
                  borderRadius: window.hand(ii + ci),
                  padding: '4px 6px',
                  fontSize: 10.5, lineHeight: 1.15,
                }}>
                  <div style={{ fontWeight: 700 }}>{t}</div>
                  <div style={{ fontSize: 9.5, color: window.sketchInkSoft, display: 'flex', gap: 4 }}>
                    <span>{by}</span>
                    {p && <span style={{ marginLeft: 'auto', fontWeight: 700 }}>{p}</span>}
                  </div>
                </div>
              ))}
            </SkBox>
          ))}
        </div>
      </div>
    </SkFrame>
  );
}

// ---- B5: AI weekly briefing — replaces consultant report ----
function B5_Briefing() {
  return (
    <SkFrame title="Weekly briefing" subtitle="auto-generated" accent={B_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 22, fontWeight: 700 }}>Week of Mar 18 · Subicare</div>
          <SkPill accent={B_ACCENT}>generated · 6am Mon</SkPill>
          <div style={{ flex: 1 }}/>
          <SkBtn>send to board</SkBtn>
          <SkBtn>open as doc</SkBtn>
        </div>
        <SkBox seed={1} style={{ padding: 9, background: '#ecfdf3' }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: '#067647', marginBottom: 3 }}>HEADLINE</div>
          <div style={{ fontSize: 13, lineHeight: 1.35 }}>
            Org health <b>↓4 pts</b> driven by care-plan handoff drift. Standards posture stable; ISO 9001 audit on track. <b>12 improvements closed</b> · 3 new AI-drafted ready for review.
          </div>
        </SkBox>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, flex: 1, minHeight: 0 }}>
          <SkBox seed={2} style={{ padding: 8 }}>
            <div style={{ fontSize: 11, fontWeight: 700, marginBottom: 4 }}>what worsened</div>
            <SkLines count={4}/>
            <div style={{ marginTop: 6, fontSize: 10, color: window.sketchInkSoft }}>linked to: Processes · People · Ops↔Clinical</div>
          </SkBox>
          <SkBox seed={3} style={{ padding: 8 }}>
            <div style={{ fontSize: 11, fontWeight: 700, marginBottom: 4 }}>what improved</div>
            <SkLines count={3}/>
            <div style={{ marginTop: 6, fontSize: 10, color: window.sketchInkSoft }}>linked to: Standards · Governance</div>
          </SkBox>
        </div>
        <SkAnnot style={{ color: '#5e8a4f' }}>↑ this is the consulting deliverable — automated, weekly, traceable to data.</SkAnnot>
      </div>
    </SkFrame>
  );
}

// ---- B6: Standards / assurance panel ----
function B6_Assurance() {
  return (
    <SkFrame title="Standards" subtitle="assurance scoreboard" accent={B_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>standards posture</div>
          <SkPill accent={B_ACCENT}>87% · ↑2</SkPill>
          <div style={{ flex: 1 }}/>
          <SkBtn>＋ add standard</SkBtn>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          {[
            ['ISO 9001 · Quality','94%','#079455','audit in 9d'],
            ['NDIS Practice','73%','#dc6803','4 evidence gaps'],
            ['ISO 27001 · InfoSec','91%','#079455','annual review'],
            ['SOC 2 type II','—','#98a2b3','out of scope'],
          ].map(([n,p,c,note], i) => (
            <SkBox key={i} seed={i+1} style={{ padding: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
              <HealthRing value={p === '—' ? 0 : parseInt(p)} color={c} size={56}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 700 }}>{n}</div>
                <div style={{ fontSize: 10.5, color: window.sketchInkSoft }}>{note}</div>
                <div style={{ display: 'flex', gap: 3, marginTop: 4 }}>
                  {Array.from({length:10}).map((_, j) => (
                    <span key={j} style={{
                      width: 6, height: 10,
                      background: p === '—' ? '#e4e7ec' : (j < parseInt(p)/10 ? c : '#e4e7ec'),
                      border: `1px solid ${B_INK}`,
                    }}/>
                  ))}
                </div>
              </div>
            </SkBox>
          ))}
        </div>
        <SkBox seed={9} style={{ padding: 7, fontSize: 11, background: '#fff8e1' }}>
          <b>assurance ↔ cockpit:</b> every dropped score creates an improvement automatically, with AI-drafted evidence. assurance is just <i>another lens</i> on the same execution data.
        </SkBox>
      </div>
    </SkFrame>
  );
}

// ---- B7: How modules connect in cockpit ----
function B7_Connections() {
  return (
    <SkFrame title="How it fits together" subtitle="cockpit-led" accent={B_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>signals flow up · actions flow down</div>
        <div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
          {/* Center cockpit */}
          <div style={{
            position: 'absolute', left: '50%', top: '50%',
            transform: 'translate(-50%,-50%)',
            width: 160, height: 84,
            border: `2px solid ${B_INK}`,
            background: B_ACCENT,
            borderRadius: window.hand(7),
            display: 'grid', placeItems: 'center',
            fontFamily: '"Caveat", cursive', fontSize: 24, fontWeight: 700,
            boxShadow: `3px 3px 0 ${B_INK}`,
          }}>
            Cockpit
            <span style={{ position: 'absolute', bottom: 4, fontSize: 10, fontFamily: '"Architects Daughter", cursive' }}>(what needs you)</span>
          </div>
          {/* surrounding modules */}
          {[
            { x: 4, y: 8, label: 'Operating model', sub: '(canvas)' },
            { x: 78, y: 8, label: 'Standards', sub: '(assurance)' },
            { x: 4, y: 76, label: 'Improvements', sub: '(queue)' },
            { x: 78, y: 76, label: 'Interfaces', sub: '(diagnostic)' },
            { x: 42, y: 0, label: 'Org health', sub: '(diagnostic)' },
            { x: 42, y: 88, label: 'Intelligence', sub: '(AI patterns)' },
          ].map((m, i) => (
            <div key={i} style={{
              position: 'absolute', left: `${m.x}%`, top: `${m.y}%`,
              width: 110,
            }}>
              <SkModuleTile label={m.label} icon={m.label[0]} accent="#fff"/>
              <div style={{ fontSize: 9.5, marginTop: 2, color: window.sketchInkSoft, textAlign: 'center' }}>{m.sub}</div>
            </div>
          ))}
        </div>
        <SkAnnot style={{ color: '#5e8a4f', textAlign: 'center' }}>
          consulting becomes: AI briefings · drafted improvements · audited evidence. <br/>
          the human approves, doesn't author.
        </SkAnnot>
      </div>
    </SkFrame>
  );
}

window.DirectionB = {
  header: {
    letter: 'B',
    title: 'Execution cockpit',
    accent: B_ACCENT,
    summary: 'A daily-driver cockpit shows org health, drift signals, and what needs you. Modules are panels that feed the cockpit. The operating model lives underneath — but the front door is "what is happening, right now."',
    principle: '"You run the org from one room. The platform watches the rest."',
  },
  frames: [
    { id: 'b1', label: '1 · Sign in', w: 540, h: 360, render: () => <B1_Signin/> },
    { id: 'b2', label: '2 · Cockpit', w: 540, h: 360, render: () => <B2_Cockpit/> },
    { id: 'b3', label: '3 · Trace drift', w: 540, h: 360, render: () => <B3_Trace/> },
    { id: 'b4', label: '4 · Improvements', w: 540, h: 360, render: () => <B4_Improvements/> },
    { id: 'b5', label: '5 · AI briefing', w: 540, h: 360, render: () => <B5_Briefing/> },
    { id: 'b6', label: '6 · Assurance', w: 540, h: 360, render: () => <B6_Assurance/> },
    { id: 'b7', label: '7 · How it fits', w: 540, h: 360, render: () => <B7_Connections/> },
  ],
};