/* I Know My Skin — shared helpers: reveal-on-scroll + Tweaks panel */

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(e => io.observe(e));
    // Safety net: if anything never intersects (or capture tools miss it), reveal it.
    const fallback = setTimeout(() => { els.forEach(e => e.classList.add('in')); }, 2000);
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);
}

const Reveal = ({ children, delay = 0, style = {}, className = '' }) => (
  <div className={'reveal ' + className} style={{ transitionDelay: delay + 'ms', ...style }}>{children}</div>
);

/* Tweaks panel — colour emphasis (persists across pages via localStorage). */
function SiteTweaks() {
  const [lang] = useLang();
  const [t, setTweak] = useTweaks({ emphasis: getEmphasis() });
  React.useEffect(() => { applyEmphasis(t.emphasis); }, [t.emphasis]);
  const label = lang === 'de' ? 'Farbgewichtung' : 'Colour emphasis';
  const help = lang === 'de'
    ? 'Wärmt die Seite (Blush) oder kühlt sie (Teal) ab.'
    : 'Warms the site (Blush) or cools it (Teal).';
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label={label} />
      <TweakRadio label={lang === 'de' ? 'Ton' : 'Tone'} value={t.emphasis}
        options={['teal', 'balanced', 'blush']}
        onChange={(v) => setTweak('emphasis', v)} />
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg3)', padding: '2px 2px 4px', lineHeight: 1.5 }}>{help}</div>
    </TweaksPanel>
  );
}

Object.assign(window, { useReveal, Reveal, SiteTweaks });