function HowItWorks(){const [a,setA]=React.useState('customer');
const ST={customer:[['search','Choose Your Service','Browse our wide range of service categories and select the exact service you need.'],['scale','Compare & Book','Review vendor profiles, compare quotes, check ratings and reviews. Confirm with secure escrow payments.'],['circle-check-big','Get It Done Right',"Your verified professional arrives on time. Rate the service and pay only when you're satisfied."]],
vendor:[['user-plus','Register Your Business','Create your vendor profile, add your licences and choose the categories you serve.'],['message-square-quote','Receive & Quote','Get booking requests from clients across Bahrain. Accept, propose a price or suggest an alternate time.'],['banknote','Deliver & Get Paid','Complete the job and payment is released from escrow straight to you. Build your rating with every order.']]}[a];
return <Wrap id="how-it-works" bg="var(--page-50)"><SectionHeading align="center" eyebrow="Simple Process" title="How It" accent="Works" lede="Getting professional services has never been easier. Three simple steps and you're all set."/>
<div style={{display:'flex',justifyContent:'center',marginTop:32}}><SegmentedTabs items={[{value:'customer',label:'For Customers',icon:'house'},{value:'vendor',label:'For Vendors',icon:'store'}]} value={a} onChange={setA} style={{width:'100%',maxWidth:400}}/></div>
<div className="g3" style={{marginTop:32}}>{ST.map(([ic,t,d],k)=><div key={a+k} className="step"><div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}><span className="ico-tile" style={{background:'#fff'}}><Icon name={ic} size={24}/></span><span style={{font:'700 44px/1 var(--font-display)',color:'var(--lavender-300)'}}>{'0'+(k+1)}</span></div><div style={{font:'600 20px var(--font-ui)',color:'var(--text-strong)'}}>{t}</div><div style={{font:'400 15px/1.55 var(--font-body)',color:'var(--text-muted)'}}>{d}</div></div>)}</div>
<div style={{display:'flex',justifyContent:'center',flexWrap:'wrap',gap:32,marginTop:36}}>{[['lock','Secure Payments'],['badge-check','Verified Vendors'],['star','Rated Services'],['phone','24/7 Support']].map(([i,l])=><span key={l} style={{display:'flex',alignItems:'center',gap:8,font:'500 15px var(--font-ui)',color:'var(--gray-700)'}}><Icon name={i} size={18} color="var(--brand-primary)"/>{l}</span>)}</div></Wrap>}

function Vendors({onVendor}){const B=[['users','Reach More Clients','Get discovered by 10,000+ property owners and businesses actively booking services across Bahrain.'],['shield-check','Guaranteed Payments','Every booking is paid upfront into escrow — no chasing invoices, no payment risk.'],['calendar-clock','Manage on Your Terms','Accept jobs, set your price, propose alternate times and manage orders from one app.'],['trending-up','Build Your Reputation','Ratings and reviews from completed jobs help you win more work.']];
return <Wrap id="vendors"><div className="vendor-panel g2">
<div style={{display:'flex',flexDirection:'column',gap:20}}><Badge tone="tint" style={{height:30,fontSize:13,alignSelf:'flex-start'}}>For Service Providers</Badge>
<h2 style={{margin:0,font:'700 44px/1.1 var(--font-display)',letterSpacing:'-.02em',color:'#fff',textWrap:'balance'}}>Join 500+ Verified Professionals</h2>
<p style={{margin:0,font:'400 18px/1.5 var(--font-display)',color:'var(--lavender-200)',textWrap:'pretty'}}>Whether you run an HVAC company, a cleaning crew or a construction firm, list your services on Oria Surv and start receiving bookings.</p>
<div style={{display:'flex',gap:12,flexWrap:'wrap',marginTop:8}}><Button size="lg" variant="soft" icon="store" onClick={onVendor}>Register as Vendor</Button></div></div>
<div className="g2" style={{gap:16}}>{B.map(([i,t,d])=><div key={t} className="vben"><span className="ico-tile" style={{background:'rgba(255,255,255,.12)',color:'#fff'}}><Icon name={i} size={22}/></span><div style={{font:'600 17px var(--font-ui)',color:'#fff'}}>{t}</div><div style={{font:'400 14px/1.5 var(--font-body)',color:'var(--lavender-200)'}}>{d}</div></div>)}</div>
</div></Wrap>}

function Testimonials(){const T=[['Facility Management','Oria Surv has completely transformed how we manage our commercial portfolio. We now handle HVAC maintenance, cleaning, and facility management all through one app.','Khalid Al-Rashid','Property Manager · Manama'],['Cleaning Services','Booking was incredibly simple and the team arrived right on time. The deep cleaning service was thorough and professional.','Sarah Al-Mahmoud','Homeowner · Juffair'],['HVAC Services','My AC was down in the peak of summer. A certified HVAC technician arrived within the hour. Transparent pricing, no hidden costs.','Mohammed Al-Baker','Homeowner · Saar']];
return <Wrap id="stories" bg="var(--page-50)"><SectionHeading align="center" eyebrow="Client Stories" title="What Our" accent="Clients Say" lede="Trusted by homeowners, property managers, and businesses across Bahrain."/>
<div className="g3" style={{marginTop:48,gap:20}}>{T.map(([c,q,n,r])=><Testimonial key={n} category={c} quote={q} name={n} role={r}/>)}</div></Wrap>}

function FAQ(){const Q=[['How are vendors verified?','Every professional is background-checked, licensed and verified before serving your property.'],['How do payments work?','Pay securely in-app. The amount is held in escrow and released when the job is done.'],['Can I compare quotes before booking?','Yes. Review vendor profiles, ratings and quotes side by side, and vendors can propose a price or alternate time for you to approve.'],['How do I list my services as a vendor?','Register as a vendor, submit your licence and business details for verification, then choose the categories you serve.'],['Which areas do you cover?','We serve all of the Kingdom of Bahrain.']];const [o,setO]=React.useState(0);
return <Wrap id="faq"><SectionHeading align="center" title="Frequently Asked" accent="Questions" lede="Find quick answers to the most common questions before you book."/>
<div style={{maxWidth:780,margin:'40px auto 0',display:'flex',flexDirection:'column',gap:12}}>{Q.map(([q,a],i)=><div key={q} style={{border:'1px solid '+(o===i?'var(--lavender-300)':'var(--border-subtle)'),borderRadius:16,background:'#fff',transition:'border-color .2s'}}><button onClick={()=>setO(o===i?-1:i)} style={{width:'100%',display:'flex',justifyContent:'space-between',alignItems:'center',gap:16,padding:'18px 22px',border:0,background:'transparent',cursor:'pointer',font:'600 16px var(--font-ui)',color:'var(--text-strong)',textAlign:'left'}}>{q}<Icon name={o===i?'minus':'plus'} size={18} color="var(--brand-primary)"/></button>{o===i&&<div style={{padding:'0 22px 18px',font:'400 15px/1.55 var(--font-body)',color:'var(--text-muted)'}}>{a}</div>}</div>)}</div></Wrap>}

function AppCTA(){return <Wrap id="download"><div style={{background:'var(--brand-primary)',borderRadius:32,padding:'56px 32px',display:'flex',flexDirection:'column',alignItems:'center',gap:18,textAlign:'center'}}>
<Badge tone="tint" style={{height:30,fontSize:13}}>Available on iOS & Android</Badge>
<h2 style={{margin:0,font:'700 44px/1.1 var(--font-display)',letterSpacing:'-.02em',color:'#fff',textWrap:'balance'}}>Book Any Service, Anytime, Anywhere</h2>
<p style={{margin:0,maxWidth:600,font:'400 18px/1.5 var(--font-display)',color:'var(--lavender-200)'}}>Download the Oria Surv app and get instant access to verified professionals across all service categories — in minutes, not days.</p>
<div style={{marginTop:8}}><StoreBadges/></div></div></Wrap>}

const FORM_URL='https://formsubmit.co/ajax/support@oriasurv.com';
async function sendForm(subject,data){const r=await fetch(FORM_URL,{method:'POST',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify({_subject:subject,_template:'table',_captcha:'false',...data})});if(!r.ok)throw new Error('send failed');return r.json()}
const useForm=(init)=>{const [f,setF]=React.useState(init);return [f,k=>e=>setF({...f,[k]:e.target.value}),()=>setF(init)]};
const FormMsg=({err})=>err?<div role="alert" style={{font:'500 14px var(--font-ui)',color:'var(--red-600)'}}>{err}</div>:null;
function Contact(){const [st,setSt]=React.useState('idle');const [err,setErr]=React.useState('');const [f,on,reset]=useForm({name:'',email:'',phone:'',message:''});
const submit=async()=>{if(!f.name.trim()||!f.email.trim()||!f.message.trim()){setErr('Please fill in your name, email and message.');return}setErr('');setSt('sending');try{await sendForm('New Contact Message — Oria Surv Website',{Name:f.name,Email:f.email,Phone:f.phone,Message:f.message,_replyto:f.email});setSt('sent');reset()}catch(e){setSt('idle');setErr('Could not send. Please try again or contact us on WhatsApp.')}};
return <Wrap id="contact-us" bg="var(--page-50)"><div className="g2">
<div style={{display:'flex',flexDirection:'column',gap:22}}><SectionHeading title="Contact" accent="Us" lede="We're here to help — reach out anytime for quick support and assistance."/>
{[['mail','Mail','support@oriasurv.com'],['map-pin','Office Address','Manama, Kingdom of Bahrain']].map(([i,l,v])=><div key={l} style={{display:'flex',gap:14,alignItems:'center'}}><span className="ico-tile"><Icon name={i}/></span><div><div style={{font:'500 13px var(--font-ui)',color:'var(--text-muted)'}}>{l}</div><div style={{font:'600 16px var(--font-ui)',color:'var(--text-strong)'}}>{v}</div></div></div>)}
<div style={{background:'#fff',borderRadius:20,boxShadow:'var(--shadow-card)',padding:12}}><iframe title="Oria Surv office location — Bahrain" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d462560.6174499649!2d50.45547992031249!3d26.066700000000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e49c3a7cc4c6b33%3A0x3c654aa2347cf7c6!2sBahrain!5e0!3m2!1sen!2s!4v1697000000000!5m2!1sen!2s" style={{display:'block',width:'100%',height:260,border:0,borderRadius:14}} loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen></iframe></div></div>
<div style={{background:'#fff',borderRadius:24,boxShadow:'var(--shadow-card)',padding:28,display:'flex',flexDirection:'column',gap:16}}>
<Input label="Full Name" placeholder="Your name" value={f.name} onChange={on('name')}/><div className="g2" style={{gap:16}}><Input label="Email Address" type="email" placeholder="you@email.com" value={f.email} onChange={on('email')}/><Input label="Phone Number" type="tel" placeholder="+973" value={f.phone} onChange={on('phone')}/></div><Input label="Message" placeholder="How can we help?" multiline rows={4} value={f.message} onChange={on('message')}/>
<FormMsg err={err}/>
<Button size="lg" full icon={st==='sent'?'check':undefined} onClick={st==='sending'?undefined:submit}>{st==='sending'?'Sending…':st==='sent'?'Message Sent — We\'ll Reply Soon':'Send Message'}</Button>
<div style={{display:'flex',alignItems:'center',gap:12,font:'500 13px var(--font-ui)',color:'var(--text-muted)'}}><span style={{flex:1,height:1,background:'var(--border-subtle)'}}></span>Or<span style={{flex:1,height:1,background:'var(--border-subtle)'}}></span></div>
<a href="https://wa.me/97336623664" target="_blank" rel="noopener" className="wa-btn"><span aria-hidden="true" style={{width:22,height:22,background:'currentColor',WebkitMask:'url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/whatsapp.svg) center/contain no-repeat',mask:'url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/whatsapp.svg) center/contain no-repeat'}}></span>Contact Us on WhatsApp</a></div></div></Wrap>}

function VendorDialog({open,onClose}){const [done,setDone]=React.useState(false);const [busy,setBusy]=React.useState(false);const [err,setErr]=React.useState('');const [f,on,reset]=useForm({business:'',category:'',phone:'',email:''});
const close=()=>{onClose();setTimeout(()=>{setDone(false);setErr('')},300)};
const submit=async()=>{if(busy)return;if(!f.business.trim()||!f.category.trim()||!f.phone.trim()){setErr('Please fill in business name, category and phone.');return}setErr('');setBusy(true);try{await sendForm('New Vendor Registration — '+f.business,{'Business Name':f.business,'Service Category':f.category,'Phone Number':f.phone,'Email':f.email||'—'});setDone(true);reset()}catch(e){setErr('Could not submit. Please try again.')}setBusy(false)};
return <Dialog open={open} title={done?'Application Received':'Register as Vendor'} cancelLabel={done?'Close':'Cancel'} confirmLabel={done?'Download App':busy?'Submitting…':'Submit'} onCancel={close} onConfirm={()=>{if(done){close();location.hash='download'}else submit()}}>
{done?<p style={{margin:0,font:'400 15px/1.55 var(--font-body)',color:'var(--text-muted)'}}>Thank you. Our team will verify your business and contact you within 2 working days. Meanwhile, download the app to set up your vendor profile.</p>
:<div style={{display:'flex',flexDirection:'column',gap:14,textAlign:'left'}}><Input label="Business Name" placeholder="e.g. Gulf Cool HVAC" value={f.business} onChange={on('business')}/><Input label="Service Category" placeholder="HVAC, MEP, Cleaning…" value={f.category} onChange={on('category')}/><Input label="Phone Number" type="tel" placeholder="+973" value={f.phone} onChange={on('phone')}/><Input label="Email (optional)" type="email" placeholder="you@company.com" value={f.email} onChange={on('email')}/><FormMsg err={err}/></div>}</Dialog>}

function SiteFooter({base=''}){const col=(t,l)=><div><div style={{font:'600 16px var(--font-ui)',color:'#fff',marginBottom:14}}>{t}</div><div style={{display:'flex',flexDirection:'column',gap:10}}>{l.map(([x,h])=><a key={x} href={!h?undefined:h[0]==='#'?base+h:h} className="flink">{x}</a>)}</div></div>;
return <footer style={{background:'var(--purple-950)'}}><div className="wrap g4 foot" style={{padding:'64px 24px 28px'}}>
<div><div style={{display:'inline-block',background:'#fff',borderRadius:12,padding:'8px 12px'}}><Logo h={40}/></div><p style={{font:'400 14px/1.6 var(--font-body)',color:'var(--lavender-200)',maxWidth:300}}>Bahrain's leading multi-service marketplace — connecting property owners and businesses with verified professionals across all service categories.</p><StoreBadges h={40}/></div>
{col('Our Services',[['HVAC Services','#services'],['MEP Services','#services'],['Construction','#services'],['Facility Management','#services'],['Cleaning Services','#services']])}{col('Quick Links',[['Home','#home'],['How it Works','#how-it-works'],['For Vendors','#vendors'],['FAQ','#faq'],['Privacy Policy','Privacy Policy.html'],['Terms & Conditions','Terms and Conditions.html'],['Refund Policy','Refund Policy.html']])}{col('Contact Us',[['support@oriasurv.com','mailto:support@oriasurv.com'],['Manama, Kingdom of Bahrain']])}</div>
<div className="wrap" style={{padding:'20px 24px 32px',borderTop:'1px solid rgba(255,255,255,.12)',font:'400 13px var(--font-body)',color:'var(--lavender-300)'}}>© 2026 Oria Surv. All rights reserved.</div></footer>}
Object.assign(window,{HowItWorks,Vendors,Testimonials,FAQ,AppCTA,Contact,VendorDialog,SiteFooter});
