// Main app — assembles all 5 directions onto the design canvas.

const { DesignCanvas, DCSection, DCArtboard, DCPostIt } = window;

const DIRECTIONS = [
  window.DirectionA,
  window.DirectionB,
  window.DirectionC,
  window.DirectionD,
  window.DirectionE,
];

// ----- Comparison overview frame -----
function ComparisonOverview() {
  const SHARED = ['Operating Model', 'Org Health', 'Standards & Assurance', 'Interface Mgmt', 'Continuous Improve', 'Operational Intel'];
  return (
    <div style={{
      width: '100%', height: '100%',
      background: window.sketchPaper,
      fontFamily: '"Architects Daughter", cursive',
      color: window.sketchInk,
      padding: 16,
      display: 'flex', flexDirection: 'column', gap: 10,
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 28, fontWeight: 700, lineHeight: 1 }}>
          5 directions · same modules · different front doors
        </div>
      </div>
      <div style={{ fontSize: 12, color: window.sketchInkSoft, maxWidth: 720 }}>
        Each direction proposes a different metaphor for how the six product areas fit together — and where consulting work gets <i>absorbed into the product</i>.
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, flex: 1, minHeight: 0 }}>
        {DIRECTIONS.map(d => (
          <div key={d.header.letter} style={{
            border: `1.6px solid ${window.sketchInk}`,
            borderRadius: window.hand(d.header.letter.charCodeAt(0)),
            background: '#fff',
            padding: 10,
            display: 'flex', flexDirection: 'column', gap: 6,
            boxShadow: `3px 3px 0 ${window.sketchInk}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{
                width: 32, height: 32,
                background: d.header.accent,
                border: `1.5px solid ${window.sketchInk}`,
                borderRadius: window.hand(1),
                display: 'grid', placeItems: 'center',
                fontFamily: '"Caveat", cursive', fontSize: 22, fontWeight: 700,
              }}>{d.header.letter}</div>
              <div style={{ fontFamily: '"Caveat", cursive', fontSize: 20, fontWeight: 700, lineHeight: 1 }}>{d.header.title}</div>
            </div>
            <div style={{ fontSize: 11, lineHeight: 1.3, minHeight: 70 }}>{d.header.summary}</div>
            <div style={{
              padding: '5px 7px',
              border: `1.3px dashed ${window.sketchInk}`,
              borderRadius: window.hand(2),
              fontFamily: '"Caveat", cursive', fontSize: 14, lineHeight: 1.1,
              background: '#fffdf3',
            }}>{d.header.principle}</div>
            <div style={{ marginTop: 'auto', fontSize: 10, color: window.sketchInkSoft }}>
              <b>front door:</b> {[
                'the canvas',
                'the cockpit',
                'the loop',
                'the launcher',
                'the conversation',
              ][d.header.letter.charCodeAt(0) - 65]}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        padding: 8,
        border: `1.4px dashed ${window.sketchInk}`,
        borderRadius: window.hand(6),
        fontSize: 11.5, lineHeight: 1.3,
        background: '#fff8e1',
      }}>
        <b>all five share the same six modules:</b> {SHARED.join(' · ')}.
        What differs is the front door, the daily-driver UX, and how AI replaces consulting.
      </div>
    </div>
  );
}

// ----- Consulting replacement summary -----
function ConsultingReplacement() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: window.sketchPaper,
      fontFamily: '"Architects Daughter", cursive',
      color: window.sketchInk,
      padding: 16,
      display: 'flex', flexDirection: 'column', gap: 10,
      overflow: 'hidden',
    }}>
      <div style={{ fontFamily: '"Caveat", cursive', fontSize: 26, fontWeight: 700, lineHeight: 1 }}>
        how each direction replaces the hands-on consulting
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 11.5 }}>
        <thead>
          <tr style={{ color: window.sketchInkSoft }}>
            <th style={{ textAlign: 'left', padding: '4px 6px', borderBottom: `1.4px solid ${window.sketchInk}` }}>consulting activity</th>
            {DIRECTIONS.map(d => (
              <th key={d.header.letter} style={{ textAlign: 'left', padding: '4px 6px', borderBottom: `1.4px solid ${window.sketchInk}`, background: d.header.accent, borderRadius: '6px 6px 0 0' }}>
                <span style={{ fontFamily: '"Caveat", cursive', fontSize: 16, fontWeight: 700 }}>{d.header.letter} · {d.header.title}</span>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {[
            ['Operating model design', [
              'AI co-authors the canvas, you accept/reject blocks',
              'No surface here — done in the Model module',
              'Phase 1 "Design" with AI templates per phase',
              'Op. Model app with AI co-build button',
              'You ask: "design our model for X" — agents draft',
            ]],
            ['Diagnostic interviews', [
              'Health lens reads from integrations + ad-hoc nudges',
              'Drift signals continuously surface what to look at',
              'Phase 3 "Assess" runs the 12-dim matrix',
              'Health app runs Q-by-Q scans',
              'Agent asks 8 questions, scans data, summarises',
            ]],
            ['Workshop facilitation', [
              'Multi-player canvas with AI co-pilot in-room',
              'Improvements board · AI drafts items',
              'Workshop tool inside the Assess phase',
              'Collab workshop app inside Op. Model',
              'Multi-agent draft → human reviews together',
            ]],
            ['Standards / audit prep', [
              'Assurance lens auto-marks evidence on canvas',
              'Assurance panel · auto-create improvements',
              'Assess phase with audit prep flow',
              'Assurance app · workspace per audit',
              'Conversation: "prep the audit" → evidence pack',
            ]],
            ['Monthly status reports', [
              'Time-travel view shows what changed',
              'AI weekly briefing auto-generated',
              'Sense phase pushes back into the loop',
              'Intel app · weekly digest per audience',
              'Briefings on demand · "what changed?"',
            ]],
            ['Ongoing nudging / adoption', [
              'AI suggests edits live on the canvas',
              'Cockpit prioritises "what needs you" daily',
              'Loop nudges you to next phase',
              'In-app reminders per module',
              'Agents follow up: "you haven\'t approved X"',
            ]],
          ].map(([activity, cells], r) => (
            <tr key={r} style={{ borderBottom: `1px dashed ${window.sketchInk}30` }}>
              <td style={{ padding: '6px 6px', fontWeight: 700, width: '15%' }}>{activity}</td>
              {cells.map((c, i) => (
                <td key={i} style={{ padding: '6px 6px', verticalAlign: 'top', fontSize: 10.5, lineHeight: 1.25, background: DIRECTIONS[i].header.accent + '20' }}>{c}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <div style={{ fontSize: 11, color: window.sketchInkSoft, marginTop: 'auto' }}>
        Consulting role across all 5: <b>editor-in-chief</b>, not author. Validates agent output · curates the model · runs adoption with humans in the room — but the artifacts themselves come from the platform.
      </div>
    </div>
  );
}

// ----- Direction header row (as an artboard) -----
function DirectionRow({ direction }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: window.sketchPaper,
      fontFamily: '"Architects Daughter", cursive',
      padding: 20,
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <SkDirHeader {...direction.header}/>
      <div style={{
        display: 'flex', gap: 6, flexWrap: 'wrap',
        padding: '8px 10px',
        background: '#fff',
        border: `1.4px dashed ${window.sketchInk}`,
        borderRadius: window.hand(3),
      }}>
        <div style={{ fontFamily: '"Caveat", cursive', fontSize: 16, fontWeight: 700 }}>storyboard →</div>
        {direction.frames.map(f => (
          <span key={f.id} style={{
            padding: '2px 7px',
            border: `1.2px solid ${window.sketchInk}`,
            borderRadius: 99,
            background: '#fff',
            fontSize: 11, fontWeight: 600,
          }}>{f.label}</span>
        ))}
      </div>
    </div>
  );
}

// ----- The app -----
function App() {
  // Persistent tweaks — useTweaks returns [values, setTweak]
  const defaults = { showOverview: true, showA: true, showB: true, showC: true, showD: true, showE: true, showReplacement: true };
  const [values, setTweak] = window.useTweaks ? window.useTweaks(defaults) : [defaults, () => {}];

  const dirVisible = (letter) => ({
    A: values.showA, B: values.showB, C: values.showC, D: values.showD, E: values.showE,
  }[letter]);

  return (
    <>
      <DesignCanvas>
        {values.showOverview && (
          <DCSection id="overview" title="Overview" subtitle="five directions, side by side · pick which to take forward">
            <DCArtboard id="map" label="Comparison map" width={1100} height={520}>
              <ComparisonOverview/>
            </DCArtboard>
          </DCSection>
        )}

        {DIRECTIONS.map(d => dirVisible(d.header.letter) && (
          <DCSection
            key={d.header.letter}
            id={`dir-${d.header.letter.toLowerCase()}`}
            title={`Direction ${d.header.letter} — ${d.header.title}`}
            subtitle={d.header.summary}
          >
            <DCArtboard id={`${d.header.letter.toLowerCase()}-header`} label="0 · Direction summary" width={780} height={220}>
              <DirectionRow direction={d}/>
            </DCArtboard>
            {d.frames.map(f => (
              <DCArtboard key={f.id} id={f.id} label={f.label} width={f.w} height={f.h}>
                {f.render()}
              </DCArtboard>
            ))}
          </DCSection>
        ))}

        {values.showReplacement && (
          <DCSection id="replacement" title="Replacing the consulting" subtitle="how each direction absorbs the hands-on work">
            <DCArtboard id="replacement-map" label="Mapping" width={1280} height={520}>
              <ConsultingReplacement/>
            </DCArtboard>
          </DCSection>
        )}
      </DesignCanvas>

      {window.TweaksPanel && (
        <window.TweaksPanel title="Wireframes" defaultPosition="right">
          {window.TweakSection && (
            <>
              <window.TweakSection title="Show sections">
                <window.TweakToggle label="Comparison overview" value={values.showOverview} onChange={(v) => setTweak('showOverview', v)}/>
                <window.TweakToggle label="A — Living model" value={values.showA} onChange={(v) => setTweak('showA', v)}/>
                <window.TweakToggle label="B — Execution cockpit" value={values.showB} onChange={(v) => setTweak('showB', v)}/>
                <window.TweakToggle label="C — Lifecycle spine" value={values.showC} onChange={(v) => setTweak('showC', v)}/>
                <window.TweakToggle label="D — Suite of apps" value={values.showD} onChange={(v) => setTweak('showD', v)}/>
                <window.TweakToggle label="E — AI front door" value={values.showE} onChange={(v) => setTweak('showE', v)}/>
                <window.TweakToggle label="Consulting replacement map" value={values.showReplacement} onChange={(v) => setTweak('showReplacement', v)}/>
              </window.TweakSection>
            </>
          )}
        </window.TweaksPanel>
      )}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);