const {Button,Badge,Tabs,StatList,Card,Dialog,Field,Input,Textarea}=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 q=useQuoteForm();const C=window.SV_CONTACT;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 sv-stack" 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,flexWrap:'wrap'}}><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']}/>
<div style={{display:'flex',gap:12,marginTop:32,flexWrap:'wrap'}}><Button size="lg" onClick={()=>{q.setStatus(null);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)'}}>Tư vấn kỹ thuật</div><div style={{font:'400 13px/1.4 var(--font-sans)',marginTop:2}}><a href={C.tel} style={{color:'inherit'}}>+84 981 760 783</a> · <a href={C.zalo} target="_blank" rel="noopener" style={{color:'inherit'}}>Zalo</a></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 className="sv-cards" 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 type="submit" form="sv-quote-dialog" disabled={q.sending}>{q.sending?'Đang gửi…':'Gửi yêu cầu'}</Button></>}><form id="sv-quote-dialog" onSubmit={async e=>{if(await q.submit(e)==='sent')setO(false)}} style={{position:'relative',display:'grid',gap:14}}><Honeypot/><input type="hidden" name="page" value="product"/><div className="sv-stack" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}><Field label="Họ tên" required><Input name="name" required autoComplete="name" placeholder="Nguyễn Văn A" icon={<Icon n="User" s={16}/>}/></Field><Field label="Điện thoại" required><Input name="phone" type="tel" required autoComplete="tel" placeholder="+84" icon={<Icon n="Phone" s={16}/>}/></Field></div><Field label="Email" required><Input name="email" type="email" required autoComplete="email" placeholder="ban@congty.vn" icon={<Icon n="Mail" s={16}/>}/></Field><input type="hidden" name="product" value={p.name+' ('+p.en+')'}/><Field label="Yêu cầu"><Textarea name="message" rows={3} placeholder="Lưu lượng (m³/min), áp suất (bar), điện áp…"/></Field><Turnstile key={q.tsKey}/>{(q.status==='error'||q.status==='captcha')&&<QuoteNote status={q.status}/>}</form></Dialog>
{q.status==='sent'&&!o&&<div style={{position:'fixed',right:16,left:16,bottom:16,zIndex:1100,maxWidth:480,marginLeft:'auto',boxShadow:'var(--shadow-card-hover)',background:'#fff'}}><QuoteNote status="sent"/><button type="button" onClick={()=>q.setStatus(null)} aria-label="Đóng" style={{position:'absolute',top:6,right:10,border:0,background:'none',fontSize:20,cursor:'pointer'}}>×</button></div>}
</main>}
window.ProductDetail=ProductDetail;