// Main app composition + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#46BD73",
  "limeColor": "#C7F26C",
  "headlineBoldness": "black",
  "tone": "dark",
  "heroHeadline": "MORE THAN A CLASS."
}/*EDITMODE-END*/;

const App = () => {
  useReveal();
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks as CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty('--wedar-green', tweaks.accentColor);
    document.documentElement.style.setProperty('--wedar-lime', tweaks.limeColor);
  }, [tweaks]);

  return (
    <>
      <Nav/>
      <main>
        <Hero/>
        <Models/>
        <Spokesperson/>
        <Support/>
        <Process/>
        <FAQ/>
        <Apply/>
      </main>
      <Footer/>

      <TweaksPanel>
        <TweakSection title="品牌色">
          <TweakColor label="強調色 Accent" value={tweaks.accentColor} onChange={v => setTweaks({ accentColor: v })}/>
          <TweakColor label="亮色 Lime" value={tweaks.limeColor} onChange={v => setTweaks({ limeColor: v })}/>
        </TweakSection>
        <TweakSection title="文案">
          <TweakText label="Hero 主標" value={tweaks.heroHeadline} onChange={v => setTweaks({ heroHeadline: v })}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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