/* global React, ReactDOM, Nav, Hero, Programm, Jury, Editionen, Mission, Richtlinien, FooterAH, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakText */
const { useEffect: useEffectApp } = React;

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

  useEffectApp(() => {
    if (window.lucide) window.lucide.createIcons();
  }, [t]);

  return (
    <div data-screen-label="01 Landing">
      <Nav
        ctaMode={t.ctaMode}
        submitUrl={t.submitUrl}
        ticketsUrl={t.ticketsUrl}
        showMarquee={t.showMarquee}
      />
      <Hero
        ctaMode={t.ctaMode}
        submitUrl={t.submitUrl}
        ticketsUrl={t.ticketsUrl}
        showCountdown={t.showCountdown}
        variant={t.heroVariant}
      />
      <Programm />
      <Jury />
      <Editionen />
      <Mission />
      <Richtlinien submitUrl={t.submitUrl} />
      <FooterAH ctaMode={t.ctaMode} submitUrl={t.submitUrl} ticketsUrl={t.ticketsUrl} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Call-to-Action" />
        <TweakRadio
          label="Modus"
          value={t.ctaMode}
          options={['submit', 'tickets']}
          onChange={(v) => setTweak('ctaMode', v)}
        />
        <TweakText
          label="Submit-Link"
          value={t.submitUrl}
          onChange={(v) => setTweak('submitUrl', v)}
        />
        <TweakText
          label="Tickets-Link"
          value={t.ticketsUrl}
          onChange={(v) => setTweak('ticketsUrl', v)}
        />

        <TweakSection label="Hero" />
        <TweakRadio
          label="Hintergrund"
          value={t.heroVariant}
          options={['cream', 'blue']}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakToggle
          label="Countdown"
          value={t.showCountdown}
          onChange={(v) => setTweak('showCountdown', v)}
        />

        <TweakSection label="Nav" />
        <TweakToggle
          label="Marquee-Banner"
          value={t.showMarquee}
          onChange={(v) => setTweak('showMarquee', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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