// Main app — Shopify subdomain homepage
const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakText, TweakRadio } = window;
const { Nav, Hero, Marquee, Services, Cases, Process, Stack, Pricing, Testimonials, CTA, Footer } = window;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "We build Shopify stores that {{convert}} and scale.",
  "palette": "forest",
  "heroVariant": "form"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.body.className = `palette-${t.palette}`;
  }, [t.palette]);

  return (
    <div>
      <Nav />
      <Hero variant={t.heroVariant} headline={t.headline} />
      <Marquee />
      <Services />
      <Cases />
      <Process />
      <Stack />
      <Pricing />
      <Testimonials />
      <CTA />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Palette">
          <TweakRadio
            label="Color theme"
            value={t.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
              { label: 'Forest', value: 'forest' },
              { label: 'Mono',   value: 'mono' },
              { label: 'Cobalt', value: 'cobalt' },
              { label: 'Plum',   value: 'plum' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakRadio
            label="Layout"
            value={t.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
              { label: 'Form',     value: 'form' },
              { label: 'Centered', value: 'centered' },
              { label: 'Split',    value: 'split' },
            ]}
          />
          <TweakText
            label="Headline · wrap accent in {{ }}"
            value={t.headline}
            onChange={(v) => setTweak('headline', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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