/* global React, ReactDOM, window, document */ // App shell — wires theme/lang/headline state to + nav controls, // and mounts the page. const { useState, useEffect, useCallback } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "headlineIndex": 0, "accentBoost": false }/*EDITMODE-END*/; function App() { const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS); // Language is separate — controlled by the nav switch, persisted in localStorage. const [lang, setLangState] = useState(() => { try { return localStorage.getItem("dolado_lang") || "en"; } catch (e) { return "en"; } }); const setLang = (l) => { setLangState(l); try { localStorage.setItem("dolado_lang", l); } catch (e) {} document.documentElement.lang = l === "en" ? "en" : "pt-BR"; }; useEffect(() => { document.documentElement.lang = lang === "en" ? "en" : "pt-BR"; }, [lang]); // Theme is applied to so it covers full page including modal. useEffect(() => { document.documentElement.setAttribute("data-theme", tweaks.theme || "dark"); }, [tweaks.theme]); // Accent boost: a hint dialed up — slightly more orange in the design. useEffect(() => { document.documentElement.style.setProperty( "--accent", tweaks.accentBoost ? "#ff6a00" : "#ff7900" ); }, [tweaks.accentBoost]); // Modal const [modalOpen, setModalOpen] = useState(false); const openModal = useCallback(() => setModalOpen(true), []); const closeModal = useCallback(() => setModalOpen(false), []); // Smooth-scroll for anchor links inside the doc useEffect(() => { const onClick = (e) => { const a = e.target.closest("a[href^='#']"); if (!a) return; const id = a.getAttribute("href").slice(1); if (!id) return; if (id === "top") { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); return; } const target = document.getElementById(id); if (target) { e.preventDefault(); const y = target.getBoundingClientRect().top + window.scrollY - 64; window.scrollTo({ top: y, behavior: "smooth" }); } }; document.addEventListener("click", onClick); return () => document.removeEventListener("click", onClick); }, []); const COPY = window.DOLADO_COPY; const t = COPY[lang]; const headlineIdx = Math.max(0, Math.min(t.hero.headlines.length - 1, tweaks.headlineIndex | 0)); const S = window.DoladoSections; return ( <> ); } /* ============================================================ Tweaks panel ============================================================ */ function DoladoTweaks({ tweaks, setTweak, t }) { const headlineOptions = t.hero.headlines.map((h, i) => ({ value: i, label: `${String(i + 1).padStart(2, "0")} · ${h.length > 50 ? h.slice(0, 48) + "…" : h}`, })); return ( setTweak("theme", v)} options={[ { value: "dark", label: "Dark" }, { value: "light", label: "Light" }, ]} /> setTweak("accentBoost", v)} /> setTweak("headlineIndex", Number(v))} options={headlineOptions} /> ); } // Mount const root = ReactDOM.createRoot(document.getElementById("root")); root.render();