/* Tweaks for Wardrobe by Dipal home — applies to CSS variables / attributes on a static page */
const ACCENTS = {
  '#b9614a': { deep:'#8f4631', soft:'#ecd9cd' }, // terracotta
  '#b15a6b': { deep:'#8a3f4f', soft:'#ecd5da' }, // rose
  '#c08a3e': { deep:'#946420', soft:'#efe0c4' }, // marigold
  '#7c7a45': { deep:'#585829', soft:'#e4e2cf' }, // olive
  '#855075': { deep:'#623653', soft:'#e6d6e2' }, // plum
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#b9614a",
  "heading": "serif",
  "overlay": "soft",
  "headline": "Drape in confidence"
}/*EDITMODE-END*/;

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

  React.useEffect(()=>{
    const root = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS['#b9614a'];
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-deep', a.deep);
    root.style.setProperty('--accent-soft', a.soft);
    root.setAttribute('data-heading', t.heading);
    root.setAttribute('data-overlay', t.overlay);
    const h = document.getElementById('heroHeadline');
    if(h) h.textContent = t.headline || 'Drape in confidence';
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand color" />
      <TweakColor label="Accent" value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v)=>setTweak('accent', v)} />
      <TweakSection label="Typography" />
      <TweakRadio label="Headings" value={t.heading}
        options={['serif','modern']}
        onChange={(v)=>setTweak('heading', v)} />
      <TweakSection label="Hero" />
      <TweakText label="Headline" value={t.headline}
        onChange={(v)=>setTweak('headline', v)} />
      <TweakRadio label="Overlay" value={t.overlay}
        options={['soft','dark']}
        onChange={(v)=>setTweak('overlay', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<HomeTweaks/>);