const GAS_ENDPOINT='https://script.google.com/macros/s/AKfycbzbBddQG6HyUAIuIyKnjWA5doiqbVOjcUD3JX6ogUssevkdg9QxTthhbcPdjrhu-wQK/exec';
function Contact(){
const {Tag,Button,Input,Select}=window.PolychemDesignSystem_373bbb;
const isMobile=window.useIsMobile();
const isNarrow=window.useIsNarrowDesktop();
const [sent,setSent]=React.useState(false);
const [sending,setSending]=React.useState(false);
const formRef=React.useRef(null);
const handleSubmit=async()=>{
if(!formRef.current||sending)return;
const inputs=formRef.current.querySelectorAll('input,select');
const [company,email,industry,requirement]=inputs;
if(!company.value||!email.value){
company.style.borderColor='var(--accent-primary)';
email.style.borderColor='var(--accent-primary)';
return;
}
setSending(true);
const payload={company:company.value,email:email.value,industry:industry.value,requirement:requirement.value,submittedAt:new Date().toISOString()};
try{
await fetch(GAS_ENDPOINT,{method:'POST',mode:'no-cors',headers:{'Content-Type':'text/plain;charset=utf-8'},body:JSON.stringify(payload)});
}catch(e){}
setSending(false);
setSent(true);
};
return (
<div>
<div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:isMobile?'48px 20px 40px':'80px 32px 64px',display:'grid',gridTemplateColumns:isMobile?'1fr':'1fr 1fr',gap:isMobile?40:64,alignItems:isNarrow?'start':'stretch'}}>
<div>
<Tag accent="red">Connect With Us</Tag>
<h1 style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:'var(--text-display-lg)',lineHeight:'var(--lh-tight)',margin:'16px 0 20px',color:'var(--text-primary)'}}>Ready to elevate your coating quality?</h1>
<p style={{color:'var(--text-secondary)',fontSize:isNarrow?10:'var(--text-body-lg)',lineHeight:isNarrow?'var(--lh-snug)':'var(--lh-relaxed)',marginBottom:32}}>Our team provides technical guidance and tailored pigment paste solutions for your most complex challenges.</p>
<div style={{display:'flex',flexDirection:'column',gap:20,marginBottom:32}}>
<div><div style={{fontWeight:700,color:'var(--text-primary)'}}>Nalneesh Saxena — Proprietor</div><div style={{color:'var(--text-secondary)',fontSize:14}}>9711202272 / 9811202272 · saxena.pcap@gmail.com</div></div>
<div><div style={{fontWeight:700,color:'var(--text-primary)'}}>Mayank Saxena — CEO</div><div style={{color:'var(--text-secondary)',fontSize:14}}>9654240004 / 9711202972 · saxenamcc@gmail.com</div></div>
</div>
<div style={{color:'var(--text-secondary)',fontSize:isNarrow?7:14,borderTop:'1px solid var(--border-subtle)',paddingTop:20}}>New Delhi, Delhi-110082</div>
</div>
<div style={{background:'#fff',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-lg)',padding:isMobile?20:32,boxShadow:'var(--shadow-md)',display:sent?'flex':'block',alignItems:sent?'center':undefined,justifyContent:sent?'center':undefined,minHeight:sent?360:undefined}}>
{sent?(
<div style={{textAlign:'center'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:22,color:'var(--text-primary)',marginBottom:8}}>Thank you.</div>
<div style={{color:'var(--text-secondary)'}}>Our team will be in touch shortly.</div>
</div>
):(
<div ref={formRef} style={{display:'flex',flexDirection:'column',gap:isMobile?14:20}}>
<Input label="Company name" placeholder="Your company" required />
<Input label="Email" type="email" placeholder="you@company.com" required />
<Select label="Industry" options={['Paints','Textiles','Plastics','Coatings','Printing Inks','Construction Chemicals','Adhesives','Rubber']} />
<Input label="Requirement" placeholder="Tell us what you need" />
<Button variant="primary" size="lg" onClick={handleSubmit} disabled={sending}>{sending?'Sending…':'Submit Inquiry'}</Button>
</div>
)}
</div>
</div>
<a href="https://www.google.com/maps/place/Polychem+and+allied+products/@28.7783,77.1195,15z/data=!4m2!3m1!1s0x0:0xc5a3917f410f560e" target="_blank" rel="noopener" style={{display:'block',width:'100%',height:320,borderRadius:'var(--radius-lg)',overflow:'hidden'}}>
<iframe src="https://www.google.com/maps?q=Polychem+and+allied+products,Khera+Kalan,Delhi&output=embed" width="100%" height="100%" style={{border:0,display:'block',pointerEvents:'none'}} loading="lazy"></iframe>
</a>
</div>
);
}
window.Contact=Contact;