const { useEffect: _useE, useState: _useS, useRef: _useR } = React;

/* ===== Reveal hook (with safety net) ===== */
function useReveal() {
  _useE(() => {
    const els = Array.from(document.querySelectorAll('.reveal'));
    if (!els.length) return;
    document.documentElement.classList.add('js-reveal');

    const revealIfVisible = (el) => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      if (r.top < vh * 0.95 && r.bottom > 0) {
        el.classList.add('in');
        return true;
      }
      return false;
    };
    requestAnimationFrame(() => els.forEach(revealIfVisible));

    let io;
    if (typeof IntersectionObserver !== 'undefined') {
      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((el) => { if (!el.classList.contains('in')) io.observe(el); });
    }

    const onScroll = () => {
      els.forEach((el) => { if (!el.classList.contains('in')) revealIfVisible(el); });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    const safety = setTimeout(() => els.forEach((el) => el.classList.add('in')), 1500);

    return () => {
      if (io) io.disconnect();
      window.removeEventListener('scroll', onScroll);
      clearTimeout(safety);
    };
  }, []);
}

/* ===== Parallax (transform translateY by data-parallax speed) ===== */
function useParallax() {
  _useE(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let raf;
    const els = Array.from(document.querySelectorAll('[data-parallax]'));
    const heroBg = document.querySelector('.hero-video-bg');
    const handle = () => {
      const y = window.scrollY;
      const vh = window.innerHeight;
      els.forEach((el) => {
        const speed = parseFloat(el.dataset.parallax) || 0.2;
        const r = el.getBoundingClientRect();
        const center = r.top + r.height / 2;
        const offset = (vh / 2 - center) * speed;
        el.style.transform = `translate3d(0, ${offset}px, 0)`;
      });
      if (heroBg) {
        // Hero video scales + drifts down as user scrolls
        const progress = Math.min(1, y / 900);
        heroBg.style.transform = `translate3d(0, ${y * 0.35}px, 0) scale(${1 + progress * 0.08})`;
      }
      raf = null;
    };
    const onScroll = () => { if (raf == null) raf = requestAnimationFrame(handle); };
    window.addEventListener('scroll', onScroll, { passive: true });
    handle();
    return () => {
      window.removeEventListener('scroll', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
}

/* ===== SVG icons ===== */
const Arrow = ({ className = "arrow" }) => (
  <svg className={className} viewBox="0 0 16 16" fill="none">
    <path d="M3 13L13 3M13 3H5M13 3V11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const Whatsapp = () => (
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7 0-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1.1 1-1.1 2.5 1.1 3 1.3 3.2c.2.2 2.2 3.4 5.3 4.7 1.9.7 2.6.8 3.6.7.6-.1 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.2-.6-.4z M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.1-1.3c1.5.8 3.2 1.3 4.9 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.2.8.9-3.1-.2-.3C4.1 15 3.5 13.5 3.5 12c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5-3.8 8.2-8.5 8.2z"/>
  </svg>
);
const InstagramIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
    <rect x="3" y="3" width="18" height="18" rx="5"/>
    <circle cx="12" cy="12" r="4"/>
    <circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/>
  </svg>
);
const TiktokIcon = () => (
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M19.5 6.7c-1.5 0-2.7-1.2-2.7-2.7V3.5h-3.2v12.3c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5c.3 0 .5 0 .8.1V10c-.3 0-.5-.1-.8-.1-3.2 0-5.7 2.6-5.7 5.7s2.6 5.7 5.7 5.7 5.7-2.6 5.7-5.7V9.4c1.1.7 2.4 1.1 3.8 1.1V7.3c-.4-.2-.8-.3-1.1-.6z"/>
  </svg>
);
const FacebookIcon = () => (
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M13.5 21v-7.5h2.5l.4-3h-2.9V8.8c0-.9.3-1.5 1.6-1.5h1.4V4.7c-.2 0-1.1-.1-2-.1-2 0-3.3 1.2-3.3 3.4v2.4H8.5v3h2.5V21h2.5z"/>
  </svg>
);

window.useReveal = useReveal;
window.useParallax = useParallax;
window.Arrow = Arrow;
window.Whatsapp = Whatsapp;
window.InstagramIcon = InstagramIcon;
window.TiktokIcon = TiktokIcon;
window.FacebookIcon = FacebookIcon;
