/* WhyPage.jsx — value proposition / how it works */
const { createElement: wh } = React;

function WhyPage({ go }) {
  const { Container, Kicker, PageHero, Shifts, Capabilities, ConsoleMock, GradientButton, Reveal, Icon } = window;

  const steps = [
    { n: '01', icon: 'layers', t: 'Map the network', b: 'Comprehensive asset mapping builds a live picture of every service, identity, and dependency you defend.' },
    { n: '02', icon: 'cpu', t: 'Train on your data', b: 'ANN models learn from attack data specific to your network \u2014 not a generic corpus that ignores your reality.' },
    { n: '03', icon: 'radar', t: 'Reprioritize in real time', b: 'As threat activity emerges, risk is re-scored continuously and the queue reorders itself around what matters now.' },
  ];

  return wh('div', null,
    wh(PageHero, { kicker: 'WHY YOTTASECURE', title: 'Everyone has AI. ', titleAccent: 'Very few have context.', sub: 'At RSAC, one thing was clear \u2014 AI is everywhere. Context is rare. That gap is exactly where Yottasecure stands apart.' }),

    /* the three shifts */
    wh(Shifts, null),

    /* how it works */
    wh('section', { style: { padding: '104px 0', borderTop: '1px solid var(--border-1)' } },
      wh(Container, null,
        wh('div', { style: { maxWidth: 640, marginBottom: 56 } },
          wh(Kicker, { style: { marginBottom: 18 } }, 'HOW IT WORKS'),
          wh('h2', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(30px,4vw,44px)', letterSpacing: '-.03em', lineHeight: 1.08, margin: 0, color: 'var(--fg-1)' } }, 'Context, in three moves.')),
        wh('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 } },
          steps.map((s, i) => wh(Reveal, { key: s.n, delay: i * 80 },
            wh('div', { style: { position: 'relative', height: '100%', boxSizing: 'border-box', padding: 28, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-1)', background: 'var(--bg-2)' } },
              wh('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 } },
                wh('div', { style: { width: 40, height: 40, borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--brand-gradient-soft)', border: '1px solid rgba(31,200,210,.22)' } }, wh(Icon, { name: s.icon, size: 19, style: { color: 'var(--brand-300)' } })),
                wh('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-4)' } }, s.n)),
              wh('h3', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 20, letterSpacing: '-.01em', margin: '0 0 10px', color: 'var(--fg-1)' } }, s.t),
              wh('p', { style: { color: 'var(--fg-2)', fontSize: 14.5, lineHeight: 1.6, margin: 0 } }, s.b))
          ))
        )
      )
    ),

    /* console band */
    wh('section', { style: { padding: '0 0 104px' } },
      wh(Container, null,
        wh('div', { style: { textAlign: 'center', maxWidth: 620, margin: '0 auto 44px' } },
          wh('h2', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(26px,3vw,36px)', letterSpacing: '-.03em', lineHeight: 1.12, margin: 0, color: 'var(--fg-1)' } }, 'From CVE lists to a ranked plan of action.')),
        wh(Reveal, { style: { maxWidth: 1000, margin: '0 auto' } }, wh(ConsoleMock, null))
      )
    ),

    wh(Capabilities, { go }),
  );
}

function CodeCard() {
  const lines = [
    ['from', ' yottasecure ', 'import', ' ContextEngine'],
    null,
    ['engine', ' = ', 'ContextEngine(', '"prod-edge"', ')'],
    ['engine.train(', 'attack_data', '=net.history)'],
    null,
    ['risk', ' = engine.reprioritize(', 'cves', ')'],
    ['print', '(risk.top(3))  ', '# ranked by context'],
  ];
  const C = { kw: 'var(--brand-300)', str: '#43E0C3', fn: 'var(--fg-1)', cm: 'var(--fg-4)', def: 'var(--fg-2)' };
  return wh('div', { style: { borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-2)', background: 'linear-gradient(180deg,#10161f,#0b0f17)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)' } },
    wh('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '11px 14px', borderBottom: '1px solid var(--border-1)' } },
      wh('div', { style: { display: 'flex', gap: 6 } }, ['#FF5F57', '#FEBC2E', '#28C840'].map(c => wh('span', { key: c, style: { width: 10, height: 10, borderRadius: '50%', background: c, opacity: .9 } }))),
      wh('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', marginLeft: 4 } }, 'defend.py')),
    wh('pre', { style: { margin: 0, padding: '20px 22px', fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.85, color: 'var(--fg-2)', overflow: 'auto' } },
      lines.map((ln, i) => wh('div', { key: i, style: { minHeight: '1.85em' } },
        !ln ? '\u00a0' :
          ln.map((seg, j) => {
            let color = C.def;
            if (seg.startsWith('#')) color = C.cm;
            else if (/^"/.test(seg)) color = C.str;
            else if (['from', 'import', 'print'].includes(seg.trim())) color = C.kw;
            else if (seg.includes('ContextEngine') || seg.includes('engine') || seg.includes('risk')) color = C.fn;
            return wh('span', { key: j, style: { color } }, seg);
          })
      )))
  );
}
Object.assign(window, { WhyPage, CodeCard });