const {Icon,Button,Badge,Input,SegmentedTabs,Dialog,SectionHeading,StatBlock,Testimonial,ServiceCategoryCard}=window.OriaSurvDesignSystem_e49381;
const IMG='https://oriasurv.com/Assets/Images/';
const Wrap=({id,bg='#fff',children,pad})=><section id={id} style={{background:bg}}><div className="wrap" style={{padding:pad}}>{children}</div></section>;
const StoreBadge=({icon,top,name,h})=><a href="#download" className="store-badge" style={{height:h}}><span aria-hidden="true" style={{width:h*.48,height:h*.48,flex:'none',background:'currentColor',WebkitMask:'url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/'+icon+'.svg) center/contain no-repeat',mask:'url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/'+icon+'.svg) center/contain no-repeat'}}></span><span style={{display:'flex',flexDirection:'column',lineHeight:1.05}}><span style={{fontSize:h*.2,fontWeight:500,letterSpacing:'.02em'}}>{top}</span><span style={{fontSize:h*.36,fontWeight:600,letterSpacing:'-.01em'}}>{name}</span></span></a>;
const StoreBadges=({h=50})=><div style={{display:'flex',gap:12,flexWrap:'wrap'}}><StoreBadge icon="googleplay" top="GET IT ON" name="Google Play" h={h}/><StoreBadge icon="apple" top="Download on the" name="App Store" h={h}/></div>;

function Logo({h=44,light}){const [ok,setOk]=React.useState(true);const [src,setSrc]=React.useState('assets/logo.png');
if(!ok)return <span style={{display:'flex',alignItems:'baseline',gap:6,font:'700 '+Math.round(h*.56)+'px/1 var(--font-display)',letterSpacing:'-.02em',color:light?'#fff':'var(--brand-primary)'}}>Oria<span style={{color:light?'var(--lavender-200)':'var(--orchid-500, #9B59B6)'}}>Surv</span></span>;
return <img src={src} alt="Oria Surv" onError={()=>{if(src==='assets/logo.png')setSrc(IMG+'logo.webp');else setOk(false)}} style={{height:h,display:'block'}}/>}
function LangToggle(){const [l,setL]=React.useState(window.OriaI18n?window.OriaI18n.lang:'en');React.useEffect(()=>{const f=e=>setL(e.detail);addEventListener('oria-lang',f);return()=>removeEventListener('oria-lang',f)},[]);
return <button type="button" className="lang-btn" data-noi18n="" onClick={()=>window.OriaI18n&&window.OriaI18n.set(l==='ar'?'en':'ar')} aria-label={l==='ar'?'Switch to English':'التبديل إلى العربية'}><Icon name="languages" size={18}/><span>{l==='ar'?'English':'العربية'}</span></button>}
function SiteHeader({onVendor,base=''}){const links=[['Home','home'],['About','about'],['App Tour','app-tour'],['Services','services'],['How it Works','how-it-works'],['For Vendors','vendors'],['FAQ','faq']];const [open,setOpen]=React.useState(false);
return <header style={{position:'sticky',top:0,zIndex:30,background:'rgba(255,255,255,.9)',backdropFilter:'blur(12px)',borderBottom:'1px solid var(--border-subtle)'}}>
<div className="wrap" style={{height:76,display:'flex',alignItems:'center',justifyContent:'space-between',gap:24,padding:'0 24px'}}>
<a href={base+'#home'} style={{display:'flex',alignItems:'center'}}><Logo h={44}/></a>
<nav className="nav-links">{links.map(([l,h])=><a key={h} href={base+'#'+h} className="navlink">{l}</a>)}</nav>
<div style={{display:'flex',gap:10,alignItems:'center'}}><LangToggle/><span className="hide-sm"><Button size="sm" variant="outline" onClick={onVendor}>Join as Vendor</Button></span><Button size="sm" onClick={()=>location.href=base+'#download'}>Download App</Button>
<button className="burger" aria-label="Menu" onClick={()=>setOpen(!open)}><Icon name={open?'x':'menu'} size={22}/></button></div></div>
{open&&<nav className="mobile-nav">{links.map(([l,h])=><a key={h} href={base+'#'+h} onClick={()=>setOpen(false)}>{l}</a>)}</nav>}</header>}

const HERO_IMGS=['assets/hero-ac.png','assets/hero-car-wash.png','assets/hero-construction.png'];
function Hero({onVendor}){const [aud,setAud]=React.useState('customer');const [b,setB]=React.useState(1);
React.useEffect(()=>{const t=setInterval(()=>setB(x=>x%HERO_IMGS.length+1),4500);return()=>clearInterval(t)},[]);
const C={customer:{eyebrow:"Bahrain's #1 Multi-Service Marketplace",title:'One Platform, All Services',accent:'At Your Fingertips',lede:'Book verified professionals for HVAC, MEP, Construction, Facility Management, Maintenance, Cleaning and more — all from a single trusted platform.'},
vendor:{eyebrow:'For Service Providers',title:'Grow Your Business',accent:'With Oria Surv',lede:'List your services, receive booking requests from property owners and businesses across Bahrain, send quotes and get paid securely through escrow.'}}[aud];
return <section id="home" style={{background:'var(--page-50)'}}><div className="wrap g2 hero" style={{alignItems:'center'}}>
<div style={{display:'flex',flexDirection:'column',gap:24}}>
<SegmentedTabs items={[{value:'customer',label:'I Need a Service',icon:'house'},{value:'vendor',label:"I'm a Vendor",icon:'briefcase'}]} value={aud} onChange={setAud} style={{maxWidth:380}}/>
<SectionHeading key={aud} eyebrow={C.eyebrow} title={C.title} accent={C.accent} size="l" lede={C.lede}/>
{aud==='customer'?<><div style={{display:'flex',flexWrap:'wrap',gap:8}}>{['HVAC','MEP','Construction','Facility Mgmt','Maintenance','Cleaning'].map(c=><Badge key={c} tone="tint" style={{height:32,fontSize:13,padding:'0 14px'}}>{c}</Badge>)}</div><StoreBadges/></>
:<div style={{display:'flex',gap:12,flexWrap:'wrap'}}><Button size="lg" icon="store" onClick={onVendor}>Register as Vendor</Button><Button size="lg" variant="outline" onClick={()=>location.hash='vendors'}>Learn More</Button></div>}
</div>
<div style={{position:'relative'}}><div style={{aspectRatio:'4/3.4',borderRadius:28,background:`var(--lavender-100) center/cover url(${HERO_IMGS[b-1]})`,boxShadow:'var(--shadow-raised)',transition:'background-image .6s'}}></div>
<div style={{display:'flex',gap:6,justifyContent:'center',marginTop:16}}>{HERO_IMGS.map((_,k)=>k+1).map(i=><button key={i} aria-label={'Banner '+i} onClick={()=>setB(i)} style={{width:i===b?28:8,height:8,borderRadius:8,border:0,cursor:'pointer',background:i===b?'var(--brand-primary)':'var(--lavender-300)',transition:'width .3s var(--ease-out)'}}></button>)}</div></div>
</div>
<div className="wrap g4" style={{paddingTop:0,paddingBottom:64}}>{[['1,500','Happy Clients'],['500+','Verified Professionals'],['4/5','Average Rating'],['8+','Service Categories']].map(([v,l])=><div key={l} style={{background:'#fff',borderRadius:20,padding:24,boxShadow:'var(--shadow-card)'}}><StatBlock value={v} label={l}/></div>)}</div></section>}

function AboutMedia(){const v=React.useRef(null);const box=React.useRef(null);const [done,setDone]=React.useState(false);
React.useEffect(()=>{const io=new IntersectionObserver(([e])=>{if(e.isIntersecting&&v.current&&!done){v.current.play().catch(()=>{});io.disconnect()}},{threshold:.4});if(box.current)io.observe(box.current);return()=>io.disconnect()},[]);
const replay=()=>{setDone(false);const el=v.current;if(el){el.currentTime=0;el.play().catch(()=>{})}};
return <div ref={box} style={{position:'relative',borderRadius:28,aspectRatio:'1/1',overflow:'hidden',background:'var(--lavender-100)'}}>
<video ref={v} src="assets/about-clip-v2.mp4" muted playsInline preload="auto" onEnded={()=>setDone(true)} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}></video>
{done&&<button onClick={replay} aria-label="Replay video" style={{position:'absolute',right:16,bottom:16,display:'flex',alignItems:'center',gap:8,height:40,padding:'0 16px',border:0,borderRadius:999,background:'rgba(255,255,255,.92)',color:'var(--brand-primary)',font:'600 14px var(--font-ui)',cursor:'pointer',boxShadow:'var(--shadow-card)'}}><Icon name="play" size={16}/>Replay</button>}</div>}
function About(){const why=[['shield-check','Verified Vendors','All professionals are background-checked, licensed, and verified across every category'],['smartphone','Easy Booking','Request any service in minutes through our user-friendly mobile app'],['receipt','Transparent Pricing','Compare quotes and pay securely with no hidden fees or surprises']];
return <Wrap id="about"><div className="g2" style={{alignItems:'center'}}>
<AboutMedia/>
<div style={{display:'flex',flexDirection:'column',gap:24}}><SectionHeading eyebrow="About the Platform" title="What is" accent="Oria Surv?" size="m" lede="Bahrain's leading on-demand multi-service marketplace connecting property owners and businesses with verified professionals across HVAC, MEP, Construction, Facility Management, Maintenance, Cleaning, and more."/>
{why.map(([i,t,d])=><div key={t} style={{display:'flex',gap:16}}><span className="ico-tile"><Icon name={i} size={24}/></span><div><div style={{font:'600 17px var(--font-ui)',color:'var(--text-strong)'}}>{t}</div><div style={{font:'400 15px/1.5 var(--font-body)',color:'var(--text-muted)',marginTop:4}}>{d}</div></div></div>)}</div></div></Wrap>}

function AppTour(){const F=[['layout-grid','One App, All Services','Browse every category — from a quick AC fix to full facility management — on one home screen.','01'],['badge-check','Trust Verified Pros','Every vendor is background checked and licensed before they can accept your job.','02'],['calendar-check','Book in Minutes','Choose, compare, confirm. Set your location, pick a date and time, or propose an alternate slot.','04'],['clipboard-list','Track Every Order','See ongoing and past orders, status updates and vendor details in one place.','03'],['bell','Real-Time Notifications','Know the moment a vendor accepts, proposes a new time or updates the price.','05'],['wallet','Release Payment When Done','Pay in-app. Funds sit in escrow and are only released when the job is complete.','06']];
const [i,setI]=React.useState(0);const [paused,setPaused]=React.useState(false);const [seen,setSeen]=React.useState(false);const tourRef=React.useRef(null);
React.useEffect(()=>{const io=new IntersectionObserver(([e])=>{if(e.isIntersecting){setI(0);setSeen(true);io.disconnect()}},{threshold:.35});if(tourRef.current)io.observe(tourRef.current);return()=>io.disconnect()},[]);
React.useEffect(()=>{if(paused||!seen)return;const t=setInterval(()=>setI(x=>(x+1)%F.length),5000);return()=>clearInterval(t)},[paused,seen]);
return <Wrap id="app-tour" bg="var(--page-50)"><SectionHeading align="center" eyebrow="Inside the App" title="Everything You Need," accent="In Your Pocket" lede="A quick tour of how the Oria Surv app takes you from request to completed job."/>
<div ref={tourRef} className="g2 tour" onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)} style={{marginTop:48,alignItems:'center'}}>
<div style={{display:'flex',flexDirection:'column',gap:10}}>{F.map(([ic,t,d],k)=><button key={t} onClick={()=>setI(k)} className={'tour-item'+(k===i?' on':'')}><span className="ico-tile" style={{width:44,height:44}}><Icon name={ic} size={22}/></span><span style={{display:'flex',flexDirection:'column',gap:4,textAlign:'left'}}><span style={{font:'600 17px var(--font-ui)',color:k===i?'var(--brand-primary)':'var(--text-strong)'}}>{t}</span>{k===i&&<span style={{font:'400 15px/1.5 var(--font-body)',color:'var(--text-muted)'}}>{d}</span>}</span></button>)}</div>
<div style={{display:'flex',justifyContent:'center'}}><div className="shot"><img key={i} src={'assets/screens/'+F[i][3]+'.png'} alt={F[i][1]}/></div></div></div></Wrap>}

function Services(){const S=[['air-vent','HVAC Services','Heating, Ventilation & Air Conditioning installation, maintenance, and repair for residential and commercial properties',['AC installation & repair','Duct cleaning & maintenance','Ventilation systems'],'Home'],['plug-zap','MEP Services','Mechanical, Electrical & Plumbing engineering solutions for new builds, fit-outs, and ongoing maintenance',['Electrical wiring & panels','Plumbing & drainage','MEP design & consultation'],'Business'],['hard-hat','Construction','Full-cycle construction services from groundwork to finishing, managed by certified contractors',['Civil construction','Interior fit-outs','Renovation & remodeling'],'Business'],['building-2','Facility Management','Comprehensive integrated facility management for commercial buildings, compounds, and large properties',['Preventive maintenance','Security management','Compliance & reporting'],'Business'],['wrench','Maintenance Services','Scheduled and on-demand maintenance to keep assets in top condition',['General repairs','Painting & waterproofing','Carpentry & metalwork'],'Home'],['sparkles','Cleaning Services','From regular housekeeping to deep cleaning and sanitization',['Regular & deep cleaning','Post-construction cleanup','Sanitization services'],'Home'],['handshake','Third-Party Services','A growing catalog of specialized providers for niche needs',['Pest control','Landscaping & gardening','Pool maintenance'],'Home'],['rocket','More Coming Soon','New service categories are regularly added',['IT & tech support','Solar & renewable energy','Smart home automation'],'All',true]];
const tag={'HVAC Services':'HB','MEP Services':'HB','Construction':'B','Facility Management':'B','Maintenance Services':'HB','Cleaning Services':'HB','Third-Party Services':'H','More Coming Soon':'HB'};
const [f,setF]=React.useState('all');const list=S.filter(s=>f==='all'||tag[s[1]].includes(f[0]));
return <Wrap id="services"><SectionHeading align="center" eyebrow="Service Categories" title="All Services," accent="One Platform" lede="From HVAC and MEP to Facility Management and Cleaning — find verified professionals for every service your property or business needs."/>
<div style={{display:'flex',justifyContent:'center',marginTop:32}}><SegmentedTabs items={[{value:'all',label:'All Services'},{value:'Home',label:'For Homes'},{value:'Business',label:'For Businesses'}]} value={f} onChange={setF} style={{width:'100%',maxWidth:460}}/></div>
<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(250px,1fr))',gap:20,marginTop:32}}>{list.map(([i,t,d,it,,soon])=><ServiceCategoryCard key={t} icon={i} title={t} description={d} items={it} soon={soon}/>)}</div>
<div style={{display:'flex',justifyContent:'center',marginTop:36}}><Button size="lg" iconRight="arrow-right" onClick={()=>location.hash='download'}>Book a Service in the App</Button></div></Wrap>}
Object.assign(window,{LangToggle,StoreBadge,Logo,Wrap,StoreBadges,IMG,SiteHeader,Hero,About,AppTour,Services});