/* global React, ReactDOM, UGCHero, MaterialsSection, TrackerSection, UGCAnalyticsSection, PayoutsSection, HowItRunsSection, FinalSection, MUGCPage */
// UGC Campaigns — assembly + layout tweak (desktop / mobile).
const UGC_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "layout": (window.SZ_LAYOUT || "desktop")
} /*EDITMODE-END*/;

const UGC_LOCALS = { '/ugc-campaigns': 'Hero — UGC Campaigns' };

const UGCPage = () => {
  const [t, setTweak] = window.useTweaks(UGC_TWEAK_DEFAULTS);
  const mobile = t.layout === 'mobile';
  return (
    <React.Fragment>
      {mobile ? <MUGCPage /> :
      <div style={{ fontFamily: 'var(--font-sans)' }}>
          <div data-screen-label="Hero — UGC Campaigns"><UGCHero /></div>
          <div data-screen-label="01 Materials"><MaterialsSection /></div>
          <div data-screen-label="02 Posting"><TrackerSection /></div>
          <div data-screen-label="03 Analytics"><UGCAnalyticsSection /></div>
          <div data-screen-label="04 Payouts"><PayoutsSection /></div>
          <div data-screen-label="05 The creator side"><window.CreatorSideSection /></div>
          <div data-screen-label="06 How it runs"><HowItRunsSection /></div>
          <div data-screen-label="07 Plans"><window.PlansSection badge="UGC Campaigns · Plans" /></div>
          <div data-screen-label="08 FAQ"><window.BrandFAQSection /></div>
          <div data-screen-label="CTA + Footer"><FinalSection /></div>
          <window.SozeeNav revealAfter="always" logoHref="/" siteHref="/" localLabels={UGC_LOCALS} />
        </div>
      }
      <window.TweaksPanel>
        <window.TweakSection label="Layout" />
        <window.TweakRadio label="Viewport" value={t.layout}
        options={[{ value: 'desktop', label: 'Desktop' }, { value: 'mobile', label: 'Mobile' }]}
        onChange={(v) => setTweak('layout', v)} />
      </window.TweaksPanel>
    </React.Fragment>);

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