/* global React */
/* ─── i18n ─────────────────────────────────────────────────────── */

const LANGS = [
  { code: 'en', label: 'EN',  full: 'English' },
  { code: 'hi', label: 'हि',  full: 'हिन्दी' },
  { code: 'mr', label: 'मरा', full: 'मराठी' },
  { code: 'gu', label: 'ગુ',  full: 'ગુજરાતી' },
];

// Translation helper
const tr = (lang, dict) => (dict && dict[lang]) || (dict && dict.en) || '';

// Language switcher (fixed top-right pill)
function LangSwitcher({ lang, setLang }) {
  return (
    <div className="lang-switch" role="group" aria-label="Language">
      {LANGS.map((l) => (
        <button
          key={l.code}
          className={lang === l.code ? 'active' : ''}
          onClick={() => setLang(l.code)}
          aria-pressed={lang === l.code}
          aria-label={l.full}
          title={l.full}
        >
          {l.label}
        </button>
      ))}
    </div>
  );
}

// Reveal-on-scroll hook
function useReveal(rootMargin = '-80px') {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    if (shown) return;
    const obs = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) {
            setShown(true);
            obs.disconnect();
            break;
          }
        }
      },
      { rootMargin, threshold: 0.05 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [shown, rootMargin]);

  return [ref, shown];
}

// Reveal wrapper component — applies fade/translate on enter
function Reveal({ children, as = 'div', delay = 0, className = '', ...rest }) {
  const [ref, shown] = useReveal();
  const Tag = as;
  return (
    <Tag
      ref={ref}
      data-delay={delay || undefined}
      className={`reveal ${shown ? 'in' : ''} ${className}`.trim()}
      {...rest}
    >
      {children}
    </Tag>
  );
}

Object.assign(window, { LANGS, tr, LangSwitcher, useReveal, Reveal });