const HubApp = () => (
  <>
    <TopRibbon current="hub" />
    <MagazineHero />
    <MagazineGrid />
    <HubCTA />
    <footer className="foot-meta">
      <a href="Homepage.html" className="brand" aria-label="Repetive"><img src="assets/logo.png" alt="Repetive" /></a>
      <div className="links">
        <a href="Homepage.html#missie">Missie</a>
        <a href="Homepage.html#aanpak">Aanpak</a>
        <a href="Cases hub.html">Cases</a>
        <a href="ROI Calculator.html">Wat het oplevert</a>
        <a href="Homepage.html#team">Over ons</a>
        <a href="Kennisbank.html">Kennisbank</a>
        <a href="Jobs.html">Vacatures</a>
        <a href="Trust Center.html">Trust Center</a>
        <a href="Homepage.html#contact">Contact</a>
      </div>
      <div>© 2026 Repetive · Tilburg</div>
    </footer>
  </>
);

// Edit mode wiring
window.addEventListener('message', (e) => {
  const msg = e.data;
  if (msg.type === '__activate_edit_mode') document.body.setAttribute('data-edit-mode', 'on');
  if (msg.type === '__deactivate_edit_mode') document.body.setAttribute('data-edit-mode', 'off');
});
window.parent.postMessage({ type: '__edit_mode_available' }, '*');

ReactDOM.createRoot(document.getElementById('root')).render(<HubApp />);