// App — the single cinematic canvas

const DETAIL_CONTENT = {
  case: {
    kicker: 'CASE · MBO-2026-Q1',
    title: 'MedBayOS Mission Control',
    body: (<>A fictional HealthTech SaaS portfolio: <em>revenue risk, customer health, support strain, anomaly narratives,</em> and automated daily briefings — fused into a single decision-ready surface. 100% synthetic data; structure and metric discipline are the signal.</>),
    footL: 'SCOPE · 14 DASHBOARDS',
    footR: 'SHIPPED · 2026',
  },
  dash: {
    kicker: 'LIVE · EXECUTIVE',
    title: 'Executive Dashboard',
    body: (<>ARR, NRR, logo churn, pipeline coverage, account health. One KPI mart, four views, <em>one truth</em>. Every tile pairs a number with the plain-English meaning behind it.</>),
    footL: 'MARTS · 9',
    footR: 'LAT · 18ms',
  },
  briefing: {
    kicker: 'AUTO · 06:00 UTC',
    title: 'Today\u2019s Briefing',
    body: (<>Pipeline coverage <em>recovered</em> to 412% after the January anomaly. Two remote-clinic accounts show usage softness overlapping with support strain — the classic early-churn pattern. Read time: 48 seconds.</>),
    footL: '3 SIGNALS',
    footR: '1 RECOMMENDATION',
  },
};

const DetailPanel = () => {
  const [which, setWhich] = useState(null);
  useEffect(() => {
    const h = (e) => setWhich(e.detail);
    window.addEventListener('signal:detail', h);
    return () => window.removeEventListener('signal:detail', h);
  }, []);
  if (!which || !DETAIL_CONTENT[which]) return null;
  const d = DETAIL_CONTENT[which];
  return (
    <div className="detail">
      <div className="dh">
        <span>{d.kicker}</span>
        <span className="close" onClick={() => setWhich(null)}>CLOSE ✕</span>
      </div>
      <div className="title">{d.title}</div>
      <div className="body">{d.body}</div>
      <div className="footer-row">
        <span>{d.footL}</span>
        <span>{d.footR}</span>
      </div>
    </div>
  );
};

const App = () => {
  const [paletteOpen, setPaletteOpen] = useState(false);
  const t = useTweaks();

  // Global keyboard — ⌘K / ctrl-K or any alpha key opens palette
  useEffect(() => {
    const onKey = (e) => {
      const isMac = /Mac/.test(navigator.platform);
      const mod = isMac ? e.metaKey : e.ctrlKey;
      if (mod && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setPaletteOpen((o) => !o);
        return;
      }
      if (e.key === '/' && !paletteOpen && document.activeElement?.tagName !== 'INPUT') {
        e.preventDefault();
        setPaletteOpen(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [paletteOpen]);

  return (
    <div className="stage">
      <Field />
      <Streams />
      <Globe />
      <Numeral />
      <Constellation />
      <HUD />
      <DetailPanel />

      {(t.showHints !== false) && (
        <button className="palette-trigger" data-interactive onClick={() => setPaletteOpen(true)}>
          <span className="glow" />
          <span>QUERY SIGNAL</span>
          <kbd>⌘</kbd><kbd>K</kbd>
        </button>
      )}

      <Palette open={paletteOpen} setOpen={setPaletteOpen} />
      <Tweaks />
    </div>
  );
};

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