const { Button, Icon, Divider, Badge } = window.FirebrickDesignSystem_e0332b;
function ServiceRow({s,flip,go}){
 const img=<Parallax src={s.img} alt={s.eyebrow} ratio="16/10" strength={0.04}/>;
 return <div id={'svc-'+s.id} className="g2" style={{display:'grid',gridTemplateColumns:flip?'1fr 480px':'480px 1fr',gap:64,alignItems:'center'}}>
  {!flip&&<Reveal dir="left">{img}</Reveal>}
  <Reveal dir={flip?'left':'right'} style={{display:'flex',flexDirection:'column',gap:16}}>
   <div style={{display:'flex',alignItems:'center',gap:14}}><Eyebrow>{s.eyebrow}</Eyebrow><Badge>About <CountUp to={s.mins}/> minutes</Badge></div>
   <h2 style={{fontSize:34,margin:0}}>{s.title}</h2>
   <p style={{fontSize:16,color:'var(--text-secondary)',margin:0}}>{s.body}</p>
   <div style={{display:'flex',flexDirection:'column',gap:8,marginTop:4}}>
    {s.covers.map(c=><span key={c} style={{display:'flex',gap:12,alignItems:'baseline',fontSize:15,color:'var(--text-secondary)'}}><span style={{color:'var(--brass)',fontFamily:'var(--font-display)'}}>—</span>{c}</span>)}
   </div>
   <div style={{borderLeft:'1px solid var(--border-hairline-strong)',padding:'10px 0 10px 18px',marginTop:6}}>
    <span className="fb-eyebrow" style={{fontSize:10,color:'var(--text-muted)'}}>What it isn't</span>
    <p style={{fontSize:14,color:'var(--text-muted)',marginTop:6,marginBottom:0}}>{s.isnt}</p>
   </div>
   <div style={{marginTop:8}}><Button size="sm" onClick={()=>go('booking',s.id)}>Book this visit</Button></div>
  </Reveal>
  {flip&&<Reveal dir="right">{img}</Reveal>}
 </div>;
}
function ServicesPage({go,focus}){
 React.useEffect(()=>{if(focus){setTimeout(()=>{const el=document.getElementById('svc-'+focus);if(el){const y=el.getBoundingClientRect().top+window.pageYOffset-110;window.scrollTo({top:y,behavior:REDUCED()?'auto':'smooth'})}},80)}},[focus]);
 return <main data-screen-label="Services">
  <section style={{...fbContainer,padding:'96px 24px 80px'}}>
   <Reveal><SectionHead h1 eyebrow="Services" title="What a visit looks like." lead="Every visit starts the same way: drop cloths down, vacuum on. Pricing is confirmed with you before any work begins."/></Reveal>
   <RuleIn style={{marginTop:56}}/>
  </section>
  <section style={{...fbContainer,paddingBottom:120,display:'flex',flexDirection:'column',gap:104}}>
   {SERVICES.map((s,i)=><ServiceRow key={s.id} s={s} flip={i%2===1} go={go}/>)}
  </section>
  <section id="catalog" style={{background:'var(--surface-panel)',borderTop:'1px solid var(--border-hairline)',position:'relative'}}>
   {/* texture-charred-brick.png was never shipped — it 404s. See the same fix in Home.jsx. */}
   <div className="fb-grain" style={{backgroundImage:'url(../../assets/textures/texture-soot-plaster.png)'}}></div>
   <div style={{...fbContainer,position:'relative',padding:'104px 24px 120px',display:'flex',flexDirection:'column',gap:64}}>
    <Reveal><SectionHead eyebrow="Everything we do" title="The full list, in plain language." lead="Cleaning, inspection and protection across Woodland Hills and the nine cities around it. Structural and masonry work is quoted by a licensed contractor after we photograph what we find."/></Reveal>
    {CATALOG.map((grp,gi)=><Reveal key={grp.group} delay={gi*60} style={{display:'flex',flexDirection:'column',gap:20}}>
     <div style={{display:'flex',alignItems:'baseline',gap:16}}>
      <h3 style={{fontSize:15,margin:0,color:'var(--brass)',fontFamily:'var(--font-body)',fontWeight:600,letterSpacing:'var(--tracking-caps)',textTransform:'uppercase'}}>{grp.group}</h3>
      <span style={{flex:1,height:1,background:'var(--border-hairline)'}}></span>
     </div>
     <div className="g2" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'26px 56px'}}>
      {grp.items.map(([n,d])=><div key={n} style={{display:'flex',flexDirection:'column',gap:6}}>
       <h4 style={{fontSize:18,margin:0,fontFamily:'var(--font-display)',fontWeight:500,color:'var(--limewash)'}}>{n}</h4>
       <p style={{fontSize:14.5,color:'var(--text-secondary)',margin:0}}>{d}</p>
      </div>)}
     </div>
    </Reveal>)}
    <Reveal><div style={{display:'flex',flexWrap:'wrap',gap:14,alignItems:'center',paddingTop:8}}>
     <Button onClick={()=>go('booking')}>Book a visit</Button>
     <span style={{fontSize:15,color:'var(--text-secondary)'}}>Not sure which one you need? Book a visit and we will tell you what it actually needs.</span>
    </div></Reveal>
   </div>
  </section>
 </main>;
}
Object.assign(window,{ServicesPage});