// Method 8 — demo · Integrations (Connectors).
// External systems that feed artefacts and evidence into the operating model,
// and push actions out. Pulls into Build, syncs with Assure and Improve.

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

const CONNECTORS = [
  { n: 'SharePoint', cat: 'Document store', ic: 'SP', bg: '#eff8ff', fg: '#1570ef', status: 'on',
    d: <>Pulls policies, standards and procedures in as <b>Critical Documentation</b> artefacts.</> },
  { n: 'Power BI', cat: 'BI & reporting', ic: 'BI', bg: '#fffaeb', fg: '#dc6803', status: 'on',
    d: <>Single source of truth behind the <b>Reporting</b> artefact and model metrics.</> },
  { n: 'Microsoft Teams', cat: 'Collaboration', ic: 'T', bg: '#f4f3ff', fg: '#6938ef', status: 'on',
    d: <>Runs formative polling and sends action reminders at day 3 and 7.</> },
  { n: 'Azure AD · SSO', cat: 'Identity', ic: 'AD', bg: '#eff8ff', fg: '#175cd3', status: 'on',
    d: <>Single sign-on and completer roles synced from your directory.</> },
  { n: 'ServiceNow', cat: 'Actions & ITSM', ic: 'SN', bg: '#f0fdf4', fg: '#17b26a', status: 'off',
    d: <>Push <b>Improve</b> actions out as tickets and sync status back.</> },
  { n: 'Workday', cat: 'People & HRIS', ic: 'WD', bg: '#fef6ee', fg: '#e04f16', status: 'off',
    d: <>Map <b>Roles & accountabilities</b> and Position Descriptions from HRIS.</> },
  { n: 'Cority · Risk', cat: 'Risk register', ic: 'CR', bg: '#fef3f2', fg: '#d92d20', status: 'off',
    d: <>Sync <b>Material Risks &amp; Owners</b> into the Governance expectation.</> },
  { n: 'Power Automate', cat: 'Automation', ic: 'PA', bg: '#f5faff', fg: '#0ba5ec', status: 'off',
    d: <>Trigger assessments and route findings on a cadence automatically.</> },
  { n: 'Snowflake', cat: 'Data warehouse', ic: 'SF', bg: '#f0f9ff', fg: '#0ba5ec', status: 'soon',
    d: <>Stream leading indicators into the model health measures.</> },
];

const ST = { on: 'Connected', off: 'Available', soon: 'Coming soon' };

function IntegrationsView() {
  const { go } = useNav();
  const connected = CONNECTORS.filter((c) => c.status === 'on').length;

  return (
    <>
      <PageHead
        eyebrow={<><span>Integrate</span><span className="dot"/><span>Connectors</span><span className="dot"/><span className="live">{connected} connected</span></>}
        title="Connectors"
        sub={<>Connect the systems Gold Fields already runs on. They pull evidence and artefacts <b>into Build</b>, power <b>Assure</b>, and push <b>Improve</b> actions out — so the operating model stays current without re-keying.</>}
        actions={<button className="btn btn-pri"><Ico d={I.plus} sw={2}/> Add connector</button>}/>

      <section className="stats" style={{ marginBottom: 22 }}>
        <StatCard hue="sky" icon={I.link} trend="live" trendDir="up" label="Connected" value={String(connected)} foot={<>syncing now</>}/>
        <StatCard hue="violet" icon={I.layers} trend="this week" trendDir="up" label="Artefacts synced" value="63" foot={<>from SharePoint &amp; Power BI</>}/>
        <StatCard hue="orange" icon={I.improve} trend="ready" trendDir="flat" label="Actions push" value="ServiceNow" foot={<>available to enable</>}/>
        <StatCard hue="teal" icon={I.activity} trend="healthy" trendDir="up" label="Last sync" value="6 min" foot={<>ago · all green</>}/>
      </section>

      <div className="conn-grid">
        {CONNECTORS.map((c) => (
          <div key={c.n} className="conn-card">
            <div className="conn-top">
              <div className="conn-ic" style={{ background: c.bg, color: c.fg }}>{c.ic}</div>
              <div><div className="conn-n">{c.n}</div><div className="conn-cat">{c.cat}</div></div>
            </div>
            <div className="conn-d">{c.d}</div>
            <div className="conn-foot">
              <span className={`conn-status ${c.status}`}><span className="sd"/> {ST[c.status]}</span>
              {c.status === 'on'
                ? <button className="btn btn-sec btn-sm" onClick={() => go('os')}>Manage</button>
                : c.status === 'soon'
                  ? <span style={{ font: '500 12px/16px Inter', color: 'var(--ink4)' }}>Q3 2026</span>
                  : <button className="btn btn-sec btn-sm">Connect</button>}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

Object.assign(window, { IntegrationsView });