function GenieWorkspace() {
  const frame = React.useRef(null);
  const [state, setState] = React.useState('loading');
  const [version, setVersion] = React.useState(0);
  React.useEffect(() => {
    const onMessage = event => {
      if (event.origin !== location.origin || event.source !== frame.current?.contentWindow) return;
      if (event.data?.type === 'genie-runtime-state') setState(event.data.state);
    };
    window.addEventListener('message', onMessage);
    return () => {
      window.removeEventListener('message', onMessage);
      // The iframe is removed on navigation; pagehide closes its voice session.
    };
  }, []);
  return (
    <main className="genie-workspace" aria-labelledby="genie-title">
      <section className="genie-studio" aria-label="Genie voice companion">
        <header className="genie-studio-bar" dir="ltr">
          <div className="genie-studio-name"><Icon name="spark" size={19} /><div><h1 id="genie-title">Genie</h1><p className="genie-subtitle">Voice companion</p></div></div>
          <span className={`genie-preview-label genie-badge-${state}`}><i />{state === 'ready' ? 'Ready' : state === 'error' ? 'Unavailable' : 'Preparing'}</span>
        </header>
        {state === 'loading' && <div className="genie-load-note" role="status">Preparing your companion…</div>}
        {state === 'error' && <div className="genie-load-note genie-load-error" role="alert">Genie could not load. <button onClick={() => { setState('loading'); setVersion(v => v + 1); }}>Try again</button></div>}
        <iframe key={version} ref={frame} className="genie-runtime-frame" src="/genie-runtime/index.html?v=wide-panel-1" title="Genie — voice conversation and expression controls" allow="microphone; autoplay" onError={() => setState('error')} />
      </section>

    </main>
  );
}