// sections-top.jsx — Navbar, Hero, Marquee, Metrics const { useState, useEffect, useRef } = React; /* ─── Shared viewport-watcher (scroll-listener based for max compatibility) ─── */ const __revealWatchers = []; function __isInViewport(el, margin = 80) { const r = el.getBoundingClientRect(); const h = window.innerHeight || document.documentElement.clientHeight; return r.top < h - margin && r.bottom > margin; } function __runWatchers() { for (let i = __revealWatchers.length - 1; i >= 0; i--) { const w = __revealWatchers[i]; if (w.el && __isInViewport(w.el, w.margin)) { w.fire(); __revealWatchers.splice(i, 1); } } } if (typeof window !== 'undefined' && !window.__revealInit) { window.__revealInit = true; window.addEventListener('scroll', __runWatchers, { passive: true }); window.addEventListener('resize', __runWatchers, { passive: true }); // Also tick a few times in case scroll never happens setInterval(__runWatchers, 250); } /* ─── Scroll Reveal hook ─── */ function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const fire = () => el.classList.add('in'); if (__isInViewport(el, 0)) { fire(); return; } const w = { el, margin: 60, fire }; __revealWatchers.push(w); // immediate kick setTimeout(__runWatchers, 30); return () => { const i = __revealWatchers.indexOf(w); if (i >= 0) __revealWatchers.splice(i, 1); }; }, []); return ref; } /* ─── Counter hook ─── */ function useCountUp(target, duration = 1600) { const [val, setVal] = useState(0); const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const fire = () => { const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(Math.round(target * eased)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }; if (__isInViewport(el, 0)) { fire(); return; } const w = { el, margin: 80, fire }; __revealWatchers.push(w); setTimeout(__runWatchers, 30); return () => { const i = __revealWatchers.indexOf(w); if (i >= 0) __revealWatchers.splice(i, 1); }; }, [target, duration]); return [val, ref]; } const fmtNum = (n) => n.toLocaleString('en-US'); /* ═════════════ NAVBAR ═════════════ */ function Navbar({ lang, setLang, t }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ ['#servicios', t.nav.services], ['#tecnologia', t.nav.tech], ['#sectores', t.nav.sectors], ['#clientes', t.nav.clients], ['#nosotros', t.nav.about], ['#casos', t.nav.cases], ['#contacto', t.nav.contact], ]; return ( ); } /* ═════════════ HERO ═════════════ */ const HERO_PHOTOS = [ 'assets/brand-1.png', 'assets/brand-3.png', 'assets/brand-4.png', ]; function HeroPhotoCarousel() { const [idx, setIdx] = useState(0); const [hover, setHover] = useState(false); useEffect(() => { if (hover) return; const t = setInterval(() => setIdx(i => (i + 1) % HERO_PHOTOS.length), 3000); return () => clearInterval(t); }, [hover]); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', width: '100%', maxWidth: 460, marginInline: 'auto', aspectRatio: '1 / 1', }} > {/* Red bloom backdrop */}
{/* White paper bubble */}
{/* Editorial corner ticks */} {[['10px', '10px', null, null], [null, '10px', '10px', null], ['10px', null, null, '10px'], [null, null, '10px', '10px']].map((edges, i) => { const [t, l, b, r] = edges; return ( ); })} {HERO_PHOTOS.map((src, i) => ( Equipo Gabssa ))}
{/* Progress pips */}
{HERO_PHOTOS.map((_, i) => ( ))}
); } function Hero({ t }) { const ref = useReveal(); return (

{t.hero.title1} {t.hero.titleAccent}{t.hero.title2}

{t.hero.sub}

{t.hero.cta1} {t.hero.cta2}
{[ ['ISO 9001', 'cyan'], ['ISO 27001', 'red'], ['PCI DSS', 'cyan'], ['NMX-R-025', 'red'], ['REPSE', 'cyan'], ].map(([code, tone]) => ( {code} ))}

{t.hero.trust}

); } /* ═════════════ FLOATING BRAND PHOTO ═════════════ */ function BrandPhoto({ src, alt, reveal = 'up', maxHeight = 'auto', glow = 'red' }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); const initialTransform = { up: 'translateY(40px)', right: 'translateX(40px)', left: 'translateX(-40px)', }[reveal] || 'translateY(40px)'; const glowColor = glow === 'cyan' ? 'rgba(34,211,238,0.28)' : 'rgba(224,69,69,0.28)'; return (
{alt}
); } Object.assign(window, { BrandPhoto, HeroPhotoCarousel }); /* ═════════════ CLIENTS MARQUEE ═════════════ */ function ClientsMarquee() { const clients = window.CLIENTS; const tile = (c, key) => c.logo ? (
{c.name}
) : (
{c.name}
); return (
{clients.map((c, i) => tile(c, `a-${i}`))} {clients.map((c, i) => tile(c, `b-${i}`))}
); } /* ═════════════ METRICS ═════════════ */ function MetricItem({ value, suffix, label }) { const [n, ref] = useCountUp(value); return (
{fmtNum(n)}{suffix}
{label}
); } function Metrics({ t }) { return (
{t.metrics.items.map((m, i) => ( ))}
); } Object.assign(window, { Navbar, Hero, ClientsMarquee, Metrics, useReveal, useCountUp });