// ArchitectureDiagram.jsx — embed the standalone diagram 1:1 via iframe,
// auto-sized to its content height (no card frame, no shadow-DOM rewriting).
const ArchitectureDiagram = () => {
  const [height, setHeight] = React.useState(1000);

  React.useEffect(() => {
    const onMessage = (e) => {
      const data = e && e.data;
      if (data && data.type === 'skardi-arch-diagram-height' && typeof data.h === 'number') {
        setHeight(Math.max(400, Math.ceil(data.h)));
      }
    };
    window.addEventListener('message', onMessage);
    return () => window.removeEventListener('message', onMessage);
  }, []);

  return (
    <section style={{ position: 'relative', padding: '0 0 60px' }}>
      <iframe
        src="assets/architecture-diagram.html"
        title="Skardi agent data plane architecture"
        loading="lazy"
        scrolling="no"
        style={{
          display: 'block',
          width: '100%',
          height: height + 'px',
          border: 0,
          background: '#0a0d12',
        }}
      />
    </section>
  );
};

window.ArchitectureDiagram = ArchitectureDiagram;