const {Button,Field,Input,Select,Textarea,Checkbox}=window.SollantVietnamDesignSystem_5eabe7;
// Quote forms post to the sollantvietnam-api Worker (repo: worker/), which checks Turnstile, stores the lead in D1 and emails it.
// The Turnstile site key is public. Other hosts (localhost, pages.dev) get Cloudflare's always-pass test key; /api/quote only exists on sollantvietnam.com.
const TS_SITEKEY=location.hostname==='sollantvietnam.com'?'0x4AAAAAAFIqeS6GS9DqiQqm':'1x00000000000000000000AA';
window.Turnstile=function Turnstile(){const ref=React.useRef(null);React.useEffect(()=>{if(!window.turnstile)return;const id=turnstile.render(ref.current,{sitekey:TS_SITEKEY,language:'vi'});return()=>turnstile.remove(id)},[]);return <div ref={ref} style={{gridColumn:'1/-1',minHeight:1}}/>};
window.Honeypot=function Honeypot(){return <input name="website" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{position:'absolute',left:-9999,width:1,height:1,opacity:0}}/>};
// Resolves to 'sent' | 'captcha' | 'error'.
window.postQuote=async function(form){try{const r=await fetch('/api/quote',{method:'POST',body:new FormData(form)});if(r.ok)return 'sent';return (await r.json().catch(()=>({}))).error==='captcha'?'captcha':'error'}catch(e){return 'error'}};
// One Turnstile token per submit: bumping tsKey remounts the widget for a fresh token.
window.useQuoteForm=function(){const [status,setStatus]=React.useState(null);const [tsKey,setTsKey]=React.useState(0);
const submit=async e=>{e.preventDefault();const f=e.target;setStatus('sending');const s=await window.postQuote(f);if(s==='sent')f.reset();setStatus(s);setTsKey(k=>k+1);return s};
return {status,setStatus,tsKey,submit,sending:status==='sending'}};
window.QuoteNote=function QuoteNote({status}){const C=window.SV_CONTACT;if(!status||status==='sending')return null;const ok=status==='sent';
return <div role="status" style={{padding:16,background:'var(--surface-subtle)',borderLeft:'4px solid '+(ok?'var(--status-success)':'var(--status-error)'),borderRadius:4,font:'400 14px/1.5 var(--font-sans)',color:'var(--text-heading)'}}>{ok
?<><strong>Đã nhận yêu cầu báo giá. Cảm ơn bạn!</strong> Cần trao đổi ngay? Gọi hoặc nhắn Zalo <a href={C.tel}>+84 981 760 783</a>.</>
:<><strong>{status==='captcha'?'Chưa xác minh được trình duyệt, vui lòng thử lại sau vài giây.':'Chưa gửi được yêu cầu.'}</strong> Bạn cũng có thể gọi / nhắn Zalo <a href={C.tel}>+84 981 760 783</a> hoặc email <a href={C.mail}>tahien@sollantvietnam.com</a>.</>}</div>};
function Contact(){const q=useQuoteForm();const C=window.SV_CONTACT;
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 tư vấn.</p></div></div>
<div className="wrap sv-stack" style={{padding:'56px 24px',display:'grid',gridTemplateColumns:'1fr 380px',gap:48,alignItems:'start'}}>
<form className="sv-stack" onSubmit={q.submit} style={{position:'relative',display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,background:'#fff',boxShadow:'var(--shadow-card)',borderRadius:4,padding:32}}>
<Field label="Họ tên" required><Honeypot/><input type="hidden" name="page" value="contact"/><Input name="name" required autoComplete="name" placeholder="Nguyễn Văn A" icon={<Icon n="User" s={16}/>}/></Field><Field label="Công ty"><Input name="company" autoComplete="organization" placeholder="Công ty TNHH…" icon={<Icon n="Building2" s={16}/>}/></Field>
<Field label="Email" required><Input name="email" type="email" required autoComplete="email" placeholder="ban@congty.vn" icon={<Icon n="Mail" 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>
<Field label="Loại máy quan tâm"><Select name="machine" 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 name="power" 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 name="message" 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 type="submit" size="lg" disabled={q.sending} iconRight={<Icon n="Send" s={16}/>}>{q.sending?'Đang gửi…':'Gửi yêu cầu báo giá'}</Button></div><Turnstile key={q.tsKey}/>{q.status&&<div style={{gridColumn:'1/-1'}}><QuoteNote status={q.status}/></div>}</form>
<aside style={{display:'flex',flexDirection:'column',gap:16}}>{[['Phone','Hotline · Zalo · WhatsApp','+84 981 760 783',<><a href={C.zalo} target="_blank" rel="noopener">Zalo</a> · <a href={C.wa} target="_blank" rel="noopener">WhatsApp</a></>,C.tel],['Mail','Email','tahien@sollantvietnam.com','',C.mail],['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,h])=><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}}>{h?<a href={h} style={{color:'inherit'}}>{v}</a>:v}</div><div style={{font:'400 13px/1.4 var(--font-sans)',marginTop:2}}>{s}</div></div></div>)}</aside></div>
</main>}
window.Contact=Contact;