/* eagle-compare.jsx — side-by-side comparison of the three architectures on
   the same alert. Theme-aware. */

function CompareScreen({ onBack, onLaunch, mode, onToggleTheme, onGo }) {
  const E = useE();
  const keys = ["model", "app", "agent"];
  const rows = window.COMPARE_ROWS;
  return (
    <div className="lr-scroll h-full w-full overflow-y-auto" style={{ background: E.bg, fontFamily: E.sans, color: E.text }}>
      <header className="sticky top-0 z-20 flex items-center justify-between border-b px-6 py-3 lg:px-8" style={{ background: E.headerBg, borderColor: E.border, backdropFilter: "blur(12px)" }}>
        <button onClick={onBack} className="inline-flex h-9 items-center gap-1.5 rounded-lg px-2.5 text-[12px] font-medium transition-colors hover:opacity-80" style={{ color: E.muted, border: `1px solid ${E.border}` }}>
          <window.Icon name="ArrowLeft" size={14} /> SOC dashboard
        </button>
        <window.ScreenTabs current="compare" onGo={onGo} />
        <window.EagleThemeToggle mode={mode} onToggle={onToggleTheme} />
      </header>

      <main className="w-full px-6 pb-20 pt-7 lg:px-8">
        <div className="a-fade-up">
          <h1 className="text-[26px] font-bold leading-tight" style={{ color: E.text }}>Same alert. Three architectures.</h1>
          <p className="mt-1.5 max-w-2xl text-[14px] leading-relaxed" style={{ color: E.muted }}>How a raw model, a full application and an autonomous agent each handle one SIEM alert.</p>
        </div>

        <div className="mt-7 overflow-hidden rounded-2xl" style={{ background: E.surface, border: `1px solid ${E.border}` }}>
          <table className="w-full border-collapse">
            <thead>
              <tr>
                <th className="w-[180px] px-4 py-4 text-left align-bottom"><span className="text-[11px] font-bold uppercase tracking-[0.14em]" style={{ color: E.muted, fontFamily: E.mono }}>Dimension</span></th>
                {keys.map((k) => { const L = window.LAYERS[k], c = E[k]; return (
                  <th key={k} className="px-4 py-4 text-left align-bottom" style={{ borderLeft: `1px solid ${E.border}` }}>
                    <div className="flex items-center gap-2">
                      <div className="flex h-7 w-7 items-center justify-center rounded-lg" style={{ background: c + "1f", color: c }}><window.Icon name={L.icon} size={15} /></div>
                      <div><div className="whitespace-nowrap text-[13.5px] font-bold" style={{ color: E.text }}>{L.name}</div><div className="text-[9.5px] font-bold uppercase tracking-[0.12em]" style={{ color: c, fontFamily: E.mono }}>Layer {L.n}</div></div>
                    </div>
                  </th>
                ); })}
              </tr>
            </thead>
            <tbody>
              {rows.map((row, ri) => (
                <tr key={ri} style={{ borderTop: `1px solid ${E.border}`, background: ri % 2 ? E.fill : "transparent" }}>
                  <td className="px-4 py-3 align-top"><span className="text-[12px] font-bold uppercase tracking-[0.1em]" style={{ color: E.muted, fontFamily: E.mono }}>{row[0]}</span></td>
                  {[1, 2, 3].map((ci) => { const c = E[keys[ci - 1]], isCost = row[0] === "Cost / run"; return (
                    <td key={ci} className="px-4 py-3 align-top text-[13px] leading-relaxed" style={{ borderLeft: `1px solid ${E.border}`, color: isCost ? c : E.text, fontFamily: isCost ? E.mono : E.sans, fontWeight: isCost ? 700 : 400 }}>{row[ci]}</td>
                  ); })}
                </tr>
              ))}
              <tr style={{ borderTop: `1px solid ${E.borderStrong}` }}>
                <td className="px-4 py-3.5" />
                {keys.map((k) => { const L = window.LAYERS[k], c = E[k]; return (
                  <td key={k} className="px-4 py-3.5" style={{ borderLeft: `1px solid ${E.border}` }}>
                    <button onClick={() => onLaunch(k)} className="inline-flex w-full items-center justify-center gap-1.5 rounded-lg py-2 text-[12.5px] font-bold transition-all active:scale-95" style={{ background: c + "1a", color: c }}><window.Icon name="Play" size={13} /> Run {L.name}</button>
                  </td>
                ); })}
              </tr>
            </tbody>
          </table>
        </div>

        <div className="mt-5 flex items-start gap-3 rounded-xl px-4 py-3.5" style={{ background: E.elevated, border: `1px solid ${E.border}` }}>
          <window.Icon name="Lightbulb" size={17} style={{ color: E.identity }} className="mt-0.5 shrink-0" />
          <p className="text-[13px] leading-relaxed" style={{ color: E.muted }}>More capability costs more tokens, time and moving parts to secure — but only the <span style={{ color: E.agent, fontWeight: 600 }}>agent</span> actually resolves the incident. The security surface grows with every layer: prompt, RAG, tools, identity and autonomous actions.</p>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { CompareScreen });