function CatalogDrawer({ open, onClose, onAdd }) {
  const [q, setQ] = React.useState('');
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(0,54,95,.32)', zIndex:50,
      display:'flex', justifyContent:'flex-end',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width:520, height:'100%', background:'#fff', display:'flex', flexDirection:'column',
        boxShadow:'-12px 0 48px rgba(0,54,95,.16)',
      }}>
        <div style={{padding:'18px 22px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div>
            <div style={{fontSize:11, fontWeight:600, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--fg-muted)'}}>Tjänstekatalog</div>
            <h3 style={{margin:'4px 0 0', fontFamily:'var(--font-serif)', fontWeight:500, fontSize:22, color:'var(--ulab-navy)'}}>Lägg till på offerten</h3>
          </div>
          <button onClick={onClose} style={{background:'transparent', border:'none', cursor:'pointer', color:'var(--ulab-navy)'}}><Icon name="close" size={20}/></button>
        </div>
        <div style={{padding:'14px 22px', borderBottom:'1px solid var(--border)'}}>
          <div style={{position:'relative'}}>
            <Icon name="search" size={16} stroke="var(--fg-muted)"/>
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Sök tjänst eller artikel..." style={{
              ...inp, paddingLeft:36,
            }}/>
            <div style={{position:'absolute', left:12, top:11, color:'var(--fg-muted)'}}><Icon name="search" size={16} stroke="currentColor"/></div>
          </div>
        </div>
        <div style={{flex:1, overflow:'auto', padding:'8px 0'}}>
          {CATALOG.map(g => (
            <div key={g.cat}>
              <div style={{padding:'14px 22px 6px', display:'flex', alignItems:'center', gap:10, fontSize:11, fontWeight:600, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--ulab-blue)'}}>
                <Icon name={g.icon} size={14} stroke="currentColor"/> {g.cat}
              </div>
              {g.items.filter(i => !q || (i.name+i.sku).toLowerCase().includes(q.toLowerCase())).map(i => (
                <button key={i.sku} onClick={() => onAdd(g.cat, i)} style={{
                  width:'100%', display:'grid', gridTemplateColumns:'1fr auto auto',
                  gap:14, padding:'12px 22px', alignItems:'center', background:'transparent',
                  border:'none', borderTop:'1px solid var(--border)', cursor:'pointer',
                  textAlign:'left',
                }}
                onMouseEnter={e => e.currentTarget.style.background='var(--ulab-cream)'}
                onMouseLeave={e => e.currentTarget.style.background='transparent'}
                >
                  <div>
                    <div style={{fontSize:14, fontWeight:600, color:'var(--ulab-navy)'}}>{i.name}</div>
                    <div style={{fontSize:12, color:'var(--fg-muted)', marginTop:2}}>{i.sku} · {i.unit}</div>
                  </div>
                  <div style={{fontSize:14, fontWeight:600, color:'var(--ulab-navy)', fontVariantNumeric:'tabular-nums'}}>{fmtKr(i.price)}</div>
                  <div style={{color:'var(--ulab-blue)'}}><Icon name="plus" size={18}/></div>
                </button>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.CatalogDrawer = CatalogDrawer;