// app.jsx — Root: tweaks, language, font, theme, hero composition.
const { useState, useEffect, useMemo } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#c9a96a",
"rotationSpeed": 0.55,
"headingFont": "Fraunces",
"dark": true,
"lang": "tr"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// apply theme + accent + heading font as CSS vars on
useEffect(() => {
const root = document.documentElement;
root.style.setProperty("--accent", t.accent);
const fontStack = {
"Fraunces": "'Fraunces', Georgia, serif",
"Playfair Display": "'Playfair Display', Georgia, serif",
"Cormorant Garamond": "'Cormorant Garamond', Georgia, serif",
}[t.headingFont] || "'Fraunces', Georgia, serif";
root.style.setProperty("--serif", fontStack);
root.classList.toggle("light", !t.dark);
root.lang = t.lang;
}, [t.accent, t.headingFont, t.dark, t.lang]);
const T = window.I18N[t.lang] || window.I18N.tr;
// Update nav labels
useEffect(() => {
document.querySelectorAll('[data-i18n]').forEach(el => {
const k = el.getAttribute('data-i18n');
if (T[k]) el.textContent = T[k];
});
document.title = t.lang === "tr"
? "Balıklı Kalıp — Saf çelikten şekil alana"
: "Balıklı Kalıp — From pure steel to formed plastic";
}, [t.lang]);
return (
<>
{/* ─── HERO ─── */}
{T.hero_label}
{T.hero_h1_a}
{T.hero_h1_b}
{T.hero_tag}
{T.hero_meta1}
{T.hero_meta2}
{T.hero_meta3}
setTweak("accent", v)}
/>
setTweak("dark", v)}
/>
setTweak("headingFont", v)}
/>
setTweak("rotationSpeed", v)}
/>
setTweak("lang", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();