const {Button,Tag,Card,StatList,Accordion,Badge}=window.SollantVietnamDesignSystem_5eabe7;
function SectionHead({eyebrow,title,sub,center=true}){return <div style={{textAlign:center?'center':'left',maxWidth:720,margin:center?'0 auto 40px':'0 0 40px'}}>{eyebrow&&<div style={{font:'var(--type-eyebrow)',letterSpacing:'var(--ls-eyebrow)',textTransform:'uppercase',color:'var(--brand-accent)',marginBottom:12}}>{eyebrow}</div>}<h2 style={{margin:0,font:'var(--type-h2)',color:'var(--text-heading)',textWrap:'pretty'}}>{title}</h2>{sub&&<p style={{font:'var(--type-body)',color:'var(--text-body)',margin:'14px 0 0'}}>{sub}</p>}</div>}
window.SectionHead=SectionHead;
function Home({go,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).slice(0,6);
return <main>
<section style={{position:'relative',background:'var(--surface-darkest) url('+D.heroImg+') center/cover',minHeight:600,display:'flex',alignItems:'center'}}><div style={{position:'absolute',inset:0,background:'linear-gradient(90deg,rgba(26,26,26,.92) 0%,rgba(26,26,26,.75) 45%,rgba(26,26,26,.25) 100%)'}}></div>
<div className="wrap" style={{position:'relative',padding:'80px 24px',maxWidth:1200}}><div style={{maxWidth:640}}><div style={{font:'var(--type-eyebrow)',letterSpacing:'var(--ls-eyebrow)',textTransform:'uppercase',color:'#ff6b73',marginBottom:16}}>Nhà sản xuất máy nén khí chuyên nghiệp</div><h1 style={{margin:0,font:'var(--type-h1)',color:'#fff',letterSpacing:'-.01em',textWrap:'pretty'}}>Bền bỉ & Đáng tin cậy. Máy nén khí trục vít Sollant, nay có mặt tại Việt Nam.</h1><p style={{font:'var(--type-body-lg)',lineHeight:1.6,color:'var(--text-on-dark-muted)',margin:'20px 0 32px',maxWidth:540}}>Tiết kiệm 30–35% chi phí điện năng với dòng máy biến tần nam châm vĩnh cửu. Bảo hành chính hãng, kỹ sư hỗ trợ 7×24 ngay tại Việt Nam.</p><div style={{display:'flex',gap:12,flexWrap:'wrap'}}><Button size="lg" onClick={()=>go('contact')}>Nhận báo giá</Button><Button size="lg" variant="inverse" onClick={()=>go('products')} iconRight={<Icon n="ArrowRight" s={18}/>}>Xem sản phẩm</Button></div>
<div style={{display:'flex',gap:0,marginTop:48,flexWrap:'wrap'}}>{[['22','năm xuất khẩu'],['20.000','máy / năm'],['80+','quốc gia']].map(([n,l],i)=><div key={i} style={{position:'relative',paddingRight:32,marginRight:32}}><div style={{font:'900 32px/1 var(--font-sans)',color:'#fff'}}>{n}</div><div style={{font:'400 13px/1 var(--font-sans)',color:'var(--text-on-dark-muted)',marginTop:6}}>{l}</div>{i<2&&<span style={{position:'absolute',right:-4,top:12,width:8,height:8,borderRadius:'50%',background:'var(--brand-accent)'}}></span>}</div>)}</div></div></div></section>

<section className="wrap" style={{padding:'80px 24px'}}><SectionHead eyebrow="Sản phẩm" title="Dòng máy nén khí Sollant" sub="Từ máy trục vít 7.5 kW cho xưởng nhỏ đến hệ thống ly tâm 3000 kW cho nhà máy lớn."/>
<div style={{display:'flex',gap:8,justifyContent:'center',flexWrap:'wrap',marginBottom:32}}>{D.cats.map(c=><Tag key={c} selected={cat===c} onClick={()=>setCat(c)}>{c}</Tag>)}</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 style={{textAlign:'center',marginTop:40}}><Button variant="secondary" onClick={()=>go('products')}>Xem tất cả sản phẩm</Button></div></section>

<section style={{background:'var(--surface-subtle)'}}><div className="wrap" style={{padding:'80px 24px',display:'grid',gridTemplateColumns:'1fr 1fr',gap:56,alignItems:'center'}}>
<div><SectionHead center={false} eyebrow="Vì sao chọn Sollant" title="Chất lượng, giá thành và dịch vụ — ba điều bạn quan tâm nhất." sub="Sollant là nhà sản xuất máy nén khí trục vít lớn nhất miền Bắc Trung Quốc, sử dụng linh kiện Schneider (Đức), SKF và Inovance."/><StatList columns={2} items={D.stats}/><div style={{marginTop:32}}><Button variant="secondary" iconLeft={<Icon n="Play" s={16}/>}>Tham quan nhà máy</Button></div></div>
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gridTemplateRows:'200px 200px',gap:16}}><img src={D.factory[0]} alt="" style={{gridRow:'1/3',width:'100%',height:'100%',objectFit:'cover',borderRadius:4}}/><img src={D.factory[1]} alt="" style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:4}}/><div style={{background:'var(--brand-accent)',borderRadius:4,padding:24,color:'#fff',display:'flex',flexDirection:'column',justifyContent:'flex-end'}}><div style={{font:'900 40px/1 var(--font-sans)'}}>35%</div><div style={{font:'700 14px/1.3 var(--font-sans)',marginTop:8}}>tiết kiệm điện năng với dòng PM VSD</div></div></div>
</div></section>

<section className="wrap" style={{padding:'80px 24px'}}><SectionHead eyebrow="Khách hàng" title="Khách hàng nói gì về Sollant"/><div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>{D.testimonials.map((t,i)=><div key={i} style={{background:'#fff',boxShadow:'var(--shadow-card)',borderRadius:4,padding:32,position:'relative'}}><div style={{font:'900 64px/1 var(--font-sans)',color:'var(--brand-accent)',position:'absolute',top:16,right:28,opacity:.25}}>”</div><p style={{margin:0,font:'italic 400 17px/1.6 var(--font-sans)',color:'var(--text-heading)'}}>“{t.q}”</p><div style={{marginTop:20,display:'flex',alignItems:'center',gap:12}}><div style={{width:44,height:44,borderRadius:'50%',background:'var(--surface-primary-tint)',display:'flex',alignItems:'center',justifyContent:'center',font:'700 15px var(--font-sans)',color:'var(--brand-primary)'}}>{t.n.split(' ').map(w=>w[0]).join('')}</div><div><div style={{font:'700 14px/1.2 var(--font-sans)',color:'var(--text-heading)'}}>{t.n}</div><div style={{font:'400 13px/1.2 var(--font-sans)',color:'var(--text-muted)',marginTop:3}}>{t.c}</div></div></div></div>)}</div></section>

<section style={{background:'var(--brand-accent)'}}><div className="wrap" style={{padding:'56px 24px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:32,flexWrap:'wrap'}}><div><h2 style={{margin:0,font:'var(--type-h2)',color:'#fff'}}>Nhận báo giá nhanh</h2><p style={{margin:'8px 0 0',font:'var(--type-body)',color:'rgba(255,255,255,.85)'}}>Có đơn hay chưa có đơn, chúng tôi luôn sẵn sàng 24/7.</p></div><Button variant="inverse" size="lg" onClick={()=>go('contact')} iconRight={<Icon n="ArrowRight" s={18}/>}>Gửi yêu cầu</Button></div></section>

<section style={{background:'var(--surface-subtle)'}}><div className="wrap" style={{padding:'80px 24px'}}><SectionHead eyebrow="FAQ" title="Câu hỏi thường gặp"/><div style={{maxWidth:820,margin:'0 auto'}}><Accordion defaultOpen={0} items={D.faqs}/></div></div></section>
</main>}
window.Home=Home;