// landing-vizzes.jsx — mount real app components into landing-page slots

const { createRoot } = ReactDOM;

function MiniWatch({ children }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <WatchFrame width={170} height={210}>{children}</WatchFrame>
    </div>
  );
}

// Scaled iPhone — fits a column without dominating it.
// Wrapper holds the rendered (scaled) size so layout flows correctly.
function ScaledPhone({ scale = 0.78, dark = false, children }) {
  const W = 390, H = 844;
  return (
    <div style={{ width: W * scale, height: H * scale, position: 'relative' }}>
      <div style={{ position: 'absolute', top: 0, left: 0,
        transformOrigin: '0 0', transform: `scale(${scale})` }}>
        <IOSDevice width={W} height={H} dark={dark}>{children}</IOSDevice>
      </div>
    </div>
  );
}

const slots = [
  // How-it-works step cards (watches)
  { id: 'step-viz-1', el: <MiniWatch><WatchMirror zone="green"/></MiniWatch> },
  { id: 'step-viz-2', el: <MiniWatch><WatchMirror zone="yellow" data/></MiniWatch> },
  { id: 'step-viz-3', el: <MiniWatch><WatchRecovery/></MiniWatch> },

  // Zones section — what each side actually sees
  { id: 'zone-device-1', el: <ScaledPhone><ParentTodayScreen/></ScaledPhone> },
  { id: 'zone-device-2', el: <ScaledPhone><ParentYellowC/></ScaledPhone> },
  { id: 'zone-device-3', el: <ScaledPhone><ChildSky zone="red"/></ScaledPhone> },
];

slots.forEach(({ id, el }) => {
  const node = document.getElementById(id);
  if (node) createRoot(node).render(el);
});