; } /* ── Scroll reveal hook ─────────────────────────── */ function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); const obs = new IntersectionObserver( entries => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }), { threshold: 0.1 } ); els.forEach(el => obs.observe(el)); return () => obs.disconnect(); }); } /* ── Nav ───────────────────────────────────────── */ function Nav({ page, setPage }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const hamburgerRef = useRef(null); const [isMobile, setIsMobile] = useState(() => { if (typeof window === 'undefined' || !window.matchMedia) return false; return window.matchMedia('(max-width: 859px)').matches; }); useEffect(() => { const el = document.getElementById('scroll-root'); if (!el) return; const h = () => setScrolled(el.scrollTop > 20); el.addEventListener('scroll', h); return () => el.removeEventListener('scroll', h); }, []); useEffect(() => { const mq = window.matchMedia('(max-width: 859px)'); const on = () => setIsMobile(mq.matches); mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }, []); const links = [ { label:'Problemas', id:'problemas' }, { label:'Ofertas', id:'ofertas' }, { label:'Como funciona', id:'metodo' }, { label:'Demos', id:'demos' }, ]; const scrollTo = (id) => { setPage('home'); setMobileOpen(false); setTimeout(() => { const el = document.getElementById(id); if (el) { const root = document.getElementById('scroll-root'); root.scrollTop = el.offsetTop - 70; } }, 50); }; return ( <>

{links.map(l => ( ))} {/* ThemeToggle sempre visível (mobile + desktop) — troca rápida sem abrir menu */} {!isMobile && setPage('contato')}>Conversa inicial →} {isMobile && ( )}

setMobileOpen(false)} setPage={setPage} triggerRef={hamburgerRef}/> ); } /* ── Ticker ─────────────────────────────────────── */ function Ticker() { const items = ['Diagnóstico de operação','Visibilidade de dados','Dashboard executivo','Automação de rotinas administrativas','IA aplicada a PMEs','Escopo fechado','Entrada leve','Relatório automático','Site Institucional','Clareza operacional']; const all = [...items,...items]; return (

{all.map((item,i) => ( {item} ))}

); } /* ── Footer ─────────────────────────────────────── */ function Footer({ setPage }) { // Scroll para âncora dentro da home (volta pra home primeiro se estiver em outra page) const scrollToAnchor = (id) => { setPage('home'); setTimeout(() => { const el = document.getElementById(id); const root = document.getElementById('scroll-root'); if (el && root) root.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' }); }, 60); }; const cols = [ { title:'Ofertas', links:[ { l:'Diagnóstico', fn:() => scrollToAnchor('ofertas') }, { l:'Dashboard executivo', fn:() => scrollToAnchor('ofertas') }, { l:'Relatório automático', fn:() => scrollToAnchor('ofertas') }, { l:'Automação', fn:() => scrollToAnchor('ofertas') }, { l:'Site Express', fn:() => scrollToAnchor('sites') }, { l:'Site Institucional', fn:() => scrollToAnchor('sites') }, ]}, { title:'Como funciona', links:[ { l:'Problemas que atendemos', fn:() => scrollToAnchor('problemas') }, { l:'Método de entrega', fn:() => scrollToAnchor('metodo') }, { l:'Demos e samples', fn:() => scrollToAnchor('demos') }, { l:'Conversa inicial', fn:() => setPage('contato') }, ]}, { title:'Contato', links:[ { l:'contato@maximiza.ai', fn:() => { window.location.href = 'mailto:contato@maximiza.ai'; }, mono:true }, { l:'Abrir conversa', fn:() => setPage('contato') }, ]}, ]; return ( ); } /* ── Spotlight Wordmark (Resend-style mouse-tracked reveal) ── */ function SpotlightWordmark() { const ref = useRef(null); const [hover, setHover] = useState(false); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); el.style.setProperty('--mx', `${e.clientX - r.left - 200}px`); el.style.setProperty('--my', `${e.clientY - r.top - 200}px`); }; return (

setHover(true)} onMouseLeave={() => setHover(false)} style={{ position:'relative', width:'100%', overflow:'hidden', padding:'clamp(32px,6vw,80px) 0', cursor:'default', userSelect:'none', }} > {/* Dim base wordmark */}

MAXIMIZA

{/* Highlighted wordmark, masked to pointer spotlight */}

MAXIMIZA

{/* Soft radial glow that follows cursor (even stronger under spotlight) */}

); } Object.assign(window, { C, FONT_DISPLAY, FONT_SANS, FONT_LABEL, FONT_MONO, TONE, tone, LogoMark, LogoMarkAnimated, Icon, Btn, Pill, SectionLabel, Divider, Ticker, Nav, Footer, useReveal, ThemeProvider, ThemeToggle, useTheme, SpotlightWordmark }); /* ── Glass surface helper ── */ const GLASS = (opts = {}) => ({ background: opts.strong ? 'color-mix(in oklab, var(--bg3) 70%, transparent)' : 'color-mix(in oklab, var(--bg3) 55%, transparent)', backdropFilter: 'blur(18px) saturate(140%)', WebkitBackdropFilter: 'blur(18px) saturate(140%)', border: `1px solid color-mix(in oklab, var(--fg) 8%, transparent)`, boxShadow: opts.strong ? '0 20px 60px rgba(0,0,0,.18), inset 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent)' : '0 10px 32px rgba(0,0,0,.12), inset 0 1px 0 color-mix(in oklab, var(--fg) 4%, transparent)', }); /* ── Tilt card (subtle 3D on hover, follows cursor) ── */ function TiltCard({ children, strength = 6, style, ...rest }) { const ref = useRef(null); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width; const y = (e.clientY - r.top) / r.height; const rx = ((0.5 - y) * strength).toFixed(2); const ry = ((x - 0.5) * strength).toFixed(2); el.style.transform = `perspective(900px) rotateX(${rx}deg) rotateY(${ry}deg) translateZ(0)`; el.style.setProperty('--sx', `${x * 100}%`); el.style.setProperty('--sy', `${y * 100}%`); }; const reset = () => { const el = ref.current; if (!el) return; el.style.transform = 'perspective(900px) rotateX(0) rotateY(0) translateZ(0)'; }; return (

{children} {/* Shine overlay that follows cursor */}

); } /* ── Number count-up (animates when element enters viewport) ── */ function CountUp({ to, from = 0, duration = 1400, prefix = '', suffix = '', decimals = 0, format }) { const ref = useRef(null); const [val, setVal] = useState(from); const done = useRef(false); useEffect(() => { const el = ref.current; if (!el) return; const runAnim = () => { if (done.current) return; done.current = true; const t0 = performance.now(); const tick = (now) => { const p = Math.min(1, (now - t0) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(from + (to - from) * eased); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }; const check = () => { const rect = el.getBoundingClientRect(); return rect.top < window.innerHeight + 100 && rect.bottom > -100; }; const raf1 = requestAnimationFrame(() => { if (check()) { runAnim(); return; } const root = document.getElementById('scroll-root') || null; const io = new IntersectionObserver((entries) => { for (const en of entries) if (en.isIntersecting) { runAnim(); io.disconnect(); } }, { threshold: 0.3, root }); io.observe(el); }); const safety = setTimeout(() => runAnim(), 2500); return () => { cancelAnimationFrame(raf1); clearTimeout(safety); }; }, [to, from, duration]); const display = format ? format(val) : prefix + val.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, '.') + suffix; return {display}; } /* ── Word-by-word reveal (stagger fade+rise) ── */ function WordReveal({ children, delayBase = 0, stagger = 60, className = '', style }) { // Accept string or array of segments ({t, gradient?, className?}) const segs = Array.isArray(children) ? children : [{t: String(children)}]; let idx = 0; return ( {segs.map((seg, si) => { const words = seg.t.split(/(\s+)/); return words.map((w, wi) => { if (/^\s+$/.test(w)) return {w}; const d = delayBase + idx * stagger; idx++; const inner = ( {w} ); return {inner}; }); })} ); } Object.assign(window, { TiltCard, CountUp, WordReveal, GLASS }); /* ── HeroMotion3D — 3 esferas Three.js interativas ──────── Breakpoint-aware: - Desktop (≥1024px): Three.js full (3 orbs + physics + iridescence + OrbitControls) - Tablet (768–1023px): Three.js full (mesmo código — performance hoje é OK) - Mobile (<768px): LogoMarkAnimated estático (SVG) — ganha performance e layout compacto - prefers-reduced-motion: sempre LogoMarkAnimated ──────────────────────────────────────────────── */ function HeroMotion3D({ size = 320 }) { const ref = useRef(null); const [isMobile, setIsMobile] = useState(() => { if (typeof window === 'undefined' || !window.matchMedia) return false; return window.matchMedia('(max-width: 767px)').matches; }); const [prefersReduced, setPrefersReduced] = useState(() => { if (typeof window === 'undefined' || !window.matchMedia) return false; return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }); useEffect(() => { const mqMobile = window.matchMedia('(max-width: 767px)'); const mqReduced = window.matchMedia('(prefers-reduced-motion: reduce)'); const onMobile = () => setIsMobile(mqMobile.matches); const onReduced = () => setPrefersReduced(mqReduced.matches); mqMobile.addEventListener('change', onMobile); mqReduced.addEventListener('change', onReduced); return () => { mqMobile.removeEventListener('change', onMobile); mqReduced.removeEventListener('change', onReduced); }; }, []); useEffect(() => { // Só inicializa Three.js quando NÃO é mobile nem reduced-motion if (isMobile || prefersReduced) return; let cleanup = null; const start = () => { if (!ref.current) return; if (typeof window.initHeroMotion === 'function') { cleanup = window.initHeroMotion(ref.current); } else { window.addEventListener('hero-motion-ready', start, { once: true }); } }; start(); return () => { window.removeEventListener('hero-motion-ready', start); if (typeof cleanup === 'function') cleanup(); }; }, [isMobile, prefersReduced]); // Fallback: mobile OU reduced-motion if (isMobile || prefersReduced) { return (

); } return (

); } /* ── Grid Background Layer ── */ function GridBackground() { return

; } /* ── Orbs Aurora Background ── */ function OrbsBackground({ variant = 'blue-teal', intensity = 1 }) { const opacity = intensity; const presets = { 'blue-teal': [ { cls:'orb-blue', size:520, x:'-10%', y:'-20%', delay:0 }, { cls:'orb-teal', size:420, x:'80%', y:'60%', delay:1 }, ], 'blue-double': [ { cls:'orb-blue', size:480, x:'-15%', y:'10%', delay:0 }, { cls:'orb-navy', size:380, x:'70%', y:'-10%', delay:2 }, ], 'teal-single': [ { cls:'orb-teal', size:520, x:'50%', y:'50%', delay:0 }, ], }; const orbs = presets[variant] || presets['blue-teal']; return (

{orbs.map((o, i) => (

))}

); } /* ── Mobile Nav Overlay ── Acessibilidade (T2.1 da revisão analista): - `inert` quando fechado → remove do tab order e do accessibility tree - `aria-hidden` dinâmico - Escape fecha - Focus trap simples (Tab cíclico entre primeiro/último link) - Retorna foco pro botão que abriu (via trigger ref) ao fechar */ function MobileNavOverlay({ open, onClose, setPage, triggerRef }) { const overlayRef = useRef(null); const firstLinkRef = useRef(null); const lastFocusableRef = useRef(null); const links = [ { label:'Problemas', id:'problemas' }, { label:'Ofertas', id:'ofertas' }, { label:'Sites', id:'sites' }, { label:'Como funciona', id:'metodo' }, { label:'Demos', id:'demos' }, { label:'FAQ', id:'faq' }, ]; const scrollTo = (id) => { setPage('home'); onClose(); setTimeout(() => { const el = document.getElementById(id); if (el) { const root = document.getElementById('scroll-root'); root.scrollTop = el.offsetTop - 70; } }, 50); }; // Escape + focus management useEffect(() => { if (!open) { // Ao fechar, devolve foco ao trigger (hambúrguer) if (triggerRef && triggerRef.current) { // timeout pra aguardar fim da animação de fade-out const id = setTimeout(() => { try { triggerRef.current.focus(); } catch (e) {} }, 100); return () => clearTimeout(id); } return; } // Foco inicial no primeiro link const focusId = setTimeout(() => { if (firstLinkRef.current) { try { firstLinkRef.current.focus(); } catch (e) {} } }, 80); const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); onClose(); return; } if (e.key === 'Tab' && overlayRef.current) { // Focus trap cíclico const focusable = overlayRef.current.querySelectorAll( 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])' ); if (focusable.length === 0) return; const first = focusable[0]; const last = focusable[focusable.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } }; document.addEventListener('keydown', onKey); return () => { clearTimeout(focusId); document.removeEventListener('keydown', onKey); }; }, [open, onClose, triggerRef]); // Travamos scroll do body quando aberto useEffect(() => { if (open) { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; } }, [open]); return ( ); } Object.assign(window, { HeroMotion3D, GridBackground, OrbsBackground, MobileNavOverlay });