/* motion-tweaks.jsx — exposes composition controls for the motion / Modjo section */

const {
  useTweaks, TweaksPanel, TweakSection,
  TweakSlider, TweakToggle, TweakRadio, TweakSelect, TweakColor,
} = window;

const DEFAULTS = window.MOTION_TWEAK_DEFAULTS;

function MotionTweaksApp() {
  const [t, setTweak] = useTweaks(DEFAULTS);

  // ── Apply tweaks to the DOM ──
  React.useEffect(() => {
    function apply() {
      // On phones the desktop composition values (wide lottie, big headline,
      // low vertical position) don't fit — let the mobile CSS own layout instead
      // of forcing desktop inline styles that overflow into the next section.
      const isMobile = window.matchMedia('(max-width: 768px)').matches;

      const sticky = document.querySelector('.act-motion .sticky-frame');
      if (sticky) sticky.style.background = t.motionBg;

      const headline = document.querySelector('.motion-headline');
      if (headline) {
        headline.style.top = isMobile ? '' : t.headlineY + 'vh';
        if (isMobile) {
          headline.style.left = '';
          headline.style.right = '';
          headline.style.transform = '';
          headline.style.textAlign = '';
        } else if (t.headlineAlign === 'left') {
          headline.style.left = '32px';
          headline.style.right = '32px';
          headline.style.transform = 'translateX(0)';
          headline.style.textAlign = 'left';
        } else {
          headline.style.left = '50%';
          headline.style.right = 'auto';
          headline.style.transform = 'translateX(-50%)';
          headline.style.textAlign = 'center';
        }
      }

      const h2 = document.querySelector('.motion-headline h2');
      if (h2) {
        h2.style.fontSize = isMobile
          ? ''
          : `clamp(${28 * t.headlineScale}px, ${7.2 * t.headlineScale}vw, ${110 * t.headlineScale}px)`;
      }

      const accent = document.querySelector('.motion-headline h2 .accent');
      if (accent) {
        accent.className = 'accent hl-' + t.highlightStyle;
      }

      const comp = document.querySelector('.motion-comp');
      if (comp) {
        // Clear inline overrides on mobile so the portrait-lottie CSS applies
        comp.style.top = isMobile ? '' : t.lottieY + '%';
        comp.style.width = isMobile
          ? ''
          : `min(${Math.round(t.lottieScale * 96)}vw, ${Math.round(t.lottieScale * 1300)}px)`;
      }

      const tag = document.querySelector('.motion-tag');
      if (tag) {
        if (t.tagStyle === 'hidden') {
          tag.style.display = 'none';
        } else {
          tag.style.display = '';
          tag.dataset.tagStyle = t.tagStyle;
        }
        tag.style.top = isMobile ? '' : t.tagY + 'vh';
        const dot = tag.querySelector('.tdot');
        if (dot) dot.style.background = t.tagAccent;
      }

      const caption = document.querySelector('.motion-caption');
      if (caption) caption.style.display = t.showCaption ? 'inline-flex' : 'none';
    }

    apply();
    window.addEventListener('resize', apply);
    return () => window.removeEventListener('resize', apply);
  }, [t]);

  // Curated backgrounds — neutral whites + 2 soft accent washes
  const bgOptions = ['#ffffff', '#fafaf6', '#f4eee0', '#f1eefa', '#fdf1ee'];
  const accentOptions = ['#FF7495', '#A39EFF', '#FFD88B'];

  return (
    <TweaksPanel title="Motion section · tweaks">
      <TweakSection label="Background & layout" />
      <TweakColor
        label="Section bg"
        value={t.motionBg}
        options={bgOptions}
        onChange={(v) => setTweak('motionBg', v)}
      />
      <TweakRadio
        label="Headline align"
        value={t.headlineAlign}
        options={['center', 'left']}
        onChange={(v) => setTweak('headlineAlign', v)}
      />
      <TweakSlider
        label="Headline Y"
        value={t.headlineY}
        min={4} max={28} unit="vh"
        onChange={(v) => setTweak('headlineY', v)}
      />
      <TweakSlider
        label="Headline scale"
        value={t.headlineScale}
        min={0.6} max={1.4} step={0.05} unit="×"
        onChange={(v) => setTweak('headlineScale', v)}
      />

      <TweakSection label="Highlight word" />
      <TweakSelect
        label="Style"
        value={t.highlightStyle}
        options={['yellow-box', 'purple-box', 'pink-box', 'pink-text', 'purple-text', 'underline', 'none']}
        onChange={(v) => setTweak('highlightStyle', v)}
      />

      <TweakSection label="Animation (Lottie)" />
      <TweakSlider
        label="Vertical position"
        value={t.lottieY}
        min={45} max={80} unit="%"
        onChange={(v) => setTweak('lottieY', v)}
      />
      <TweakSlider
        label="Scale"
        value={t.lottieScale}
        min={0.55} max={1.15} step={0.05} unit="×"
        onChange={(v) => setTweak('lottieScale', v)}
      />

      <TweakSection label="“One example” tag" />
      <TweakRadio
        label="Layout"
        value={t.tagStyle}
        options={['two-part', 'minimal', 'hidden']}
        onChange={(v) => setTweak('tagStyle', v)}
      />
      <TweakSlider
        label="Tag Y"
        value={t.tagY}
        min={24} max={52} unit="vh"
        onChange={(v) => setTweak('tagY', v)}
      />
      <TweakColor
        label="Tag accent"
        value={t.tagAccent}
        options={accentOptions}
        onChange={(v) => setTweak('tagAccent', v)}
      />

      <TweakSection label="Bottom caption" />
      <TweakToggle
        label="Show LIVE chip"
        value={t.showCaption}
        onChange={(v) => setTweak('showCaption', v)}
      />
    </TweaksPanel>
  );
}

const __twkRoot = document.getElementById('tweaksMount');
if (__twkRoot) {
  ReactDOM.createRoot(__twkRoot).render(<MotionTweaksApp />);
}