/* SIE Tweaks panel — palette, hero variant, marquee toggle, gold accent */
const { useEffect } = React;

const PALETTES = {
  forest:    { green: '#2D4A3E', greenDeep: '#1f3329', cream: '#F5F0E8', creamWarm: '#ede5d6', gold: '#C9A96E', goldSoft: '#d8c08e', char: '#1A1A1A' },
  midnight:  { green: '#1F2937', greenDeep: '#111827', cream: '#F2EDE3', creamWarm: '#e6decb', gold: '#C9A96E', goldSoft: '#d8c08e', char: '#0a0a0a' },
  burgundy:  { green: '#4A2D31', greenDeep: '#321f22', cream: '#F4EFE5', creamWarm: '#eae0cd', gold: '#C9A96E', goldSoft: '#d8c08e', char: '#1A1A1A' },
  cocoa:     { green: '#3A2E25', greenDeep: '#26201a', cream: '#F1ECE2', creamWarm: '#e4d9c6', gold: '#C9A96E', goldSoft: '#dcc290', char: '#1A1A1A' },
};

const HERO_TITLES = {
  craftsmanship: ['Where ', 'craftsmanship', '<br/>meets global fashion standards.'],
  india:         ['Made in ', 'India.', '<br/>Worn by the world.'],
  pair:          ['Every ', 'pair', ',<br/>traceable to the thread.'],
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.forest;
  const r = document.documentElement.style;
  r.setProperty('--green', p.green);
  r.setProperty('--green-deep', p.greenDeep);
  r.setProperty('--cream', p.cream);
  r.setProperty('--cream-warm', p.creamWarm);
  r.setProperty('--gold', p.gold);
  r.setProperty('--gold-soft', p.goldSoft);
  r.setProperty('--char', p.char);
}

function applyHeroVariant(key) {
  const v = HERO_TITLES[key] || HERO_TITLES.craftsmanship;
  const el = document.querySelector('.hero__title');
  if (!el) return;
  el.innerHTML = `${v[0]}<em>${v[1]}</em>${v[2]}`;
}

function applyMarquee(on) {
  const m = document.querySelector('.marquee');
  if (m) m.style.display = on ? '' : 'none';
}

function applyGold(on) {
  const r = document.documentElement.style;
  if (on) {
    r.setProperty('--gold', '#C9A96E');
    r.setProperty('--gold-soft', '#d8c08e');
    r.setProperty('--rule', 'rgba(201,169,110,0.45)');
  } else {
    r.setProperty('--gold', '#a8a8a8');
    r.setProperty('--gold-soft', '#cfcfcf');
    r.setProperty('--rule', 'rgba(168,168,168,0.35)');
  }
}

function SIETweaks() {
  const [t, setTweak] = useTweaks(window.__TWEAKS);

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => { applyHeroVariant(t.heroTitleVariant); }, [t.heroTitleVariant]);
  useEffect(() => { applyMarquee(!!t.marqueeOn); }, [t.marqueeOn]);
  useEffect(() => { applyGold(!!t.goldAccent); }, [t.goldAccent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <TweakColor
          label="Brand colorway"
          options={[
            ['#2D4A3E', '#F5F0E8', '#C9A96E'],
            ['#1F2937', '#F2EDE3', '#C9A96E'],
            ['#4A2D31', '#F4EFE5', '#C9A96E'],
            ['#3A2E25', '#F1ECE2', '#C9A96E'],
          ]}
          value={
            t.palette === 'midnight' ? ['#1F2937','#F2EDE3','#C9A96E'] :
            t.palette === 'burgundy' ? ['#4A2D31','#F4EFE5','#C9A96E'] :
            t.palette === 'cocoa'    ? ['#3A2E25','#F1ECE2','#C9A96E'] :
                                       ['#2D4A3E','#F5F0E8','#C9A96E']
          }
          onChange={(v) => {
            const name =
              v[0] === '#1F2937' ? 'midnight' :
              v[0] === '#4A2D31' ? 'burgundy' :
              v[0] === '#3A2E25' ? 'cocoa'    : 'forest';
            setTweak('palette', name);
          }}
        />
        <TweakToggle
          label="Gold accent"
          value={!!t.goldAccent}
          onChange={(v) => setTweak('goldAccent', v)}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakSelect
          label="Headline"
          value={t.heroTitleVariant}
          onChange={(v) => setTweak('heroTitleVariant', v)}
          options={[
            { value: 'craftsmanship', label: 'Where craftsmanship meets…' },
            { value: 'india',         label: 'Made in India. Worn…' },
            { value: 'pair',          label: 'Every pair, traceable…' },
          ]}
        />
        <TweakToggle
          label="Client marquee"
          value={!!t.marqueeOn}
          onChange={(v) => setTweak('marqueeOn', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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