// Solve — A3 case workspace, focused single-case view
const SolvePage = () => {
  const [step, setStep] = React.useState(2);

  const steps = [
    { n: 1, t: 'Background', done: true },
    { n: 2, t: 'Diagnose', done: false, current: true },
    { n: 3, t: 'Investigate', done: false },
    { n: 4, t: 'Countermeasures', done: false },
    { n: 5, t: 'Track', done: false },
    { n: 6, t: 'Close', done: false },
  ];

  const branches = [
    { k: 'equipment', c: '#7C3AED', label: 'Equipment', count: 6, hot: true, top: 'Depositor nozzle worn or clogged, disrupting chocolate flow cut-off' },
    { k: 'people', c: '#C8501C', label: 'People', count: 4, top: 'Operator lacks training on correct depositor nozzle alignment procedure' },
    { k: 'method', c: '#1F5FAE', label: 'Method', count: 4, top: 'SOP for depositor warm-up missing critical 32°C check' },
    { k: 'materials', c: '#2D8B6B', label: 'Materials', count: 4, top: 'Chocolate viscosity varies between supplier batches' },
    { k: 'measurement', c: '#E8A02B', label: 'Measurement', count: 4, top: 'In-line camera not calibrated for tail-length detection' },
    { k: 'environment', c: '#C8242F', label: 'Environment', count: 4, top: 'Ambient temp swing in afternoon affects chocolate set' },
  ];

  return (
    <div style={{ width: '100%', minHeight: '100vh', background: '#FAFAF7', color: '#0F0E0C', fontFamily: "'Inter Tight',sans-serif" }}>
      <style>{`
        *{box-sizing:border-box;margin:0;padding:0}
        .num{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:400;letter-spacing:-0.025em}
        .mono{font-family:'JetBrains Mono',monospace;letter-spacing:0.1em;text-transform:uppercase}
        .branch:hover{transform:translateY(-2px);box-shadow:0 12px 32px -16px rgba(15,14,12,0.18)}
        .step:hover{background:#F4F1E8}
      `}</style>

      <div style={{ display: 'grid', gridTemplateColumns: '230px 1fr', minHeight: '100vh' }}>
        <Sidebar active="solve" badges={{ tasks: 2, defects: 21 }} />
        <main>
          {/* Topbar */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 40px', borderBottom: '1px solid #EDE8DA', background: '#fff' }}>
            <div className="mono" style={{ fontSize: 10.5, color: '#75706A' }}>
              Workspace <span style={{ color: '#C9C2AE', margin: '0 8px' }}>›</span> Solve <span style={{ color: '#C9C2AE', margin: '0 8px' }}>›</span> A3-024
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ padding: '7px 12px', borderRadius: 8, background: '#fff', border: '1px solid #E4DCC8', color: '#0F0E0C', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>⎙ Export A3</button>
              <button style={{ padding: '7px 12px', borderRadius: 8, background: '#0F0E0C', border: 'none', color: '#fff', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>+ New case</button>
            </div>
          </div>

          {/* HERO */}
          <div style={{ padding: '32px 40px 28px', background: '#0F0E0C', color: '#FFF8EE', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 0, right: 0, width: 380, height: '100%', background: 'radial-gradient(circle at 80% 50%, rgba(255,87,34,0.22), transparent 60%)' }} />
            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(280px, 360px)', gap: 32, alignItems: 'flex-start', position: 'relative' }}>
              <div>
                <div className="mono" style={{ fontSize: 10.5, color: '#FF8A4F', marginBottom: 14, fontWeight: 600 }}>● A3-024 · CASE OPEN · DAY 4</div>
                <h1 className="num" style={{ fontSize: 42, lineHeight: 1.05, color: '#FFF8EE' }}>
                  Chocolate chips with <em style={{ fontStyle: 'italic', color: '#FF8A4F', fontWeight: 300 }}>uneven tails</em> on Line 4
                </h1>
                <div style={{ fontSize: 14, color: '#B5AFA0', marginTop: 14, maxWidth: 540, lineHeight: 1.55 }}>
                  Reject rate jumped <strong style={{ color: '#FF8A4F' }}>3.2× baseline</strong> after Tuesday change-over. <strong style={{ color: '#FFE082' }}>26 potential causes</strong> mapped across 6 categories.
                </div>
                <div style={{ display: 'flex', gap: 28, marginTop: 22 }}>
                  {[['Days open', '4'], ['Causes', '26'], ['Owner', 'Aarav M.'], ['Target', 'May 8']].map(([l, v]) => (
                    <div key={l}>
                      <div className="mono" style={{ fontSize: 9, color: '#8a8478', marginBottom: 4 }}>{l.toUpperCase()}</div>
                      <div className="num" style={{ fontSize: 18, color: '#FFF8EE', fontWeight: 500 }}>{v}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Step circle */}
              <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, padding: '20px 22px' }}>
                <div className="mono" style={{ fontSize: 9.5, color: '#8a8478', fontWeight: 600 }}>PROGRESS · A3 STAGES</div>
                <div className="num" style={{ fontSize: 32, color: '#FFF8EE', marginTop: 6, fontWeight: 500 }}>Step 2 <span style={{ color: '#75706A' }}>/ 6</span></div>
                <div style={{ display: 'flex', gap: 5, marginTop: 14 }}>
                  {steps.map(s => (
                    <div key={s.n} style={{ flex: 1, height: 5, borderRadius: 2, background: s.done ? '#5BC993' : s.current ? '#FF5722' : 'rgba(255,255,255,0.08)' }} />
                  ))}
                </div>
                <div className="mono" style={{ fontSize: 10, color: '#FF8A4F', marginTop: 12, fontWeight: 600 }}>NOW · DIAGNOSE WITH FISHBONE</div>
              </div>
            </div>
          </div>

          {/* STEPPER */}
          <div style={{ background: '#fff', borderBottom: '1px solid #EDE8DA', padding: '16px 40px', display: 'flex', alignItems: 'center', gap: 0, overflowX: 'auto' }}>
            {steps.map((s, i) => (
              <React.Fragment key={s.n}>
                <button onClick={() => setStep(s.n)} className="step" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderRadius: 8, border: 'none', background: step === s.n ? '#0F0E0C' : 'transparent', color: step === s.n ? '#fff' : (s.done ? '#0F0E0C' : '#75706A'), cursor: 'pointer', fontFamily: 'inherit', fontSize: 12.5, fontWeight: step === s.n ? 600 : 500, whiteSpace: 'nowrap' }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: s.done ? '#5BC993' : (step === s.n ? '#FF5722' : '#F4F1E8'), color: s.done || step === s.n ? '#fff' : '#75706A', fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{s.done ? '✓' : s.n}</span>
                  {s.t}
                </button>
                {i < steps.length - 1 && <span style={{ color: '#C9C2AE', fontSize: 11 }}>→</span>}
              </React.Fragment>
            ))}
          </div>

          {/* DIAGNOSE — All 6 branches */}
          <div style={{ padding: '32px 40px 56px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18 }}>
              <div>
                <div className="mono" style={{ fontSize: 10, color: '#75706A', fontWeight: 600, marginBottom: 4 }}>STEP 2 · 6M FISHBONE</div>
                <h2 className="num" style={{ fontSize: 24, fontWeight: 500 }}>What could be causing this?</h2>
              </div>
              <button style={{ padding: '8px 14px', borderRadius: 8, background: '#0F0E0C', color: '#FFE082', border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>✦ Sort with LeanOS</button>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
              {branches.map(b => (
                <div key={b.k} className="branch" style={{ background: '#fff', borderRadius: 12, border: b.hot ? `2px solid ${b.c}` : '1px solid #EDE8DA', overflow: 'hidden', cursor: 'pointer', transition: 'all .15s ease' }}>
                  <div style={{ height: 4, background: b.c }} />
                  <div style={{ padding: '14px 16px 16px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ width: 8, height: 8, borderRadius: '50%', background: b.c }} />
                        <span style={{ fontSize: 14, fontWeight: 600 }}>{b.label}</span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        {b.hot && <span className="mono" style={{ fontSize: 9, padding: '2px 6px', borderRadius: 4, background: '#FF5722', color: '#fff', fontWeight: 700 }}>★ HOT</span>}
                        <span className="num" style={{ fontSize: 18, color: b.c, fontWeight: 500 }}>{b.count}</span>
                      </div>
                    </div>
                    <div style={{ padding: '10px 12px', borderRadius: 8, background: '#FAFAF7', borderLeft: `3px solid ${b.c}`, fontSize: 12, color: '#0F0E0C', lineHeight: 1.45, marginBottom: 10 }}>
                      <div className="mono" style={{ fontSize: 8.5, color: '#75706A', fontWeight: 600, marginBottom: 4 }}>TOP CAUSE</div>
                      {b.top}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <span className="mono" style={{ fontSize: 10, color: '#75706A' }}>{b.count - 1} MORE</span>
                      <button style={{ padding: '5px 10px', borderRadius: 6, border: '1px solid #E4DCC8', background: '#fff', color: '#0F0E0C', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Open →</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Next step CTA */}
            <div style={{ marginTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '18px 22px', background: '#fff', border: '1px solid #EDE8DA', borderRadius: 12 }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Ready to investigate the top cause?</div>
                <div style={{ fontSize: 12, color: '#75706A', marginTop: 2 }}>Move to Step 3 — 5-Whys on "Depositor nozzle worn or clogged"</div>
              </div>
              <button style={{ padding: '9px 16px', borderRadius: 8, background: '#FF5722', color: '#fff', border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>Continue → Step 3</button>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<SolvePage />);