// Main Migronis app – routing + state + tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroVariant": "ai",
"glass": "balanced",
"palette": "ivory"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [lang, setLangState] = React.useState('ru');
const [route, setRouteState] = React.useState({ name: 'home' });
const [aiOpen, setAIOpen] = React.useState(false);
const [aiQuery, setAIQuery] = React.useState('');
const [quizOpen, setQuizOpen] = React.useState(false);
const [callbackOpen, setCallbackOpen] = React.useState(false);
const [callbackPreset, setCallbackPreset] = React.useState(null);
// Mock user state for visual auth flow (no real backend wiring).
const [user, setUser] = React.useState(null);
const openCallback = (preset) => { setCallbackPreset(preset || null); setCallbackOpen(true); };
const handleLogin = (u) => setUser(u);
const handleLogout = () => { setUser(null); setRouteState({ name: 'home' }); };
// Preserve scroll position across language swaps – lock the visible anchor
// (top-most element under the header) and re-align after content reflows.
const setLang = (newLang) => {
if (newLang === lang) return;
const headerOffset = 80;
// Find an anchor element close to the top of the viewport
const candidates = document.querySelectorAll('main section, header');
let anchorEl = null;
let anchorOffset = 0;
for (const el of candidates) {
const rect = el.getBoundingClientRect();
if (rect.bottom > headerOffset) {
anchorEl = el;
anchorOffset = rect.top;
break;
}
}
setLangState(newLang);
if (anchorEl) {
// Wait for React to commit + fonts to settle, then re-anchor
requestAnimationFrame(() => requestAnimationFrame(() => {
const newTop = anchorEl.getBoundingClientRect().top + window.scrollY;
window.scrollTo({ top: newTop - anchorOffset, behavior: 'instant' });
}));
}
};
// Lightweight history stack so the Back button can return to the previous
// route rather than always dumping the user on Home. Skipped if the new
// route equals the current one or only changes scrollTo on the same name.
const [routeHistory, setRouteHistory] = React.useState([]);
const setRoute = (r) => {
setRouteState((cur) => {
if (r && cur && (cur.name !== r.name || cur.id !== r.id)) {
setRouteHistory((h) => [...h.slice(-19), cur]);
}
return r;
});
if (r.scrollTo) {
// wait a tick for the section to render
setTimeout(() => {
const el = document.getElementById(r.scrollTo);
if (el) window.scrollTo({ top: el.offsetTop - 100, behavior: 'smooth' });
}, 50);
} else {
window.scrollTo({ top: 0, behavior: 'instant' });
}
};
const goBack = () => {
setRouteHistory((h) => {
if (h.length === 0) {
setRouteState({ name: 'home' });
return [];
}
const prev = h[h.length - 1];
setRouteState(prev);
window.scrollTo({ top: 0, behavior: 'instant' });
return h.slice(0, -1);
});
};
// Expose globally so screen-level components can use it without prop drilling.
window.__goBack = goBack;
const openAI = (q) => {
setAIQuery(q || '');
setAIOpen(true);
};
// Apply palette + glass attributes to
React.useEffect(() => {
document.documentElement.dataset.palette = t.palette;
document.documentElement.dataset.glass = t.glass;
}, [t.palette, t.glass]);
return (
<>
{/* SEO / AEO / GEO – structured data per route */}
{/* Ambient gradient blobs (legacy – neutralised by Borderless styles.css) */}
openAI()}
openCallback={() => openCallback()}
user={user} onLogout={handleLogout}
/>
{route.name === 'home' && (
<>
openCallback()} />
{/* Consultation form – moved up: after programs, before tools (Nastya) */}
openCallback()}
variant="light"
kicker={lang === 'ru' ? 'Первый шаг' : 'First step'}
title={lang === 'ru'
? <>Начнём с бесплатной консультации
: <>Start with a free consultation}
body={lang === 'ru'
? 'Полчаса по видео. Вы рассказываете о своём запросе — наш юрист анализирует ваш бюджет и состав семьи и рассказывает о подходящих под ваш кейс вариантах. Этот разговор вас ни к чему не обязывает.'
: 'Half an hour over video. You describe your request — our lawyer reviews your budget and family and walks you through the options that fit. The call commits you to nothing.'} />
setQuizOpen(true)}
openCallback={openCallback}
/>
{/* CTA after tools – "Заинтересовала программа?" */}
openCallback()}
variant="dark"
kicker={lang === 'ru' ? 'Обсудим детали' : 'Discuss details'}
title={lang === 'ru'
? <>Заинтересовала программа?
: <>A program caught your eye?}
body={lang === 'ru'
? 'Обсудите её на 30-минутном звонке с нашим юристом. Задавайте любые вопросы, это бесплатно.'
: 'Discuss it on a 30-minute call with our lawyer. Ask anything — it\'s free.'} />
{/* Lifestyle photo break – bridge to "live here" */}
{/* Six destination cities slider */}
{/* Teaser pair: Переезд + Инвестиции */}
{/* Segments – per Nastya: "Кто наши клиенты?", 6 categories with CTA exits */}
Кто наши клиенты? : <>Who are our clients?}
kicker={lang === 'ru' ? 'У каждого – свой сценарий' : 'Each with their own playbook'}
body={lang === 'ru'
? 'У клиентов Migronis разные задачи. Кто-то ищет место для жизни семьи, кто-то готовит «план Б», кто-то приходит за налоговой оптимизацией. Нам есть, что предложить каждому.'
: 'Migronis clients arrive with different goals. Some look for a place to live with their family, some build a "Plan B", some optimise tax. We have an answer for each.'}
items={[
{ title: lang === 'ru' ? 'Семьи' : 'Families', body: lang === 'ru' ? 'Ищут новое место для жизни с детьми' : 'Looking for a new place to live with children', cta: lang === 'ru' ? 'Программы для семей' : 'Family programs' },
{ title: lang === 'ru' ? 'Лайфстайл-экспаты' : 'Lifestyle expats', body: lang === 'ru' ? 'Выбирают страну под свой образ жизни' : 'Pick a country to match their lifestyle', cta: lang === 'ru' ? 'Программы для экспатов' : 'Expat programs' },
{ title: lang === 'ru' ? 'Номады' : 'Digital nomads', body: lang === 'ru' ? 'Хотят работать удалённо из страны с приятным климатом и налогами' : 'Want to work remotely from a country with a good climate and taxes', cta: lang === 'ru' ? 'Программы для номадов' : 'Nomad programs' },
{ title: lang === 'ru' ? 'Стратеги' : 'Strategists', body: lang === 'ru' ? 'Понимают: один паспорт = риск. У них всегда есть план Б' : 'They know: one passport = a risk. They always keep a plan B', cta: lang === 'ru' ? 'Программы под план Б' : 'Plan B programs' },
{ title: lang === 'ru' ? 'Инвесторы' : 'Investors', body: lang === 'ru' ? 'Выбирают сочетание выгодных инвестиций и сильного паспорта' : 'Combine smart investments with a strong passport', cta: lang === 'ru' ? 'Программы для инвесторов' : 'Investor programs' },
{ title: lang === 'ru' ? 'Предприниматели' : 'Entrepreneurs', body: lang === 'ru' ? 'Обращаются, чтобы оптимизировать налоги' : 'Come to optimise their tax footprint', cta: lang === 'ru' ? 'Программы для бизнеса' : 'Business programs' },
]}
onItemSelect={(i) => {
// Segments 0-2 lean RBI (family/expats/nomads – live somewhere).
// Segments 3-5 lean CBI (Plan B / investors / entrepreneurs – passport/tax).
setRoute({ name: i < 3 ? 'residency' : 'citizenship' });
}}
/>
{/* CTA-3 · After case stories */}
openCallback()}
variant="dark"
kicker={lang === 'ru' ? 'Обсудим ваш кейс' : 'Discuss your case'}
title={lang === 'ru'
? <>А какой кейс у вас? Давайте разберём
: <>And what's your case? Let's work it out}
body={lang === 'ru'
? 'Забронируйте звонок с нашим юристом, чтобы узнать варианты под вашу ситуацию. Бесплатно.'
: 'Book a call with our lawyer to learn the options for your situation. Free of charge.'} />
{/* CTA-4 · End of page – final */}
openCallback()}
variant="light"
kicker={lang === 'ru' ? 'Готовы начать?' : 'Ready to start?'}
title={lang === 'ru'
? <>Начните с бесплатного звонка
: <>Start with a free call}
body={lang === 'ru'
? '30 минут с юристом Migronis. Получите чёткое понимание сроков, бюджета и следующих шагов.'
: '30 minutes with a Migronis lawyer. Walk away with a clear timeline, budget and next steps.'} />
)}
{route.name === 'program' && (
)}
{route.name === 'citizenship' && (
)}
{route.name === 'residency' && (
)}
{route.name === 'relocate' && (
)}
{route.name === 'invest' && (
)}
{route.name === 'apply' && (
)}
{route.name === 'auth' && (
)}
{route.name === 'dashboard' && (
user
?
:
)}
{route.name === 'compare' && (
)}
{route.name === 'about' && (
)}
{/* Modals */}
setAIOpen(false)}
lang={lang} initialQuery={aiQuery}
openCallback={() => openCallback()} />
setCallbackOpen(false)}
lang={lang}
preset={callbackPreset} />
{/* Quiz modal */}
{quizOpen && (