// Mount roots + hero variant swapping
(function() {
  const heroMount = document.getElementById('chatHero');
  const demoMount = document.getElementById('liveDemo');
  const propCard = document.getElementById('propCard');

  // Mount hero chat into the prop-card
  let heroRoot = ReactDOM.createRoot(heroMount);
  let propCardVisible = true;

  const renderHero = (variant) => {
    if (variant === 'search') {
      // Replace the entire prop-card with HeroSearch
      if (propCardVisible) {
        const parent = propCard.parentElement;
        parent.removeChild(propCard);
        const container = document.createElement('div');
        container.id = 'heroSearchMount';
        parent.appendChild(container);
        const root = ReactDOM.createRoot(container);
        root.render(<HeroSearch />);
        propCardVisible = false;
      }
    } else {
      if (!propCardVisible) {
        const mount = document.getElementById('heroSearchMount');
        if (mount) {
          mount.parentElement.replaceChild(propCard, mount);
          propCardVisible = true;
          // re-render hero chat into restored prop-card
          const newHeroMount = document.getElementById('chatHero');
          heroRoot = ReactDOM.createRoot(newHeroMount);
          heroRoot.render(<HeroChat />);
        }
      }
    }
  };

  // Initial render
  heroRoot.render(<HeroChat />);

  const demoRoot = ReactDOM.createRoot(demoMount);
  demoRoot.render(<LiveDemo />);

  // React to hero variant changes
  window.addEventListener('tweaks:change', (e) => {
    renderHero(e.detail.heroVariant);
  });

  // Apply initial variant if not default
  if (window.document.body.dataset.heroVariant) {
    renderHero(window.document.body.dataset.heroVariant);
  }
})();