// Method8 — demo · System overview (the Method8 Vision).
// Define → Assure → Improve → Intelligence: the organisational intelligence
// layer that turns expectations into performance. Live items are interactive;
// not-yet-enabled items show as placeholders so the full vision is visible.

const { Ico, I, PageHead, useNav } = window;

const VIc = {
  define: <g><rect x="6" y="10" width="36" height="26" rx="2"/><path d="M16 10V7h16v3M24 18v8M18 22h12"/></g>,
  assure: <g><rect x="9" y="6" width="24" height="34" rx="2"/><path d="M15 4h12v5H15zM15 17h8M15 24h8"/><path d="M28 28l3 4 6-7"/></g>,
  improve: <g><path d="M10 24a14 14 0 0 1 24-9M38 24a14 14 0 0 1-24 9"/><path d="M34 7v8h-8M14 41v-8h8"/></g>,
  intel: <g><circle cx="24" cy="24" r="14"/><circle cx="24" cy="14" r="2.5"/><circle cx="34" cy="22" r="2.5"/><circle cx="30" cy="34" r="2.5"/><circle cx="16" cy="32" r="2.5"/><circle cx="14" cy="20" r="2.5"/><path d="M24 14l10 8-4 12-14-2-2-12z"/></g>,
};
const JIc = {
  aspire: <g><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/><path d="M12 3V1M21 12h2"/></g>,
  assess: <g><path d="M3 12h3l3 8 4-16 3 8h5"/></g>,
  act: <g><path d="M3 17l6-6 4 4 8-9"/><path d="M21 6v5h-5"/></g>,
};
const IMPIc = {
  roles: <g><circle cx="8" cy="9" r="3"/><circle cx="16" cy="9" r="3"/><path d="M2 19a6 6 0 0 1 12 0M12 19a6 6 0 0 1 10-4"/></g>,
  align: <g><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/><path d="M12 1v3M12 20v3"/></g>,
  gov: <g><path d="M12 2l8 4v5c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/></g>,
  perf: <g><path d="M4 20V10M10 20V4M16 20v-7M22 20V8"/></g>,
  learn: <g><path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2h6c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z"/></g>,
  ai: <g><rect x="5" y="6" width="14" height="12" rx="2"/><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h3M2 14h3M19 9h3M19 14h3M10 11h4v3h-4z"/></g>,
};

// the four phases — items flagged live | soon (placeholder)
const PHASES = [
  { id: 'os', num: 1, name: 'Define', sub: 'Living Operating Model', color: '#1d4f91', icon: VIc.define,
    desc: 'Capture and maintain the key elements of how your organisation operates.',
    outcome: 'Clarity on how the organisation should operate.',
    items: [['Mandates', 1], ['Services', 1], ['Decisions', 1], ['Roles & Accountabilities', 1], ['Critical Processes', 1], ['Standards', 1], ['Technology', 1], ['Metrics', 1], ['Routines', 1]] },
  { id: 'gap', num: 2, name: 'Assure', sub: 'Organisational Health', color: '#5a9e3f', icon: VIc.assure,
    desc: 'Continuously assess health, maturity and effectiveness against expectations.',
    outcome: 'Visibility of organisational health and risk.',
    items: [['Workshops', 1, 'workshop'], ['Surveys', 1, 'survey'], ['Health Assessments', 1, 'workshop'], ['Gap Analysis', 1, 'gap'], ['Evidence Review', 1, 'gap'], ['Interviews', 0]] },
  { id: 'improve', num: 3, name: 'Improve', sub: 'Continuous Improvement', color: '#e8631a', icon: VIc.improve,
    desc: 'Identify, prioritise and close gaps to continuously improve how your organisation operates.',
    outcome: 'Continuous improvement of organisational effectiveness.',
    items: [['Gap Identification', 1, 'gap'], ['Improvement Actions', 1, 'improve'], ['Accountability', 1, 'improve'], ['Progress Tracking', 1, 'improve'], ['Reassessment', 0], ['Capability Uplift', 0]] },
  { id: 'integrations', num: 4, name: 'Intelligence', sub: 'Organisational Intelligence & AI', color: '#7a3f9e', icon: VIc.intel,
    desc: 'Connect and enrich operating model data to generate insights, predict outcomes and drive intelligent action.',
    outcome: 'A continuously improving organisation powered by organisational intelligence.',
    items: [['Organisational Insights', 0], ['Dependency & Impact Analysis', 0], ['Risk & Opportunity Detection', 0], ['AI Context for Better Decisions', 0], ['Intelligent Recommendations', 0], ['Scenario & What-if Analysis', 0]] },
];

const HORIZON = [
  { k: 'Today', color: '#1d4f91', icon: VIc.define, d: 'Documents, spreadsheets and assessments.' },
  { k: 'Tomorrow', color: '#5a9e3f', icon: VIc.assure, d: 'A living operating model that is clear, assured and continuously improving.' },
  { k: 'Future', color: '#7a3f9e', icon: VIc.intel, d: 'An enterprise context layer that enables leaders, teams and AI to understand how the organisation works and how it can improve.' },
];

const JOURNEY = [
  { k: 'Aspire', d: 'Define expectations', color: '#1d4f91', icon: JIc.aspire },
  { k: 'Assess', d: 'Measure performance', color: '#5a9e3f', icon: JIc.assess },
  { k: 'Act', d: 'Improve performance', color: '#e8631a', icon: JIc.act },
];

const IMPACT = [
  ['Clear Roles & Accountability', IMPIc.roles], ['Better Alignment & Collaboration', IMPIc.align],
  ['Stronger Governance & Assurance', IMPIc.gov], ['Improved Performance & Outcomes', IMPIc.perf],
  ['Continuous Learning & Adaptability', IMPIc.learn], ['AI-Ready Organisation', IMPIc.ai],
];

function SystemView() {
  const { go } = useNav();
  return (
    <>
      <div className="vis-hero">
        <div className="vis-kicker">The Method8 Vision</div>
        <h1 className="vis-h1">Creating the organisational intelligence layer <span className="accent">that transforms expectations into performance.</span></h1>
        <div className="vis-lede">We partner with you on a journey from clarity to intelligence — enabling continuous assurance, improvement and better decisions across your organisation.</div>
      </div>

      {/* the four phases + horizon column */}
      <div className="vis-grid" style={{ marginBottom: 22 }}>
        {PHASES.map((p) => (
          <div key={p.id} className="vis-phase" onClick={() => go(p.id)}>
            <div className="vis-phead"><span className="vis-pnum" style={{ background: p.color }}>{p.num}</span><span className="vis-pname" style={{ color: p.color }}>{p.name}</span></div>
            <div className="vis-psub">{p.sub}</div>
            <div className="vis-picon"><svg viewBox="0 0 48 48" fill="none" stroke={p.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{p.icon}</svg></div>
            <div className="vis-pdesc">{p.desc}</div>
            <div className="vis-items">
              {p.items.map(([label, live, target]) => (
                <div key={label} className={`vis-item ${live ? '' : 'soon'}`}>
                  {live
                    ? <Ico d={I.check} sw={2.6} className="live-tick"/>
                    : <Ico d={I.lock} sw={2} style={{ color: 'var(--ink4)' }}/>}
                  <span>{label}</span>
                  {!live && <span className="soon-tag">Soon</span>}
                </div>
              ))}
            </div>
            <div className="vis-outcome" style={{ background: p.color }}>
              <div className="ol">Outcome</div><div className="ot">{p.outcome}</div>
            </div>
          </div>
        ))}

        {/* horizon column */}
        <div className="vis-tlcol">
          {HORIZON.map((h) => (
            <div key={h.k} className="vis-tl">
              <span className="ti"><svg viewBox="0 0 48 48" fill="none" stroke={h.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{h.icon}</svg></span>
              <div><div className="tk" style={{ color: h.color }}>{h.k}</div><div className="td">{h.d}</div></div>
            </div>
          ))}
        </div>
      </div>

      {/* the journey */}
      <div style={{ textAlign: 'center', font: '700 12px/16px Inter', letterSpacing: '1.2px', textTransform: 'uppercase', color: 'var(--ink4)', margin: '4px 0 10px' }}>The Journey</div>
      <div className="vis-journey" style={{ marginBottom: 22 }}>
        {JOURNEY.map((j, i) => (
          <React.Fragment key={j.k}>
            <div className="vis-jstep">
              <span className="ji" style={{ background: j.color + '18' }}><svg viewBox="0 0 24 24" fill="none" stroke={j.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{j.icon}</svg></span>
              <div><div className="jk" style={{ color: j.color }}>{j.k}</div><div className="jd">{j.d}</div></div>
            </div>
            {i < JOURNEY.length - 1 && <Ico d={I.arrowR} sw={2.2} size={18} className="vis-jarr"/>}
          </React.Fragment>
        ))}
      </div>

      {/* the impact */}
      <div className="vis-impact">
        <div className="vis-impact-h">The Impact</div>
        <div className="vis-impact-row">
          {IMPACT.map(([label, icon]) => (
            <div key={label} className="vis-imp"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{icon}</svg><span>{label}</span></div>
          ))}
        </div>
      </div>
      <div className="vis-tagline">Transform expectations into performance</div>
    </>
  );
}

Object.assign(window, { SystemView });