function HomePage() {
  const [servicePackage, setServicePackage] = useState("standard-reset");
  const selected = packageById(servicePackage);
  return <>
    <section className="hero"><div className="container hero-inner"><div>
      <span className="eyebrow">Hamilton garage clean-outs · Photo-based quotes</span>
      <h1>Reclaim your garage.</h1>
      <p className="hero-sub">We do more than remove junk. We sort, haul, donate, recycle, sweep, and lightly organize your garage so you can actually use it again.</p>
      <div className="button-row"><a className="btn btn-primary btn-lg" href="#/quote">Request a Photo Quote <Icon.ArrowRight /></a><a className="btn btn-secondary btn-lg" href="#/packages">See packages & pricing</a></div>
      <div className="hero-meta"><div><span className="dot"/> Hamilton garage help</div><div><span className="dot"/> Donation and recycling built in</div><div><span className="dot"/> No payment on site</div></div>
    </div><div className="hero-side"><HeroShowcase selectedPackage={selected} servicePackage={servicePackage} onPackageChange={setServicePackage} /></div></div></section>
    <ComparisonBlock />
    <section className="section"><div className="container"><SectionHeader eyebrow="Packages" title="Three simple starting points." copy="Each package is a quote range, not a final invoice. Photos help prevent surprises." /><div className="package-grid">{SERVICE_PACKAGES.map(pkg => <PackageCard key={pkg.id} pkg={pkg} />)}</div></div></section>
    <section className="section alt"><div className="container"><SectionHeader eyebrow="Who it helps" title="Built for the jobs people keep delaying." /><div className="values-grid">{CUSTOMER_SEGMENTS.map((seg, i) => <div className="value-card" key={seg.title}><span className="num">{String(i + 1).padStart(2, '0')}</span><h4>{seg.title}</h4><p>{seg.copy}</p></div>)}</div></div></section>
    <section className="section"><div className="container"><SectionHeader eyebrow="How it works" title="Photo-first, start to finish." copy="A structured visit that brings together sorting, removal, responsible routing, sweeping, and a simple reset." /><div className="steps-row">{RESET_STEPS.map((s,i)=><div className="step-card" key={s.t}>{s.image && <figure className="process-image"><img src={s.image.src} alt={s.image.alt} loading="lazy" decoding="async" /></figure>}<div className="step-num">{String(i+1).padStart(2,'0')}</div><h3>{s.t}</h3><p>{s.d}</p></div>)}</div></div></section>
    <RoutingBuckets />
    <section className="section"><div className="container"><CTAStrip title="Ready to reclaim the garage?" sub="Send photos and a few details. We will review the scope before confirming any price." /></div></section>
  </>;
}
Object.assign(window, { HomePage });