/* Expohive — Tweaks island (hero switcher + brand) */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "centered",
  "accent": ["#fbbf24", "#e0a106", "#fde08a"],
  "texture": true,
  "radius": "round"
}/*EDITMODE-END*/;

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

  React.useEffect(function(){
    const map = { split:'a', centered:'b', navy:'c' };
    document.body.setAttribute('data-hero', map[t.hero] || 'a');
    const a = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent, t.accent];
    const root = document.documentElement;
    root.style.setProperty('--amber', a[0]);
    root.style.setProperty('--amber-600', a[1] || a[0]);
    root.style.setProperty('--amber-300', a[2] || a[0]);
    document.body.classList.toggle('no-texture', !t.texture);
    document.body.classList.toggle('sharp', t.radius === 'sharp');
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio label="Layout" value={t.hero}
        options={['split','centered','navy']}
        onChange={(v)=>setTweak('hero', v)} />
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent}
        options={[
          ['#f8ab0f','#e29400','#ffce6b'],
          ['#ef8e2a','#d4761a','#ffc285'],
          ['#fbbf24','#e0a106','#fde08a']
        ]}
        onChange={(v)=>setTweak('accent', v)} />
      <TweakToggle label="Honeycomb texture" value={t.texture}
        onChange={(v)=>setTweak('texture', v)} />
      <TweakRadio label="Corners" value={t.radius}
        options={['round','sharp']}
        onChange={(v)=>setTweak('radius', v)} />
    </TweaksPanel>
  );
}

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