/* ───────────────────────────────────────────────────────────────────────────
   App shell — nav rail, persona switch, routing, Tweaks (density)
   ─────────────────────────────────────────────────────────────────────────── */

const SURFACES = {
  conversation: window.ConversationSurface,
  engine:       window.EngineSurface,
  story:        window.StorySurface,
  plan:         window.PlanSurface,
  editorial:    window.EditorialSurface,
  care:         window.CompanionSurface,
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "standard"
}/*EDITMODE-END*/;

function lsGet(k, d) { try { return localStorage.getItem(k) || d; } catch (e) { return d; } }
function lsSet(k, v) { try { localStorage.setItem(k, v); } catch (e) {} }

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [stage, setStage] = React.useState(() => lsGet('c360.stage', 'conversation'));
  const [pid, setPid] = React.useState(() => lsGet('c360.persona', 'jordan'));
  const persona = window.PERSONAS[pid] || window.PERSONAS.jordan;
  const Surface = SURFACES[stage] || window.ConversationSurface;
  const mainRef = React.useRef(null);

  const go = React.useCallback((s) => { setStage(s); lsSet('c360.stage', s); }, []);
  React.useEffect(() => { lsSet('c360.persona', pid); }, [pid]);
  React.useEffect(() => { if (mainRef.current) mainRef.current.scrollTop = 0; }, [stage]);

  return (
    <div className="app" data-density={t.density}>
      <header className="topbar">
        <div className="brand">
          <span className="brand-mark" aria-hidden="true"><i /></span>
          <span className="brand-name">Clarity<span className="brand-360">360</span></span>
          <span className="brand-tag">product prototype · Phase 0</span>
        </div>

        <div className="persona-switch">
          <span className="ps-label">Worked example</span>
          {Object.values(window.PERSONAS).map((p) => (
            <button key={p.id} className={'ps-btn' + (pid === p.id ? ' on' : '')} onClick={() => setPid(p.id)}>
              <span className="ps-name">{p.name}</span>
              <span className="ps-handle">{p.handle}</span>
            </button>
          ))}
        </div>
      </header>

      <div className="frame">
        <nav className="rail">
          <div className="rail-group">
            <div className="rail-group-label">The walkthrough · 6 steps</div>
            {window.FLOW.map((it, i) => (
              <button key={it.key} className={'rail-item' + (stage === it.key ? ' on' : '')} onClick={() => go(it.key)}>
                <span className="ri-bar" />
                <span className="ri-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="ri-text"><span className="ri-label">{it.label}</span><span className="ri-sub">{it.audience}</span></span>
              </button>
            ))}
          </div>

          <div className="rail-foot">
            <a className="rail-pitch" href="index.html">← BFD concept &amp; pitch</a>
          </div>
        </nav>

        <main className="main" ref={mainRef}>
          <Surface persona={persona} go={go} />
        </main>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density} options={['compact', 'standard']} onChange={(v) => setTweak('density', v)} />
      </TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);