import React, { useEffect, useId, useRef, useState, type ReactNode, } from "react"; import { createRoot } from "react-dom/client"; import "./styles.css"; type Language = "ru" | "en"; type Scene = "before" | "after" | "connection"; type Product = "pulse" | "connect" | "scenario"; type Panel = | Product | "account" | "messages" | "ecosystem" | "sparks" | null; type IconName = | "arrow" | "external" | "close" | "check" | "spark" | "message" | "apps" | "lock"; type Person = { id: string; name: string; age: number; city: string; interest: string; image: string; }; type NextMove = { product: Product; label: string; title: string; description: string; action: string; note: string; }; /* * All data below is illustrative. * Portraits do not identify actual Ember members. * No compatibility or private preferences are inferred from photographs. */ const PEOPLE: Person[] = [ { id: "alex", name: "Alex", age: 31, city: "Berlin", interest: "Cinema", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=650&h=850&q=85", }, { id: "leo", name: "Leo", age: 29, city: "Berlin", interest: "Late nights", image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=650&h=850&q=85", }, { id: "noah", name: "Noah", age: 33, city: "Berlin", interest: "Design", image: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=650&h=850&q=85", }, ]; const INTERESTS = [ { id: "latex", label: "Latex", style: "berry" }, { id: "cinema", label: "Cinema", style: "cream" }, { id: "nights", label: "Late nights", style: "rose" }, ] as const; const COPY = { ru: { today: "Сегодня", messages: "Сообщения", progress: "Твой путь", language: "Язык интерфейса", account: "Аккаунт Майи", ecosystem: "Продукты Ember", greeting: "С возвращением, Майя", heading: "Ближе к твоим", headingAccent: "желаниям.", intro: "Люди, с которыми интересно. Шаги, которые помогают узнать друг друга.", searching: "Открыта к знакомствам", connected: "Есть Connection", nextMove: "Следующий шаг", nextIndex: "ЛИЧНЫЙ МАРШРУТ", peopleEyebrow: "ТВОЙ КРУГ ВОЗМОЖНОСТЕЙ", peopleTitle: "Кто тебя зацепит?", peopleIntro: "Подборка доступна уже сейчас. Pulse добавит больше контекста о предпочтениях.", peopleAfter: "Pulse пройден. Разрешённые предпочтения могут дополнить поиск.", peopleConnection: "Наличие Connection не меняет твою доступность для знакомств автоматически.", menAction: "Смотреть мужчин", peopleNote: "Предварительная подборка · без оценки совместимости", peopleNoteAfter: "Демонстрационная подборка · без реального пересчёта", openPerson: "Посмотреть", interestEyebrow: "ТВОЙ КОНТЕКСТ", interestTitle: "То, что тебя притягивает.", interestIntro: "Интересы задают направление — для людей, идей и будущих встреч.", interestIdle: "Выбери интерес, чтобы увидеть, какой контекст он добавляет.", interestCinema: "Cinema — повод познакомиться через любимые фильмы и идеи свиданий.", interestLatex: "Latex — интерес для исследования. Чужие предпочтения не определяются по фото.", interestNights: "Late nights — контекст для вечерних встреч и людей с похожим ритмом.", interestDisclaimer: "В прототипе выбор раскрывает контекст, но не меняет профиль и не запускает поиск.", journeyEyebrow: "МАЛЕНЬКИЕ ШАГИ. БОЛЬШЕ ВОЗМОЖНОСТЕЙ.", journeyTitle: "Знакомства — не только первое фото.", journeyText: "Узнавай себя, находи точки совпадения и открывай новые возможности Ember.", level: "Уровень", profileReady: "База профиля", preferences: "Предпочтения", possibilities: "Возможности", ready: "Готово", next: "Следующий шаг", ahead: "Впереди", progressNote: "EXP показывает прогресс. Награды и условия открытия возможностей пока не определены.", connectionEyebrow: "ВАША СВЯЗЬ", connectionTitle: "Знакомство может стать чем-то большим.", connectionText: "В этом демосостоянии у Майи и Алекса есть Connection. Совместный следующий шаг — идея вечера.", connectionAction: "Посмотреть идею следующего шага", prototype: "Дизайн-прототип", stateLabel: "Состояние Home", before: "До Pulse", after: "После Pulse", connection: "Есть Connection", demoNote: "Люди и данные вымышлены. Фото иллюстративные. Переключатель демонстрирует состояния, а не продуктовый алгоритм.", close: "Закрыть", understood: "Понятно", handoff: "ПЕРЕХОД В ПРОДУКТ", pulseTitle: "Дальше — Pulse.", pulseBody: "Здесь откроется отдельный продукт, в котором можно исследовать свои предпочтения. Home не дублирует его квиз.", pulseFoot: "Чтобы посмотреть Home после прохождения, выбери «После Pulse» в демонстрационной панели внизу страницы.", connectTitle: "Продолжим в Connect.", connectBody: "Поиск, подробные анкеты и взаимодействия остаются в Connect. Здесь показана только точка перехода.", connectFoot: "В прототипе нет реального поиска, отправки лайков или расчёта сексуальной совместимости.", scenarioTitle: "Ваш вечер — в Scenario.", scenarioBody: "Следующий шаг ведёт в Scenario или соответствующего бота: идеи свиданий, совместные активности и сценарии вечера.", scenarioFoot: "Бот и генерация сценариев в этот Home-прототип не включены.", messagesTitle: "Твои сообщения", messagesBody: "В текущем демосостоянии нет новых сообщений. Счётчики и активность не добавлены ради заполнения экрана.", messagesFoot: "Полноценная переписка остаётся в Messaging.", accountTitle: "Твой аккаунт Ember", accountBody: "Майя · единый аккаунт для всей экосистемы. Фото, личные данные, статус и связи находятся в Personal.", accountFoot: "Personal и настройки здесь не реализованы: текущий прототип посвящён Home.", ecosystemTitle: "Одно пространство. Разные возможности.", ecosystemBody: "Cabinet помогает понять следующий шаг. Специализированные действия выполняются в соответствующем продукте.", sparksTitle: "Sparks", sparksBody: "Расходуемая внутренняя валюта Ember. Это не EXP и не показатель уровня.", sparksFoot: "Показан демонстрационный баланс. Начисления, покупки и правила экономики не реализованы.", photoUnavailable: "Фото недоступно", portrait: "Иллюстративный портрет", mockProfile: "Вымышленный профиль · иллюстративная фотография", productPulse: "Исследовать предпочтения", productConnect: "Найти человека", productScenario: "Придумать что-то вместе", }, en: { today: "Today", messages: "Messages", progress: "Your journey", language: "Interface language", account: "Maya's account", ecosystem: "Ember products", greeting: "Welcome back, Maya", heading: "Closer to what", headingAccent: "you desire.", intro: "People worth discovering. Little steps towards understanding each other.", searching: "Open to meeting someone", connected: "You have a Connection", nextMove: "Your next move", nextIndex: "A PERSONAL JOURNEY", peopleEyebrow: "A WORLD OF POSSIBILITY", peopleTitle: "Who catches your eye?", peopleIntro: "You can explore now. Pulse adds more context about your preferences.", peopleAfter: "Pulse is complete. Permitted preferences can add context to discovery.", peopleConnection: "Having a Connection doesn't automatically change your discovery settings.", menAction: "Explore men", peopleNote: "Preliminary selection · no compatibility scores", peopleNoteAfter: "Demo selection · no live recalculation", openPerson: "View", interestEyebrow: "YOUR CONTEXT", interestTitle: "What draws you in.", interestIntro: "Your interests set a direction — for people, ideas and future encounters.", interestIdle: "Choose an interest to explore the context it can bring.", interestCinema: "Cinema — a way to connect through favourite films and date ideas.", interestLatex: "Latex — an interest to explore. Other people's preferences aren't inferred from photographs.", interestNights: "Late nights — context for evening plans and people with a similar rhythm.", interestDisclaimer: "This demo explains context; it doesn't update your profile or perform a search.", journeyEyebrow: "LITTLE STEPS. MORE POSSIBILITIES.", journeyTitle: "There's more than a first photo.", journeyText: "Explore yourself, find common ground and discover more of Ember.", level: "Level", profileReady: "Profile basics", preferences: "Preferences", possibilities: "Possibilities", ready: "Complete", next: "Next move", ahead: "Ahead", progressNote: "EXP reflects progress. Rewards and conditions for unlocking features aren't defined yet.", connectionEyebrow: "YOUR CONNECTION", connectionTitle: "A connection can become something more.", connectionText: "In this demo state, Maya and Alex have a Connection. An idea for an evening together is their next opportunity.", connectionAction: "Explore the next step", prototype: "Design prototype", stateLabel: "Home state", before: "Before Pulse", after: "After Pulse", connection: "Has a Connection", demoNote: "People and data are fictional. Photos are illustrative. The switch demonstrates states, not a product algorithm.", close: "Close", understood: "Got it", handoff: "CONTINUE IN PRODUCT", pulseTitle: "Next stop: Pulse.", pulseBody: "This leads to a separate product for exploring your preferences. Home doesn't reproduce its quiz.", pulseFoot: "To preview the completed state, choose “After Pulse” in the demo controls at the bottom.", connectTitle: "Continue in Connect.", connectBody: "Search, full profiles and interactions belong in Connect. This is a preview of the handoff.", connectFoot: "This prototype doesn't run real searches, send likes or calculate sexual compatibility.", scenarioTitle: "Your evening, with Scenario.", scenarioBody: "This step leads to Scenario or its bot: date ideas, shared activities and plans for an evening.", scenarioFoot: "The bot and scenario generation are outside this Home prototype.", messagesTitle: "Your messages", messagesBody: "There are no new messages in this demo state. Counts and activity haven't been invented to fill the screen.", messagesFoot: "Full conversations belong in Messaging.", accountTitle: "Your Ember account", accountBody: "Maya · one account across Ember. Photos, personal details, status and Connections belong in Personal.", accountFoot: "Personal and settings aren't implemented here. This prototype focuses on Home.", ecosystemTitle: "One space. Different possibilities.", ecosystemBody: "Cabinet helps you find your next step. Specialised actions stay in their respective products.", sparksTitle: "Sparks", sparksBody: "Ember's spendable internal currency. Not EXP, and not a measure of your level.", sparksFoot: "This is a demo balance. Earning, purchases and economy rules aren't implemented.", photoUnavailable: "Photo unavailable", portrait: "Illustrative portrait", mockProfile: "Fictional profile · illustrative photograph", productPulse: "Explore your preferences", productConnect: "Find someone", productScenario: "Create something together", }, }; function getNextMove(scene: Scene, language: Language): NextMove { const ru = language === "ru"; /* * Explicit demonstration states, NOT a production context router. * Completion events, permissions and ranking would arrive from real products. */ const moves: Record = { before: { product: "pulse", label: "Pulse", title: ru ? "Химия начинается с тебя." : "Chemistry starts with you.", description: ru ? "Узнай, что тебя притягивает. Pulse поможет учитывать желания и сексуальные предпочтения — не только первое впечатление." : "Explore what draws you in. Pulse adds desires and sexual preferences to the picture — beyond a first impression.", action: ru ? "Пройти Pulse" : "Take Pulse", note: ru ? "Можно знакомиться и без Pulse." : "You can meet people without taking Pulse.", }, after: { product: "connect", label: "Connect", title: ru ? "Теперь — к знакомству." : "Now, meet someone.", description: ru ? "Ты уже исследовала свои предпочтения. Продолжи поиск: разрешённые данные Pulse смогут добавить ему контекста." : "You've explored your preferences. Continue discovering people with the context you're comfortable sharing.", action: ru ? "Продолжить в Connect" : "Continue in Connect", note: ru ? "Использование результатов зависит от разрешений." : "Using your results depends on permissions.", }, connection: { product: "scenario", label: "Scenario", title: ru ? "А если этот вечер — ваш?" : "What if tonight is yours?", description: ru ? "Есть человек, с которым хочется продолжить. Найдите идею вечера: от необычного свидания до совместного эксперимента." : "There's someone you'd like to get closer to. Find an idea for an evening, a different kind of date or something new to try together.", action: ru ? "Найти идею вечера" : "Find an evening idea", note: ru ? "Создание сценария — в Scenario." : "Create your plan in Scenario.", }, }; return moves[scene]; } function Icon({ name, size = 20, className = "", }: { name: IconName; size?: number; className?: string; }) { const paths: Record = { arrow: , external: , close: , check: , spark: ( ), message: ( ), lock: ( <> ), apps: ( <> {[5, 12, 19].map((x) => [5, 12, 19].map((y) => ( )), )} ), }; return ( ); } function Photo({ src, alt, className = "", fallback, eager = false, }: { src: string; alt: string; className?: string; fallback: string; eager?: boolean; }) { const [failed, setFailed] = useState(false); useEffect(() => setFailed(false), [src]); if (failed) { return ( {fallback} ); } return ( {alt} setFailed(true)} /> ); } function Dialog({ title, closeLabel, onClose, children, }: { title: string; closeLabel: string; onClose: () => void; children: ReactNode; }) { const titleId = useId(); const dialogRef = useRef(null); useEffect(() => { const previouslyFocused = document.activeElement as HTMLElement | null; const oldOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; const frame = requestAnimationFrame(() => { dialogRef.current?.querySelector("button")?.focus(); }); const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); onClose(); return; } if (event.key !== "Tab") return; const elements = Array.from( dialogRef.current?.querySelectorAll( 'button:not([disabled]), a[href], input, select, textarea, [tabindex="0"]', ) ?? [], ).filter((element) => element.getClientRects().length > 0); const first = elements[0]; const last = elements[elements.length - 1]; if (!first || !last) { event.preventDefault(); return; } if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); } }; document.addEventListener("keydown", onKeyDown); return () => { cancelAnimationFrame(frame); document.removeEventListener("keydown", onKeyDown); document.body.style.overflow = oldOverflow; previouslyFocused?.focus(); }; }, [onClose]); return (
{ if (event.target === event.currentTarget) onClose(); }} >

{title}

{children}
); } function App() { const [language, setLanguage] = useState("ru"); const [scene, setScene] = useState("before"); const [panel, setPanel] = useState(null); const [selectedPerson, setSelectedPerson] = useState(null); const [interest, setInterest] = useState(null); const t = COPY[language]; const nextMove = getNextMove(scene, language); const pulseComplete = scene !== "before"; useEffect(() => { document.documentElement.lang = language; document.title = language === "ru" ? "Ember — твоё пространство" : "Ember — your space"; }, [language]); const closePanel = React.useCallback(() => { setPanel(null); setSelectedPerson(null); }, []); const openPanel = (nextPanel: Panel) => { setSelectedPerson(null); setPanel(nextPanel); }; const selectPerson = (person: Person) => { setSelectedPerson(person); setPanel("connect"); }; const interestCopy = interest === "latex" ? t.interestLatex : interest === "cinema" ? t.interestCinema : interest === "nights" ? t.interestNights : t.interestIdle; const panelContent: Record< Exclude, { title: string; body: string; foot?: string } > = { pulse: { title: t.pulseTitle, body: t.pulseBody, foot: t.pulseFoot, }, connect: { title: t.connectTitle, body: t.connectBody, foot: t.connectFoot, }, scenario: { title: t.scenarioTitle, body: t.scenarioBody, foot: t.scenarioFoot, }, messages: { title: t.messagesTitle, body: t.messagesBody, foot: t.messagesFoot, }, account: { title: t.accountTitle, body: t.accountBody, foot: t.accountFoot, }, ecosystem: { title: t.ecosystemTitle, body: t.ecosystemBody, }, sparks: { title: t.sparksTitle, body: t.sparksBody, foot: t.sparksFoot, }, }; return ( <>
ember
{(["ru", "en"] as const).map((value) => ( ))}

{t.greeting}

{t.heading}
{t.headingAccent}

{scene === "connection" ? t.connected : t.searching}

{t.intro}

{t.nextMove} {nextMove.label}

{nextMove.title}

{nextMove.description}

{nextMove.note}

{t.peopleEyebrow}

{t.peopleTitle}

Connect

{scene === "before" ? t.peopleIntro : scene === "after" ? t.peopleAfter : t.peopleConnection}

{PEOPLE.map((person) => ( ))}

{pulseComplete ? t.peopleNoteAfter : t.peopleNote}

{scene === "connection" && (

{t.connectionEyebrow}

Maya & Alex

{t.connectionText}

)}

{t.interestEyebrow}

{t.interestTitle}

{t.interestIntro}

{INTERESTS.map((item) => ( ))}

{interestCopy}

{interest && (

{t.interestDisclaimer}

)}

{t.journeyEyebrow}

{t.journeyTitle}

{t.journeyText}

02
{t.level} 02 320 / 500 EXP · demo
  1. {t.profileReady} {t.ready}
  2. {pulseComplete ? : "2"} {t.preferences} {pulseComplete ? t.ready : t.next}
  3. 3 {t.possibilities} {t.ahead}

{t.progressNote}

ember {language === "ru" ? "Меньше случайного. Больше твоего." : "Less random. More you."} HOME / CONCEPT 01
{panel && ( {selectedPerson && (
{selectedPerson.name}, {selectedPerson.age} {selectedPerson.city} {t.mockProfile}
)} {panel === "sparks" && (
240 Sparks · demo
)}

{panelContent[panel].body}

{panel === "ecosystem" && (
{[ ["connect", "Connect", t.productConnect], ["pulse", "Pulse", t.productPulse], ["scenario", "Scenario", t.productScenario], ].map(([product, name, description]) => ( ))}
)} {panelContent[panel].foot && (

{panelContent[panel].foot}

)} )} ); } createRoot(document.getElementById("root")!).render( , );