/** * Shared "Why SylvanFlow" / founder letter overlay - NuAsk-aligned glass, teal rim, ambient field; primary CTA uses NOW-hub glass stack (`SYLVAN_TECH_THEME.classes.founderOverlayPrimaryCta` + `stylePresets.founderOverlayPrimaryCta`). * Copy: SYS_MESSAGES_KV keys `sys:ui:founder_overlay_*` + title `sys:ui:app_drawer_why_sylvanflow` (10 langs). * Used by PowerUp (first-run gate) and AppShell menu. Exposes `window.FounderVisionOverlay`. */ (function () { 'use strict'; const { useEffect, useState } = React; const FALLBACK = { title: 'Why SylvanFlow', subtitle: 'A few words on why we built this', p1: "What you're about to see isn't a standard travel app. It was built for moments when decisions matter - when everything is loud, unclear, or pulling you in different directions. Travel does that often. So do doubt, anxiety, feeling alone, feeling small, or feeling like you've lost your footing.", p2: "That's why SylvanFlow exists - not as another itinerary planner, and not as a rigid list of must-sees.", p3: "It's a flow that changes with you: one that reads the world around you, and reads you.", promiseTitle: 'The Promise', promiseBody: "We don't just move people through places. We move with them - moment by moment. We built SylvanFlow so your time isn't wasted, no one is left behind, and the journey still feels alive.", yours: 'Yours sincerely,', founderName: 'Fang Gui', founderRole: 'Founder of SylvanFlow', continue: 'Continue', close: 'Close', tapHint: 'Tap outside the card to close', backdropClose: 'Close' }; function resolveLang() { try { const c = localStorage.getItem('sylvanflow_preferred_language'); const valid = ['en', 'zh-CN', 'ja', 'ko', 'th', 'vi', 'id', 'ms', 'ar', 'fil']; if (c && valid.includes(c.trim())) return c.trim(); } catch (_) {} return (typeof window !== 'undefined' && window.SylvanFlowState?.getLanguage?.()) || 'en'; } function FounderVisionOverlay({ onDismiss, allowBackdropDismiss }) { const [copy, setCopy] = useState(null); const tc = typeof window !== 'undefined' && window.SYLVAN_TECH_THEME && window.SYLVAN_TECH_THEME.classes ? window.SYLVAN_TECH_THEME.classes : {}; const C = copy || FALLBACK; const primaryLabel = allowBackdropDismiss ? C.close : C.continue; const ctaClass = tc.founderOverlayPrimaryCta || 'group relative mt-8 flex w-full min-h-[52px] flex-col items-center justify-center overflow-hidden rounded-2xl border border-white/10 px-4 py-3 text-center text-[15px] font-semibold tracking-tight text-slate-100 shadow-none backdrop-blur-lg transition duration-150 motion-safe:active:scale-[0.97] motion-safe:hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2DE2C5]/45 focus-visible:ring-offset-2 focus-visible:ring-offset-[#05080c] [touch-action:manipulation]'; const ctaStyle = (typeof window !== 'undefined' && window.SYLVAN_TECH_THEME && window.SYLVAN_TECH_THEME.stylePresets && window.SYLVAN_TECH_THEME.stylePresets.founderOverlayPrimaryCta) || { background: [ 'radial-gradient(96% 52% at 50% 108%, rgba(45,226,197,0.28), transparent 56%)', 'radial-gradient(95% 54% at 50% -4%, rgba(255,255,255,0.09) 0%, transparent 46%)', 'linear-gradient(168deg, rgba(255,255,255,0.078) 0%, rgba(255,255,255,0.03) 11%, rgba(18,24,34,0.58) 40%, rgba(4,6,10,0.94) 100%)' ].join(', '), boxShadow: [ 'inset 0 1px 0 rgba(255,255,255,0.13)', 'inset 0 0 0 1px rgba(45,226,197,0.22)', 'inset 0 14px 32px -10px rgba(0,0,0,0.32)', 'inset 0 -36px 48px -12px rgba(0,0,0,0.48)', '0 16px 44px -16px rgba(45,226,197,0.28)', '0 1px 0 rgba(0,0,0,0.42)' ].join(', ') }; useEffect(() => { if (window.SYLVAN_TECH_THEME && typeof window.SYLVAN_TECH_THEME.ensureKeyframes === 'function') { window.SYLVAN_TECH_THEME.ensureKeyframes(); } }, []); useEffect(() => { let cancelled = false; const run = async () => { const lang = resolveLang(); const g = window.getSysMessage; if (typeof g !== 'function') { if (!cancelled) setCopy(FALLBACK); return; } const load = async (key) => { try { const v = await g(key, lang); return v && String(v).trim() ? String(v).trim() : null; } catch (_) { return null; } }; const [ title, subtitle, p1, p2, p3, promiseTitle, promiseBody, yours, founderName, founderRole, continueB, closeB, tapHint, backdropClose ] = await Promise.all([ load('ui:app_drawer_why_sylvanflow'), load('ui:founder_overlay_subtitle'), load('ui:founder_overlay_body_p1'), load('ui:founder_overlay_body_p2'), load('ui:founder_overlay_body_p3'), load('ui:founder_overlay_promise_title'), load('ui:founder_overlay_promise_body'), load('ui:founder_overlay_yours_sincerely'), load('ui:founder_overlay_founder_name'), load('ui:founder_overlay_founder_role'), load('ui:founder_overlay_continue'), load('ui:founder_overlay_close'), load('ui:founder_overlay_tap_outside_hint'), load('ui:founder_overlay_close_backdrop_aria') ]); if (cancelled) return; setCopy({ title: title || FALLBACK.title, subtitle: subtitle || FALLBACK.subtitle, p1: p1 || FALLBACK.p1, p2: p2 || FALLBACK.p2, p3: p3 || FALLBACK.p3, promiseTitle: promiseTitle || FALLBACK.promiseTitle, promiseBody: promiseBody || FALLBACK.promiseBody, yours: yours || FALLBACK.yours, founderName: founderName || FALLBACK.founderName, founderRole: founderRole || FALLBACK.founderRole, continue: continueB || FALLBACK.continue, close: closeB || FALLBACK.close, tapHint: tapHint || FALLBACK.tapHint, backdropClose: backdropClose || FALLBACK.backdropClose }); }; void run(); const onLang = () => { void run(); }; const S = typeof window !== 'undefined' ? window.SylvanFlowState : null; if (S && typeof S.on === 'function') { S.on('language', onLang); } return () => { cancelled = true; if (S && typeof S.off === 'function') { S.off('language', onLang); } }; }, []); const onBackdrop = () => { if (allowBackdropDismiss && typeof onDismiss === 'function') onDismiss(); }; return (
{allowBackdropDismiss ? ( {allowBackdropDismiss ? (

{C.tapHint}

) : null}
); } window.FounderVisionOverlay = FounderVisionOverlay; })();