// App root with Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "editorial",
  "fontPair": "pf",
  "palette": "classic"
}/*EDITMODE-END*/;

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

  // Apply font + palette classes to body
  React.useEffect(() => {
    document.body.classList.remove('font-pf','font-dm','font-bd');
    document.body.classList.add(`font-${t.fontPair}`);
    document.body.classList.remove('pal-classic','pal-olive','pal-pomegranate');
    document.body.classList.add(`pal-${t.palette}`);
    const FONT_PAIR_HREF = {
      dm: 'https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap',
      bd: 'https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;700;800&family=Manrope:wght@400;500;700&display=swap',
    };
    const href = FONT_PAIR_HREF[t.fontPair];
    if (href && !document.getElementById(`azra-fontpair-${t.fontPair}`)) {
      const link = document.createElement('link');
      link.id = `azra-fontpair-${t.fontPair}`;
      link.rel = 'stylesheet';
      link.href = href;
      document.head.appendChild(link);
    }
  }, [t.fontPair, t.palette]);

  return (
    <I18nProvider>
      <Header/>
      <main id="main">
        <Hero layout={t.heroLayout}/>
        <NurBeiAzra/>
        <HeuteAmMarkt/>
        <Marquee/>
        <Sortiment/>
        <Angebote/>
        <Rezept/>
        <Metzgerei/>
        <Vorbestellung/>
        <Herkunft/>
        <Stimmen/>
        <Standort/>
        <Newsletter/>
      </main>
      <Footer/>
      <CookieBanner/>
      <LegalModal/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero-Layout"/>
        <TweakRadio
          label="Variante"
          value={t.heroLayout}
          options={[
            { value:'editorial', label:'Editorial' },
            { value:'split',     label:'Split' },
            { value:'stamp',     label:'Stempel' },
          ]}
          onChange={(v)=>setTweak('heroLayout', v)}
        />
        <TweakSection label="Schrift-Pairing"/>
        <TweakRadio
          label="Pairing"
          value={t.fontPair}
          options={[
            { value:'pf', label:'Playfair + Inter' },
            { value:'dm', label:'DM Serif + DM Sans' },
            { value:'bd', label:'Bodoni + Manrope' },
          ]}
          onChange={(v)=>setTweak('fontPair', v)}
        />
        <TweakSection label="Farbpalette"/>
        <TweakRadio
          label="Palette"
          value={t.palette}
          options={[
            { value:'classic',     label:'Klassisch' },
            { value:'olive',       label:'Olive' },
            { value:'pomegranate', label:'Granatapfel' },
          ]}
          onChange={(v)=>setTweak('palette', v)}
        />
      </TweaksPanel>
    </I18nProvider>
  );
}

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