// VeloFy LP — App orchestrator + Tweaks panel (shared state via tweakchange event)
const { useState: useS, useEffect: useE } = React;
const T = window.VFTop;
const B = window.VFBot;
// Sticky CTA shown after scrolling past hero
function StickyCta({ cta }) {
const [show, setShow] = useS(false);
useE(() => {
const onScroll = () => {
const y = window.scrollY;
const max = document.body.scrollHeight - window.innerHeight - 400;
setShow(y > 800 && y < max);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
const ctaCfg = T.CTA_VARIANTS[cta];
return (
);
}
// ─── App + Tweaks (single tree, shared state) ─────────────
function Root() {
const defaults = window.__TWEAK_DEFAULTS__ || { headline: 'A', cta: 'A', palette: 'default', showCalculator: true };
const [tw, setTweak] = window.useTweaks(defaults);
// Apply palette to
useE(() => {
document.documentElement.setAttribute('data-palette', tw.palette || 'default');
}, [tw.palette]);
return (
<>
{tw.showCalculator && }
setTweak('headline', v)}
options={[
{ value: 'A', label: 'Anti-Shopify' },
{ value: 'B', label: 'Mecanismo' },
{ value: 'C', label: 'Oferta' },
]}
/>
setTweak('cta', v)}
options={[
{ value: 'A', label: 'Criar loja' },
{ value: 'B', label: 'Parar de perder' },
]}
/>
setTweak('palette', v)}
options={[
{ value: 'default', label: 'Azul + Mint (brand)' },
{ value: 'midnight', label: 'Midnight blue' },
{ value: 'aqua', label: 'Aqua / mint forward' },
{ value: 'light', label: 'Light mode' },
]}
/>
setTweak('showCalculator', v)}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render();