setName(e.target.value)} onKeyDown={e=>e.key==='Enter' && handleSave()}/>
{presets.length === 0 ? (
Sin presets guardados.
) : (
{presets.map(p => (
{p.name}
{fmtDate(p.savedAt)}
{p.data.theme} · {p.data.lang || 'es'} · pw {p.data.pageWidth}% · t {p.data.titleScale}% · b {p.data.bodyScale}% · f {p.data.photoScale}%
))}
)}
{presets.length === 0 && (
)}
);
}
function App() {
const [t, setTweak] = useTweaks({
...TWEAKS,
logoVersion: normalizeLogoVersion(lsGet(LOGO_VERSION_KEY) || TWEAKS.logoVersion),
});
const [photoIndex, setPhotoIndex] = React.useState(t.selectedPhoto || 0);
const [activeId, setActiveId] = React.useState(null);
const logoVersion = normalizeLogoVersion(t.logoVersion);
React.useEffect(() => { captureAttribution(); }, []);
React.useEffect(() => { setTweak('selectedPhoto', photoIndex); }, [photoIndex]);
React.useEffect(() => {
if (t.logoVersion !== logoVersion) {
setTweak('logoVersion', logoVersion);
}
}, [t.logoVersion, logoVersion]);
React.useEffect(() => { lsSet(LOGO_VERSION_KEY, logoVersion); }, [logoVersion]);
React.useEffect(() => {
const ids = ['areas','servicios','socials','contacto'];
const handle = () => {
let current = null;
for (const id of ids) {
const el = document.getElementById(id);
if (!el) continue;
const r = el.getBoundingClientRect();
if (r.top <= 120 && r.bottom > 120) { current = id; break; }
}
setActiveId(current);
};
window.addEventListener('scroll', handle, {passive:true});
handle();
return () => window.removeEventListener('scroll', handle);
}, []);
// Resolve current lang
const lang = t.lang || 'es';
const L = C.langs[lang] || C.langs.es;
const UI = L.ui;
// Resolve theme: mode toggle switches between cream (light) and dark
const effectiveTheme = t.mode === 'dark' ? 'dark' : (t.theme === 'dark' ? 'cream' : t.theme);
const themeColors = effectiveTheme === 'dark'
? { gold: '#c9a972', navInk: '#f0ebe1' }
: effectiveTheme === 'bone'
? { gold: '#a8854b', navInk: '#f0ebe1' }
: { gold: '#b8965a', navInk: '#f0ebe1' };
const logoPalette = effectiveTheme === 'dark'
? { primary: '#5a87bf', secondary: '#c9a972', tertiary: '#9bbfe3' }
: effectiveTheme === 'bone'
? { primary: '#f0ebe1', secondary: '#a8854b', tertiary: '#d8c4a3' }
: { primary: '#f0ebe1', secondary: '#b8965a', tertiary: '#dbc59f' };
// Update document language
React.useEffect(() => {
document.documentElement.lang = lang === 'zh' ? 'zh-CN' : lang;
}, [lang]);
return (
<>
{withEm(UI.socials_title)}
{UI.socials_sub}