// Single-page mount for dashboard.graphite-ai.net.
// Layout: Nav → SubnetEconomics (always visible) → sub-tabs → active view → Footer.

function App() {
  // Push a default accent + glass tint into the CSS vars the shared
  // styles.css expects. Matches the graphite accent.
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', '#7c7cff');
    root.style.setProperty('--accent-2', '#b1b1ff');
    root.style.setProperty('--accent-glow', 'rgba(124,124,255,0.35)');
    root.style.setProperty('--lg-tint', '0.06');
    root.style.setProperty('--lg-tint-low', '0.018');
  }, []);

  const [tab, setTab] = React.useState('metagraph');

  // Metagraph's signature still takes a `navigate` prop (passed through to
  // its footer in the upstream FKG copy); ours has the footer pulled out
  // and renders only the table, so navigate is unused — pass a no-op.
  const noop = () => {};

  return (
    <>
      <Nav />
      <SubnetEconomics />
      <section className="section" style={{paddingTop:0,paddingBottom:0,borderTop:0}}>
        <div className="container">
          <div className="dash-tabs" role="tablist" aria-label="Dashboard sections">
            <button
              role="tab"
              aria-selected={tab === 'metagraph'}
              className={'dash-tab' + (tab === 'metagraph' ? ' on' : '')}
              onClick={() => setTab('metagraph')}
            >Metagraph</button>
            <button
              role="tab"
              aria-selected={tab === 'coverage'}
              className={'dash-tab' + (tab === 'coverage' ? ' on' : '')}
              onClick={() => setTab('coverage')}
            >Sector Coverage</button>
          </div>
        </div>
      </section>
      {tab === 'metagraph' && <Metagraph navigate={noop} />}
      {tab === 'coverage' && <SectorHeatmap />}
      <Footer />
    </>
  );
}

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