// app.jsx — root App with language toggle, Tweaks, and reveal observer.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"variant": "refined",
"accent": "#b8893d",
"fontAr": "IBM Plex Sans Arabic",
"dark": false,
"lang": "ar"
}/*EDITMODE-END*/;
const ACCENT_PALETTES = {
"#b8893d": { gold: "#b8893d", soft: "#d4b277", deep: "#8a6422", tint: "#f3ead6", label: "Warm Gold" },
"#c8a97e": { gold: "#c8a97e", soft: "#dec4a2", deep: "#9a7a4f", tint: "#f5ecde", label: "Soft Beige" },
"#1E3A8A": { gold: "#1E3A8A", soft: "#3b5bb9", deep: "#162a64", tint: "#e0e7f3", label: "Deep Blue" },
"#0f7a5b": { gold: "#0f7a5b", soft: "#3aa783", deep: "#0a5a42", tint: "#dcefe6", label: "Forest" },
};
const FONTS_AR = {
"IBM Plex Sans Arabic": "'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif",
"Tajawal": "'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif",
"Cairo": "'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif",
"Rubik": "'Rubik', 'IBM Plex Sans Arabic', system-ui, sans-serif",
};
function App() {
const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
const lang = t.lang;
const dict = window.TRANSLATIONS[lang];
const isRtl = dict.dir === "rtl";
// Sync + dir
React.useEffect(() => {
document.documentElement.lang = lang;
document.documentElement.dir = dict.dir;
}, [lang, dict.dir]);
// Dark mode class
React.useEffect(() => {
document.body.classList.toggle("theme-dark", !!t.dark);
document.body.classList.toggle("variant-bold", t.variant === "bold");
}, [t.dark, t.variant]);
// Apply accent + font as custom props
const accent = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES["#b8893d"];
const styleVars = {
"--gold": accent.gold,
"--gold-soft": accent.soft,
"--gold-deep": accent.deep,
"--gold-tint": accent.tint,
"--ff-ar": FONTS_AR[t.fontAr] || FONTS_AR["IBM Plex Sans Arabic"],
"--ff-display-ar": FONTS_AR[t.fontAr] || FONTS_AR["IBM Plex Sans Arabic"],
};
// Scroll reveal observer — scoped to the app shell
React.useEffect(() => {
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
},
{ threshold: 0.1, rootMargin: "0px 0px -40px 0px" }
);
document.querySelectorAll(".reveal:not(.in)").forEach((n) => io.observe(n));
return () => io.disconnect();
}, [lang, t.variant]);
// WhatsApp link
const wa = "01062578541";
const waInternational = "20" + wa.replace(/^0/, "");
const waMessage = isRtl
? "أهلًا، حابب أعرف تفاصيل أكتر عن مواقعكم"
: "Hi! I'd like to know more about your websites.";
const waLink = `https://wa.me/${waInternational}?text=${encodeURIComponent(waMessage)}`;
const toggleLang = () => setTweak("lang", lang === "ar" ? "en" : "ar");
// Build the dict object the components need, including dir/lang quick-access
const T = { ...dict, dir: dict.dir, lang };
return (
setTweak("lang", v)}
/>
setTweak("variant", v)}
/>
setTweak("dark", v)}
/>
setTweak("accent", v)}
/>
setTweak("fontAr", v)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();