// Tweaks for Looks Pitch Deck — slide 3 photo styling

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "imgWidth": 360,
  "imgHeight": 680,
  "imgVOffset": 0,
  "imgRadius": 18,
  "imgShadow": 1.0,
  "imgBorderWidth": 0,
  "imgBorderColor": "#1B1A17"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--park-w', `${t.imgWidth}px`);
    r.setProperty('--park-h', `${t.imgHeight}px`);
    r.setProperty('--park-top', `${(1080 - t.imgHeight) / 2 + t.imgVOffset}px`);
    r.setProperty('--park-radius', `${t.imgRadius}px`);
    r.setProperty('--park-border-w', `${t.imgBorderWidth}px`);
    r.setProperty('--park-border-c', t.imgBorderColor);

    const s = t.imgShadow;
    const shadow = s <= 0 ? 'none' : [
      `0 ${2 * s}px ${6 * s}px rgba(27,26,23,${0.08 * Math.min(s, 1.5)})`,
      `0 ${12 * s}px ${24 * s}px -${8 * s}px rgba(27,26,23,${0.18 * Math.min(s, 1.5)})`,
      `0 ${40 * s}px ${70 * s}px -${20 * s}px rgba(27,26,23,${0.32 * Math.min(s, 1.5)})`,
    ].join(',');
    r.setProperty('--park-shadow', shadow);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · Slide 3 photo">
      <TweakSection label="Frame" />
      <TweakSlider label="Width"   value={t.imgWidth}   min={220} max={520} step={10} unit="px"
                   onChange={(v) => setTweak('imgWidth', v)} />
      <TweakSlider label="Height"  value={t.imgHeight}  min={440} max={920} step={10} unit="px"
                   onChange={(v) => setTweak('imgHeight', v)} />
      <TweakSlider label="Vert. offset" value={t.imgVOffset} min={-200} max={200} step={5} unit="px"
                   onChange={(v) => setTweak('imgVOffset', v)} />
      <TweakSlider label="Corner radius" value={t.imgRadius} min={0} max={80} step={1} unit="px"
                   onChange={(v) => setTweak('imgRadius', v)} />

      <TweakSection label="Shadow" />
      <TweakSlider label="Strength" value={t.imgShadow} min={0} max={2.5} step={0.1}
                   onChange={(v) => setTweak('imgShadow', v)} />

      <TweakSection label="Border" />
      <TweakSlider label="Width" value={t.imgBorderWidth} min={0} max={10} step={1} unit="px"
                   onChange={(v) => setTweak('imgBorderWidth', v)} />
      <TweakColor  label="Color" value={t.imgBorderColor}
                   options={['#1B1A17', '#FAF6EE', '#C9C1B0', '#2F4858', '#B85A3E']}
                   onChange={(v) => setTweak('imgBorderColor', v)} />
    </TweaksPanel>
  );
}

const __twk_root = document.createElement('div');
document.body.appendChild(__twk_root);
ReactDOM.createRoot(__twk_root).render(<TweaksApp />);