// App shell — hash-based SPA: story (landing) vs product page.

const PRODUCT_HASHES = new Set(['#product', '#how', '#scan', '#attack-graph']);

function getView() {
  const h = window.location.hash;
  if (h === '#team') return 'team';
  if (h === '#poc') return 'poc';
  if (h.startsWith('#product') || PRODUCT_HASHES.has(h)) return 'product';
  return 'story';
}

function App() {
  const { React } = window;
  const { useState, useEffect } = React;

  const [view, setView] = useState(getView);

  // ── tweak state (persisted in file via __edit_mode_set_keys) ─────────────
  const DEFAULTS = /*EDITMODE-BEGIN*/{
    "typeSpeed": 260,
    "showGraph": true,
    "headingVariant": "sans-fraunces"
  }/*EDITMODE-END*/;

  const [tweaks, setTweaks] = useState(DEFAULTS);
  const [tweakMode, setTweakMode] = useState(false);

  useEffect(() => {
    const onHashChange = () => {
      const next = getView();
      setView(prev => {
        if (prev !== next && (next === 'product' || next === 'team' || next === 'poc')) window.scrollTo(0, 0);
        return next;
      });
    };
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setTweakMode(true);
      if (d.type === '__deactivate_edit_mode') setTweakMode(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  // apply headingVariant via data-attr
  useEffect(() => {
    document.documentElement.setAttribute('data-heading', tweaks.headingVariant);
  }, [tweaks.headingVariant]);

  if (view === 'story') return <window.StoryView />;
  if (view === 'team')  return <window.TeamView />;
  if (view === 'poc')   return <window.IntakeForm />;

  return (
    <React.Fragment>
      <window.LiveScanReplay tweaks={tweaks} />
      <window.PipelineAnatomy />
      <window.AttackGraphReveal />
      <window.ScanYourRepo />
      {tweakMode && (
        <div className="tweaks">
          <div className="tweaks-title">
            <span>Tweaks</span>
            <button onClick={() => setTweakMode(false)} aria-label="close">×</button>
          </div>
          <div className="tweaks-row">
            <label>type speed</label>
            <input type="range" min="80" max="600" step="20" value={tweaks.typeSpeed}
              onChange={e => update({ typeSpeed: +e.target.value })} />
          </div>
          <div className="tweaks-row">
            <label>heading style</label>
            <select value={tweaks.headingVariant}
              onChange={e => update({ headingVariant: e.target.value })}>
              <option value="sans-fraunces">fraunces (serif)</option>
              <option value="sans-tight">inter tight (sans)</option>
              <option value="sans-mono">jetbrains mono</option>
            </select>
          </div>
          <div className="tweaks-row" style={{opacity:0.7}}>
            <label>graph visible</label>
            <button onClick={() => update({ showGraph: !tweaks.showGraph })}>
              {tweaks.showGraph ? 'on' : 'off'}
            </button>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

window.App = App;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));