// Main App + Nav + Marquee strip const { useState, useEffect } = React; function Nav({ lang, setLang, t }) { const [scrolled, setScrolled] = useState(false); const [active, setActive] = useState('home'); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { const ids = ['home', 'services', 'work', 'process', 'impact', 'contact']; const sections = ids.map(id => document.getElementById(id)).filter(Boolean); if (!sections.length) return; const io = new IntersectionObserver((entries) => { // pick the entry with biggest intersection ratio that's currently intersecting const visible = entries.filter(e => e.isIntersecting) .sort((a, b) => b.intersectionRatio - a.intersectionRatio); if (visible[0]) setActive(visible[0].target.id); }, { rootMargin: '-30% 0px -50% 0px', threshold: [0, 0.2, 0.5, 1] }); sections.forEach(s => io.observe(s)); return () => io.disconnect(); }, [lang]); // expose active section to body for global accents + toggle .section-active class useEffect(() => { document.body.dataset.activeSection = active; document.querySelectorAll('section').forEach(s => { s.classList.toggle('section-active', s.id === active); }); }, [active]); const link = (id, label) => (
  • {label}
    • ); return ( ); } function SectionDivider({ variant = 'line' }) { return (
    {variant === 'line' && ( <> )} {variant === 'dots' && (
    {Array.from({ length: 24 }).map((_, i) => )}
    )} {variant === 'pulse' && (
    )}
    ); } function WhatsAppFAB({ t }) { const phone = '5511944502819'; // 55 (BR) + 11 (SP) + número const w = t.whatsapp || {}; const href = `https://wa.me/${phone}?text=${encodeURIComponent(w.message || '')}`; return ( {w.label} ); } function MarqueeStrip({ items }) { const doubled = [...items, ...items]; return (
    {doubled.map((it, i) => ( ✦ {it} ))}
    ); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "hue": 280, "accent": "#a855f7", "showCursor": true, "showGrid": true, "showGrain": true, "intensity": 8 }/*EDITMODE-END*/; function App() { const [lang, setLang] = useState('pt'); const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]; const t = window.CRIEVO_COPY[lang]; useCursor(); useReveal(); // Apply tweaks as CSS vars on root useEffect(() => { const root = document.documentElement; root.style.setProperty('--purple', tweaks.accent); // Derive other shades from hue const h = tweaks.hue; root.style.setProperty('--purple-bright', `oklch(0.78 0.18 ${h})`); root.style.setProperty('--purple-deep', `oklch(0.50 0.22 ${h})`); root.style.setProperty('--magenta', `oklch(0.65 0.27 ${(h + 40) % 360})`); root.style.setProperty('--line', `oklch(0.65 0.20 ${h} / 0.16)`); root.style.setProperty('--line-strong', `oklch(0.65 0.20 ${h} / 0.42)`); document.body.classList.toggle('no-cursor', !tweaks.showCursor); document.body.classList.toggle('no-grid', !tweaks.showGrid); document.body.classList.toggle('no-grain', !tweaks.showGrain); }, [tweaks]); // Re-trigger reveal observer whenever lang changes (so re-rendered text re-animates) useEffect(() => { setTimeout(() => { document.querySelectorAll('.reveal').forEach(el => { el.classList.add('in'); }); }, 50); }, [lang]); const TP = window.TweaksPanel; const TweakSection = window.TweakSection; const TweakSlider = window.TweakSlider; const TweakToggle = window.TweakToggle; const TweakColor = window.TweakColor; const TweakRadio = window.TweakRadio; return ( <>