// Direction A — "Living Operating Model"
// The canvas IS the product. Modules are lenses over the same model.

const A_ACCENT = '#fcd96a'; // amber
const A_INK = window.sketchInk;
const A_PAPER = window.sketchPaper;

// Helper: render a node on the operating-model canvas
function OMNode({ label, x, y, size = 56, accent, dim, hot, badge, shape = 'hex' }) {
  const path = shape === 'hex'
    ? 'polygon(25% 4%, 75% 4%, 98% 50%, 75% 96%, 25% 96%, 2% 50%)'
    : 'circle(48% at 50% 50%)';
  return (
    <div style={{
      position: 'absolute',
      left: `${x}%`, top: `${y}%`,
      transform: 'translate(-50%, -50%)',
      width: size, height: size,
      display: 'grid', placeItems: 'center',
      filter: dim ? 'grayscale(1) opacity(0.55)' : 'none',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: hot ? '#ff9b6b' : (accent || '#fff'),
        clipPath: path,
        border: 'none',
      }}/>
      <div style={{
        position: 'absolute', inset: 1.5,
        background: hot ? '#ffd2bb' : '#fff',
        clipPath: path,
      }}/>
      <div style={{
        position: 'relative',
        fontSize: 10.5, lineHeight: 1.05,
        fontWeight: 700, textAlign: 'center',
        padding: '0 6px',
        fontFamily: '"Architects Daughter", cursive',
      }}>{label}</div>
      {badge && (
        <div style={{
          position: 'absolute', top: -6, right: -6,
          width: 18, height: 18,
          border: `1.4px solid ${A_INK}`,
          background: '#fff',
          borderRadius: '50%',
          display: 'grid', placeItems: 'center',
          fontSize: 9, fontWeight: 700,
          fontFamily: '"Architects Daughter", cursive',
        }}>{badge}</div>
      )}
    </div>
  );
}

// Connector line between %-positioned nodes
function OMEdge({ x1, y1, x2, y2, dashed }) {
  const dx = x2 - x1, dy = y2 - y1;
  const len = Math.sqrt(dx*dx + dy*dy);
  const ang = Math.atan2(dy, dx) * 180 / Math.PI;
  return (
    <div style={{
      position: 'absolute', left: `${x1}%`, top: `${y1}%`,
      width: `${len}%`, height: 0,
      transform: `rotate(${ang}deg)`,
      transformOrigin: '0 0',
      borderTop: `${dashed ? '1.2px dashed' : '1.4px solid'} ${A_INK}`,
      opacity: 0.55,
    }}/>
  );
}

// The canvas widget — reusable across frames so the lens changes feel coherent
function OperatingModelCanvas({ lens = 'design', height = 250 }) {
  // 10 building blocks of an operating model — rough positions
  const blocks = [
    { id: 'strategy', label: 'Strategy', x: 18, y: 22 },
    { id: 'value',    label: 'Value chain', x: 50, y: 18 },
    { id: 'cust',     label: 'Customers', x: 82, y: 22 },
    { id: 'cap',      label: 'Capabilities', x: 18, y: 50 },
    { id: 'proc',     label: 'Processes', x: 38, y: 50, hot: lens === 'health' },
    { id: 'org',      label: 'Org structure', x: 60, y: 50 },
    { id: 'gov',      label: 'Governance', x: 82, y: 50, accent: lens === 'gov' ? A_ACCENT : null },
    { id: 'data',     label: 'Data & tech', x: 30, y: 78 },
    { id: 'people',   label: 'People', x: 52, y: 78, hot: lens === 'health' },
    { id: 'std',      label: 'Standards', x: 74, y: 78, accent: lens === 'assurance' ? '#a5e3a8' : null, badge: lens === 'assurance' ? '!' : null },
  ];
  const edges = [
    ['strategy','value'],['value','cust'],
    ['strategy','cap'],['value','proc'],['cust','gov'],
    ['cap','proc'],['proc','org'],['org','gov'],
    ['cap','data'],['proc','people'],['org','people'],['gov','std'],
    ['data','people'],['people','std'],
  ];
  const get = (id) => blocks.find(b => b.id === id);

  return (
    <div style={{
      position: 'relative',
      height,
      background: lens === 'health'
        ? 'radial-gradient(ellipse at 45% 60%, #ffe7d5 0%, transparent 55%), #fdfbf3'
        : lens === 'assurance'
        ? 'radial-gradient(ellipse at 72% 76%, #e3f6df 0%, transparent 50%), #fdfbf3'
        : lens === 'gov'
        ? 'radial-gradient(ellipse at 82% 50%, #fff0c2 0%, transparent 55%), #fdfbf3'
        : '#fdfbf3',
      border: `1.4px dashed ${A_INK}`,
      borderRadius: window.hand(7),
      overflow: 'hidden',
    }}>
      {edges.map(([a,b], i) => {
        const A = get(a), B = get(b);
        return <OMEdge key={i} x1={A.x} y1={A.y} x2={B.x} y2={B.y} dashed/>;
      })}
      {blocks.map(b => <OMNode key={b.id} {...b}/>)}
      {/* corner label */}
      <div style={{
        position: 'absolute', top: 6, left: 8,
        fontFamily: '"Caveat", cursive', fontSize: 14, fontWeight: 700,
        color: A_INK,
      }}>your operating model · v3.2</div>
      <div style={{
        position: 'absolute', top: 6, right: 8,
        padding: '1px 7px',
        background: '#fff',
        border: `1.2px solid ${A_INK}`,
        borderRadius: 99,
        fontSize: 10, fontWeight: 700, fontFamily: '"Architects Daughter", cursive',
      }}>lens: {lens}</div>
    </div>
  );
}

// ---- Frame A1: Sign in / org context ----
function A1_Signin() {
  return (
    <SkFrame title="Sign in" subtitle="land in your org" accent={A_ACCENT}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        height: '100%',
      }}>
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 26, lineHeight: 1.05, fontWeight: 700 }}>
            Welcome back, Priya.
          </div>
          <div style={{ fontSize: 12, color: window.sketchInkSoft }}>
            Pick the organisation you're operating today.
          </div>
          <SkBox seed={3} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 32, height: 32, border: `1.4px solid ${A_INK}`, borderRadius: 8, background: A_ACCENT, display: 'grid', placeItems: 'center', fontWeight: 700 }}>S</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 13 }}>Subicare Health</div>
              <div style={{ fontSize: 11, color: window.sketchInkSoft }}>Operating model · 8 functions · v3.2</div>
            </div>
            <SkBtn primary accent={A_INK}>Enter →</SkBtn>
          </SkBox>
          <SkBox seed={5} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 32, height: 32, border: `1.4px solid ${A_INK}`, borderRadius: 8, background: '#fff', display: 'grid', placeItems: 'center', fontWeight: 700 }}>L</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 13 }}>Lightwell Energy</div>
              <div style={{ fontSize: 11, color: window.sketchInkSoft }}>Model · being designed by AI…</div>
            </div>
            <SkPill accent="#ffd2bb">drafting</SkPill>
          </SkBox>
          <SkBox seed={7} dashed style={{ display: 'flex', alignItems: 'center', gap: 10, color: window.sketchInkSoft }}>
            <span style={{ fontSize: 18, fontWeight: 700 }}>+</span>
            <div style={{ fontSize: 12 }}>Spin up a new organisation</div>
          </SkBox>
        </div>
        <div style={{
          background: '#fff8e1',
          borderLeft: `1.5px solid ${A_INK}`,
          padding: 16,
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
        }}>
          <OperatingModelCanvas height={210} lens="design"/>
          <SkAnnot style={{ marginTop: 8, color: '#8b5a00' }}>
            ← every org is a living model.<br/>
            modules are lenses over <i>this</i> thing.
          </SkAnnot>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- Frame A2: Home — the canvas IS the product ----
function A2_Canvas() {
  const navItems = ['Canvas','Health','Governance','Assurance','Interfaces','Improve','Intelligence'];
  return (
    <SkFrame title="Canvas" subtitle="home" accent={A_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        <SkNav items={navItems} current={0} accent={A_ACCENT} brand="M8"/>
        <div style={{ flex: 1, padding: 12, display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 22, fontWeight: 700 }}>Subicare Health · operating canvas</div>
            <div style={{ flex: 1 }}/>
            <SkPill accent="#dcfae6">3 lenses on</SkPill>
            <SkPill>v3.2</SkPill>
          </div>
          <OperatingModelCanvas height={220} lens="design"/>
          <div style={{ display: 'flex', gap: 6 }}>
            {['Design','Health','Governance','Assurance','Interfaces'].map((l, i) => (
              <div key={l} style={{
                padding: '3px 9px', fontSize: 11, fontWeight: 700,
                border: `1.3px solid ${A_INK}`, borderRadius: 99,
                background: i === 0 ? A_ACCENT : '#fff',
              }}>{l} lens</div>
            ))}
            <div style={{ flex: 1 }}/>
            <SkBtn primary accent={A_INK}>＋ ask AI</SkBtn>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- Frame A3: Drill into a node ----
function A3_NodeDetail() {
  return (
    <SkFrame title="Capabilities" subtitle="drilled in" accent={A_ACCENT}>
      <div style={{ display: 'flex', height: '100%' }}>
        <div style={{ width: 200, borderRight: `1.5px solid ${A_INK}`, background: '#fff', padding: 10 }}>
          <div style={{ fontSize: 11, color: window.sketchInkSoft, fontWeight: 700 }}>← back to canvas</div>
          <div style={{
            marginTop: 8,
            position: 'relative', height: 110,
            border: `1.4px dashed ${A_INK}`, borderRadius: window.hand(2),
            background: '#fdfbf3',
          }}>
            <OMNode label="Capabilities" x={50} y={50} size={60} accent={A_ACCENT}/>
            <OMEdge x1={50} y1={50} x2={20} y2={20}/>
            <OMEdge x1={50} y1={50} x2={80} y2={20}/>
            <OMEdge x1={50} y1={50} x2={50} y2={85}/>
          </div>
          <div style={{ fontSize: 11, marginTop: 8, color: window.sketchInkSoft, lineHeight: 1.3 }}>
            connected to:<br/>
            Strategy · Processes · Data & tech · People
          </div>
        </div>
        <div style={{ flex: 1, padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ fontFamily: '"Caveat", cursive', fontSize: 24, fontWeight: 700 }}>Capabilities</div>
            <SkPill accent="#ffd2bb">3 hot signals</SkPill>
            <div style={{ flex: 1 }}/>
            <SkBtn>edit</SkBtn>
            <SkBtn primary accent={A_INK}>AI co-author</SkBtn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
            {['Service design','Clinical assessment','Care planning','Rostering','Compliance ops','Member onboarding'].map((c, i) => (
              <SkBox key={c} seed={i+9} style={{ padding: '6px 8px', fontSize: 11, lineHeight: 1.1 }}>
                <div style={{ fontWeight: 700 }}>{c}</div>
                <div style={{ fontSize: 10, color: window.sketchInkSoft }}>maturity · {2 + (i%4)} / 5</div>
              </SkBox>
            ))}
          </div>
          <div style={{
            border: `1.4px solid ${A_INK}`, borderRadius: window.hand(3),
            background: '#fff8e1', padding: 8, fontSize: 11.5,
          }}>
            <div style={{ fontWeight: 700, marginBottom: 3 }}>signals attached to this node</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <SkPill accent="#fee4e2">2 health flags</SkPill>
              <SkPill accent="#fef0c7">1 standards gap</SkPill>
              <SkPill accent="#d1e9ff">4 open improvements</SkPill>
              <SkPill accent="#dcfae6">2 interfaces</SkPill>
            </div>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- Frame A4: Switch lens — same canvas, new overlay ----
function A4_LensSwitch({ lens = 'health' }) {
  const labels = { health: 'Health lens', gov: 'Governance lens', assurance: 'Assurance lens' };
  return (
    <SkFrame title={labels[lens]} subtitle="same model, new lens" accent={A_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>
            {lens === 'health' && 'Where is the org under pressure?'}
            {lens === 'gov' && 'Where is decision-making unclear?'}
            {lens === 'assurance' && 'Where do we have standards coverage?'}
          </div>
          <div style={{ flex: 1 }}/>
          {['Design','Health','Gov.','Assure'].map((l, i) => {
            const active = (lens === 'health' && i === 1) || (lens === 'gov' && i === 2) || (lens === 'assurance' && i === 3);
            return (
              <div key={l} style={{
                padding: '3px 8px', fontSize: 10.5, fontWeight: 700,
                border: `1.3px solid ${A_INK}`, borderRadius: 99,
                background: active ? A_ACCENT : '#fff',
              }}>{l}</div>
            );
          })}
        </div>
        <OperatingModelCanvas height={220} lens={lens}/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
          {lens === 'health' && [
            ['Processes','red · 17 incidents'],
            ['People','amber · turnover ↑'],
            ['Standards','watching'],
          ].map(([k,v], i) => (
            <SkBox key={i} seed={i+4} style={{ fontSize: 11, padding: '5px 7px' }}>
              <div style={{ fontWeight: 700 }}>{k}</div>
              <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{v}</div>
            </SkBox>
          ))}
          {lens === 'gov' && [
            ['Governance','15 decisions unmapped'],
            ['Org structure','3 owner gaps'],
            ['Customers','escalation path unclear'],
          ].map(([k,v], i) => (
            <SkBox key={i} seed={i+4} style={{ fontSize: 11, padding: '5px 7px' }}>
              <div style={{ fontWeight: 700 }}>{k}</div>
              <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{v}</div>
            </SkBox>
          ))}
          {lens === 'assurance' && [
            ['ISO 9001','covered · 87%'],
            ['NDIS practice','gap · 4 items'],
            ['SOC 2','out of scope'],
          ].map(([k,v], i) => (
            <SkBox key={i} seed={i+4} style={{ fontSize: 11, padding: '5px 7px' }}>
              <div style={{ fontWeight: 700 }}>{k}</div>
              <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{v}</div>
            </SkBox>
          ))}
        </div>
      </div>
    </SkFrame>
  );
}

// ---- Frame A5: AI co-author replaces consulting ----
function A5_AICoauthor() {
  return (
    <SkFrame title="AI co-author" subtitle="replaces the consulting workshop" accent={A_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', height: '100%' }}>
        <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, borderRight: `1.5px solid ${A_INK}` }}>
          <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>
            "Draft our incident-response governance"
          </div>
          <SkBox seed={1} filled="#fff8e1" style={{ fontSize: 12, lineHeight: 1.3, padding: 8 }}>
            <div style={{ fontWeight: 700, marginBottom: 3, display: 'flex', alignItems: 'center', gap: 6 }}>
              <SkAvatar initial="✦" size={18} accent={A_ACCENT}/> Method 8 co-author
            </div>
            I'll work across <b>Governance</b>, <b>Processes</b>, <b>People</b> and <b>Standards</b> nodes.
            Pulling your ISO 9001 control set + your existing escalation map…
          </SkBox>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 11.5 }}>
            {[
              ['drafted', 'Decision rights matrix (12 roles)'],
              ['drafted', 'Incident severity taxonomy (4 tiers)'],
              ['drafting', 'Escalation playbook · awaiting review'],
              ['queued', 'Standards mapping → ISO 27035'],
            ].map(([s, t], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{
                  width: 56, fontSize: 10, fontWeight: 700,
                  textAlign: 'center',
                  padding: '1px 0',
                  border: `1.2px solid ${A_INK}`, borderRadius: 99,
                  background: s === 'drafted' ? '#dcfae6' : s === 'drafting' ? '#fef0c7' : '#fff',
                }}>{s}</div>
                <div>{t}</div>
              </div>
            ))}
          </div>
          <SkAnnot style={{ color: '#8b5a00' }}>
            ↑ this was a 6-week consulting engagement.<br/>now: 90 minutes, reviewable.
          </SkAnnot>
        </div>
        <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 6, background: '#fffaf0' }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: window.sketchInkSoft }}>writing into your canvas →</div>
          <OperatingModelCanvas height={210} lens="gov"/>
          <div style={{ display: 'flex', gap: 6 }}>
            <SkBtn>review changes (12)</SkBtn>
            <SkBtn primary accent={A_INK}>accept all</SkBtn>
          </div>
        </div>
      </div>
    </SkFrame>
  );
}

// ---- Frame A6: Time / change log ----
function A6_TimeTravel() {
  return (
    <SkFrame title="Time travel" subtitle="how the model evolved" accent={A_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700 }}>your operating model over time</div>
        <OperatingModelCanvas height={170} lens="design"/>
        {/* Timeline */}
        <div style={{ position: 'relative', padding: '14px 0 6px' }}>
          <div style={{
            position: 'absolute', left: 8, right: 8, top: 22,
            height: 0, borderTop: `1.4px solid ${A_INK}`,
          }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', position: 'relative' }}>
            {[
              ['v1.0','Mar', '#fff'],
              ['v2.0','Jun', '#fff'],
              ['v2.5','Aug', '#dcfae6'],
              ['v3.0','Oct', '#fef0c7'],
              ['v3.2','now', A_ACCENT],
              ['v3.3','draft', '#ffd2bb'],
            ].map(([v,d,bg], i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
                <div style={{
                  width: 18, height: 18, borderRadius: '50%',
                  border: `1.4px solid ${A_INK}`,
                  background: bg,
                }}/>
                <div style={{ fontSize: 11, fontWeight: 700 }}>{v}</div>
                <div style={{ fontSize: 10, color: window.sketchInkSoft }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
        <SkBox seed={2} style={{ fontSize: 11, padding: 7, background: '#fff8e1' }}>
          <b>v3.2 → v3.3 (AI proposal):</b> add Risk Committee under Governance · merge two Service Design capabilities · add NDIS practice standard to Standards node.
        </SkBox>
      </div>
    </SkFrame>
  );
}

// ---- Frame A7: Multiple entry points — same canvas underneath ----
function A7_EntryPoints() {
  return (
    <SkFrame title="Same model · many doors" subtitle="how teams start" accent={A_ACCENT}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, height: '100%' }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 18, fontWeight: 700 }}>start anywhere · everything connects</div>
        <div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
          {/* Center: canvas */}
          <div style={{
            position: 'absolute', left: '50%', top: '50%',
            transform: 'translate(-50%,-50%)',
            width: 230, height: 130,
          }}>
            <OperatingModelCanvas height={130} lens="design"/>
          </div>
          {/* Surrounding entry doors */}
          {[
            { x: 6, y: 6,  label: 'COO: "show me health"', from: 'top-left' },
            { x: 75, y: 6, label: 'Quality lead: "open ISO gaps"', from: 'top-right' },
            { x: 6, y: 76, label: 'Ops mgr: "fix HR ↔ Ops"', from: 'bottom-left' },
            { x: 75, y: 76, label: 'Consultant: "design model"', from: 'bottom-right' },
            { x: 38, y: 2, label: 'CEO: "weekly briefing"', from: 'top' },
            { x: 38, y: 88, label: 'AI: drafts improvements', from: 'bottom' },
          ].map((e, i) => (
            <div key={i} style={{
              position: 'absolute',
              left: `${e.x}%`, top: `${e.y}%`,
              width: 110,
              border: `1.4px solid ${A_INK}`,
              background: '#fff',
              borderRadius: window.hand(i + 4),
              padding: '5px 7px',
              fontSize: 10.5, fontWeight: 700,
              lineHeight: 1.15,
              boxShadow: `2px 2px 0 ${A_INK}`,
            }}>{e.label}</div>
          ))}
        </div>
        <SkAnnot style={{ alignSelf: 'center', color: '#8b5a00' }}>
          the canvas is the connective tissue — every role enters via a different door.
        </SkAnnot>
      </div>
    </SkFrame>
  );
}

window.DirectionA = {
  header: {
    letter: 'A',
    title: 'Living operating model',
    accent: A_ACCENT,
    summary: 'The canvas IS the product. Everything else — health, assurance, governance, improvements — is a lens over the same living model. The org is a thing you look at, edit, and AI co-authors with you.',
    principle: '"There is one source of truth — and you can see it."',
  },
  frames: [
    { id: 'a1', label: '1 · Sign in', w: 540, h: 360, render: () => <A1_Signin/> },
    { id: 'a2', label: '2 · Home = canvas', w: 540, h: 360, render: () => <A2_Canvas/> },
    { id: 'a3', label: '3 · Drill into a node', w: 540, h: 360, render: () => <A3_NodeDetail/> },
    { id: 'a4', label: '4 · Health lens', w: 540, h: 360, render: () => <A4_LensSwitch lens="health"/> },
    { id: 'a5', label: '5 · AI co-author', w: 540, h: 360, render: () => <A5_AICoauthor/> },
    { id: 'a6', label: '6 · Time travel', w: 540, h: 360, render: () => <A6_TimeTravel/> },
    { id: 'a7', label: '7 · Many entry doors', w: 540, h: 360, render: () => <A7_EntryPoints/> },
  ],
};