const {Button,Badge,Tabs,StatList,Card,Dialog,Field,Input,Textarea,Toast}=window.SollantVietnamDesignSystem_5eabe7;
function ProductDetail({product,go,openProduct}){const D=window.SV_DATA;const p=product||D.products[1];const [o,setO]=React.useState(false);const [sent,setSent]=React.useState(false);const rel=D.products.filter(x=>x.id!==p.id).slice(0,3);
const table=<div style={{overflowX:'auto'}}><table style={{width:'100%',borderCollapse:'collapse',font:'400 14px/1.4 var(--font-sans)'}}><tbody>{D.specs.map((r,i)=><tr key={i} style={{background:i===0?'var(--surface-muted)':i%2?'var(--surface-subtle)':'#fff'}}>{r.map((c,j)=><td key={j} style={{padding:'12px 14px',border:'1px solid var(--border-default)',font:(i===0||j===0?'700':'400')+' 14px/1.4 var(--font-sans)',color:i===0||j===0?'var(--text-heading)':'var(--text-body)'}}>{c}</td>)}</tr>)}</tbody></table></div>;
return <main><div style={{borderBottom:'1px solid var(--border-default)'}}><div className="wrap" style={{padding:'14px 24px',font:'400 13px/1 var(--font-sans)',color:'var(--text-muted)'}}><a href="#" onClick={e=>{e.preventDefault();go('home')}} style={{color:'inherit'}}>Trang chủ</a><span style={{margin:'0 8px'}}>/</span><a href="#" onClick={e=>{e.preventDefault();go('products')}} style={{color:'inherit'}}>Sản phẩm</a><span style={{margin:'0 8px'}}>/</span><span style={{color:'var(--text-heading)'}}>{p.name}</span></div></div>
<div className="wrap" style={{padding:'48px 24px',display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:56,alignItems:'start'}}>
<div><div style={{background:'var(--surface-subtle)',borderRadius:4,aspectRatio:'4/3',overflow:'hidden'}}><img src={p.img} alt={p.en} style={{width:'100%',height:'100%',objectFit:'cover'}}/></div><div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginTop:12}}>{[p.img,D.factory[0],D.factory[1],p.img].map((u,i)=><div key={i} style={{aspectRatio:'4/3',borderRadius:4,overflow:'hidden',border:'2px solid '+(i===0?'var(--brand-accent)':'transparent')}}><img src={u} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>)}</div></div>
<div><div style={{display:'flex',gap:8,marginBottom:14}}><Badge tone="primary">{p.cat}</Badge>{p.badge&&<Badge>{p.badge}</Badge>}<Badge tone="outline">CE · ISO 9001</Badge></div><h1 style={{margin:0,font:'var(--type-h1)',fontSize:36,color:'var(--text-heading)',textWrap:'pretty'}}>{p.name}</h1><div style={{font:'400 15px/1 var(--font-sans)',color:'var(--text-muted)',marginTop:8}}>{p.en} · {p.kw}</div>
<p style={{font:'var(--type-body)',margin:'20px 0 24px'}}>Đầu nén trục vít hiệu suất cao, động cơ nam châm vĩnh cửu IE4, bộ điều khiển thông minh Schneider. Tiết kiệm 30–35% điện năng so với máy tốc độ cố định, đặc biệt phù hợp với phụ tải biến động.</p>
<StatList items={['Động cơ PM IE4, biến tần Inovance','Đầu nén 2 cấp, độ ồn ≤ 68 dB(A)','Điều khiển cảm ứng, kết nối IoT','Bảo hành 2 năm đầu nén']}/>
<div style={{display:'flex',gap:12,marginTop:32,flexWrap:'wrap'}}><Button size="lg" onClick={()=>setO(true)}>Yêu cầu báo giá</Button><Button size="lg" variant="outline" iconLeft={<Icon n="Download" s={18}/>}>Catalogue PDF</Button></div>
<div style={{marginTop:28,padding:20,background:'var(--surface-subtle)',borderRadius:4,display:'flex',gap:14,alignItems:'center'}}><span style={{color:'var(--brand-accent)'}}><Icon n="Headset" s={28}/></span><div><div style={{font:'700 14px/1.3 var(--font-sans)',color:'var(--text-heading)'}}>Kỹ sư hỗ trợ 7×24</div><div style={{font:'400 13px/1.4 var(--font-sans)',marginTop:2}}>0981 760 783 · Phản hồi trong 24 giờ</div></div></div></div></div>
<div className="wrap" style={{padding:'0 24px 64px'}}><Tabs tabs={[{value:'specs',label:'Thông số kỹ thuật',content:table},{value:'apps',label:'Ứng dụng',content:<p style={{font:'var(--type-body)',margin:0,maxWidth:720}}>Cơ khí chế tạo, dệt may, thực phẩm & đồ uống, cắt laser, đóng gói, PET, gỗ, khai khoáng và xử lý nước thải.</p>},{value:'dl',label:'Tài liệu',content:<div style={{display:'flex',gap:12}}><Button variant="outline" size="sm" iconLeft={<Icon n="FileText" s={14}/>}>Catalogue 2026</Button><Button variant="outline" size="sm" iconLeft={<Icon n="FileText" s={14}/>}>Hướng dẫn bảo dưỡng</Button></div>}]}/></div>
<section style={{background:'var(--surface-subtle)'}}><div className="wrap" style={{padding:'64px 24px'}}><SectionHead eyebrow="Sản phẩm liên quan" title="Có thể bạn quan tâm"/><div style={{display:'grid',gridTemplateColumns:'repeat(3,minmax(0,1fr))',gap:24}}>{rel.map(r=><Card key={r.id} image={r.img} eyebrow={r.cat} title={r.name} description={r.kw} onClick={()=>openProduct(r)} footer={<Button variant="outline" size="sm" iconRight={<Icon n="ArrowRight" s={14}/>}>Chi tiết</Button>}/>)}</div></div></section>
<Dialog open={o} onClose={()=>setO(false)} title={'Báo giá: '+p.en} footer={<><Button variant="ghost" onClick={()=>setO(false)}>Hủy</Button><Button onClick={()=>{setO(false);setSent(true);setTimeout(()=>setSent(false),3500)}}>Gửi yêu cầu</Button></>}><div style={{display:'grid',gap:14}}><div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}><Field label="Họ tên" required><Input placeholder="Nguyễn Văn A" icon={<Icon n="User" s={16}/>}/></Field><Field label="Điện thoại" required><Input placeholder="+84" icon={<Icon n="Phone" s={16}/>}/></Field></div><Field label="Email" required><Input placeholder="ban@congty.vn" icon={<Icon n="Mail" s={16}/>}/></Field><Field label="Yêu cầu"><Textarea rows={3} placeholder="Lưu lượng (m³/min), áp suất (bar), điện áp…"/></Field></div></Dialog>
{sent&&<div style={{position:'fixed',right:24,bottom:24,zIndex:1100}}><Toast tone="success" title="Đã gửi yêu cầu báo giá" description="Kỹ sư Sollant sẽ liên hệ trong 24 giờ." onClose={()=>setSent(false)}/></div>}
</main>}
window.ProductDetail=ProductDetail;