/* global React */
const { useEffect, useRef, useState } = React;
/* ============== Icons ============== */
const Icon = {
WhatsApp: ({ size = 18, color = "currentColor" }) => (
),
Arrow: ({ size = 18 }) => (
),
Check: ({ size = 16 }) => (
),
Plus: ({ size = 18 }) => (
),
Globe: ({ size = 18 }) => (
),
Heart: ({ size = 18 }) => (
),
Clock: ({ size = 18 }) => (
),
Shield: ({ size = 18 }) => (
),
Stethoscope: ({ size = 18 }) => (
),
Translate: ({ size = 18 }) => (
),
Wave: ({ size = 18 }) => (
),
};
/* ============== Reveal hook ============== */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal');
let io;
try {
io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.08, rootMargin: '0px 0px -4% 0px' });
els.forEach(el => io.observe(el));
} catch (_) {}
// Fallback: ensure everything becomes visible even if IO never fires
const fallback = setTimeout(() => {
document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
}, 400);
// Also reveal anything already in viewport on mount
requestAnimationFrame(() => {
const vh = window.innerHeight || 800;
els.forEach(el => {
const r = el.getBoundingClientRect();
if (r.top < vh * 1.1) el.classList.add('in');
});
});
return () => { try { io && io.disconnect(); } catch(_){} clearTimeout(fallback); };
}, []);
}
/* ============== Header / Nav ============== */
function Nav() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
Object.assign(window, { Icon, useReveal, Nav });