// Bundled by scripts/e2e-background.mjs and mounted in real Chromium.
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Editor, Frame } from '@craftjs/core';
import { HeroSimple } from '../src/components/sections/HeroSimple';
import { BackgroundSection } from '../src/components/layout/BackgroundSection';
import { CTASection } from '../src/components/sections/CTASection';
import { CallToAction } from '../src/components/sections/CallToAction';
import { Container } from '../src/components/layout/Container';

const resolver = { HeroSimple, BackgroundSection, CTASection, CallToAction, Container };

(window as any).mountNode = (id: string, type: string, props: Record<string, unknown>) => {
  const data = JSON.stringify({
    ROOT: { type: { resolvedName: 'Container' }, isCanvas: true, props: {}, displayName: 'Container', custom: {}, hidden: false, nodes: ['n'], linkedNodes: {} },
    n: { type: { resolvedName: type }, isCanvas: false, props, displayName: type, custom: {}, parent: 'ROOT', hidden: false, nodes: [], linkedNodes: {} },
  });
  const el = document.createElement('div');
  el.id = id;
  document.body.appendChild(el);
  createRoot(el).render(
    <Editor resolver={resolver} enabled={false}><Frame data={data} /></Editor>,
  );
};