// app.jsx — composition + Tweaks // Mounts everything, applies palette via [data-palette] on . const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": ["#9A5566", "#F4EEE6", "#2B1B22"], "headline": "editorial", "showChannels": true, "showCare": true, "showLocations": true, "showPersonas": true, "ariaPosition": "after-personas", "displayFont": "instrument", "bodyFont": "geist" }/*EDITMODE-END*/; const PALETTE_OPTIONS = [ { id: "rosewood", swatches: ["#9A5566", "#F4EEE6", "#2B1B22"] }, { id: "snow", swatches: ["#9A5566", "#FAFAF7", "#14181A"] }, { id: "forest", swatches: ["#2C5042", "#F2EEE5", "#131C18"] }, { id: "clinical", swatches: ["#1F3A6B", "#F6F7F9", "#0E1726"] }, ]; function paletteIdFor(swatches) { const key = JSON.stringify(swatches); const m = PALETTE_OPTIONS.find((p) => JSON.stringify(p.swatches) === key); return m ? m.id : "rosewood"; } const DISPLAY_FONT_MAP = { instrument: '"Instrument Serif", Georgia, serif', newsreader: '"Newsreader", Georgia, serif', dmserif: '"DM Serif Display", Georgia, serif', }; const BODY_FONT_MAP = { geist: '"Geist", ui-sans-serif, system-ui, sans-serif', manrope: '"Manrope", ui-sans-serif, system-ui, sans-serif', ibmplex: '"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif', }; const TONE_HEADLINES = { editorial: { h1: Dental care
that meets you
where you are., sub: "Book by WhatsApp, SMS, Telegram, webchat or email — in English or French — and talk to a real clinician within hours. Four clinics across Manitoba, one patient record, zero repeating yourself.", }, clinical: { h1: Modern dentistry,
quietly excellent., sub: "Four clinics. Twenty-five chairs. One booking system, one chart, one privacy policy. Reach us on any of five channels and we'll route you to the right clinician within hours.", }, warm: { h1: Smile like you mean it.
We'll handle the rest., sub: "Maplesmile is a family of four Manitoba dental clinics. Message us, call us, walk in — in English or French. We'll remember you next time.", }, }; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [whyOpen, setWhyOpen] = React.useState(false); const openWhy = React.useCallback(() => setWhyOpen(true), []); const closeWhy = React.useCallback(() => setWhyOpen(false), []); // Apply palette + fonts to root React.useEffect(() => { document.documentElement.setAttribute("data-palette", paletteIdFor(t.palette)); document.documentElement.style.setProperty("--font-display", DISPLAY_FONT_MAP[t.displayFont] || DISPLAY_FONT_MAP.instrument); document.documentElement.style.setProperty("--font-body", BODY_FONT_MAP[t.bodyFont] || BODY_FONT_MAP.geist); }, [t.palette, t.displayFont, t.bodyFont]); // Inject extra Google Font requests if a non-default font is chosen. React.useEffect(() => { const families = []; if (t.displayFont === "newsreader") families.push("Newsreader:opsz,wght@6..72,300..600"); if (t.displayFont === "dmserif") families.push("DM+Serif+Display"); if (t.bodyFont === "manrope") families.push("Manrope:wght@300..700"); if (t.bodyFont === "ibmplex") families.push("IBM+Plex+Sans:wght@300;400;500;600"); if (!families.length) return; const id = "twk-font-extras"; let link = document.getElementById(id); if (!link) { link = document.createElement("link"); link.id = id; link.rel = "stylesheet"; document.head.appendChild(link); } link.href = `https://fonts.googleapis.com/css2?${families.map((f) => `family=${f}`).join("&")}&display=swap`; }, [t.displayFont, t.bodyFont]); const onBook = () => { const el = document.getElementById("contact"); if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" }); }; const tone = TONE_HEADLINES[t.headline] || TONE_HEADLINES.warm; // Decide section order based on ariaPosition const sections = { channels: t.showChannels && , care: t.showCare && , locations: t.showLocations && , personas: t.showPersonas && , aria: , }; let order; switch (t.ariaPosition) { case "after-hero": order = ["aria", "channels", "care", "locations", "personas"]; break; case "after-channels": order = ["channels", "aria", "care", "locations", "personas"]; break; case "after-care": order = ["channels", "care", "aria", "locations", "personas"]; break; case "after-locations": order = ["channels", "care", "locations", "aria", "personas"]; break; case "after-personas": default: order = ["channels", "care", "locations", "personas", "aria"]; break; } return (

{order.map((k) => {sections[k]})}

); } // Hero w/ tweakable headline copy function HeroTweakable({ tone, onBook, onWhy }) { return (

Four clinics · Manitoba · est. 2019

{tone.h1}

{tone.sub}

Call +1 249 800 0333

clinics

11k+

patients

<3h

median first reply

EN · FR-CA

every channel

); } ReactDOM.createRoot(document.getElementById("root")).render();