// site-app.jsx — full-bleed Crystal Clear site with Tweaks (brand + theme).

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "Farah Window Cleaning",
  "theme": "sky"
}/*EDITMODE-END*/;

function SiteApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const brand = t.brand || 'Farah Window Cleaning';
  const theme = THEMES[t.theme] || THEMES.sky;

  const themeOptions = Object.entries(THEMES).map(([k, v]) => [v.primary, v.primaryDeep, v.primarySoft]);
  const themeKeys = Object.keys(THEMES);

  return (
    <>
      <SiteClassic brand={brand} theme={theme} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakText
            label="Business name"
            value={t.brand}
            placeholder="Farah Window Cleaning"
            onChange={(v) => setTweak('brand', v)}
          />
        </TweakSection>

        <TweakSection label="Colour theme">
          <TweakColor
            label="Palette"
            value={themeOptions[themeKeys.indexOf(t.theme)] || themeOptions[0]}
            options={themeOptions}
            onChange={(palette) => {
              const idx = themeOptions.findIndex(p => p[0] === palette[0]);
              if (idx >= 0) setTweak('theme', themeKeys[idx]);
            }}
          />
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', padding: '8px 12px 4px', lineHeight: 1.5 }}>
            <b style={{ color: 'rgba(255,255,255,0.85)' }}>{THEMES[t.theme]?.label || 'Sky'}</b>
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const siteRoot = ReactDOM.createRoot(document.getElementById('root'));
siteRoot.render(<SiteApp />);