const DS = window.FirebrickDesignSystem_e0332b;
if(!DS){document.getElementById('root').innerHTML='<p style="padding:48px;font-family:sans-serif;color:#F1E9D8">Component bundle not compiled yet — reload this page once.</p>';throw new Error('_ds_bundle.js missing');}
const { Button, Icon, IconButton, Divider, Badge, Card } = DS;
const fbContainer={maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--container-pad)'};
const IMG='../../assets/imagery/';
const REDUCED=()=>window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const SERVICES=[
 {id:'sweep',eyebrow:'Chimney sweeping',title:'Swept, not upsold',time:'About 45 minutes',mins:45,img:IMG+'real-sweep.jpg',
  short:'Drop cloths down, HEPA vacuum on, soot out. Nothing sold that the flue does not need.',
  body:'Drop cloths go down before anything else. A HEPA vacuum runs the whole visit, so the soot stays in the flue and out of your living room.',
  covers:['Full sweep of the flue and smoke chamber','Firebox and damper cleaned','Everything hauled out, nothing left behind'],
  isnt:'Not a repair visit. If we find something, we photograph it and explain — we do not fix things you have not agreed to.'},
 {id:'l1',eyebrow:'Level 1 inspection',title:'A careful look at everything we can reach',time:'About 45 minutes',mins:45,img:IMG+'real-inspection.jpg',
  short:'Every accessible part of the chimney, inside and out, with straight answers at the end.',
  body:'A visual check of every accessible part of the chimney, inside and out, with straight answers at the end.',
  covers:['Firebox, damper, and accessible flue','Crown, cap, and exterior masonry','A plain-language summary of what we found'],
  isnt:'Not a repair quote. If something needs work, we photograph it and explain it — the quote comes from a licensed contractor.'},
 {id:'cap',eyebrow:'Animal & nest removal',title:'Getting the wildlife out',time:'About 45 minutes',mins:45,img:IMG+'real-cap.jpg',
  short:'Birds, raccoons and squirrels out, the flue cleared, and a straight answer on how they got in.',
  body:'Nests and debris come out, the flue is cleared and checked, and you get photographs of what was in there.',
  covers:['Nests and debris removed','Flue cleared and checked afterwards','Photographs of what we found'],
  isnt:'Not an installation visit. If the flue needs a cap so it does not happen again, we tell you and the quote comes from a licensed contractor.'}];
const AREA=['Woodland Hills','Canoga Park','Tarzana','Encino','Calabasas','West Hills','Winnetka','Chatsworth','Reseda','Sherman Oaks'];
/* ⚠ SCOPE IS A LEGAL BOUNDARY HERE, NOT A MARKETING CHOICE. READ BEFORE ADDING ANYTHING.

   Two rules this list obeys:

   1. ROM DOES CHIMNEYS ONLY. He confirmed it directly on 19 Aug. Wood stoves, pellet
      stoves, gas fireplaces, inserts, fire pits and restaurant flues were all advertised
      here and none of them are things he does. Every one was a lead that arrives, gets
      turned away, and costs an ad click and a first impression.

   2. NOTHING THAT NEEDS A CONTRACTOR'S LICENCE. Firebrick has no CSLB licence, and in
      California advertising work that requires one is an offence in itself - separate
      from doing it. Removed for that reason: damper repair, chase cover replacement,
      chimney cap installation, spark arrestor fitting, smoke guard/draft correction.
      Cleaning and inspecting need no licence; installing and repairing do.

   Cap installation is the tempting one - it is the natural follow-on to animal removal
   and it is real revenue. It is left out deliberately until the CSLB answers whether it
   needs a licence. Ask them before putting it back; do not reason it out from the $500
   minor-work exemption, which covers the DOING and not the ADVERTISING. */
const CATALOG=[
 {group:'Sweeping & cleaning',items:[
  ['Chimney sweeping','The full flue, smoke chamber, firebox and damper, with a HEPA vacuum running the whole visit.'],
  ['Creosote removal','Hard and glazed Stage 3 deposits treated and removed rather than brushed over.'],
  ['Smoke chamber cleaning','The shelf and chamber above the damper, where buildup hides and fires start.'],
  ['Firebox & damper cleaning','The parts you see and touch, cleaned as part of every sweep.']]},
 {group:'Inspections',items:[
  ['Level 1 inspection','A visual check of every accessible part of the chimney, inside and out.'],
  ['Inspection for a home sale','A documented, photographed inspection turned around on escrow timelines.'],
  ['Annual safety inspection','Once a year for a regularly used fireplace — the visit that keeps the rest quiet.'],
  ['Documented inspection report','Photographs and plain-language findings, written up for you or your insurer.']]},
 {group:'Blockages & wildlife',items:[
  ['Animal & nest removal','Birds, raccoons and squirrels removed, and the flue cleared afterwards.'],
  ['Debris & blockage clearing','Leaves, masonry rubble and anything else stopping the flue from drawing.'],
  ['Blocked flue diagnosis','Photographs and a plain explanation of what is in there and why it matters.']]}];
function Eyebrow({children,style}){return <span className="fb-eyebrow" style={style}>{children}</span>;}
function Wordmark({onClick,dark}){
 return <span className="brand-lockup" onClick={onClick} style={{cursor:onClick?'pointer':'default',display:'inline-flex',alignItems:'center',gap:12}}>
  <img className="brand-crest" src="../../assets/firebrick-crest.png" alt=""/>
  <span style={{display:'inline-flex',flexDirection:'column',gap:2}}>
   <span className="brand-word" style={{fontFamily:'var(--font-display)',fontWeight:500,lineHeight:1,color:dark?'var(--soot-black)':'var(--limewash)'}}>Firebrick</span>
   <span className="brand-sub" style={{fontWeight:600,letterSpacing:'.14em',textTransform:'uppercase',color:dark?'var(--text-on-light-muted)':'var(--text-muted)'}}>Chimney &amp; Fireplace</span>
  </span>
 </span>;
}
function NavLink({active,onClick,children}){
 const [h,setH]=React.useState(false);
 return <span onClick={onClick} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
  style={{fontSize:12,fontWeight:600,letterSpacing:'var(--tracking-caps)',textTransform:'uppercase',cursor:'pointer',color:active?'var(--brass)':h?'var(--brass-bright)':'var(--limewash)',transition:'color 150ms var(--ease-calm)',borderBottom:active?'1px solid var(--brass)':'1px solid transparent',padding:'12px 0 10px'}}>{children}</span>;
}
function SiteNav({page,go}){
 const [sc,setSc]=React.useState(false);const [open,setOpen]=React.useState(false);
 const [show,setShow]=React.useState(page!=='home');
 React.useEffect(()=>{const on=()=>{setSc(window.scrollY>40);
  const film=document.getElementById('film-scroll');
  const th=(page==='home'&&film&&film.offsetHeight)?film.offsetHeight+window.innerHeight*0.7:0;
  setShow(window.scrollY>=th)};
  on();window.addEventListener('scroll',on,{passive:true});return()=>window.removeEventListener('scroll',on)},[page]);
 const nav=(p,d)=>{setOpen(false);go(p,d)};
 return <header style={{position:'sticky',top:0,zIndex:40,background:'rgba(23,19,16,.72)',backdropFilter:'blur(12px)',WebkitBackdropFilter:'blur(12px)',borderBottom:'1px solid '+(sc&&show?'var(--border-hairline)':'transparent'),transform:show?'none':'translateY(-110%)',transition:'border-color .3s var(--ease-calm), transform .45s var(--ease-calm)'}}>
  <div style={{display:'grid',gridTemplateColumns:'1fr auto 1fr',alignItems:'center',padding:(sc?'10px':'18px')+' 40px',transition:'padding .3s var(--ease-calm)'}}>
   <Wordmark onClick={()=>nav('home')}/>
   <nav className="nav-desktop" style={{display:'flex',gap:36,justifySelf:'center'}} aria-label="Primary">
    <NavLink active={page==='home'} onClick={()=>nav('home')}>Home</NavLink>
    <NavLink active={page==='services'} onClick={()=>nav('services')}>Services</NavLink>
    <NavLink onClick={()=>nav('home','area')}>Service area</NavLink>
   </nav>
   <div style={{justifySelf:'end',display:'flex',alignItems:'center',gap:18}}>
    <Button size="sm" onClick={()=>nav('booking')}>Book a visit</Button>
    <button className="nav-mobile-btn" aria-label={open?'Close menu':'Open menu'} aria-expanded={open} onClick={()=>setOpen(!open)}>
     <span style={{display:'flex',flexDirection:'column',gap:4}}><span style={{width:16,height:1,background:'currentColor'}}></span><span style={{width:16,height:1,background:'currentColor'}}></span></span>
    </button>
   </div>
  </div>
  {open&&<nav className="nav-mobile-panel" aria-label="Menu" style={{flexDirection:'column',gap:4,padding:'8px 40px 20px',borderTop:'1px solid var(--border-hairline)'}}>
   <NavLink active={page==='home'} onClick={()=>nav('home')}>Home</NavLink>
   <NavLink active={page==='services'} onClick={()=>nav('services')}>Services</NavLink>
   <NavLink onClick={()=>nav('home','area')}>Service area</NavLink>
   <NavLink onClick={()=>nav('booking')}>Book a visit</NavLink>
  </nav>}
 </header>;
}
function Reveal({as,dir,delay,className,children,style,...rest}){
 const ref=React.useRef(null);
 React.useEffect(()=>{const el=ref.current;if(!el)return;
  if(!('IntersectionObserver' in window)){el.classList.add('in');return}
  const io=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){el.classList.add('in');io.disconnect()}})},{threshold:.12,rootMargin:'0px 0px -40px 0px'});
  io.observe(el);return()=>io.disconnect()},[]);
 const Tag=as||'div';
 return <Tag ref={ref} className={'rv '+(dir==='left'?'rv-left ':dir==='right'?'rv-right ':'')+(className||'')} style={{transitionDelay:delay?delay+'ms':undefined,...style}} {...rest}>{children}</Tag>;
}
function RuleIn({style}){
 const ref=React.useRef(null);
 React.useEffect(()=>{const el=ref.current;if(!el)return;
  if(!('IntersectionObserver' in window)){el.classList.add('in');return}
  const io=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){el.classList.add('in');io.disconnect()}})},{threshold:.5});
  io.observe(el);return()=>io.disconnect()},[]);
 return <hr ref={ref} className="fb-hairline rule-in" style={style}/>;
}
function CountUp({to,duration}){
 const ref=React.useRef(null);const [v,setV]=React.useState(0);const done=React.useRef(false);
 React.useEffect(()=>{const el=ref.current;if(!el)return;
  const run=()=>{if(done.current)return;done.current=true;
   if(REDUCED()){setV(to);return}
   const dur=duration||800;const t0=performance.now();
   const step=t=>{const k=Math.min(1,(t-t0)/dur);setV(Math.round(to*(1-Math.pow(1-k,3))));if(k<1)requestAnimationFrame(step)};
   requestAnimationFrame(step)};
  if(!('IntersectionObserver' in window)){run();return}
  const io=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){run();io.disconnect()}})},{threshold:.4});
  io.observe(el);const fs=setTimeout(run,2500);return()=>{io.disconnect();clearTimeout(fs)}},[to]);
 return <span ref={ref}>{v}</span>;
}
function Parallax({src,alt,ratio,strength,fill,style,imgStyle}){
 const ref=React.useRef(null);
 React.useEffect(()=>{const el=ref.current;if(!el||REDUCED())return;
  const img=el.querySelector('img');let raf=0;const k=strength||0.06;
  const on=()=>{cancelAnimationFrame(raf);raf=requestAnimationFrame(()=>{const r=el.getBoundingClientRect();const c=r.top+r.height/2-window.innerHeight/2;img.style.transform='translate3d(0,'+(-c*k).toFixed(1)+'px,0) scale(1.12)'})};
  on();window.addEventListener('scroll',on,{passive:true});window.addEventListener('resize',on);
  return()=>{window.removeEventListener('scroll',on);window.removeEventListener('resize',on);cancelAnimationFrame(raf)}},[]);
 const base=fill?{position:'absolute',inset:0}:{aspectRatio:ratio||'16/10',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius)'};
 return <div ref={ref} style={{overflow:'hidden',...base,...style}}>
  <img src={src} alt={alt||''} style={{width:'100%',height:'100%',objectFit:'cover',display:'block',transform:'scale(1.12)',...imgStyle}}/>
 </div>;
}
function CompareSlider({before,after,ratio}){
 const ref=React.useRef(null);const [x,setX]=React.useState(50);const drag=React.useRef(false);
 const move=cx=>{const r=ref.current.getBoundingClientRect();setX(Math.max(4,Math.min(96,(cx-r.left)/r.width*100)))};
 return <div ref={ref} role="slider" aria-label="Drag to compare the flue before and after sweeping" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(x)} tabIndex={0}
   onKeyDown={e=>{if(e.key==='ArrowLeft')setX(v=>Math.max(4,v-4));if(e.key==='ArrowRight')setX(v=>Math.min(96,v+4))}}
   onPointerDown={e=>{drag.current=true;e.currentTarget.setPointerCapture(e.pointerId);move(e.clientX)}}
   onPointerMove={e=>{if(drag.current)move(e.clientX)}}
   onPointerUp={()=>{drag.current=false}}
   style={{position:'relative',aspectRatio:ratio||'4/3',overflow:'hidden',borderRadius:'var(--radius)',border:'1px solid var(--border-hairline)',cursor:'ew-resize',touchAction:'none',userSelect:'none',outline:'none'}}>
  <img src={before} alt="Flue before sweeping" draggable={false} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
  <div style={{position:'absolute',inset:0,clipPath:'inset(0 0 0 '+x+'%)'}}>
   <img src={after} alt="Flue after sweeping" draggable={false} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
  </div>
  <span className="fb-eyebrow" style={{position:'absolute',left:14,bottom:12,fontSize:10,color:'rgba(241,233,216,.85)'}}>Before</span>
  <span className="fb-eyebrow" style={{position:'absolute',right:14,bottom:12,fontSize:10,color:'var(--brass)'}}>After</span>
  <div aria-hidden="true" style={{position:'absolute',top:0,bottom:0,left:x+'%',width:1,background:'var(--brass)'}}>
   <span style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',width:44,height:44,display:'flex',alignItems:'center',justifyContent:'center',gap:6,background:'rgba(23,19,16,.85)',border:'1px solid var(--brass)',borderRadius:'var(--radius)'}}>
    <span style={{width:6,height:6,borderLeft:'1.5px solid var(--brass)',borderBottom:'1.5px solid var(--brass)',transform:'rotate(45deg)'}}></span>
    <span style={{width:6,height:6,borderRight:'1.5px solid var(--brass)',borderTop:'1.5px solid var(--brass)',transform:'rotate(-135deg) rotate(180deg)'}}></span>
   </span>
  </div>
 </div>;
}
function SectionHead({eyebrow,title,lead,onLight,h1}){
 const H=h1?'h1':'h2';
 return <div style={{display:'flex',flexDirection:'column',gap:14,maxWidth:640}}>
  <Eyebrow style={onLight?{color:'var(--oxblood)'}:null}>{eyebrow}</Eyebrow>
  <H style={{fontSize:'var(--text-display-lg)',margin:0,fontFamily:'var(--font-display)',fontWeight:500,lineHeight:'var(--leading-heading)',letterSpacing:'var(--tracking-display)',color:onLight?'var(--text-on-light)':'var(--limewash)'}}>{title}</H>
  {lead&&<p style={{fontSize:17,color:onLight?'var(--text-on-light-muted)':'var(--text-secondary)',margin:0}}>{lead}</p>}
 </div>;
}
function SiteFooter({go}){
 return <footer style={{borderTop:'1px solid var(--border-hairline)',padding:'56px 0 40px',background:'var(--soot-black)'}}>
  <div className="g4" style={{...fbContainer,display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr 1fr',gap:48}}>
   <div style={{display:'flex',flexDirection:'column',gap:16,maxWidth:320}}>
    <Wordmark/>
    <p style={{fontSize:14,color:'var(--text-muted)',margin:0}}>Chimney sweeping, inspection, and fireplace care for the west San Fernando Valley. Pricing is confirmed with you before any work begins.</p>
   </div>
   <div style={{display:'flex',flexDirection:'column',gap:10}}>
    <Eyebrow style={{color:'var(--text-muted)'}}>Services</Eyebrow>
    {SERVICES.map(s=><span key={s.id} onClick={()=>go('services',s.id)} style={{fontSize:14,color:'var(--text-secondary)',cursor:'pointer'}}>{s.eyebrow}</span>)}
   </div>
   <div style={{display:'flex',flexDirection:'column',gap:10}}>
    <Eyebrow style={{color:'var(--text-muted)'}}>Service area</Eyebrow>
    <p style={{fontSize:14,color:'var(--text-secondary)',lineHeight:1.9,margin:0}}>{AREA.join(' · ')}</p>
   </div>
   <div style={{display:'flex',flexDirection:'column',gap:10}}>
    <Eyebrow style={{color:'var(--text-muted)'}}>Reach us</Eyebrow>
    {/* A real address people can write to. Until the Twilio number exists this is the
        ONLY way to reach the business that is not a form, and a trade site with no
        contact route reads as unfinished — to customers and to anyone verifying that
        the business is real. No phone number here on purpose: publishing one and
        swapping it later pushes the Google listing back into re-verification. */}
    <a href="mailto:info@firebrickchimney.com"
       style={{fontSize:14,color:'var(--text-secondary)',textDecoration:'none',borderBottom:'1px solid var(--border-hairline)',paddingBottom:2,width:'fit-content'}}>
     info@firebrickchimney.com</a>
    <span style={{fontSize:14,color:'var(--text-secondary)'}}>firebrickchimney.com</span>
    <span style={{fontSize:14,color:'var(--text-muted)'}}>Book online — we call you back to confirm</span>
   </div>
  </div>
  <div style={{...fbContainer,marginTop:40}}>
   <Divider/>
   {/* ⚠ THIS LINE IS A LIABILITY STATEMENT, NOT A CREDIT. READ BEFORE EDITING.

       It used to read "Owned and run by Rom Babajani and Meir Yurevich" — added 17 Aug so
       Twilio's fraud review had a public, checkable link between a person and the business.
       That was the right call for THAT problem and the wrong one for this business.

       Firebrick is Rom's contracting business; Bardelas supplies the marketing and booking
       systems. Liability follows whoever holds themselves out as providing the service, so a
       public sentence naming Meir as a co-owner of a chimney CONTRACTING business put him on
       the hook for work done on roofs by someone else — while he is uninsured and the trade
       is unlicensed. Naming the contractor, and crediting the vendor separately, is what makes
       "I only build the systems" true rather than merely claimed. */}
   <p style={{fontSize:12,color:'var(--text-muted)',paddingTop:16,margin:0}}>© 2026 Firebrick Chimney &amp; Fireplace. Woodland Hills and the west San Fernando Valley.</p>
   <p style={{fontSize:12,color:'var(--text-muted)',paddingTop:6,margin:0}}>Firebrick Chimney &amp; Fireplace is owned and operated by Rom Babajani.</p>
   <p style={{fontSize:12,color:'var(--text-muted)',paddingTop:4,margin:0}}>Website and booking systems by Bardelas.</p>
  </div>
 </footer>;
}
Object.assign(window,{fbContainer,IMG,SERVICES,AREA,CATALOG,REDUCED,Eyebrow,Wordmark,SiteNav,SiteFooter,SectionHead,Reveal,RuleIn,CountUp,Parallax,CompareSlider});