/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakText, TweakRadio, TweakToggle, Nav, Hero, LogoBar, ValueStats, HowItWorks, OpportunitiesShowcase, WhatsAppHandoff, ReportsShowcase, Testimonials, Pricing, FAQ, CTA, Footer */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "hybrid", "accent": "#FF3B30", "headline": "Your AI receptionist for tattoo bookings.", "showLogoBar": true }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Push accent into CSS custom property for global use React.useEffect(() => { document.documentElement.style.setProperty('--accent', t.accent); // Approximate glow color: hex -> rgba 0.45 const hex = t.accent.replace('#',''); if (hex.length === 6) { const r = parseInt(hex.slice(0,2), 16); const g = parseInt(hex.slice(2,4), 16); const b = parseInt(hex.slice(4,6), 16); document.documentElement.style.setProperty('--accent-glow', `rgba(${r},${g},${b},0.45)`); document.documentElement.style.setProperty('--accent-soft', `rgba(${r},${g},${b},0.12)`); } }, [t.accent]); // Apply theme class to React.useEffect(() => { document.body.classList.toggle('theme-light', t.theme === 'light'); }, [t.theme]); const isLight = t.theme === 'light'; // Tweaks panel only visible if URL has ?tweaks=1 (dev mode for live editing) const showTweaks = typeof window !== 'undefined' && window.location.search.includes('tweaks=1'); return ( <>

{t.showLogoBar && }