// Main app — assembles all sections + Tweaks panel const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "headline": "C", "heroVariant": "floating", "accent": "#25D366", "pricingLayout": "table", "dark": false, "density": "compact" }/*EDITMODE-END*/; const ACCENTS = { "#25D366": { deep: "#0B7A53", ink: "#052e1a", tint: "#DCFBE7" }, "#1F8A5B": { deep: "#0E5A3A", ink: "#052B1B", tint: "#D5EFE0" }, "#F5A623": { deep: "#A66800", ink: "#3a2700", tint: "#FFEFC7" }, "#7A5AE0": { deep: "#523AA0", ink: "#1D1247", tint: "#EBE3FF" }, "#111111": { deep: "#000000", ink: "#F6F4EF", tint: "#E6E6E6" }, }; const App = () => { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply theme + density to React.useEffect(() => { const html = document.documentElement; html.setAttribute("data-theme", t.dark ? "dark" : "light"); html.setAttribute("data-density", t.density || "regular"); }, [t.dark, t.density]); // Apply accent palette via CSS vars on :root React.useEffect(() => { const a = ACCENTS[t.accent] || ACCENTS["#25D366"]; const html = document.documentElement; html.style.setProperty("--accent", t.accent); html.style.setProperty("--accent-deep", a.deep); html.style.setProperty("--accent-ink", a.ink); html.style.setProperty("--accent-tint", a.tint); }, [t.accent]); // Scroll-reveal: auto-tag eligible blocks and observe them React.useEffect(() => { const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (prefersReduced) return; const selectors = [ ".section-head", ".card", ".tile", "details.faq", ".hero-rail .float-tile", ".hero-trust", ]; const nodes = []; selectors.forEach(sel => { document.querySelectorAll(sel).forEach(n => { if (!nodes.includes(n)) nodes.push(n); }); }); // Add stagger delays for siblings inside grid/flex parents const seenParents = new WeakSet(); nodes.forEach(n => { const p = n.parentElement; if (!p || seenParents.has(p)) return; const style = window.getComputedStyle(p); if (style.display === "grid" || style.display === "flex") { seenParents.add(p); Array.from(p.children).forEach((child, i) => { if (nodes.includes(child) && i > 0 && i <= 8) { child.classList.add(`delay-${i}`); } }); } }); // Tag all nodes with .reveal and immediately mark above-fold ones as .in // to avoid a flash-out → flash-in. Force a reflow first so initial styles apply. const vh = window.innerHeight; nodes.forEach(n => { const rect = n.getBoundingClientRect(); n.classList.add("reveal"); // If it's already mostly in viewport at first paint, skip the animation. if (rect.top < vh * 0.85) { n.classList.add("in"); } }); const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("in"); io.unobserve(entry.target); } }); }, { rootMargin: "0px 0px -10% 0px", threshold: 0.08 }); nodes.forEach(n => { if (!n.classList.contains("in")) io.observe(n); }); return () => io.disconnect(); }, []); return (