/* eslint-disable */
/* Vivaah — site-specific Tweaks panel.
   Depends on assets/tweaks-panel.jsx (TweaksPanel, useTweaks, Tweak* controls)
   and assets/site.jsx (applyTweaks).
*/

function VivaahTweaks() {
  // Defaults — keep in sync with EDITMODE-BEGIN block in HTML
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS || {
    accent: ['#B08D57', '#8A6B3E'],
    display: 'Cormorant',
    hero: 'cinematic',
    density: 'standard',
    lang: 'en',
    scriptMark: true,
  });

  // Apply on every change
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent palette">
        <TweakColor
          label="Accent"
          value={t.accent}
          onChange={v => setTweak('accent', v)}
          options={[
            ['#B08D57', '#8A6B3E'], // gold
            ['#C9A66B', '#A4814A'], // champagne
            ['#8C4B57', '#6E3743'], // rose
            ['#704A3A', '#553424'], // cocoa
            ['#5B6B57', '#3F4D3B'], // moss
          ]}
        />
      </TweakSection>

      <TweakSection label="Typography">
        <TweakRadio
          label="Display font"
          value={t.display}
          onChange={v => setTweak('display', v)}
          options={[
            { label: 'Cormorant', value: 'Cormorant' },
            { label: 'Playfair',  value: 'Playfair'  },
            { label: 'Italiana',  value: 'Italiana'  },
          ]}
        />
        <TweakToggle
          label="Script wordmark"
          value={t.scriptMark}
          onChange={v => setTweak('scriptMark', v)}
        />
      </TweakSection>

      <TweakSection label="Hero treatment">
        <TweakRadio
          label="Style"
          value={t.hero}
          onChange={v => setTweak('hero', v)}
          options={[
            { label: 'Cinematic', value: 'cinematic' },
            { label: 'Editorial', value: 'editorial' },
            { label: 'Blush',     value: 'blush'     },
          ]}
        />
      </TweakSection>

      <TweakSection label="Page">
        <TweakRadio
          label="Density"
          value={t.density}
          onChange={v => setTweak('density', v)}
          options={[
            { label: 'Standard', value: 'standard' },
            { label: 'Airy',     value: 'airy'     },
          ]}
        />
        <TweakRadio
          label="Language"
          value={t.lang}
          onChange={v => setTweak('lang', v)}
          options={[
            { label: 'EN',     value: 'en' },
            { label: 'AR-RTL', value: 'ar' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.VivaahTweaks = VivaahTweaks;