/* ConsoleMock.jsx — fake "Contextual Vulnerability Intelligence" product console.
   This is the hero/product visual that signals a real security platform. */
const { createElement: ch } = React;

function ConsoleMock({ compact }) {
  const { Icon } = window;
  const rows = [
    { id: 'CVE-2026-3391', asset: 'edge-gateway-01', sev: 'critical', cvss: '9.8', ctx: '9.4', tag: 'Exploited in the wild', up: true },
    { id: 'CVE-2026-2877', asset: 'auth-svc / prod', sev: 'critical', cvss: '9.1', ctx: '8.7', tag: 'Reachable · internet-facing', up: true },
    { id: 'CVE-2026-2210', asset: 'billing-api', sev: 'high', cvss: '8.4', ctx: '5.1', tag: 'No active exploit', up: false },
    { id: 'CVE-2026-1904', asset: 'k8s-worker-12', sev: 'high', cvss: '7.9', ctx: '3.2', tag: 'Not reachable', up: false },
    { id: 'CVE-2026-1550', asset: 'analytics-db', sev: 'medium', cvss: '6.2', ctx: '6.0', tag: 'Sensitive data', up: true },
  ];
  const sevColor = { critical: '#FF4D5E', high: '#FF8A3D', medium: '#F5B93C', low: '#16BBE9' };
  const nav = [['layout-dashboard', 'Overview', false], ['radar', 'Context engine', true], ['layers', 'Asset map', false], ['activity', 'Anomalies', false], ['file-search', 'Audit', false]];

  return ch('div', {
    style: {
      borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--border-2)',
      background: 'linear-gradient(180deg,#10161f,#0b0f17)', boxShadow: '0 40px 120px rgba(2,6,12,.7), 0 0 0 1px rgba(31,200,210,.04)'
    }
  },
    /* title bar */
    ch('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', borderBottom: '1px solid var(--border-1)', background: 'rgba(255,255,255,.015)' } },
      ch('div', { style: { display: 'flex', gap: 7 } }, ['#FF5F57', '#FEBC2E', '#28C840'].map(c => ch('span', { key: c, style: { width: 11, height: 11, borderRadius: '50%', background: c, opacity: .9 } }))),
      ch('div', { style: { flex: 1, textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-3)' } }, 'console.yottasecure.io / context-engine'),
      ch('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--brand)', display: 'inline-flex', alignItems: 'center', gap: 5 } }, ch('span', { style: { width: 6, height: 6, borderRadius: '50%', background: 'var(--brand)', boxShadow: '0 0 8px var(--brand)' } }), 'LIVE')
    ),
    ch('div', { style: { display: 'grid', gridTemplateColumns: compact ? '1fr' : '188px 1fr' } },
      /* sidebar */
      !compact && ch('div', { style: { borderRight: '1px solid var(--border-1)', padding: 14, display: 'flex', flexDirection: 'column', gap: 4, background: 'rgba(0,0,0,.18)' } },
        nav.map(([ic, label, active]) => ch('div', { key: label, style: { display: 'flex', alignItems: 'center', gap: 10, padding: '9px 11px', borderRadius: 'var(--radius-sm)', fontSize: 13, fontFamily: 'var(--font-display)', color: active ? 'var(--fg-1)' : 'var(--fg-3)', background: active ? 'rgba(31,200,210,.10)' : 'transparent', border: active ? '1px solid rgba(31,200,210,.22)' : '1px solid transparent' } },
          ch(Icon, { name: ic, size: 15, style: { color: active ? 'var(--brand)' : 'var(--fg-3)' } }), label)),
        ch('div', { style: { marginTop: 'auto', padding: 11, borderRadius: 'var(--radius-md)', border: '1px solid var(--border-1)', background: 'var(--bg-3)' } },
          ch('div', { style: { fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--fg-3)', letterSpacing: '.08em' } }, 'MODELS TRAINED'),
          ch('div', { style: { fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: 'var(--fg-1)', marginTop: 4 } }, '14 active'))
      ),
      /* main */
      ch('div', { style: { padding: compact ? 16 : 20 } },
        ch('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
          ch('div', null,
            ch('div', { style: { fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500, color: 'var(--fg-1)' } }, 'Reprioritized by context'),
            ch('div', { style: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', marginTop: 3 } }, '1,284 findings · 23 reprioritized in last 4m')),
          ch('div', { style: { display: 'flex', gap: 7 } },
            ['CVSS', 'Context ▾'].map((t, i) => ch('span', { key: t, style: { fontFamily: 'var(--font-mono)', fontSize: 11, padding: '5px 10px', borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-2)', color: i ? 'var(--brand-300)' : 'var(--fg-3)', background: i ? 'rgba(31,200,210,.08)' : 'transparent' } }, t)))
        ),
        /* table head */
        ch('div', { style: { display: 'grid', gridTemplateColumns: '1.15fr 1.5fr .5fr .75fr', gap: 10, padding: '0 12px 8px', fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '.1em', color: 'var(--fg-4)', borderBottom: '1px solid var(--border-1)' } },
          ch('span', { style: { paddingLeft: 13 } }, 'FINDING'), ch('span', null, 'ASSET / CONTEXT'), ch('span', { style: { textAlign: 'right' } }, 'CVSS'), ch('span', { style: { textAlign: 'right' } }, 'RISK')),
        /* rows */
        ch('div', null, rows.map((r, i) => ch('div', { key: r.id, style: { display: 'grid', gridTemplateColumns: '1.15fr 1.5fr .5fr .75fr', gap: 10, alignItems: 'center', padding: '13px 12px', borderBottom: i < rows.length - 1 ? '1px solid var(--border-1)' : 'none' } },
          ch('div', { style: { display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 } },
            ch('span', { style: { width: 3, height: 26, borderRadius: 2, background: sevColor[r.sev], flex: 'none' } }),
            ch('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--fg-1)', whiteSpace: 'nowrap' } }, r.id)),
          ch('div', { style: { minWidth: 0 } },
            ch('div', { style: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)' } }, r.asset),
            ch('div', { style: { fontSize: 11, color: r.up ? 'var(--brand-300)' : 'var(--fg-4)', marginTop: 2 } }, r.tag)),
          ch('span', { style: { textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-3)' } }, r.cvss),
          ch('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 6 } },
            ch(Icon, { name: r.up ? 'arrow-up-right' : 'arrow-down-right', size: 13, style: { color: r.up ? sevColor[r.sev] : 'var(--fg-4)' } }),
            ch('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600, color: r.up ? sevColor[r.sev] : 'var(--fg-3)' } }, r.ctx))
        )))
      )
    )
  );
}
Object.assign(window, { ConsoleMock });