/* global React, ReactDOM, CreateImageHero, RefToImageSection, PhotoControlSection, ExploreSection, FormatsSection, PipelineSection, FinalSection, MCIPage */
// Create Image feature page — assembly + layout tweak (desktop / mobile).
const CI_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "layout": (window.SZ_LAYOUT || "desktop")
}/*EDITMODE-END*/;

const CI_LOCALS = { '/create-image': 'Hero — Create Image', '04 Photo Control': '02 Photo Control', '14 Explore': '03 Explore prompts', '15 Pricing': '06 Pricing', '16 FAQ': '07 FAQ' };
const CreateImagePage = () => {
  const [t, setTweak] = window.useTweaks(CI_TWEAK_DEFAULTS);
  const mobile = t.layout === 'mobile';
  return (
    <React.Fragment>
      {mobile ? <MCIPage /> : (
        <div style={{ fontFamily: 'var(--font-sans)' }}>
          <div data-screen-label="Hero — Create Image"><CreateImageHero /></div>
          <div data-screen-label="01 Reference to Image"><RefToImageSection /></div>
          <div data-screen-label="02 Photo Control"><PhotoControlSection /></div>
          <div data-screen-label="03 Explore prompts"><ExploreSection /></div>
          <div data-screen-label="04 Formats and Quality"><FormatsSection /></div>
          <div data-screen-label="05 What comes next"><PipelineSection /></div>
          <div data-screen-label="06 Pricing"><window.PricingSection /></div>
          <div data-screen-label="07 FAQ"><window.FAQSection /></div>
          <div data-screen-label="CTA + Footer"><FinalSection /></div>
          <window.SozeeNav revealAfter="always" logoHref="/" siteHref="/" localLabels={CI_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(<CreateImagePage />);