// Phone mockups for the landing page. Each mirrors a screen from the
// real Lumynax app — chat appbar with personality dropdown, home recall card,
// reminders tab, memory groups. Pure CSS-in-JSX, no images.
const PhoneAppHeader = ({ title, sub, accent = '#8A7DFF', icon, action }) =>
{topic.items.map((it, ii) => {
const c = tagToColor[it.tag] || '#AAABCC';
const showMenu = ti === 0 && ii === 1; // demo: second item of first card
return (
{it.text}
{it.tag}
{/* Demo popover on one item */}
{showMenu && (
);
};
/* ============ Phone B — Chat (matches real appbar with personality dropdown) ============ */
// Small ✦ AI avatar + timestamp shown below each Lumynax message.
const ChatBubbleMeta = ({ time }) =>
{time}
;
// Side-by-side message row: bubble on one side, avatar+timestamp on the other.
const UserMessageRow = ({ text, time }) => (
{text}
E
{time}
);
const AiMessageRow = ({ children, time }) => (
{time}
{children}
);
const PhoneChat = () => {
const { t } = useI18n();
return (
{/* Chat appbar matching the actual app: back arrow, centered Lumynax + "Arkada\u015f\u0131n v" dropdown */}
Lumynax
{t('phone.chat_subtitle')}
{/* User message — bubble on left, meta on right */}
{/* AI confirmation bubble — meta on left of bubble */}
{t('phone.chat_me_b')}
{/* "Hatırlatıcı oluşturuldu" — small chip aligned under the AI bubble */}
);
};
/* ============ Phone C — Home screen 1:1 with the real app ============ */
const PhoneRecall = () => {
const { t, lang } = useI18n();
const tabs = t('phone.recall_tabs');
const active = t('phone.recall_active');
const greeting = lang === 'tr' ? 'Merhaba Ebru' : 'Hi Mia';
const moodTitle = lang === 'tr' ? 'Bugün nasıl hissediyorsun?' : 'How feel today?';
const last3 = lang === 'tr' ? 'Son 3 gün' : 'Last 3';
const remTitle = lang === 'tr' ? 'Hatırlatıcı' : 'Reminder';
const remBody = lang === 'tr' ? 'Strateji toplantısı' : 'Strategy review';
const remTime = '17:00';
const ctaTitle = lang === 'tr' ? 'Konuşmak ister misin?' : 'Want to talk?';
const ctaSub = lang === 'tr'
? '22 saat önce: "Bugün biraz tuhaf hissediyorum…"'
: '22h ago: "feeling a bit off today…"';
// Short recall body so card fits with fade
const recallShort = lang === 'tr'
? 'Bu hafta sende sakin bir sabitlik fark ettim. Normalde iş temposu seni dalgalandırırdı; ama bu hafta söyleşimiz iyiydi, uyku saatlerin biraz daha erkene kaydı, salı akşamı keşfettiğin o kafede o filtre kahveyi sevdiğini söyledin.'
: 'I noticed a quiet steadiness in you this week. Work tempo usually rocks you, but our chats felt good, your sleep settled, and on Tuesday you told me about that filter coffee you fell for at the new café.';
return (
{/* === Home appbar === */}
);
};
/* ============ Phone E — Proactive morning (morning message only, user replies normally) ============ */
const PhoneProactive = () => {
const { t, lang } = useI18n();
const name = lang === 'tr' ? 'Ebru' : 'Mia';
const meetingMsg = lang === 'tr' ?
<>Bugün 10’da toplantın var. Öncesinde kısa bir yürüyüş gününü açar mı dersin? :
<>You have a meeting at 10. Want a 15-min walk to ease into the day?;
const goodMorning = lang === 'tr' ? 'Günaydın' : 'Good morning';
const morningTag = lang === 'tr' ? '08:12 · sabah' : '08:12 · morning';
const bdayName = lang === 'tr' ? 'Ebru' : 'Mia';
const bdayLabel = lang === 'tr' ? 'Doğum günü' : 'Birthday';
const bdayDate = lang === 'tr' ? '6 Haziran · 12 gün kaldı' : 'Jun 6 · 12 days away';
const replyPlaceholder = lang === 'tr' ? 'Cevapla ya da yeni bir şey anlat…' : 'Reply, or tell me anything…';
return (
{/* Chat-style appbar to make clear this is in the normal chat */}
Lumynax
{t('phone.chat_subtitle')}
{morningTag}
{/* Lumynax morning message */}
{goodMorning} {name}.
{meetingMsg}
{/* Inline special-day awareness card */}
{bdayName} · {bdayLabel}
{bdayDate}
{/* User replies normally */}
{/* AI brief follow-up */}
{lang === 'tr' ? 'Şık. İyi yürüyüşler, dönünce konuşuruz.' : 'Lovely. Enjoy the walk — talk when you\'re back.'}
{/* Composer at bottom — same as chat: user just replies normally */}