// Audit — pick-an-area launcher with status signals
const AuditPage = () => {
  const zones = [
    { id: 'Z-01', name: 'Floor', last: 'Walked 2d ago', score: 92, trend: 'up', open: 3, color: '#2D8B6B' },
    { id: 'Z-02', name: 'Assembly B', last: 'Walked 6d ago', score: 78, trend: 'down', open: 8, color: '#E8A02B', overdue: true },
    { id: 'Z-03', name: 'Workstations', last: 'Walked yesterday', score: 86, trend: 'up', open: 6, color: '#5BC993' },
    { id: 'Z-04', name: 'QC Lab', last: 'Walked 4d ago', score: 71, trend: 'down', open: 4, color: '#C8242F' },
    { id: 'Z-05', name: 'Packing', last: 'Never walked', score: null, trend: null, open: 0, color: '#A19B91', neverWalked: true },
    { id: 'Z-06', name: 'Warehouse', last: 'Walked 3d ago', score: 88, trend: 'flat', open: 2, color: '#5BC993' },
  ];

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

      <div style={{ display: 'grid', gridTemplateColumns: '230px 1fr', minHeight: '100vh' }}>
        <Sidebar active="audit" badges={{ tasks: 2, defects: 21 }} />
        <main>
          <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> Audit</div>
            <button style={{ padding: '7px 14px', borderRadius: 8, background: '#0F0E0C', border: 'none', color: '#fff', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>+ New zone</button>
          </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(91,201,147,0.22), transparent 60%)' }} />
            <div className="mono" style={{ fontSize: 10.5, color: '#5BC993', marginBottom: 14, fontWeight: 600 }}>● PICK A ZONE TO AUDIT</div>
            <h1 className="num" style={{ fontSize: 48, lineHeight: 1, color: '#FFF8EE', position: 'relative' }}>
              <em style={{ fontStyle: 'italic', color: '#FFE082', fontWeight: 300 }}>1 zone</em> overdue · 1 never walked
            </h1>
            <div style={{ fontSize: 14, color: '#B5AFA0', marginTop: 12, maxWidth: 620, lineHeight: 1.55, position: 'relative' }}>
              Plant-wide score <strong style={{ color: '#FFF8EE' }}>83</strong>. Assembly B has slipped — last walked 6 days ago, 8 open defects. Best to start there.
            </div>
          </div>

          {/* ZONE GRID */}
          <div style={{ padding: '36px 40px 56px' }}>
            <div className="mono" style={{ fontSize: 10, color: '#75706A', marginBottom: 18, fontWeight: 600 }}>SUGGESTED FIRST · ASSEMBLY B</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {zones.map(z => {
                const recommended = z.id === 'Z-02';
                const trendChar = z.trend === 'up' ? '↗' : z.trend === 'down' ? '↘' : '→';
                const trendColor = z.trend === 'up' ? '#5BC993' : z.trend === 'down' ? '#C8242F' : '#A19B91';
                return (
                  <div key={z.id} className="zone" style={{ background: '#fff', borderRadius: 14, border: recommended ? '2px solid #FF5722' : '1px solid #EDE8DA', padding: 0, cursor: 'pointer', transition: 'all .2s ease', overflow: 'hidden', position: 'relative' }}>
                    {/* Top — score band */}
                    <div style={{ padding: '20px 20px 14px', background: z.neverWalked ? '#FAFAF7' : '#fff' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                          <span style={{ width: 26, height: 26, borderRadius: 7, background: z.color, color: '#fff', fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'JetBrains Mono',monospace", flexShrink: 0 }}>{z.id.split('-')[1]}</span>
                          <div style={{ minWidth: 0 }}>
                            <div style={{ fontSize: 16, fontWeight: 600, color: '#0F0E0C', lineHeight: 1.1 }}>{z.name}</div>
                            <div className="mono" style={{ fontSize: 9.5, color: '#75706A', marginTop: 2 }}>{z.id}</div>
                          </div>
                        </div>
                        {recommended && <div style={{ padding: '3px 8px', borderRadius: 5, background: '#FF5722', color: '#fff', fontSize: 9, fontWeight: 700, letterSpacing: '0.1em', whiteSpace: 'nowrap', flexShrink: 0 }} className="mono">★ START HERE</div>}
                      </div>

                      {z.neverWalked ? (
                        <div style={{ padding: '14px 0' }}>
                          <div className="num" style={{ fontSize: 32, color: '#A19B91', fontWeight: 400, fontStyle: 'italic' }}>—</div>
                          <div className="mono" style={{ fontSize: 9.5, color: '#A19B91', marginTop: 4, fontWeight: 600 }}>NO BASELINE YET</div>
                        </div>
                      ) : (
                        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                          <div className="num" style={{ fontSize: 44, color: '#0F0E0C', fontWeight: 500, lineHeight: 1 }}>{z.score}</div>
                          <div>
                            <div style={{ fontSize: 14, color: trendColor, fontWeight: 600 }}>{trendChar}</div>
                            <div className="mono" style={{ fontSize: 9, color: '#75706A', fontWeight: 600 }}>vs LAST</div>
                          </div>
                        </div>
                      )}
                    </div>

                    {/* Footer */}
                    <div style={{ padding: '12px 20px', borderTop: '1px solid #F4F1E8', background: '#FAFAF7', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <div>
                        <div className="mono" style={{ fontSize: 9.5, color: z.overdue ? '#C8242F' : '#75706A', fontWeight: 600 }}>{z.overdue ? '● ' : ''}{z.last.toUpperCase()}</div>
                        {!z.neverWalked && <div className="mono" style={{ fontSize: 9, color: '#75706A', marginTop: 3 }}>{z.open} OPEN DEFECTS</div>}
                      </div>
                      <button className="start-btn" style={{ padding: '6px 12px', borderRadius: 7, border: '1px solid #E4DCC8', background: recommended ? '#FF5722' : '#fff', color: recommended ? '#fff' : '#0F0E0C', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>{z.neverWalked ? 'Set up' : 'Walk →'}</button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </main>
      </div>
    </div>
  );
};

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