// Improve — Kaizen ideas board
const ImprovePage = () => {
  const [view, setView] = React.useState('board'); // board | impact

  const cols = [
    { k: 'idea', label: 'Ideas', count: 8, color: '#7C3AED', bg: '#F4F0FF', accent: '#E1D6FF' },
    { k: 'progress', label: 'In progress', count: 4, color: '#1F5FAE', bg: '#EEF4FC', accent: '#CFDFF2' },
    { k: 'live', label: 'Live & saving', count: 5, color: '#2D8B6B', bg: '#F1F8F4', accent: '#CFE6D9' },
  ];

  const cards = {
    idea: [
      { title: 'Pre-stage chocolate at depositor at 32°C — eliminate temperature drift', author: 'Aarav M.', avatar: '#FF5722', votes: 12, savings: '$8.4k/yr', tag: 'QUALITY', tagColor: '#1F5FAE', hot: true },
      { title: 'Magnetic shadow boards for mixer change-over tools', author: 'Priya S.', avatar: '#7C3AED', votes: 7, savings: '$2.1k/yr', tag: '5S', tagColor: '#E8A02B' },
      { title: 'Automatic cycle-count beep when bagger hits 12k units', author: 'Vikram T.', avatar: '#2D8B6B', votes: 4, savings: 'TBD', tag: 'OEE', tagColor: '#7C3AED' },
    ],
    progress: [
      { title: 'Standardise opening-shift checklist across all 3 lines', author: 'Aarav M.', avatar: '#FF5722', step: 'Trial · Line 4', stepColor: '#1F5FAE', target: '14d to validate', tag: 'METHOD', tagColor: '#7C3AED' },
      { title: 'Add second torque-driver calibration station near QC bench', author: 'Priya S.', avatar: '#7C3AED', step: 'Procurement', stepColor: '#1F5FAE', target: 'PO sent', tag: 'QUALITY', tagColor: '#1F5FAE' },
    ],
    live: [
      { title: 'Inline conductivity probe on rinse tank — auto-stop on low ppm', author: 'Aarav M.', avatar: '#FF5722', impact: '$14.2k', sublabel: 'saved YTD', tag: 'WATER', tagColor: '#1F5FAE', spark: [3, 5, 4, 6, 8, 7, 9, 10, 11, 13, 14] },
      { title: 'Shift-handover Kanban replaces verbal pass-down', author: 'Priya S.', avatar: '#7C3AED', impact: '34min', sublabel: 'saved per shift', tag: 'METHOD', tagColor: '#7C3AED', spark: [5, 8, 12, 18, 22, 26, 28, 30, 32, 33, 34] },
    ],
  };

  // Sparkline helper
  const Spark = ({ pts, color }) => {
    const max = Math.max(...pts), min = Math.min(...pts);
    const w = 80, h = 20;
    const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${(i / (pts.length - 1)) * w} ${h - ((p - min) / (max - min || 1)) * h}`).join(' ');
    return (
      <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ overflow: 'visible' }}>
        <path d={path} fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx={w} cy={h - ((pts[pts.length - 1] - min) / (max - min || 1)) * h} r="2.5" fill={color} />
      </svg>
    );
  };

  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}
        .card:hover{transform:translateY(-2px);box-shadow:0 12px 32px -16px rgba(15,14,12,0.18)}
        .vote-btn:hover{background:#FF5722;color:#fff;border-color:#FF5722}
      `}</style>

      <div style={{ display: 'grid', gridTemplateColumns: '230px 1fr', minHeight: '100vh' }}>
        <Sidebar active="improve" badges={{ tasks: 2, defects: 21, improve: 17 }} />

        <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> Improve
            </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' }}>⎙ Export</button>
              <button style={{ padding: '7px 12px', borderRadius: 8, background: '#0F0E0C', border: 'none', color: '#fff', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>+ New idea</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(124,58,237,0.22), transparent 60%)' }} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 480px', gap: 48, alignItems: 'flex-start', position: 'relative' }}>
              <div>
                <div className="mono" style={{ fontSize: 10.5, color: '#C9A0FF', marginBottom: 14, fontWeight: 600 }}>● KAIZEN BOARD · Q2 · LIVE</div>
                <h1 className="num" style={{ fontSize: 48, lineHeight: 1, color: '#FFF8EE' }}>
                  <em style={{ fontStyle: 'italic', color: '#C9A0FF', fontWeight: 300 }}>17 ideas</em> in motion this quarter
                </h1>
                <div style={{ fontSize: 14, color: '#B5AFA0', marginTop: 12, maxWidth: 480, lineHeight: 1.55 }}>
                  <strong style={{ color: '#5BC993', fontWeight: 600 }}>5 live and saving</strong> — already returning <strong style={{ color: '#5BC993', fontWeight: 600 }}>$24.6k/yr</strong>. <strong style={{ color: '#FFE082', fontWeight: 600 }}>4 in trial</strong>; one needs a sponsor.
                </div>
                <div style={{ marginTop: 28, maxWidth: 460 }}>
                  <div className="mono" style={{ fontSize: 9.5, color: '#8a8478', marginBottom: 10, fontWeight: 600 }}>FUNNEL · 17 IDEAS</div>
                  <div style={{ display: 'flex', height: 30, borderRadius: 6, overflow: 'hidden', gap: 2 }}>
                    {[
                      { l: 'IDEAS', v: 8, c: '#C9A0FF' },
                      { l: 'TRIAL', v: 4, c: '#5A8FE6' },
                      { l: 'LIVE', v: 5, c: '#5BC993' },
                    ].map(s => (
                      <div key={s.l} style={{ flex: s.v, background: s.c, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 10px' }}>
                        <span className="mono" style={{ fontSize: 9.5, color: '#0F0E0C', fontWeight: 700 }}>{s.l}</span>
                        <span className="num" style={{ fontSize: 15, color: '#0F0E0C', fontWeight: 600 }}>{s.v}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Right: savings card */}
              <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 }}>ANNUALISED SAVINGS · LIVE IDEAS</div>
                <div className="num" style={{ fontSize: 56, lineHeight: 1, color: '#5BC993', marginTop: 8, fontWeight: 500 }}>$24.6k</div>
                <div style={{ fontSize: 12.5, color: '#B5AFA0', marginTop: 4, fontStyle: 'italic' }} className="num">+ <span style={{ color: '#FFE082' }}>$10.5k</span> projected from trials</div>
                {/* Mini savings curve */}
                <svg width="100%" height="60" viewBox="0 0 380 60" style={{ marginTop: 14 }}>
                  <defs>
                    <linearGradient id="grad" x1="0" x2="0" y1="0" y2="1">
                      <stop offset="0" stopColor="#5BC993" stopOpacity="0.4" />
                      <stop offset="1" stopColor="#5BC993" stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  <path d="M 0 50 L 32 48 L 64 44 L 96 40 L 128 36 L 160 32 L 192 28 L 224 22 L 256 18 L 288 14 L 320 10 L 352 6 L 380 4 L 380 60 L 0 60 Z" fill="url(#grad)" />
                  <path d="M 0 50 L 32 48 L 64 44 L 96 40 L 128 36 L 160 32 L 192 28 L 224 22 L 256 18 L 288 14 L 320 10 L 352 6 L 380 4" fill="none" stroke="#5BC993" strokeWidth="2" />
                  <circle cx="380" cy="4" r="3" fill="#5BC993" />
                </svg>
                <div className="mono" style={{ fontSize: 9, color: '#8a8478', marginTop: 4, display: 'flex', justifyContent: 'space-between' }}>
                  <span>JAN</span><span>NOW</span>
                </div>
              </div>
            </div>
          </div>

          {/* Control bar */}
          <div style={{ background: '#fff', borderBottom: '1px solid #EDE8DA', padding: '14px 40px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', gap: 4, padding: 3, background: '#F4F1E8', borderRadius: 9 }}>
              {[['board', 'Board'], ['impact', 'By impact']].map(([k, l]) => (
                <button key={k} onClick={() => setView(k)} style={{ padding: '6px 12px', borderRadius: 7, border: 'none', background: view === k ? '#fff' : 'transparent', color: view === k ? '#0F0E0C' : '#75706A', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', boxShadow: view === k ? '0 1px 2px rgba(0,0,0,0.06)' : 'none' }}>{l}</button>
              ))}
            </div>
            <div style={{ width: 1, height: 24, background: '#EDE8DA' }} />
            <div style={{ position: 'relative', flex: '0 1 240px' }}>
              <input type="text" placeholder="Search ideas…" style={{ width: '100%', padding: '7px 12px 7px 30px', borderRadius: 8, border: '1px solid #E4DCC8', background: '#FAFAF7', fontSize: 12.5, fontFamily: 'inherit', color: '#0F0E0C' }} />
              <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', fontSize: 12, color: '#A19B91' }}>⌕</span>
            </div>
            <div style={{ marginLeft: 'auto' }} className="mono" style={{ marginLeft: 'auto', fontSize: 10, color: '#75706A' }}>
              SHOWING <strong style={{ color: '#0F0E0C' }}>17</strong> IDEAS
            </div>
          </div>

          {/* KANBAN */}
          <div style={{ padding: '28px 40px 56px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
              {cols.map(col => (
                <div key={col.k} style={{ background: col.bg, borderRadius: 14, border: `1px solid ${col.accent}`, overflow: 'hidden' }}>
                  <div style={{ padding: '14px 18px 12px', borderBottom: `1px solid ${col.accent}`, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: col.color }} />
                      <span className="mono" style={{ fontSize: 11, color: '#0F0E0C', fontWeight: 700 }}>{col.label.toUpperCase()}</span>
                      <span className="num" style={{ fontSize: 18, color: col.color, fontWeight: 500 }}>{col.count}</span>
                    </div>
                    <button style={{ width: 26, height: 26, borderRadius: 6, border: 'none', background: 'transparent', color: '#75706A', cursor: 'pointer', fontSize: 14 }}>+</button>
                  </div>

                  <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 10, minHeight: 460 }}>
                    {cards[col.k].map((c, i) => (
                      <div key={i} className="card" style={{ background: '#fff', borderRadius: 11, border: c.hot ? `1px solid ${col.color}` : '1px solid #EDE8DA', borderLeft: c.hot ? `4px solid ${col.color}` : '1px solid #EDE8DA', padding: '12px 13px', cursor: 'pointer', transition: 'all .15s ease', boxShadow: '0 1px 2px rgba(15,14,12,0.03)' }}>
                        {/* Tag row */}
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                          <span className="mono" style={{ fontSize: 9, padding: '2px 6px', borderRadius: 4, background: c.tagColor, color: '#fff', fontWeight: 700 }}>{c.tag}</span>
                          {c.hot && <span className="mono" style={{ fontSize: 9, padding: '2px 6px', borderRadius: 4, background: '#FF5722', color: '#fff', fontWeight: 700 }}>★ HOT</span>}
                        </div>
                        {/* Title */}
                        <div style={{ fontSize: 12.5, color: '#0F0E0C', fontWeight: 500, lineHeight: 1.4, marginBottom: 12 }}>{c.title}</div>

                        {/* Idea-specific row */}
                        {col.k === 'idea' && (
                          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid #F4F1E8' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                              <span style={{ width: 18, height: 18, borderRadius: '50%', background: c.avatar, color: '#fff', fontSize: 8, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{c.author.split(' ').map(p => p[0]).join('')}</span>
                              <span style={{ fontSize: 10.5, color: '#5C574F' }}>{c.author}</span>
                              <span style={{ width: 3, height: 3, borderRadius: '50%', background: '#C9C2AE' }} />
                              <span className="mono" style={{ fontSize: 10, color: '#2D8B6B', fontWeight: 700 }}>{c.savings}</span>
                            </div>
                            <button className="vote-btn" style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 9px', borderRadius: 6, border: '1px solid #E4DCC8', background: '#FAFAF7', color: '#5C574F', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
                              <span>▲</span> {c.votes}
                            </button>
                          </div>
                        )}

                        {/* In-progress row */}
                        {col.k === 'progress' && (
                          <>
                            <div style={{ marginBottom: 10 }}>
                              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
                                <span className="mono" style={{ fontSize: 9.5, color: c.stepColor, fontWeight: 700 }}>● {c.step.toUpperCase()}</span>
                                <span className="mono" style={{ fontSize: 9, color: '#75706A' }}>{c.target.toUpperCase()}</span>
                              </div>
                              <div style={{ height: 4, background: '#F4F1E8', borderRadius: 2, overflow: 'hidden' }}>
                                <div style={{ width: '60%', height: '100%', background: c.stepColor, borderRadius: 2 }} />
                              </div>
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid #F4F1E8' }}>
                              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                                <span style={{ width: 18, height: 18, borderRadius: '50%', background: c.avatar, color: '#fff', fontSize: 8, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{c.author.split(' ').map(p => p[0]).join('')}</span>
                                <span style={{ fontSize: 10.5, color: '#5C574F' }}>{c.author}</span>
                              </div>
                              <button style={{ padding: '5px 10px', borderRadius: 6, border: 'none', background: '#0F0E0C', color: '#fff', fontSize: 10.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Update</button>
                            </div>
                          </>
                        )}

                        {/* Live row */}
                        {col.k === 'live' && (
                          <>
                            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 10, padding: '8px 10px', background: '#F1F8F4', borderRadius: 7 }}>
                              <div>
                                <div className="num" style={{ fontSize: 22, color: '#2D8B6B', fontWeight: 500, lineHeight: 1 }}>{c.impact}</div>
                                <div className="mono" style={{ fontSize: 8.5, color: '#5C574F', marginTop: 3, fontWeight: 600 }}>{c.sublabel.toUpperCase()}</div>
                              </div>
                              <Spark pts={c.spark} color="#2D8B6B" />
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid #F4F1E8' }}>
                              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                                <span style={{ width: 18, height: 18, borderRadius: '50%', background: c.avatar, color: '#fff', fontSize: 8, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{c.author.split(' ').map(p => p[0]).join('')}</span>
                                <span style={{ fontSize: 10.5, color: '#5C574F' }}>{c.author}</span>
                              </div>
                              <span className="mono" style={{ fontSize: 9.5, color: '#2D8B6B', fontWeight: 600 }}>● VERIFIED</span>
                            </div>
                          </>
                        )}
                      </div>
                    ))}
                    <button style={{ padding: '10px', borderRadius: 9, border: '1px dashed #C9C2AE', background: 'transparent', color: '#75706A', fontSize: 11.5, cursor: 'pointer', fontFamily: 'inherit', fontWeight: 500 }}>+ Add to {col.label}</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </main>
      </div>
    </div>
  );
};

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