function AboutPage() {
  return <>
    <div className="page-header"><div className="container"><div className="breadcrumb"><a href="#/">Home</a> <span>/</span> <span>About</span></div><h1>A garage-specific reset service for Hamilton homeowners.</h1><p>{COMPANY.name} is positioned between generic junk removal and full garage renovation: practical sorting help, responsible routing, and a usable finish.</p></div></div>
    <section className="section"><div className="container"><div className="story-split"><figure className="story-image"><img src="/public/images/garage-reset-finished-zone.webp" alt="Tidy residential garage with labelled storage zones and clear floor space" loading="lazy" /><figcaption><span className="tag">SORT · CLEAR · SWEEP · RESET</span><span>Usable garage space</span></figcaption></figure><div className="story-text"><span className="eyebrow">Why this exists</span><h2>The hard part is not only hauling.</h2><p>Most people need help deciding what stays, what can be donated, what should be recycled, and what must be disposed of. That is why the service is built around a complete outcome instead of truck space alone.</p><p>{COMPANY.name} keeps the process practical: quote from photos, confirm scope before arrival, then complete the work carefully with a broom-clean finish and simple zones for what stays.</p><a className="btn btn-primary" href="#/quote">Request a Photo Quote <Icon.ArrowRight /></a></div></div></div></section>
    <section className="section alt"><div className="container"><SectionHeader eyebrow="Operating values" title="What the crew should be known for." /><div className="values-grid">{OPERATING_VALUES.map((v,i)=><div className="value-card" key={v.t}><span className="num">{String(i+1).padStart(2,'0')}</span><h4>{v.t}</h4><p>{v.d}</p></div>)}</div></div></section>
    <section className="section"><div className="container"><ServiceAreaMap /></div></section>
  </>;
}

function HowItWorksPage() {
  const [openIdx, setOpenIdx] = useState(0);
  return <>
    <div className="page-header"><div className="container"><div className="breadcrumb"><a href="#/">Home</a> <span>/</span> <span>How It Works</span></div><h1>From a cluttered garage to a space you can use.</h1><p>A structured visit that brings together sorting, removal, responsible routing, sweeping, and a simple reset.</p></div></div>
    <section className="section"><div className="container"><div className="timeline">{RESET_STEPS.map((s,i)=><div className="timeline-item" key={s.t}><div className="timeline-num">{String(i+1).padStart(2,'0')}</div><div className="timeline-card-body">{s.image && <figure className="process-image timeline-image"><img src={s.image.src} alt={s.image.alt} loading="lazy" decoding="async" /></figure>}<div className="timeline-copy"><h3>{s.t}</h3><p>{s.d}</p></div></div></div>)}</div></div></section>
    <RoutingBuckets />
    <section className="section alt"><div className="container"><SectionHeader eyebrow="FAQ" title="Common quote questions." /><div className="faq-list">{FAQS.map((f,i)=><div className={'faq-item' + (openIdx===i?' open':'')} key={f.q}><button className="faq-trigger" onClick={()=>setOpenIdx(openIdx===i?-1:i)}><span>{f.q}</span><span className="plus"></span></button><div className="faq-body"><p>{f.a}</p></div></div>)}</div></div></section>
  </>;
}

function ServiceDetail({ title, lead, points }) {
  return <><div className="page-header"><div className="container"><div className="breadcrumb"><a href="#/">Home</a> <span>/</span> <span>Services</span></div><h1>{title}</h1><p>{lead}</p></div></div><section className="section"><div className="container"><div className="values-grid">{points.map((p,i)=><div className="value-card" key={p}><span className="num">{String(i+1).padStart(2,'0')}</span><h4>{p}</h4><p>Included when it fits the confirmed scope and safety rules.</p></div>)}</div></div></section><RoutingBuckets /><section className="section"><div className="container"><CTAStrip title="Send photos for a scoped quote." sub="We will confirm what is realistic before scheduling the work." /></div></section></>;
}
function GarageResetServicePage(){return <ServiceDetail title="Garage Reset" lead="A complete space-reclaim service for homeowners who want the garage usable again." points={["Sorting assistance","Removal and routing","Broom-clean finish","Simple storage-zone reset"]}/>;}
function GarageCleanOutServicePage(){return <ServiceDetail title="Garage Clean-Out" lead="Larger removal projects for moves, estates, renovations, and turnovers." points={["Larger-volume removal","Extra labour planning","Donation/recycling coordination","Before-and-after photos"]}/>;}
function DonationRecyclingPage(){return <ServiceDetail title="Donation & Recycling" lead="Responsible separation for usable and recyclable items whenever practical." points={["Donation grouping","Metal and cardboard separation","Local routing notes","Simple job summary"]}/>;}
Object.assign(window, { AboutPage, HowItWorksPage, GarageResetServicePage, GarageCleanOutServicePage, DonationRecyclingPage });