// App.jsx — main composition + tweaks panel + i18n

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "A",
  "logoVariant": "default",
  "paymentModel": "deposit",
  "serviceEmphasis": "all",
  "lang": "en"
}/*EDITMODE-END*/;

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const t = STRINGS[tw.lang] || STRINGS.en;

  const setLang = (l) => setTweak("lang", l);

  return (
    <div>
      <Hero variant={tw.heroVariant} logoVariant={tw.logoVariant} t={t} lang={tw.lang} setLang={setLang}/>
      <Services emphasis={tw.serviceEmphasis} t={t}/>
      <HowItWorks t={t}/>
      <ServiceArea t={t}/>
      <Scheduler paymentModel={tw.paymentModel} t={t}/>
      <Testimonials t={t}/>
      <Membership t={t}/>
      <Rules t={t}/>
      <Footer t={t}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language"/>
        <TweakRadio label="Lang" value={tw.lang} options={["en","es"]}
          onChange={v => setTweak("lang", v)}/>

        <TweakSection label="Hero"/>
        <TweakRadio label="Layout" value={tw.heroVariant} options={["A","B","C"]}
          onChange={v => setTweak("heroVariant", v)}/>

        <TweakSection label="Logo"/>
        <TweakRadio label="Variant" value={tw.logoVariant}
          options={["default","stacked","compact","monoline"]}
          onChange={v => setTweak("logoVariant", v)}/>

        <TweakSection label="Payment model"/>
        <TweakRadio label="Mode" value={tw.paymentModel}
          options={["deposit","full","card"]}
          onChange={v => setTweak("paymentModel", v)}/>

        <TweakSection label="Service emphasis"/>
        <TweakSelect label="Highlight" value={tw.serviceEmphasis}
          options={[
            {value: "all", label: "Show all equally"},
            {value: "plumbing", label: "Plumbing"},
            {value: "electrical", label: "Electrical"},
            {value: "carpentry", label: "Mounts & Install"},
            {value: "exterior", label: "Maintenance"},
          ]}
          onChange={v => setTweak("serviceEmphasis", v)}/>
      </TweaksPanel>
    </div>
  );
}

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