function Field({label,value,onChange,name,type}){return(<div style={{display:'flex',flexDirection:'column',gap:6,fontFamily:'var(--font-body)'}}><label style={{fontSize:13,color:'var(--color-text-heading)',fontWeight:600,letterSpacing:'.02em'}}>{label}</label><input required name={name} type={type||'text'} value={value} onChange={onChange} style={{padding:'13px 16px',borderRadius:10,border:'1.5px solid #e3e7ec',background:'#f7f9fb',color:'var(--color-text-heading)',fontSize:15,fontFamily:'inherit',outline:'none',transition:'border-color .15s'}} onFocus={(e)=>e.target.style.borderColor='var(--pp-blue-600)'} onBlur={(e)=>e.target.style.borderColor='#e3e7ec'}/></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:'80px 0',overflow:'hidden'}}>
<div className="pp-contact-bg" 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,.7)',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',marginBottom:36}}>
<div style={{fontFamily:'var(--font-body)',fontSize:14,fontWeight:700,letterSpacing:'var(--tracking-eyebrow)',textTransform:'uppercase',color:'var(--pp-blue-400,#7fb2ff)',marginBottom:10}}>Get Started</div>
<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,fontSize:17}}>Join the aspirants who train smart and succeed.</p>
</div>
<form data-lead-gateway data-client-id="pacespro" className="pp-contact-form" style={{position:'relative',zIndex:1,borderRadius:20,padding:'44px',width:760,maxWidth:'100%',boxSizing:'border-box',display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,background:'#fff',boxShadow:'0 24px 60px rgba(0,0,0,.35)'}}>
<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:13,color:'var(--color-text-heading)',fontWeight:600,letterSpacing:'.02em'}}>Course*</label><select required name="course" value={values.course} onChange={set('course')} style={{padding:'13px 16px',borderRadius:10,border:'1.5px solid #e3e7ec',background:'#f7f9fb',color:'var(--color-text-heading)',fontSize:15,fontFamily:'inherit',outline:'none'}}><option value="">Select Course</option><option>Regular Course</option></select></div>
<div style={{gridColumn:'1 / -1'}}><Field label="Location*" value={values.location} onChange={set('location')} name="location"/></div>
<div style={{gridColumn:'1 / -1',marginTop:8}}><Button type="submit" variant="primary" style={{width:'100%',fontSize:17,textTransform:'uppercase',paddingTop:16,paddingBottom:16}}>Submit</Button></div>
</form>
</div>
</section>);
}
window.ContactForm=ContactForm;