// ============================================================
// WAT KOST HET? · main page assembly (editorial statement variant)
// Topribbon (shared) · Hero · ROI-calculator · Referentiekaarten · Contact · Footer
// ============================================================
function KostPage() {
  return (
    <React.Fragment>
      <HmTopribbon activeLabel="Wat kost het?" homePrefix="/" />
      <KostHeroStatement />
      <KostCalculator />
      <KostRefs lede="Dit is wat een agent bij echte klanten opleverde." />
      <HmContact
        eyebrow="Contact"
        title={<React.Fragment>Liever even <span className="grad">sparren?</span></React.Fragment>}
        subtitle="Bel of mail en we rekenen samen door wat een agent in jouw situatie kost én oplevert. Geen verkooppraatje." />
      <HmFooter />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<KostPage />);

// De pagina rendert client-side, dus een #hash in de URL (bv. #opbrengst vanuit
// de kennisbank) bestaat nog niet op het moment dat de browser zou scrollen.
// Poll kort tot de sectie er is en scroll er dan naartoe.
(function scrollToHash() {
  const id = (window.location.hash || '').slice(1);
  if (!id) return;
  let tries = 0;
  const tick = () => {
    const el = document.getElementById(id);
    if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
    else if (tries++ < 40) { setTimeout(tick, 100); }
  };
  setTimeout(tick, 120);
})();