const { Button, Icon, Divider, Badge } = window.FirebrickDesignSystem_e0332b;
function Hero({go}){
 const [poster]=React.useState(()=>REDUCED()||(navigator.connection&&navigator.connection.saveData));
 return <section data-screen-label="Hero" style={{position:'relative',minHeight:'86vh',display:'flex',alignItems:'flex-end',overflow:'hidden'}}>
  {poster
   ?<img className="hero-media" src={IMG+'poster-hearth.jpg'} alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
   :<video className="hero-media" src="../../assets/motion/hero-loop-hearth.mp4" poster={IMG+'poster-hearth.jpg'} autoPlay muted loop playsInline style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}></video>}
  <div className="fb-flicker" aria-hidden="true"></div>
  <div style={{position:'absolute',inset:0,background:'var(--overlay-hero-left)'}}></div>
  <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(23,19,16,0) 55%,rgba(23,19,16,.72) 100%)'}}></div>
  <div className="fb-grain" style={{backgroundImage:'url(../../assets/textures/texture-soot-plaster.png)'}}></div>
  <div style={{position:'relative',width:'100%',maxWidth:'var(--container-max)',margin:'0 auto',padding:'120px 40px 96px',boxSizing:'border-box',display:'flex',flexDirection:'column',gap:22}}>
   <span className="hero-fade fb-eyebrow" style={{animationDelay:'240ms'}}>Chimney &amp; fireplace care · West San Fernando Valley</span>
   <h2 style={{fontSize:'var(--text-display-xl)',lineHeight:'var(--leading-display)',maxWidth:820,margin:0}}>
    <span className="hero-line" style={{display:'block',overflow:'hidden'}}><span className="hero-line-inner">The unglamorous way</span></span>
    <span className="hero-line" style={{display:'block',overflow:'hidden'}}><span className="hero-line-inner" style={{animationDelay:'80ms'}}>to keep a fireplace safe.</span></span>
   </h2>
   <p className="hero-fade" style={{animationDelay:'330ms',fontSize:19,color:'var(--text-secondary)',maxWidth:500,margin:0}}>Drop cloths first, a HEPA vacuum the whole visit, straight answers at the end.</p>
   <div className="hero-fade" style={{animationDelay:'420ms',display:'flex',gap:14,marginTop:6,flexWrap:'wrap'}}>
    <Button onClick={()=>go('booking')}>Book a visit</Button>
    <Button variant="ghost" onClick={()=>go('services')}>See what we check</Button>
   </div>
  </div>
 </section>;
}
function HowWeWork(){
 const pts=[['Drop cloths first','Your floors are covered before a single tool comes out.'],['HEPA, the whole visit','The vacuum runs from the first brush stroke to the last.'],['Straight answers','What it needs, what it doesn\u2019t, in plain language.']];
 return <section style={{...fbContainer,padding:'104px 24px'}}>
  <RuleIn/>
  <div className="g2" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)'}}>
   {pts.map(([t,b],i)=><Reveal key={t} delay={i*90} style={{padding:'36px 28px 0',borderLeft:i?'1px solid var(--border-hairline)':'none',display:'flex',flexDirection:'column',gap:10}}>
    <span style={{fontFamily:'var(--font-display)',fontSize:15,color:'var(--brass)'}}>{'0'+(i+1)}</span>
    <h3 style={{fontSize:24,margin:0}}>{t}</h3>
    <p style={{fontSize:15,color:'var(--text-secondary)',margin:0}}>{b}</p>
   </Reveal>)}
  </div>
 </section>;
}
function ServiceCard({s,go,i}){
 return <Reveal delay={i*90}>
  <div className="svc-card">
   <div style={{overflow:'hidden'}}><img className="svc-img" src={s.img} alt={s.eyebrow} style={{width:'100%',aspectRatio:'16/9',objectFit:'cover',display:'block'}}/></div>
   <div style={{padding:28,display:'flex',flexDirection:'column',gap:12,flex:1}}>
    <span className="fb-eyebrow">{s.eyebrow}</span>
    <h3 style={{fontSize:24,margin:0}}>{s.title}</h3>
    <p style={{fontSize:15,color:'var(--text-secondary)',margin:0}}>{s.short}</p>
    <div style={{marginTop:'auto',display:'flex',justifyContent:'space-between',alignItems:'center',paddingTop:10}}>
     <Badge>{s.time}</Badge>
     <Button size="sm" variant="ghost" onClick={()=>go('services',s.id)}>Details</Button>
    </div>
   </div>
  </div>
 </Reveal>;
}
function ServicesGrid({go}){
 return <section style={{...fbContainer,paddingBottom:104,display:'flex',flexDirection:'column',gap:44}}>
  <Reveal><SectionHead eyebrow="Services" title="Three things, done carefully." lead="No packages, no add-ons you didn't ask for. Every visit ends with a plain summary."/></Reveal>
  <div className="g2" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
   {SERVICES.map((s,i)=><ServiceCard key={s.id} s={s} go={go} i={i}/>)}
  </div>
 </section>;
}
function BeforeAfter(){
 const stats=[[45,'Minutes, a typical sweep'],[10,'Cities we cover'],[1,'Call to confirm — that\u2019s it']];
 return <section style={{background:'var(--surface-panel)',borderTop:'1px solid var(--border-hairline)',borderBottom:'1px solid var(--border-hairline)',position:'relative'}}>
  <div className="fb-grain" style={{backgroundImage:'url(../../assets/textures/texture-soot-plaster.png)'}}></div>
  <div className="g2" style={{...fbContainer,position:'relative',padding:'104px 24px',display:'grid',gridTemplateColumns:'400px 1fr',gap:64,alignItems:'center'}}>
   <Reveal dir="left" style={{display:'flex',flexDirection:'column',gap:36}}>
    <SectionHead eyebrow="The work" title="Proof, not promises." lead="Photographs from real visits in the Valley. You get the same for your chimney, whatever we find."/>
    <div style={{display:'flex',flexDirection:'column',gap:0}}>
     {stats.map(([n,l],i)=><div key={l} style={{display:'flex',alignItems:'baseline',gap:16,padding:'14px 0',borderTop:i?'1px solid var(--border-hairline)':'none'}}>
      <span style={{fontFamily:'var(--font-display)',fontSize:34,color:'var(--brass)',minWidth:56}}><CountUp to={n}/></span>
      <span style={{fontSize:14,color:'var(--text-secondary)'}}>{l}</span>
     </div>)}
    </div>
   </Reveal>
   <Reveal delay={90}>
    <div className="g2" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:18}}>
     <img src={IMG+'real-firebox.jpg'} alt="A firebox left clean after a sweep" style={{width:'100%',aspectRatio:'4/5',objectFit:'cover',borderRadius:'var(--radius)',border:'1px solid var(--border-hairline)'}}/>
     <img src={IMG+'real-crown-detail.jpg'} alt="A chimney crown sealed and capped" style={{width:'100%',aspectRatio:'4/5',objectFit:'cover',borderRadius:'var(--radius)',border:'1px solid var(--border-hairline)'}}/>
    </div>
   </Reveal>
  </div>
 </section>;
}
function PriceFactors(){
 const rows=[
  ['Number of flues','A second flue is a second full sweep, not an add-on.'],
  ['How heavy the buildup is','Loose soot brushes off. Hard flakes take longer. Glazed, tar-like creosote needs treatment and sometimes a second visit.'],
  ['Roof access and pitch','Steep, tiled, or two-storey means fall protection and setup time. Some roofs we work from inside instead.'],
  ['Chimney height','More rods, more passes, more time on the roof.'],
  ['How long since the last sweep','Ten years of buildup is a different job from one year.'],
  ['Wood or gas','Gas leaves moisture and acidic condensate rather than creosote — a different check, different work.'],
  ['Open firebox or an insert','An insert often has to be pulled out to reach the liner properly.'],
  ['Animals or nests','Removal takes time, and the flue usually wants a cap afterwards.'],
  ['What we find','A cracked crown or a damaged liner is quoted separately by a licensed contractor. It never gets bundled into the visit.']];
 return <section style={{background:'var(--surface-panel)',borderTop:'1px solid var(--border-hairline)',position:'relative'}}>
  {/* texture-charred-brick.png was never shipped — it 404s. Only limewash and
      soot-plaster exist. This panel is dark, so soot-plaster is the right one. */}
  <div className="fb-grain" style={{backgroundImage:'url(../../assets/textures/texture-soot-plaster.png)'}}></div>
  <div style={{...fbContainer,position:'relative',padding:'104px 24px',display:'flex',flexDirection:'column',gap:40}}>
   <Reveal><SectionHead eyebrow="Pricing" title="What changes the price, and why." lead="Every chimney is a different job. These are the things that move it — you hear the number before we start, not after."/></Reveal>
   <div className="g2" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'0 56px'}}>
    {rows.map(([t,b],i)=><Reveal key={t} delay={(i%2)*90} style={{display:'flex',flexDirection:'column',gap:8,padding:'22px 0',borderTop:'1px solid var(--border-hairline)'}}>
     <h3 style={{fontSize:19,margin:0}}>{t}</h3>
     <p style={{fontSize:15,color:'var(--text-secondary)',margin:0}}>{b}</p>
    </Reveal>)}
   </div>
   <Reveal><p style={{fontSize:17,color:'var(--limewash)',margin:0,maxWidth:640,borderLeft:'1px solid var(--brass)',paddingLeft:22}}>We confirm the price on site before any work starts. If it turns out to be more than a standard visit, you hear it while we are still standing there — never on the invoice.</p></Reveal>
  </div>
 </section>;
}
function ServiceArea(){
 return <section id="area" data-screen-label="Service area" style={{position:'relative',overflow:'hidden'}}>
  <Parallax fill src={IMG+'woodland-hills-rooftops-dusk.png'} alt="" strength={0.05}/>
  <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(23,19,16,.88) 0%,rgba(23,19,16,.55) 50%,rgba(23,19,16,.88) 100%)'}}></div>
  <div style={{...fbContainer,position:'relative',padding:'128px 24px',display:'flex',flexDirection:'column',gap:44}}>
   <Reveal><SectionHead eyebrow="Service area" title="Woodland Hills and the nine cities around it." lead="Close enough that we're never rushing to the next job."/></Reveal>
   <Reveal delay={90}>
    <div className="g2" style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:'14px 24px',maxWidth:980}}>
     {AREA.map(n=><span key={n} style={{fontFamily:'var(--font-display)',fontSize:20,color:'var(--limewash)',borderBottom:'1px solid var(--border-hairline)',paddingBottom:10}}>{n}</span>)}
    </div>
   </Reveal>
  </div>
 </section>;
}
function CalmSection({go}){
 return <section style={{background:'var(--bg-light) url(../../assets/textures/texture-limewash.png) center/cover',position:'relative'}}>
  <div className="g2" style={{...fbContainer,padding:'104px 24px',display:'grid',gridTemplateColumns:'1fr 440px',gap:64,alignItems:'center'}}>
   <Reveal dir="left" style={{display:'flex',flexDirection:'column',gap:22}}>
    <Eyebrow style={{color:'var(--oxblood)'}}>Why it matters</Eyebrow>
    <h2 style={{fontSize:'var(--text-display-lg)',color:'var(--text-on-light)',margin:0}}>A safe fireplace is a quiet one.</h2>
    <p style={{fontSize:17,color:'var(--text-on-light-muted)',maxWidth:480,margin:0}}>Most chimneys don't need much. The point of a visit is that you stop thinking about it the rest of the year.</p>
    <div style={{marginTop:6}}><Button onClick={()=>go('booking')}>Book a visit</Button></div>
   </Reveal>
   <Reveal dir="right"><Parallax src={IMG+'real-fireplace-clean.jpg'} alt="A fireplace left clean after a visit" ratio="4/3" style={{border:'none'}}/></Reveal>
  </div>
 </section>;
}
function Home({go}){
 return <main data-screen-label="Home"><Hero go={go}/><HowWeWork/><ServicesGrid go={go}/><BeforeAfter/><PriceFactors/><ServiceArea/><CalmSection go={go}/></main>;
}
Object.assign(window,{Home});