/* MOB.tv — landing page shell (Nav, MenuSheet, Footer, Tweaks, hooks) */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ─── Smooth scroll with sticky-nav offset ─────────────────────── */ function smoothScrollTo(id) { const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 24; window.scrollTo({ top, behavior: 'smooth' }); } window.smoothScrollTo = smoothScrollTo; /* ─── Ripple effect on button press ─────────────────────────────── */ function rippleAt(el, x, y) { const rect = el.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 1.2; const ripple = document.createElement('span'); ripple.className = 'ripple'; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x - rect.left - size / 2}px`; ripple.style.top = `${y - rect.top - size / 2}px`; el.appendChild(ripple); setTimeout(() => ripple.remove(), 700); } function useRipple() { return useCallback((e) => { const el = e.currentTarget; const x = e.clientX ?? (e.touches?.[0]?.clientX ?? el.getBoundingClientRect().left + el.offsetWidth / 2); const y = e.clientY ?? (e.touches?.[0]?.clientY ?? el.getBoundingClientRect().top + el.offsetHeight / 2); rippleAt(el, x, y); }, []); } /* ─── Reveal-on-scroll ─────────────────────────────────────────── */ function useReveal() { useEffect(() => { const observed = new WeakSet(); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -6% 0px' } ); const observe = () => { document.querySelectorAll('.reveal').forEach((el) => { if (!observed.has(el)) { observed.add(el); io.observe(el); } }); }; observe(); // Also re-scan after any DOM updates (sections mount asynchronously) const mo = new MutationObserver(observe); mo.observe(document.body, { childList: true, subtree: true }); return () => { io.disconnect(); mo.disconnect(); }; }, []); } /* ─── Scroll state ─────────────────────────────────────────────── */ function useScrollState() { const [progress, setProgress] = useState(0); const [scrolled, setScrolled] = useState(false); useEffect(() => { let raf; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const max = document.documentElement.scrollHeight - window.innerHeight; const p = max > 0 ? Math.min(1, window.scrollY / max) : 0; setProgress(p); setScrolled(window.scrollY > 32); }); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); }; }, []); return { progress, scrolled }; } /* ─── Scroll-spy active section ────────────────────────────────── */ function useActiveSection(ids) { const [active, setActive] = useState(ids[0]); useEffect(() => { const observers = []; ids.forEach((id) => { const el = document.getElementById(id); if (!el) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) setActive(id); }); }, { rootMargin: '-40% 0px -55% 0px' } ); io.observe(el); observers.push(io); }); return () => observers.forEach((o) => o.disconnect()); }, [ids.join('|')]); return active; } /* ─── Nav ──────────────────────────────────────────────────────── */ const NAV_ITEMS = [ { id: 'beneficios', label: 'Benefícios' }, { id: 'catalogo', label: 'Catálogo' }, { id: 'dispositivos', label: 'Dispositivos' }, { id: 'planos', label: 'Planos' }, ]; function Nav({ scrolled, onOpenMenu, menuOpen, active }) { const trackRef = useRef(null); const linkRefs = useRef({}); const [ind, setInd] = useState({ left: 0, width: 0, visible: false }); useEffect(() => { const el = linkRefs.current[active]; if (!el || !trackRef.current) { setInd((s) => ({ ...s, visible: false })); return; } const trackRect = trackRef.current.getBoundingClientRect(); const r = el.getBoundingClientRect(); setInd({ left: r.left - trackRect.left, width: r.width, visible: true, }); }, [active]); const ripple = useRipple(); return ( ); } function MenuSheet({ open, onClose }) { useEffect(() => { document.body.classList.toggle('menu-open', open); return () => document.body.classList.remove('menu-open'); }, [open]); useEffect(() => { if (!open) return; const onKey = (e) => e.key === 'Escape' && onClose(); window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, onClose]); return (
    {NAV_ITEMS.map((it, i) => (
  1. { e.preventDefault(); window.tracker?.trackClick('menu_sheet_nav_' + it.id); onClose(); setTimeout(() => smoothScrollTo(it.id), 320); }} > {it.label} 0{i + 1}
    2. ))}
{ e.preventDefault(); window.tracker?.trackClick('menu_sheet_cta'); onClose(); setTimeout(() => smoothScrollTo('cta'), 320); }} > Quero Realizar Meu Teste
MOB.TV 2026
); } /* ─── Footer ──────────────────────────────────────────────────── */ function Footer() { return ( ); } /* ─── Mobile floating dock CTA ────────────────────────────────── */ function MobileDock({ visible, trialHours }) { return (
Seu acesso grátis foi liberado por {trialHours}.
{ e.preventDefault(); window.tracker?.trackClick('floating_dock_cta'); smoothScrollTo('cta'); }} > Quero testar
); } /* ─── Tweaks ──────────────────────────────────────────────────── */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "default", "motion": "normal", "dock": true }/*EDITMODE-END*/; function Tweaks() { const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS); useEffect(() => { document.body.setAttribute('data-accent', t.accent); }, [t.accent]); useEffect(() => { document.body.setAttribute('data-motion', t.motion); }, [t.motion]); useEffect(() => { document.body.setAttribute('data-dock', t.dock ? 'on' : 'off'); }, [t.dock]); return ( setTweak('accent', v)} options={[ { value: 'default', label: 'Amarelo cinematográfico' }, { value: 'ember', label: 'Âmbar' }, { value: 'violet', label: 'Violeta' }, { value: 'lime', label: 'Lima' }, { value: 'ice', label: 'Gelo (mono)' }, ]} /> setTweak('motion', v)} options={[ { value: 'normal', label: 'Normal' }, { value: 'calm', label: 'Calmo' }, { value: 'off', label: 'Off' }, ]} /> setTweak('dock', v)} /> ); } /* ─── App ─────────────────────────────────────────────────────── */ function App() { useReveal(); const { progress, scrolled } = useScrollState(); const SECTION_IDS = useMemo(() => ['beneficios', 'catalogo', 'dispositivos', 'cta'], []); const active = useActiveSection(SECTION_IDS); const [menuOpen, setMenuOpen] = useState(false); const [dock, setDock] = useState(true); const [trialHours, setTrialHours] = useState("3h"); // Fetch trial hours config from database useEffect(() => { const loadTrialHours = async () => { if (window.tracker?.getTrialHours) { const hours = await window.tracker.getTrialHours(); if (hours) { setTrialHours(hours + "h"); } } }; loadTrialHours(); }, []); // Listen for dock toggle from the tweaks panel useEffect(() => { const initial = document.body.getAttribute('data-dock'); if (initial !== null) setDock(initial !== 'off'); const obs = new MutationObserver(() => { setDock(document.body.getAttribute('data-dock') !== 'off'); }); obs.observe(document.body, { attributes: true, attributeFilter: ['data-dock'] }); return () => obs.disconnect(); }, []); const showDock = dock && scrolled && !menuOpen && progress < 0.9; return ( <>