function Field({label,value,onChange,name,type}){return(<div style={{display:'flex',flexDirection:'column',gap:6,fontFamily:'var(--font-body)'}}><label style={{fontSize:16,color:'#fff',fontWeight:500}}>{label}</label><input required name={name} type={type||'text'} value={value} onChange={onChange} style={{padding:'12px 14px',borderRadius:'var(--radius-sm)',border:'1px solid rgba(255,255,255,.4)',background:'#fff',color:'var(--color-text-heading)',fontSize:'var(--text-sm)',fontFamily:'inherit'}}/></div>);}
function ContactForm(){
const {Button}=window.PACESPRODesignSystem_efcf34;
const [values,setValues]=React.useState({name:'',email:'',phone:'',course:'',location:''});
const set=(k)=>(e)=>setValues(v=>({...v,[k]:e.target.value}));
return(<section id="contact-form" style={{position:'relative',background:'var(--pp-black)',color:'#fff',padding:'64px 0',overflow:'hidden'}}>
<div style={{position:'absolute',inset:0,backgroundImage:'url(assets/contact-bg.webp)',backgroundSize:'cover',backgroundPosition:'center',backgroundAttachment:'fixed',zIndex:0}}></div>
<div style={{position:'absolute',inset:0,background:'rgba(0,0,0,.65)',zIndex:0}}></div>
<div className="pp-container" style={{position:'relative',zIndex:1,display:'flex',flexDirection:'column',alignItems:'center'}}>
<div style={{position:'relative',zIndex:1,textAlign:'center'}}>
<h2 style={{fontFamily:'var(--font-display)',fontSize:'var(--text-h2)',fontWeight:700,margin:'0 0 8px'}}>Let's get you to the top of PACES</h2>
<p style={{fontFamily:'var(--font-body)',color:'var(--color-text-onblue-muted)',margin:'0 0 28px'}}>Join the aspirants who train smart and succeed.</p>
</div>
<form data-lead-gateway data-client-id="pacespro" style={{position:'relative',zIndex:1,border:'1px solid #fff',borderRadius:12,padding:32,width:800,display:'flex',flexDirection:'column',gap:14,background:'var(--pp-black)'}}>
<Field label="Full Name*" value={values.name} onChange={set('name')} name="full_name"/>
<Field label="Email*" value={values.email} onChange={set('email')} name="email" type="email"/>
<Field label="Phone*" value={values.phone} onChange={set('phone')} name="phone" type="tel"/>
<div style={{display:'flex',flexDirection:'column',gap:6,fontFamily:'var(--font-body)'}}><label style={{fontSize:16,color:'#fff',fontWeight:500}}>Course*</label><select required name="course" value={values.course} onChange={set('course')} style={{padding:'12px 14px',borderRadius:'var(--radius-sm)',border:'1px solid rgba(255,255,255,.4)',background:'#fff',color:'var(--color-text-heading)',fontSize:'var(--text-sm)',fontFamily:'inherit'}}><option value="">Select Course</option><option>Regular Course</option></select></div>
<Field label="Location*" value={values.location} onChange={set('location')} name="location"/>
<Button type="submit" variant="primary" style={{width:300,marginTop:20,fontSize:18,textTransform:'uppercase'}}>Submit</Button>
</form>
</div>
</section>);
}
window.ContactForm=ContactForm;