// Feed — wins feed, matching Solve's strong hierarchy
const FeedPage = () => {
  const [zoneFilter, setZoneFilter] = React.useState('All');
  const [sevFilter, setSevFilter] = React.useState('All');
  const [nameFilter, setNameFilter] = React.useState('');
  const [showNameDrop, setShowNameDrop] = React.useState(false);

  const wins = [
    { id: 'D-198', sev: '5S', sevColor: '#E8A02B', zone: 'Zone 1', zoneFull: 'Z-01 · Floor', title: 'Carpet tiles visibly soiled and discoloured across multiple sections; general grime build-up evident.', when: '2d ago', closedIn: '1d', closer: 'Aarav Mehta', avatar: '#FF5722', kudos: 12 },
    { id: 'D-201', sev: 'SAFETY', sevColor: '#C8242F', zone: 'Zone 3', zoneFull: 'Z-03 · Workstations', title: 'Multiple loose cables trailing across nightstand surface and onto floor — trip/snag hazard.', when: '4d ago', closedIn: '1d', closer: 'Priya Shah', avatar: '#7C3AED', kudos: 8 },
    { id: 'D-195', sev: '5S', sevColor: '#E8A02B', zone: 'Zone 2', zoneFull: 'Z-02 · Assembly B', title: 'Loose paper, tools and personal items scattered across desk surface; no clear designated locations.', when: '5d ago', closedIn: '2d', closer: 'You', avatar: '#2D8B6B', kudos: 5 },
    { id: 'D-189', sev: 'QC', sevColor: '#1F5FAE', zone: 'Zone 4', zoneFull: 'Z-04 · QC Lab', title: 'Calibration sticker on torque driver expired; tool found in active use on assembly line.', when: '1w ago', closedIn: '3h', closer: 'Aarav Mehta', avatar: '#FF5722', kudos: 15 },
    { id: 'D-184', sev: 'SAFETY', sevColor: '#C8242F', zone: 'Zone 1', zoneFull: 'Z-01 · Floor', title: 'Emergency exit pathway partially blocked by stacked pallets near south stairwell.', when: '1w ago', closedIn: '4h', closer: 'Priya Shah', avatar: '#7C3AED', kudos: 22 },
  ];

  const allNames = [...new Set(wins.map(w => w.closer))].sort();
  const filtered = wins.filter(w =>
    (zoneFilter === 'All' || w.zone === zoneFilter) &&
    (sevFilter === 'All' || w.sev === sevFilter) &&
    (nameFilter === '' || w.closer.toLowerCase().includes(nameFilter.toLowerCase()))
  );

  const totalKudos = filtered.reduce((s, w) => s + w.kudos, 0);

  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}
        .nav-item:hover{background:rgba(255,255,255,0.04)}
        .win-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px -16px rgba(15,14,12,0.18)}
        .kudos-btn:hover{background:#FF5722;color:#fff;border-color:#FF5722}
        .chip:hover{filter:brightness(0.96)}
        .name-input:focus{outline:none;border-color:#FF5722;background:#fff}
      `}</style>

      <div style={{ display: 'grid', gridTemplateColumns: '230px 1fr', minHeight: '100vh' }}>
        {/* Sidebar — slate, matching Solve */}
        <aside style={{ background: 'linear-gradient(180deg,#1A1F2A,#0F1218)', borderRight: '1px solid #2A3142', padding: '18px 12px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', gap: 11, alignItems: 'center', padding: 10, border: '1px solid #2A3142', borderRadius: 12, background: 'rgba(255,255,255,0.03)', marginBottom: 16 }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: 'linear-gradient(135deg,#FF5722,#FF8A4F)', color: '#fff', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>R</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#F0EDE5' }}>Your Plant</div>
              <div className="mono" style={{ fontSize: 9, color: '#7A8294', marginTop: 2 }}>LEANOS · v2</div>
            </div>
          </div>
          {[
            { g: 'Workspace', items: [['Home'], ['My tasks', false, '2'], ['Audit'], ['Defects'], ['Improve'], ['Solve']] },
            { g: 'Engagement', items: [['Feed', true], ['Leaderboard'], ['Coach']] },
          ].map(g => (
            <div key={g.g} style={{ marginTop: 14 }}>
              <div className="mono" style={{ fontSize: 9, color: '#5A6378', padding: '0 12px', marginBottom: 6 }}>{g.g}</div>
              {g.items.map(([n, a, b]) => (
                <div key={n} className="nav-item" style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '8px 12px', borderRadius: 8, fontSize: 13, color: a ? '#FFFFFF' : '#B8BFCE', cursor: 'pointer', background: a ? 'rgba(255,87,34,0.15)' : 'transparent', borderLeft: a ? '2px solid #FF5722' : '2px solid transparent', paddingLeft: a ? 10 : 12 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: a ? '#FF5722' : '#3A4258' }} />
                  <span>{n}</span>
                  {b && <span className="mono" style={{ marginLeft: 'auto', fontSize: 10, padding: '1px 6px', borderRadius: 5, background: '#FF5722', color: '#fff' }}>{b}</span>}
                </div>
              ))}
            </div>
          ))}
          <div style={{ marginTop: 'auto', display: 'flex', gap: 10, padding: 10, border: '1px solid #2A3142', borderRadius: 10, background: 'rgba(255,255,255,0.03)', alignItems: 'center' }}>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: 'linear-gradient(135deg,#7C3AED,#1F5FAE)', color: '#fff', fontWeight: 600, fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>RT</div>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: '#F0EDE5' }}>You</div>
              <div style={{ fontSize: 10, color: '#7A8294', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>operations@yourplant.com</div>
            </div>
          </div>
        </aside>

        <main style={{ padding: 0, maxWidth: 1180 }}>
          {/* 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' }}>
              Engagement <span style={{ color: '#C9C2AE', margin: '0 8px' }}>›</span> Wins feed
            </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: '#fff', border: '1px solid #E4DCC8', color: '#0F0E0C', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>Share</button>
            </div>
          </div>

          {/* HERO BAND */}
          <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 className="mono" style={{ fontSize: 10.5, color: '#FF8A4F', marginBottom: 14, fontWeight: 600 }}>● WINS FEED · LAST 7 DAYS</div>
            <h1 className="num" style={{ fontSize: 52, lineHeight: 1, color: '#FFF8EE', position: 'relative' }}>
              {filtered.length} defects <em style={{ fontStyle: 'italic', color: '#FF8A4F', fontWeight: 300 }}>closed</em>
            </h1>
            <div style={{ fontSize: 14, color: '#B5AFA0', marginTop: 12, maxWidth: 640, lineHeight: 1.55, position: 'relative' }}>
              Celebrating the people keeping the floor running. Average close time: <strong style={{ color: '#FFF8EE', fontWeight: 600 }}>1.4 days</strong> — beating last week by 18%.
            </div>
            <div style={{ display: 'flex', gap: 32, marginTop: 28, position: 'relative' }}>
              {[
                ['Closed this week', filtered.length, '#FF8A4F'],
                ['Kudos given', totalKudos, '#FFF8EE'],
                ['Top closer', 'Aarav M.', '#5BC993'],
                ['Avg time-to-close', '1.4d', '#B5AFA0'],
              ].map(([l, v, c]) => (
                <div key={l}>
                  <div className="mono" style={{ fontSize: 9, color: '#8a8478', marginBottom: 4 }}>{l.toUpperCase()}</div>
                  <div className="num" style={{ fontSize: 22, color: c, fontWeight: 500 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* FILTER BAR */}
          <div style={{ background: '#fff', borderBottom: '1px solid #EDE8DA', padding: '16px 40px', display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            {/* Name search */}
            <div style={{ position: 'relative' }}>
              <div className="mono" style={{ fontSize: 9, color: '#A19B91', marginBottom: 5, fontWeight: 600 }}>BY NAME</div>
              <div style={{ position: 'relative' }}>
                <input
                  className="name-input"
                  type="text"
                  value={nameFilter}
                  onChange={e => setNameFilter(e.target.value)}
                  onFocus={() => setShowNameDrop(true)}
                  onBlur={() => setTimeout(() => setShowNameDrop(false), 150)}
                  placeholder="Search a teammate…"
                  style={{ width: 220, padding: '8px 30px 8px 30px', borderRadius: 8, border: '1px solid #E4DCC8', background: '#FAFAF7', fontSize: 12.5, fontFamily: 'inherit', color: '#0F0E0C', transition: 'all .15s ease' }}
                />
                <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', fontSize: 12, color: '#A19B91' }}>⌕</span>
                {nameFilter && (
                  <button onClick={() => setNameFilter('')} style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', width: 18, height: 18, borderRadius: '50%', border: 'none', background: '#E4DCC8', color: '#5C574F', cursor: 'pointer', fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}>×</button>
                )}
                {showNameDrop && (
                  <div style={{ position: 'absolute', top: '100%', left: 0, marginTop: 4, background: '#fff', border: '1px solid #E4DCC8', borderRadius: 8, padding: 4, minWidth: 220, boxShadow: '0 8px 24px -8px rgba(15,14,12,0.15)', zIndex: 10 }}>
                    {allNames.filter(n => n.toLowerCase().includes(nameFilter.toLowerCase())).map(n => (
                      <button key={n} onMouseDown={() => { setNameFilter(n); setShowNameDrop(false); }} style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '7px 10px', background: 'transparent', border: 'none', borderRadius: 6, cursor: 'pointer', textAlign: 'left', fontSize: 12.5, fontFamily: 'inherit', color: '#0F0E0C' }}
                        onMouseEnter={e => e.currentTarget.style.background = '#FAFAF7'}
                        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                        <span style={{ width: 18, height: 18, borderRadius: '50%', background: wins.find(w => w.closer === n).avatar, color: '#fff', fontSize: 9, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{n.split(' ').map(p => p[0]).join('')}</span>
                        {n}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            </div>

            <div style={{ width: 1, height: 36, background: '#EDE8DA', alignSelf: 'flex-end', marginBottom: 4 }} />

            {/* Zone */}
            <div>
              <div className="mono" style={{ fontSize: 9, color: '#A19B91', marginBottom: 5, fontWeight: 600 }}>ZONE</div>
              <div style={{ display: 'flex', gap: 4 }}>
                {['All', 'Zone 1', 'Zone 2', 'Zone 3', 'Zone 4'].map(z => (
                  <button key={z} onClick={() => setZoneFilter(z)} className="chip" style={{ padding: '6px 11px', borderRadius: 7, border: '1px solid', borderColor: zoneFilter === z ? '#0F0E0C' : '#E4DCC8', background: zoneFilter === z ? '#0F0E0C' : '#FAFAF7', color: zoneFilter === z ? '#fff' : '#5C574F', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', transition: 'all .12s ease' }}>{z}</button>
                ))}
              </div>
            </div>

            <div style={{ width: 1, height: 36, background: '#EDE8DA', alignSelf: 'flex-end', marginBottom: 4 }} />

            {/* Severity */}
            <div>
              <div className="mono" style={{ fontSize: 9, color: '#A19B91', marginBottom: 5, fontWeight: 600 }}>SEVERITY</div>
              <div style={{ display: 'flex', gap: 4 }}>
                {[['All', '#0F0E0C'], ['SAFETY', '#C8242F'], ['QC', '#1F5FAE'], ['5S', '#E8A02B']].map(([s, c]) => (
                  <button key={s} onClick={() => setSevFilter(s)} className="chip" style={{ padding: '6px 11px', borderRadius: 7, border: '1px solid', borderColor: sevFilter === s ? c : '#E4DCC8', background: sevFilter === s ? c : '#FAFAF7', color: sevFilter === s ? '#fff' : '#5C574F', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', transition: 'all .12s ease' }}>{s}</button>
                ))}
              </div>
            </div>

            <div style={{ marginLeft: 'auto', alignSelf: 'flex-end', marginBottom: 4 }}>
              <span className="mono" style={{ fontSize: 10.5, color: '#75706A' }}>SHOWING <strong style={{ color: '#0F0E0C' }}>{filtered.length}</strong> OF {wins.length}</span>
            </div>
          </div>

          {/* FEED */}
          <div style={{ padding: '32px 40px 56px' }}>
            {filtered.length === 0 ? (
              <div style={{ textAlign: 'center', padding: 80, background: '#fff', borderRadius: 14, border: '1px dashed #E4DCC8' }}>
                <div className="num" style={{ fontSize: 32, color: '#0F0E0C', marginBottom: 8 }}>No matches</div>
                <div style={{ fontSize: 13, color: '#75706A' }}>Try clearing filters above.</div>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                {filtered.map((w, i) => (
                  <div key={w.id} className="win-card" style={{ background: '#fff', borderRadius: 14, border: '1px solid #EDE8DA', overflow: 'hidden', display: 'grid', gridTemplateColumns: '520px 1fr', boxShadow: '0 1px 3px rgba(15,14,12,0.04)', transition: 'all .2s ease' }}>
                    {/* Photo — split before/after */}
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2, background: '#E4DCC8', position: 'relative', minHeight: 280 }}>
                      <div style={{ background: `linear-gradient(135deg, ${w.sevColor}33, ${w.sevColor}11), repeating-linear-gradient(45deg, #A19B91 0 2px, transparent 2px 14px), #C9C2AE`, position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 12 }}>
                        <span className="mono" style={{ padding: '4px 9px', borderRadius: 5, background: 'rgba(15,14,12,0.78)', color: '#fff', fontSize: 9.5, fontWeight: 700 }}>BEFORE</span>
                      </div>
                      <div style={{ background: `linear-gradient(135deg, #5BC99322, #5BC99308), repeating-linear-gradient(135deg, #B5C9B8 0 2px, transparent 2px 14px), #D9E5DB`, position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 12 }}>
                        <span className="mono" style={{ padding: '4px 9px', borderRadius: 5, background: '#5BC993', color: '#fff', fontSize: 9.5, fontWeight: 700 }}>AFTER ✓</span>
                      </div>
                      <span style={{ position: 'absolute', top: 12, right: 12, width: 28, height: 28, borderRadius: 7, background: 'rgba(15,14,12,0.6)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>⋯</span>
                      <span style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 32, height: 32, borderRadius: '50%', background: '#fff', color: '#0F0E0C', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, boxShadow: '0 4px 12px rgba(15,14,12,0.2)' }}>→</span>
                    </div>

                    {/* Body */}
                    <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10, flexWrap: 'wrap' }}>
                        <span className="mono" style={{ padding: '3px 8px', borderRadius: 4, background: w.sevColor, color: '#fff', fontSize: 9.5, fontWeight: 700 }}>{w.sev}</span>
                        <span className="mono" style={{ fontSize: 10, color: '#75706A', fontWeight: 500 }}>{w.zoneFull}</span>
                        <span style={{ width: 3, height: 3, borderRadius: '50%', background: '#C9C2AE' }} />
                        <span className="mono" style={{ fontSize: 10, color: '#75706A' }}>{w.id}</span>
                        <span style={{ marginLeft: 'auto' }} className="mono" style={{ fontSize: 10, color: '#75706A', marginLeft: 'auto' }}>{w.when}</span>
                      </div>
                      <div style={{ fontSize: 15, color: '#0F0E0C', fontWeight: 500, lineHeight: 1.4, marginBottom: 14 }}>{w.title}</div>

                      {/* Footer */}
                      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 14, borderTop: '1px solid #F4F1E8' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          <span style={{ width: 30, height: 30, borderRadius: '50%', background: w.avatar, color: '#fff', fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{w.closer.split(' ').map(p => p[0]).join('')}</span>
                          <div>
                            <div style={{ fontSize: 12.5, color: '#0F0E0C', fontWeight: 600 }}>{w.closer}</div>
                            <div className="mono" style={{ fontSize: 9.5, color: '#5BC993', fontWeight: 600 }}>● CLOSED IN {w.closedIn.toUpperCase()}</div>
                          </div>
                        </div>
                        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                          <button className="kudos-btn" style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 12px', borderRadius: 8, border: '1px solid #E4DCC8', background: '#FAFAF7', color: '#5C574F', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', transition: 'all .12s ease' }}>
                            <span>👏</span> {w.kudos}
                          </button>
                          <button style={{ padding: '7px 12px', borderRadius: 8, border: '1px solid #E4DCC8', background: '#FAFAF7', color: '#5C574F', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>View</button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </main>
      </div>
    </div>
  );
};

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