/* fäm Properties — Tweaks panel
   Wires the host edit-mode protocol + a small panel that lets a manager:
   - swap the campaign (Palm Central / The Edit / Mercedes Branded / Villa 101)
   - change hero treatment (Cinematic / Editorial / Full-dark)
   - toggle the DXBinteract data block / awards strip
   - choose accent (curated 3-swatch)
*/

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = window.__TWEAKS;

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

  // Apply tweaks to the static HTML page
  useEffect(() => { window.__applyCampaign && window.__applyCampaign(t.campaign); }, [t.campaign]);
  useEffect(() => { window.__applyHeroTreatment && window.__applyHeroTreatment(t.heroTreatment); }, [t.heroTreatment]);
  useEffect(() => { window.__applyAccent && window.__applyAccent(t.accent); }, [t.accent]);
  useEffect(() => { window.__toggleSection && window.__toggleSection('data', t.showDataBlock); }, [t.showDataBlock]);
  useEffect(() => { window.__toggleSection && window.__toggleSection('trust', t.showAwards); }, [t.showAwards]);

  return (
    <TweaksPanel>
      <TweakSection label="Campaign" />
      <TweakSelect
        label="Microsite"
        value={t.campaign}
        options={[
          { value:'palm-central', label:'Palm Central · Palm Jumeirah' },
          { value:'the-edit-d3', label:'The Edit at d3 · Design District' },
          { value:'mercedes-binghatti', label:'Branded Tower · Downtown' },
          { value:'villa-101', label:'Villa 101 · Al Wasl' },
        ]}
        onChange={(v) => setTweak('campaign', v)}
      />

      <TweakSection label="Hero treatment" />
      <TweakRadio
        label="Treatment"
        value={t.heroTreatment}
        options={[
          { value:'cinematic', label:'Cinematic' },
          { value:'editorial', label:'Editorial' },
          { value:'full-dark', label:'Full-dark' },
        ]}
        onChange={(v) => setTweak('heroTreatment', v)}
      />

      <TweakSection label="Accent" />
      <TweakColor
        label="Brand red"
        value={t.accent}
        options={['#E8222E', '#C21B26', '#0E0F11']}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Sections" />
      <TweakToggle
        label="DXBinteract data block"
        value={t.showDataBlock}
        onChange={(v) => setTweak('showDataBlock', v)}
      />
      <TweakToggle
        label="Awards strip"
        value={t.showAwards}
        onChange={(v) => setTweak('showAwards', v)}
      />
    </TweaksPanel>
  );
}

// Mount once
const mountEl = document.createElement('div');
mountEl.id = '__fam_tweaks_root';
document.body.appendChild(mountEl);
ReactDOM.createRoot(mountEl).render(<App/>);