/* global React, ReactDOM, Header, Hero, WhySection, LevelsSection, ProgramsSection, ProgramDetail, MethodologySection, CalendarSection, ApplySection, Footer, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakColor, useTweaks */

function App() {
  const [t, setTweak] = useTweaks(window.__TWEAK_DEFAULTS);

  return (
    <>
      <Header showEnrollmentBar={t.showEnrollmentBar}/>
      <Hero motif={t.heroMotif} accentRole={t.accentRole}/>
      <WhySection/>
      <LevelsSection/>
      <ProgramsSection cardStyle={t.cardStyle} layout={t.programLayout}/>
      <ProgramDetail/>
      <MethodologySection/>
      <CalendarSection/>
      <ApplySection/>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero"/>
        <TweakRadio
          label="Motivo"
          value={t.heroMotif}
          options={['atom','spec','plant']}
          onChange={(v)=>setTweak('heroMotif', v)}
        />
        <TweakRadio
          label="Acento"
          value={t.accentRole}
          options={['cyan','yellow','blue']}
          onChange={(v)=>setTweak('accentRole', v)}
        />
        <TweakToggle
          label="Banner de inscripción"
          value={t.showEnrollmentBar}
          onChange={(v)=>setTweak('showEnrollmentBar', v)}
        />

        <TweakSection label="Catálogo"/>
        <TweakRadio
          label="Diseño"
          value={t.programLayout}
          options={['grid','list']}
          onChange={(v)=>setTweak('programLayout', v)}
        />
        <TweakRadio
          label="Estilo de card"
          value={t.cardStyle}
          options={['level-bar','plain']}
          onChange={(v)=>setTweak('cardStyle', v)}
        />
      </TweaksPanel>
    </>
  );
}

// Render after all script tags have loaded.
setTimeout(()=>{
  const root = document.getElementById('root');
  if (!root) return;
  ReactDOM.createRoot(root).render(<App/>);
}, 80);