// app.jsx — Root component, theme + tweaks wiring

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "heroCopy": "business"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useHashRoute();

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.dark ? 'dark' : 'light');
  }, [t.dark]);

  let page;
  if (route === 'services')      page = <ServicesPage />;
  else if (route === 'company')  page = <CompanyPage />;
  else if (route === 'contact')  page = <ContactPage />;
  else if (route === 'privacy')  page = <PrivacyPolicyPage />;
  else                           page = <Home heroKey={t.heroCopy} />;

  return (
    <React.Fragment>
      <Nav route={route === 'home' || !route ? 'home' : route} />
      {page}
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="表示モード" />
        <TweakRadio
          label="テーマ"
          value={t.dark ? 'dark' : 'light'}
          options={[
            { value: 'light', label: 'ライト' },
            { value: 'dark',  label: 'ダーク' }
          ]}
          onChange={(v) => setTweak('dark', v === 'dark')}
        />
        <TweakSection label="ヒーロー" />
        <TweakSelect
          label="キャッチコピー"
          value={t.heroCopy}
          options={[
            { value: 'business', label: 'ビジネスを前進させる…' },
            { value: 'growth',   label: '成果につながる…' },
            { value: 'craft',    label: '企業価値を高める…' }
          ]}
          onChange={(v) => setTweak('heroCopy', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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