// moja_run run — main composition

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryPink": "#c89a86",
  "background": "#f7f1e8",
  "showFloatCTA": true,
  "heroLayout": "split",
  "headingFont": "Noto Sans JP"
}/*EDITMODE-END*/;

const App = () => {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply tweaks as CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty('--pink-400', tw.primaryPink);
    document.documentElement.style.setProperty('--cream', tw.background);
    document.body.style.fontFamily = `"${tw.headingFont}", "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif`;
  }, [tw.primaryPink, tw.background, tw.headingFont]);

  return (
    <>
      <Topbar/>
      <main>
        <Hero/>
        <Concept/>
        <Statement/>
        <Strengths/>
        <Recommend/>
        <Groomer/>
        <Courses/>
        <Menu/>
        <Gallery/>
        <Flow/>
        <Access/>
        <FAQ/>
        <News/>
        <Booking/>
      </main>
      <Footer/>
      {tw.showFloatCTA && <FloatCTA/>}

      <TweaksPanel title="Tweaks">
          <TweakSection label="Colors">
            <TweakColor label="メインカラー" value={tw.primaryPink}
              options={['#c89a86','#b07e69','#9aa68e','#c7a684','#f5a4b8']}
              onChange={v=>setTweak('primaryPink', v)}/>
            <TweakColor label="背景" value={tw.background}
              options={['#f7f1e8','#efe6d8','#fbf4f0','#fafafa']}
              onChange={v=>setTweak('background', v)}/>
          </TweakSection>
          <TweakSection label="Layout">
            <TweakToggle label="フローティング予約ボタン" value={tw.showFloatCTA}
              onChange={v=>setTweak('showFloatCTA', v)}/>
            <TweakSelect label="本文フォント" value={tw.headingFont}
              options={['Noto Sans JP','Noto Serif JP','Zen Maru Gothic']}
              onChange={v=>setTweak('headingFont', v)}/>
          </TweakSection>
      </TweaksPanel>
    </>
  );
};

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