(function () {
  const COMPONENTS = {
    terminal: window.ConsoleTerminal,
    bento: window.ConsoleBento,
    editorial: window.ConsoleEditorial,
  };

  let root = null;
  let mounted = null;

  function App({ design }) {
    const Component = COMPONENTS[design] || COMPONENTS.terminal;
    return <Component />;
  }

  function render(design) {
    const el = document.getElementById("redesign-root");
    if (!el || !window.ReactDOM || !window.React) return;
    if (!root) root = ReactDOM.createRoot(el);
    mounted = design;
    root.render(<App design={design} />);
  }

  window.POVHKRedesign = {
    render,
    current: () => mounted,
    has: (design) => !!COMPONENTS[design],
  };
  window.dispatchEvent(new Event("povhk:redesign-ready"));
})();