function Sidebar({ offers, activeId, onSelect, onNew, onDelete }) {
  const [hoverId, setHoverId] = React.useState(null);
  const handleDelete = (e, o) => {
    e.stopPropagation();
    const label = o.customer || o.subject || `#${o.number}`;
    if (confirm(`Ta bort offerten "${label}"?\n\nDetta går inte att ångra (annat än Cmd/Ctrl+Z direkt efter).`)) {
      onDelete(o.id);
    }
  };
  return (
    <aside style={{
      width:280, background:'#fff', borderRight:'1px solid var(--border)',
      display:'flex', flexDirection:'column', flexShrink:0,
    }}>
      <div style={{padding:'18px 20px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', gap:10}}>
        <img src="ulab-logo.png" alt="ULAB" style={{height:28}}/>
        <div style={{fontSize:11, fontWeight:600, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--fg-muted)'}}>Offert</div>
      </div>
      <div style={{padding:'14px 16px'}}>
        <button onClick={onNew} style={{
          width:'100%', background:'var(--ulab-navy)', color:'#fff', border:'none',
          padding:'10px 14px', borderRadius:4, fontSize:13, fontWeight:600,
          cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:6,
          fontFamily:'var(--font-sans)',
        }}><Icon name="plus" size={14}/> Ny offert</button>
      </div>
      <div style={{padding:'4px 12px 6px', fontSize:11, fontWeight:600, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--fg-muted)'}}>Pågående</div>
      <div style={{flex:1, overflow:'auto', padding:'0 8px'}}>
        {offers.map(o => {
          const showDelete = hoverId === o.id || activeId === o.id;
          return (
            <div key={o.id} onClick={() => onSelect(o.id)}
              onMouseEnter={() => setHoverId(o.id)} onMouseLeave={() => setHoverId(null)}
              style={{
                padding:'10px 12px', borderRadius:4, cursor:'pointer', marginBottom:2,
                background: o.id===activeId ? 'var(--ulab-cream)' : (hoverId===o.id ? '#f8f5ee' : 'transparent'),
                position:'relative',
              }}>
              <div style={{fontSize:13, fontWeight:600, color:'var(--ulab-navy)', paddingRight:24}}>{o.customer || 'Ny kund'}</div>
              <div style={{fontSize:12, color:'var(--fg-muted)', marginTop:2, display:'flex', justifyContent:'space-between'}}>
                <span>#{o.number}</span><span>{o.status}</span>
              </div>
              {showDelete && (
                <button onClick={e => handleDelete(e, o)} title="Ta bort offert"
                  style={{
                    position:'absolute', top:8, right:8,
                    width:22, height:22, borderRadius:4, border:'none',
                    background:'transparent', color:'var(--fg-muted)', cursor:'pointer',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    fontSize:14, lineHeight:1, padding:0,
                  }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--ulab-coral)'; e.currentTarget.style.color = '#fff'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--fg-muted)'; }}
                >×</button>
              )}
            </div>
          );
        })}
      </div>
      <div style={{padding:'14px 20px', borderTop:'1px solid var(--border)', fontSize:12, color:'var(--fg-muted)'}}>
        <button onClick={() => window.__resetOfferSeed && window.__resetOfferSeed()} style={{
          background:'transparent', border:'1px solid var(--border-strong)', borderRadius:4,
          padding:'6px 10px', fontSize:11, color:'var(--ulab-navy)', cursor:'pointer',
          width:'100%', marginBottom:8, fontFamily:'var(--font-sans)',
        }}>↻ Ladda testdata</button>
        Inloggad som <b style={{color:'var(--ulab-navy)'}}>Klas Fritzson</b>
      </div>
    </aside>
  );
}
window.Sidebar = Sidebar;