/* OutcomesStrip — 4 concrete results, right after hero */

const OUTCOMES = [
  { label: 'MULTI-SITE ROLLOUT', result: 'Paper → digital\nacross 25 sites', sub: 'Corticeira Amorim, single-instance template' },
  { label: 'REAL-TIME OEE',      result: 'OEE visible\nat the source',   sub: 'Automatic, every line — no spreadsheets' },
  { label: 'LOT GENEALOGY',      result: 'Genealogy in\nseconds, not days', sub: 'Full trace on demand, not manual search' },
  { label: 'FIRST LINE LIVE',    result: '11 weeks to\nfirst go-live',    sub: 'Structured lighthouse, not a pilot that stalls' },
];

function OutcomesStrip() {
  return (
    <section style={{
      background: 'var(--kt-navy-900)',
      borderTop: '1px solid rgba(0,184,212,0.14)',
      borderBottom: '1px solid rgba(0,184,212,0.14)',
    }}>
      <div className="kt-container">
        <div style={{
          display: 'grid',
        }} className="kt-outcomes-grid">
          {OUTCOMES.map((o, i) => (
            <div key={o.label} style={{
              padding: '32px 24px 32px 0',
              borderRight: i < OUTCOMES.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none',
              paddingLeft: i === 0 ? 0 : 24,
            }}>
              <div style={{
                fontFamily: 'var(--kt-font-mono)',
                fontSize: 10,
                letterSpacing: '0.14em',
                color: 'var(--kt-cyan-300)',
                marginBottom: 12,
                fontWeight: 600,
              }}>{o.label}</div>
              <div style={{
                fontFamily: 'var(--kt-font-sans)',
                fontSize: 'clamp(18px, 1.8vw, 22px)',
                fontWeight: 800,
                lineHeight: 1.15,
                letterSpacing: '-0.02em',
                color: '#fff',
                whiteSpace: 'pre-line',
                marginBottom: 10,
              }}>{o.result}</div>
              <div style={{
                fontSize: 13,
                lineHeight: 1.5,
                color: 'var(--kt-gray-500)',
              }}>{o.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.OutcomesStrip = OutcomesStrip;