// Direction D — "Suite of apps"
// Like Microsoft 365 / Linear apps / Atlassian. Each module is its own app.
// A launcher home. Shared data underneath, but each module is a destination.

const D_ACCENT = '#c5a4ef'; // violet
const D_INK = window.sketchInk;

const MODULES = [
  { id: 'model',     label: 'Operating Model',     icon: '◇', accent: '#dbe9ff', tagline: 'design · steward · evolve' },
  { id: 'health',    label: 'Org Health',          icon: '♡', accent: '#fde6cc', tagline: 'diagnose effectiveness' },
  { id: 'assurance', label: 'Standards & Assurance', icon: '✓', accent: '#dcfae6', tagline: 'ISO · NDIS · SOC 2' },
  { id: 'interface', label: 'Interface Mgmt',      icon: '⇄', accent: '#fde2ea', tagline: 'team ↔ team friction' },
  { id: 'improve',   label: 'Continuous Improve',  icon: '↻', accent: '#fef0c7', tagline: 'queue · owners · drift' },
  { id: 'intel',     label: 'Operational Intel',   icon: '✦', accent: '#e8def8', tagline: 'AI patterns · briefings' },
];

function Launcher({ size = 18 }) {
  return (
    <div style={{
      width: size + 4, height: size + 4,
      border: `1.4px solid ${D_INK}`, borderRadius: 4,
      display: 'grid', placeItems: 'center',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1.5 }}>
        {Array.from({length:9}).map((_, i) => (
          <span key={i} style={{ width: 2, height: 2, background: D_INK, borderRadius: '50%' }}/>
        ))}
      </div>
    </div>
  );
}

// Top chrome — shared across all module apps in this direction
function SuiteChrome({ active = 'model', breadcrumb, children }) {
  const m = MODULES.find(x => x.id === active);
  return (
    <>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '6px 10px',
        borderBottom: `1.4px solid ${D_INK}`,
        background: '#fff',
        flex: 'none',
      }}>
        <Launcher/>
        <span style={{ fontSize: 12, fontWeight: 700 }}>Method 8</span>
        <span style={{ color: D_INK, opacity: 0.4 }}>/</span>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          fontSize: 11.5, fontWeight: 700,
          padding: '2px 8px',
          background: m.accent,
          border: `1.3px solid ${D_INK}`,
          borderRadius: window.hand(2),
        }}>
          <span style={{ fontSize: 14 }}>{m.icon}</span>
          {m.label}
        </span>
        {breadcrumb && <span style={{ fontSize: 11, color: window.sketchInkSoft }}>· {breadcrumb}</span>}
        <div style={{ flex: 1 }}/>
        <SkBtn>search</SkBtn>
        <SkBtn>AI</SkBtn>
        <SkAvatar initial="P" size={20} accent={D_ACCENT}/>
      </div>
      {children}
    </>
  );
}

// ---- D1: Sign in → suite landing ----
function D1_Signin() {
  return (
    <SkFrame title="Sign in" subtitle="enter the suite" accent={D_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, fontWeight: 700 }}>
            Subicare Health.
          </div>
          <div style={{ fontSize: 12, color: window.sketchInkSoft }}>
            Six tools. One organisation underneath. Pick what you need today.
          </div>
          <SkBox seed={1} style={{ padding: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <SkAvatar initial="P" size={22} accent={D_ACCENT}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 12 }}>Priya Iyer</div>
                <div style={{ fontSize: 10.5, color: window.sketchInkSoft }}>COO · access to all 6 modules</div>
              </div>
              <SkBtn primary accent={D_INK}>enter</SkBtn>
            </div>
          </SkBox>
          <div style={{ fontSize: 10.5, color: window.sketchInkSoft, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1 }}>recent</div>
          {[
            ['Org Health', 'Q1 scan · 67% complete', '#fde6cc'],
            ['Improvements', '47 open · 9 P1', '#fef0c7'],
            ['Assurance', 'ISO 9001 audit · 9 days', '#dcfae6'],
          ].map(([t, s, c], i) => (
            <SkBox key={i} seed={i+3} style={{ padding: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{ width: 22, height: 22, background: c, border: `1.3px solid ${D_INK}`, borderRadius: window.hand(i+9), display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12 }}>◇</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 11.5 }}>{t}</div>
                <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{s}</div>
              </div>
            </SkBox>
          ))}
        </div>
        <div style={{ background: '#f5efff', padding: 16, borderLeft: `1.5px solid ${D_INK}`, display: 'flex', flexDirection: 'column', gap: 8, justifyContent: 'center' }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>your suite</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 5 }}>
            {MODULES.map(m => (
              <SkModuleTile key={m.id} label={m.label} icon={m.icon} accent={m.accent}/>
            ))}
          </div>
          <SkAnnot style={{ marginTop: 4, color: '#6b3fa0' }}>
            ↑ shared org · shared model.<br/>each app is its own room.
          </SkAnnot>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- D2: Suite home / launcher ----
function D2_Launcher() {
  return (
    <SkFrame title="Home" subtitle="the launcher" accent={D_ACCENT}>
      <SuiteChrome active="model" breadcrumb="home">
        <div style={{ flex: 1, padding: 12, display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden' }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 22, fontWeight: 700 }}>Good morning, Priya.</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 7 }}>
            {MODULES.map((m, i) => (
              <SkBox key={m.id} seed={i+1} style={{
                padding: 9, background: m.accent,
                display: 'flex', flexDirection: 'column', gap: 4,
                minHeight: 76,
                boxShadow: `2px 2px 0 ${D_INK}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ width: 22, height: 22, background: '#fff', border: `1.3px solid ${D_INK}`, borderRadius: 5, display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 14 }}>{m.icon}</div>
                  <div style={{ fontSize: 12, fontWeight: 700 }}>{m.label}</div>
                </div>
                <div style={{ fontSize: 10.5, color: window.sketchInkSoft, lineHeight: 1.2 }}>{m.tagline}</div>
                <div style={{
                  marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  fontSize: 10, color: window.sketchInkSoft,
                }}>
                  <span>{['stable','67% scan','87%','3 hot','47 open','12 patterns'][i]}</span>
                  <span style={{ fontWeight: 700 }}>open →</span>
                </div>
              </SkBox>
            ))}
          </div>
          <SkAnnot style={{ color: '#6b3fa0' }}>
            ↑ six rooms in one house. you live in 1–2 daily, visit the rest as needed.
          </SkAnnot>
        </div>
      </SuiteChrome>
    </SkFrame>
  );
}

// ---- D3: Operating Model app ----
function D3_ModelApp() {
  return (
    <SkFrame title="Operating Model" subtitle="app" accent={D_ACCENT}>
      <SuiteChrome active="model" breadcrumb="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 model · v3.2</div>
            <div style={{ flex: 1 }}/>
            <SkBtn>history</SkBtn>
            <SkBtn>publish</SkBtn>
            <SkBtn primary accent={D_INK}>AI co-build</SkBtn>
          </div>
          <SkBox seed={4} style={{ padding: 0, height: 220, position: 'relative', background: '#fdfbf3' }}>
            {/* tiny canvas */}
            <div style={{ position: 'relative', width: '100%', height: '100%' }}>
              {[
                ['Strategy', 14, 18],['Value', 50, 14],['Customers', 86, 18],
                ['Capabilities', 16, 50],['Processes', 38, 50],['Org', 60, 50],['Governance', 84, 50],
                ['Data/Tech', 26, 82],['People', 50, 82],['Standards', 76, 82],
              ].map(([n,x,y], i) => (
                <div key={i} style={{
                  position: 'absolute', left: `${x}%`, top: `${y}%`,
                  transform: 'translate(-50%,-50%)',
                  width: 64, height: 36,
                  border: `1.4px solid ${D_INK}`,
                  background: i === 3 ? D_ACCENT : '#fff',
                  borderRadius: window.hand(i+1),
                  display: 'grid', placeItems: 'center',
                  fontSize: 9.5, fontWeight: 700, textAlign: 'center',
                }}>{n}</div>
              ))}
            </div>
          </SkBox>
          <div style={{ fontSize: 11, color: window.sketchInkSoft, display: 'flex', gap: 8 }}>
            <span>10 blocks</span>
            <span>·</span>
            <span>47 capabilities</span>
            <span>·</span>
            <span>last edit · J. Park · 2h</span>
            <span style={{ marginLeft: 'auto', fontWeight: 700, color: D_INK }}>shared with Org Health · Assurance · Interfaces · 3 more</span>
          </div>
        </div>
      </SuiteChrome>
    </SkFrame>
  );
}

// ---- D4: Org Health app ----
function D4_HealthApp() {
  return (
    <SkFrame title="Org Health" subtitle="app" accent={D_ACCENT}>
      <SuiteChrome active="health" breadcrumb="Q1 scan">
        <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 }}>Q1 organisational health scan</div>
            <SkPill accent="#fef0c7">67% complete</SkPill>
            <div style={{ flex: 1 }}/>
            <SkBtn primary accent={D_INK}>continue scan</SkBtn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 5 }}>
            {[
              ['Strategic clarity', 78, '#079455'],
              ['Operating discipline', 61, '#dc6803'],
              ['Org structure', 72, '#fdb022'],
              ['People & culture', 54, '#dc6803'],
              ['Tech & data', 81, '#079455'],
              ['Risk & control', 69, '#fdb022'],
            ].map(([n, v, c], i) => (
              <SkBox key={i} seed={i+1} style={{ padding: 7 }}>
                <div style={{ fontSize: 10.5, fontWeight: 700 }}>{n}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, marginTop: 2 }}>
                  <div style={{ fontFamily: '"Caveat", cursive', fontSize: 22, fontWeight: 700, color: c }}>{v}</div>
                  <div style={{ fontSize: 9.5, color: window.sketchInkSoft }}>/ 100</div>
                </div>
                <div style={{ height: 5, background: '#eee', border: `1px solid ${D_INK}`, borderRadius: 2, marginTop: 3, overflow: 'hidden' }}>
                  <div style={{ width: `${v}%`, height: '100%', background: c }}/>
                </div>
              </SkBox>
            ))}
          </div>
          <SkBox seed={8} style={{ padding: 7, background: '#fffdf3', fontSize: 11, lineHeight: 1.3 }}>
            <b>cross-module link:</b> all dimensions map to nodes in your Operating Model.
            Click any dimension to jump to the related capability or function.
          </SkBox>
          <SkAnnot style={{ color: '#6b3fa0' }}>↑ apps are separate · but they share the underlying org model.</SkAnnot>
        </div>
      </SuiteChrome>
    </SkFrame>
  );
}

// ---- D5: AI Copilot ribbon (cross-app) ----
function D5_Copilot() {
  return (
    <SkFrame title="AI co-pilot" subtitle="works across all apps" accent={D_ACCENT}>
      <SuiteChrome active="intel" breadcrumb="co-pilot">
        <div style={{ flex: 1, padding: 10, display: 'flex', gap: 8 }}>
          {/* left app (improvements) */}
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ fontSize: 11, color: window.sketchInkSoft, fontWeight: 700 }}>improvements (still open underneath)</div>
            {[
              ['Define Ops↔Clinical SLA','draft ready'],
              ['Risk Committee charter','in review'],
              ['NDIS evidence pack','drafting'],
            ].map(([t, s], i) => (
              <SkBox key={i} seed={i+1} style={{ padding: 6, fontSize: 11 }}>
                <div style={{ fontWeight: 700 }}>{t}</div>
                <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{s}</div>
              </SkBox>
            ))}
          </div>
          {/* right co-pilot drawer */}
          <div style={{
            width: 220,
            border: `1.5px solid ${D_INK}`,
            borderRadius: window.hand(5),
            background: '#fff',
            display: 'flex', flexDirection: 'column',
            boxShadow: `2px 2px 0 ${D_INK}`,
          }}>
            <div style={{ padding: 7, borderBottom: `1.3px solid ${D_INK}`, background: D_ACCENT, fontSize: 11.5, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
              <SkAvatar initial="✦" size={18}/> Co-pilot
            </div>
            <div style={{ flex: 1, padding: 8, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 10.5 }}>
              <div style={{ background: '#f5efff', border: `1.2px solid ${D_INK}`, borderRadius: window.hand(3), padding: 6, lineHeight: 1.25 }}>
                "Draft an interface contract between Operations and Clinical."
              </div>
              <div style={{ fontSize: 10, color: window.sketchInkSoft, lineHeight: 1.3 }}>
                I read your Operating Model · pulled the 4 shared processes · checked Standards. Drafting…
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                <SkPill style={{ fontSize: 9.5 }}>↓ Op. Model</SkPill>
                <SkPill style={{ fontSize: 9.5 }}>↓ Assurance</SkPill>
                <SkPill style={{ fontSize: 9.5 }}>↑ Improvements</SkPill>
              </div>
              <SkBox seed={4} dashed style={{ padding: 5, fontSize: 10, background: '#fff8e1' }}>
                replaces a consulting deliverable. you approve, AI edits.
              </SkBox>
            </div>
            <div style={{ padding: 6, borderTop: `1.3px solid ${D_INK}` }}>
              <SkBtn primary accent={D_INK} style={{ width: '100%' }}>accept · push to Improve</SkBtn>
            </div>
          </div>
        </div>
      </SuiteChrome>
    </SkFrame>
  );
}

// ---- D6: Cross-app workspace ----
function D6_Workspace() {
  return (
    <SkFrame title="Workspaces" subtitle="cross-app threads" accent={D_ACCENT}>
      <SuiteChrome active="assurance" breadcrumb="ISO 9001 audit · 9 days">
        <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>ISO 9001 audit · workspace</div>
            <SkPill accent="#dcfae6">3 apps · 1 goal</SkPill>
            <div style={{ flex: 1 }}/>
            <SkBtn>add app</SkBtn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
            {[
              ['Assurance', '#dcfae6', '4 evidence items', ['Doc · QMS','Doc · CAPA','Audit log','Mgmt review']],
              ['Op. Model', '#dbe9ff', 'processes touched', ['Intake','Care planning','Roster','Incident']],
              ['Improvements', '#fef0c7', 'actions in flight', ['Evidence pack','Mgmt review prep','Roster gap']],
            ].map(([n, c, sub, items], i) => (
              <SkBox key={i} seed={i+1} style={{ padding: 7, background: c }}>
                <div style={{ fontSize: 11, fontWeight: 700 }}>{n}</div>
                <div style={{ fontSize: 9.5, color: window.sketchInkSoft, marginBottom: 4 }}>{sub}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  {items.map((it, j) => (
                    <div key={j} style={{
                      background: '#fff', border: `1.2px solid ${D_INK}`,
                      borderRadius: window.hand(j+i),
                      padding: '2px 5px', fontSize: 10,
                    }}>{it}</div>
                  ))}
                </div>
              </SkBox>
            ))}
          </div>
          <SkBox seed={9} style={{ padding: 7, fontSize: 11, lineHeight: 1.3, background: '#fffdf3' }}>
            <b>workspaces solve the silo problem.</b> any "thing you're working on" (audit, transformation, M&A) gets a workspace that pulls slices from each app.
          </SkBox>
        </div>
      </SuiteChrome>
    </SkFrame>
  );
}

// ---- D7: How it fits — shared org under the apps ----
function D7_Fit() {
  return (
    <SkFrame title="How it fits" subtitle="apps over shared org" accent={D_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 7, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>six rooms · one foundation</div>
        {/* six modules in a row */}
        <div style={{ display: 'flex', gap: 5, justifyContent: 'space-between' }}>
          {MODULES.map((m, i) => (
            <div key={m.id} style={{ flex: 1 }}>
              <SkModuleTile label={m.label} icon={m.icon} accent={m.accent}/>
            </div>
          ))}
        </div>
        {/* connection lines */}
        <div style={{ height: 12, position: 'relative' }}>
          <svg viewBox="0 0 600 12" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
            {[0,1,2,3,4,5].map(i => (
              <line key={i}
                x1={50 + i * 100} y1={0}
                x2={300} y2={12}
                stroke={D_INK} strokeWidth="0.8" strokeDasharray="2 2"/>
            ))}
          </svg>
        </div>
        {/* shared foundation */}
        <div style={{
          border: `1.6px solid ${D_INK}`,
          borderRadius: window.hand(8),
          background: '#f5efff',
          padding: 10,
          fontSize: 11.5, lineHeight: 1.3,
        }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>shared org foundation</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 4 }}>
            {['operating model','people graph','decision rights','process catalog','standards library','signal stream','events log'].map(t => (
              <SkPill key={t} accent="#fff" style={{ fontSize: 10 }}>{t}</SkPill>
            ))}
          </div>
        </div>
        <SkAnnot style={{ color: '#6b3fa0' }}>
          ↑ no double-entry. apps consume + write back to the same foundation. AI lives at the foundation level — it sees everything.
        </SkAnnot>
        <div style={{
          marginTop: 'auto',
          padding: 8,
          background: '#fff',
          border: `1.4px dashed ${D_INK}`,
          borderRadius: window.hand(5),
          fontSize: 11,
        }}>
          <b>consulting becomes:</b> in-app expert prompts · shared workspaces with your consultant · AI-drafted artifacts the consultant reviews.
        </div>
      </div>
    </SkFrame>
  );
}

window.DirectionD = {
  header: {
    letter: 'D',
    title: 'Suite of apps',
    accent: D_ACCENT,
    summary: 'Six modules, six apps. A launcher home. Each is its own destination with its own URL and its own UI, but they share an org foundation underneath (model, people, standards, signals). AI is a co-pilot that crosses apps.',
    principle: '"Six rooms in one house. You live in one, visit the rest."',
  },
  frames: [
    { id: 'd1', label: '1 · Sign in', w: 540, h: 360, render: () => <D1_Signin/> },
    { id: 'd2', label: '2 · Launcher', w: 540, h: 360, render: () => <D2_Launcher/> },
    { id: 'd3', label: '3 · Op. Model app', w: 540, h: 360, render: () => <D3_ModelApp/> },
    { id: 'd4', label: '4 · Org Health app', w: 540, h: 360, render: () => <D4_HealthApp/> },
    { id: 'd5', label: '5 · Co-pilot ribbon', w: 540, h: 360, render: () => <D5_Copilot/> },
    { id: 'd6', label: '6 · Workspace', w: 540, h: 360, render: () => <D6_Workspace/> },
    { id: 'd7', label: '7 · How it fits', w: 540, h: 360, render: () => <D7_Fit/> },
  ],
};