// App: orchestrates sections + Tweaks panel
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect } = window;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "dashboard",
  "accent": "lilac",
  "productDensity": "default",
  "productLayout": "expandable",
  "showAwards": true,
  "showMap": true
}/*EDITMODE-END*/;

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

  // Accent color mapping
  React.useEffect(() => {
    const map = {
      lilac: "#9C74EB",
      teal: "#0AE2C3",
      coral: "#FF7A59",
      gold: "#E6B547"
    };
    document.documentElement.style.setProperty("--accent", map[tweaks.accent] || map.lilac);
  }, [tweaks.accent]);

  return (
    <>
      <Nav/>
      <Hero heroVariant={tweaks.heroVariant} key={tweaks.heroVariant}/>
      <Stats/>
      <Why/>
      <Products density={tweaks.productDensity}/>
      {tweaks.showMap && <UKMap/>}
      {tweaks.showAwards && <Awards/>}
      <CTA/>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakRadio label="Accent color" value={tweaks.accent} onChange={v=>setTweak("accent", v)}
            options={[
              {value:"lilac", label:"Lilac"},
              {value:"teal", label:"Teal"},
              {value:"coral", label:"Coral"},
              {value:"gold", label:"Gold"},
            ]}/>
        </TweakSection>
        <TweakSection title="Products">
          <TweakRadio label="Card density" value={tweaks.productDensity} onChange={v=>setTweak("productDensity", v)}
            options={[
              {value:"default", label:"Comfortable"},
              {value:"dense", label:"Dense"},
            ]}/>
        </TweakSection>
        <TweakSection title="Sections">
          <TweakToggle label="Show UK map" value={tweaks.showMap} onChange={v=>setTweak("showMap", v)}/>
          <TweakToggle label="Show awards ribbon" value={tweaks.showAwards} onChange={v=>setTweak("showAwards", v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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