const {Button,Field,Input,Select,Textarea,Checkbox,Toast}=window.SollantVietnamDesignSystem_5eabe7;
function Contact(){const [sent,setSent]=React.useState(false);
return <main><div style={{background:'var(--surface-darkest)',color:'#fff'}}><div className="wrap" style={{padding:'64px 24px'}}><div style={{font:'var(--type-eyebrow)',letterSpacing:'var(--ls-eyebrow)',textTransform:'uppercase',color:'#ff6b73',marginBottom:12}}>Liên hệ</div><h1 style={{margin:0,font:'var(--type-h1)',color:'#fff'}}>Nhận báo giá nhanh</h1><p style={{margin:'12px 0 0',font:'var(--type-body-lg)',color:'var(--text-on-dark-muted)'}}>Có đơn hay chưa có đơn, chúng tôi luôn sẵn sàng 24/7.</p></div></div>
<div className="wrap" style={{padding:'56px 24px',display:'grid',gridTemplateColumns:'1fr 380px',gap:48,alignItems:'start'}}>
<form onSubmit={e=>{e.preventDefault();setSent(true);setTimeout(()=>setSent(false),3500)}} style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,background:'#fff',boxShadow:'var(--shadow-card)',borderRadius:4,padding:32}}>
<Field label="Họ tên" required><Input placeholder="Nguyễn Văn A" icon={<Icon n="User" s={16}/>}/></Field><Field label="Công ty"><Input placeholder="Công ty TNHH…" icon={<Icon n="Building2" s={16}/>}/></Field>
<Field label="Email" required><Input type="email" placeholder="ban@congty.vn" icon={<Icon n="Mail" s={16}/>}/></Field><Field label="Điện thoại" required><Input placeholder="+84" icon={<Icon n="Phone" s={16}/>}/></Field>
<Field label="Loại máy quan tâm"><Select placeholder="Chọn loại máy" options={window.SV_DATA.cats.slice(1)}/></Field><Field label="Công suất dự kiến"><Select placeholder="Chọn công suất" options={['≤ 22 kW','30 – 90 kW','≥ 110 kW','Chưa rõ']}/></Field>
<div style={{gridColumn:'1/-1'}}><Field label="Yêu cầu" hint="Càng chi tiết, báo giá càng chính xác"><Textarea rows={5} placeholder="Lưu lượng (m³/min), áp suất (bar), điện áp, môi trường lắp đặt…"/></Field></div>
<div style={{gridColumn:'1/-1',display:'flex',justifyContent:'space-between',alignItems:'center',gap:16,flexWrap:'wrap'}}><Checkbox label="Nhận tài liệu kỹ thuật qua email" defaultChecked/><Button size="lg" iconRight={<Icon n="Send" s={16}/>}>Gửi yêu cầu báo giá</Button></div></form>
<aside style={{display:'flex',flexDirection:'column',gap:16}}>{[['Phone','Hotline · Zalo · WhatsApp','0981 760 783','Thứ 2 – Thứ 7, 8:00 – 17:30'],['Mail','Email','sollantvietnam@gmail.com','Phản hồi trong 24 giờ'],['MapPin','Văn phòng','Tầng 8, Tòa nhà Licogi 13','164 Khuất Duy Tiến, Thanh Xuân, Hà Nội'],['Factory','Nhà máy','Lâm Nghi, Sơn Đông, Trung Quốc','30.000 m² · tham quan VR']].map(([ic,t,v,s])=><div key={t} style={{display:'flex',gap:16,padding:20,border:'1px solid var(--border-default)',borderRadius:4}}><span style={{flex:'none',width:44,height:44,borderRadius:4,background:'var(--surface-accent-tint)',color:'var(--brand-accent)',display:'flex',alignItems:'center',justifyContent:'center'}}><Icon n={ic} s={20}/></span><div><div style={{font:'700 12px/1 var(--font-sans)',letterSpacing:'.08em',textTransform:'uppercase',color:'var(--text-muted)'}}>{t}</div><div style={{font:'700 16px/1.3 var(--font-sans)',color:'var(--text-heading)',marginTop:6}}>{v}</div><div style={{font:'400 13px/1.4 var(--font-sans)',marginTop:2}}>{s}</div></div></div>)}</aside></div>
{sent&&<div style={{position:'fixed',right:24,bottom:24,zIndex:1100}}><Toast tone="success" title="Đã gửi yêu cầu" description="Kỹ sư Sollant sẽ liên hệ trong 24 giờ." onClose={()=>setSent(false)}/></div>}
</main>}
window.Contact=Contact;