/* crabcc landing — call-graph block ("crabcc viz" live call-graph).
   Embeds the design-system brand-graph specimen (brand-graph.html) in an
   isolated iframe, scaled to fit its container while preserving the
   native 1280x560 scene. Exports to window. */
const { useRef: useRefG, useEffect: useEffectG } = React;

const BG_W = 1280, BG_H = 560;

function BrandGraph() {
  const frameRef = useRefG(null);
  const iframeRef = useRefG(null);

  useEffectG(() => {
    const frame = frameRef.current;
    const iframe = iframeRef.current;
    if (!frame || !iframe) return;
    const fit = () => {
      const s = frame.clientWidth / BG_W;
      iframe.style.transform = "scale(" + s + ")";
      frame.style.height = BG_H * s + "px";
    };
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(frame);
    return () => ro.disconnect();
  }, []);

  return (
    <div className="brandgraph" ref={frameRef}>
      <iframe
        ref={iframeRef}
        className="brandgraph__frame"
        src="brand-graph.html"
        title="crabcc live call-graph"
        scrolling="no"
        width={BG_W}
        height={BG_H}
      ></iframe>
    </div>
  );
}

/* Section wrapper — the "crabcc viz" live call-graph block */
function CallGraphSection() {
  const { Badge, LiveDot, Button } = window.CrabccDesignSystem_325a37;
  return (
    <section className="section graph-hero" id="graph">
      <div className="wrap">
        <div className="graph-hero__head reveal">
          <div className="graph-hero__copy">
            <span className="eyebrow">crabcc viz · localhost</span>
            <h2 className="section__title">Watch the call graph come alive</h2>
            <p className="section__sub">
              <code>crabcc serve</code> spins up a localhost dashboard — a live, spatial view of every
              symbol and the calls between them. Functions, syscalls and harness runs ride the edges in
              real time; verified paths glow, denied ones flag red. Built from the same SQLite store the
              CLI queries.
            </p>
          </div>
          <div className="graph-hero__meta">
            <LiveDot live={true} label="serve · :7878" />
            <div className="graph-hero__badges">
              <Badge tone="accent" dot>fn</Badge>
              <Badge tone="info" dot>syscall</Badge>
              <Badge tone="ok" dot>harness</Badge>
            </div>
            <Button as="a" href="#how" variant="secondary" size="sm">how indexing works →</Button>
          </div>
        </div>
        <div className="brandgraph-shell reveal">
          <BrandGraph />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BrandGraph, CallGraphSection });