// ============================================================================
// main.jsx — app shell, routing, tweaks
// ============================================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scoresLook": "grid",
  "liveAccent": "#e8332a",
  "pillarLayout": "staggered"
}/*EDITMODE-END*/;

const SITE_LAUNCHED = false;
const PRIVATE_PREVIEW = ['/home', '/home/'].includes(window.location.pathname)
  || new URLSearchParams(window.location.search).get('preview') === 'home';

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('home');

  const go = (p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.liveAccent);
  }, [t.liveAccent]);
  React.useEffect(() => {
    document.documentElement.dataset.pillars = t.pillarLayout;
  }, [t.pillarLayout]);

  const render = () => {
    switch (page) {
      case 'about': return <AboutPage />;
      case 'schedule': return <SchedulePage />;
      case 'committee': return <CommitteePage />;
      case 'scores': return <ScoresPage look={t.scoresLook} />;
      case 'contact': return <ContactPage />;
      default: return <HomePage />;
    }
  };

  if (!SITE_LAUNCHED && !PRIVATE_PREVIEW) return <ComingSoonPage />;

  return (
    <React.Fragment>
      <Nav page={page} go={go} />
      <div className="view" key={page}>{render()}</div>
      <Footer go={go} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Live Scores" />
        <TweakRadio
          label="Layout"
          value={t.scoresLook}
          options={['grid', 'list', 'featured']}
          onChange={(v) => setTweak('scoresLook', v)}
        />
        <TweakColor
          label="Live accent"
          value={t.liveAccent}
          options={['#e8332a', '#d61f8f', '#1b46d6', '#16a34a']}
          onChange={(v) => setTweak('liveAccent', v)}
        />
        <TweakSection label="About" />
        <TweakRadio
          label="Pillars"
          value={t.pillarLayout}
          options={['staggered', 'aligned']}
          onChange={(v) => setTweak('pillarLayout', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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