const {Button,Tag,Card,Badge,Checkbox,Select}=window.SollantVietnamDesignSystem_5eabe7;
function Products({openProduct}){const D=window.SV_DATA;const [cat,setCat]=React.useState('Tất cả');const list=D.products.filter(p=>cat==='Tất cả'||p.cat===cat);
return <main><div style={{background:'var(--surface-subtle)',borderBottom:'1px solid var(--border-default)'}}><div className="wrap" style={{padding:'40px 24px'}}><div style={{font:'400 13px/1 var(--font-sans)',color:'var(--text-muted)',marginBottom:14}}>Trang chủ <span style={{margin:'0 8px'}}>/</span> <span style={{color:'var(--text-heading)'}}>Sản phẩm</span></div><h1 style={{margin:0,font:'var(--type-h1)',color:'var(--text-heading)'}}>Máy nén khí Sollant</h1><p style={{margin:'12px 0 0',font:'var(--type-body)',maxWidth:620}}>Toàn bộ dòng máy nén khí công nghiệp và thiết bị xử lý khí nén. Chọn theo loại máy, công suất và áp suất làm việc.</p></div></div>
<div className="wrap" style={{padding:'48px 24px',display:'grid',gridTemplateColumns:'240px 1fr',gap:40}}>
<aside style={{display:'flex',flexDirection:'column',gap:28}}><div><div style={{font:'700 12px/1 var(--font-sans)',letterSpacing:'.08em',textTransform:'uppercase',color:'var(--text-heading)',marginBottom:14}}>Loại máy</div><div style={{display:'flex',flexDirection:'column',gap:10}}>{D.cats.map(c=><label key={c} onClick={()=>setCat(c)} style={{display:'flex',justifyContent:'space-between',cursor:'pointer',font:(cat===c?'700':'400')+' 14px/1 var(--font-sans)',color:cat===c?'var(--brand-accent)':'var(--text-body)'}}><span>{c}</span><span style={{color:'var(--text-muted)',font:'400 12px var(--font-mono)'}}>{c==='Tất cả'?D.products.length:D.products.filter(p=>p.cat===c).length}</span></label>)}</div></div>
<div><div style={{font:'700 12px/1 var(--font-sans)',letterSpacing:'.08em',textTransform:'uppercase',color:'var(--text-heading)',marginBottom:14}}>Công suất</div><div style={{display:'flex',flexDirection:'column',gap:10}}><Checkbox label="≤ 22 kW" defaultChecked/><Checkbox label="30 – 90 kW" defaultChecked/><Checkbox label="≥ 110 kW"/></div></div>
<div><div style={{font:'700 12px/1 var(--font-sans)',letterSpacing:'.08em',textTransform:'uppercase',color:'var(--text-heading)',marginBottom:14}}>Áp suất</div><div style={{display:'flex',flexDirection:'column',gap:10}}><Checkbox label="7 – 8 bar" defaultChecked/><Checkbox label="10 – 13 bar"/><Checkbox label="Áp thấp (3 – 5 bar)"/><Checkbox label="Áp cao (> 20 bar)"/></div></div>
<div style={{background:'var(--surface-primary-tint)',borderRadius:4,padding:20}}><div style={{font:'700 15px/1.3 var(--font-sans)',color:'var(--text-heading)'}}>Chưa biết chọn máy nào?</div><p style={{font:'400 13px/1.5 var(--font-sans)',margin:'8px 0 14px'}}>Kỹ sư Sollant tư vấn miễn phí theo lưu lượng và áp suất của bạn.</p><Button variant="secondary" size="sm" fullWidth>Tư vấn chọn máy</Button></div></aside>
<div><div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24,gap:16}}><span style={{font:'400 14px/1 var(--font-sans)',color:'var(--text-muted)'}}>{list.length} sản phẩm</span><div style={{width:200}}><Select options={['Phổ biến nhất','Công suất tăng dần','Công suất giảm dần','Mới nhất']}/></div></div>
<div style={{display:'grid',gridTemplateColumns:'repeat(3,minmax(0,1fr))',gap:24}}>{list.map(p=><Card key={p.id} image={p.img} imageAlt={p.en} eyebrow={p.cat} title={p.name} description={p.kw} onClick={()=>openProduct(p)} footer={<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><Button variant="outline" size="sm" iconRight={<Icon n="ArrowRight" s={14}/>}>Chi tiết</Button>{p.badge&&<Badge>{p.badge}</Badge>}</div>}/>)}</div></div>
</div></main>}
window.Products=Products;