// Result screen — Kết quả phân tích thần số học // Exports to window: ResultScreen const RES_SG = '#14C560'; const RES_SN = '#1E3888'; const RES_SG_DEEP = '#005323'; // ───────────────────────────────────────────────────────────── // Build numbers display data from user.numbers + content database // ───────────────────────────────────────────────────────────── function buildNumbersFromUser(user) { const N = (typeof window !== 'undefined' && window.SaladinNumerology) || {}; const Content = (typeof window !== 'undefined' && window.SaladinContent) || {}; const C = Content.NUMBER_CONTENT || {}; const R = Content.ROLE_LABELS || {}; // Priority: // 1. user.numbers (already computed by form submit) // 2. Auto-compute from user.name + user.dob (when navigating without form) // 3. Hardcoded fallback (last resort — should never hit in practice) let numbers = user && user.numbers ? user.numbers : null; if (!numbers && user && user.dob && N.calculateAll) { try { numbers = N.calculateAll({ name: user.name || '', dob: user.dob }); } catch (e) { /* ignore */ } } const fallback = { lifePath: 7, soulUrge: 9, personality: 4, destiny: 1, personalYear: 7 }; const nums = numbers || fallback; const roles = ['lifePath', 'soulUrge', 'personality', 'destiny', 'personalYear']; return roles.map((role) => { const n = nums[role] || 7; const c = C[n] || C[7] || {}; const r = R[role] || {}; return { key: role, n, label: r.label || role, vi: r.vi || '', short: c.short || c.tagline || '', body: { 'Tính cách': (c.sections && c.sections['Tính cách cốt lõi']) || c.tagline || '', 'Điểm mạnh': (c.sections && c.sections['Sự nghiệp']) || '', 'Lưu ý': (c.sections && c.sections['Tình cảm']) || '', }, }; }); } // ───────────────────────────────────────────────────────────── // Pentagon radar chart for 5 numbers // ───────────────────────────────────────────────────────────── function NumberRadar({ values, labels, size = 240 }) { // values: array of 5 numbers (1-9); labels: array of 5 short strings const c = size / 2; const r = size * 0.36; const pts = values.map((v, i) => { const angle = -Math.PI / 2 + (i * 2 * Math.PI) / 5; const radius = (v / 9) * r; return { x: c + Math.cos(angle) * radius, y: c + Math.sin(angle) * radius, angle, v }; }); const labelPts = values.map((v, i) => { const angle = -Math.PI / 2 + (i * 2 * Math.PI) / 5; return { x: c + Math.cos(angle) * (r + 22), y: c + Math.sin(angle) * (r + 22), angle, anchor: i === 0 ? 'middle' : (i < 3 ? 'start' : (i === 3 ? 'end' : (i === 4 ? 'end' : 'middle'))) }; }); const rings = [0.33, 0.66, 1.0]; const ringPath = (factor) => Array.from({ length: 5 }).map((_, i) => { const angle = -Math.PI / 2 + (i * 2 * Math.PI) / 5; return `${c + Math.cos(angle) * r * factor},${c + Math.sin(angle) * r * factor}`; }).join(' '); const valuePath = pts.map(p => `${p.x},${p.y}`).join(' '); return ( ); } // ───────────────────────────────────────────────────────────── // Summary card (sticky on desktop, inline on mobile) // ───────────────────────────────────────────────────────────── function SummaryCard({ user, mobile, onOpenDetail }) { const NUMBERS = buildNumbersFromUser(user); const lifePath = NUMBERS[0]; const radarValues = NUMBERS.map(n => n.n); const radarLabels = ['Life', 'Soul', 'Pers.', 'Dest.', 'PY']; return (
{/* User row */}
Phân tích cho
{user.name}
{formatVNDate(user.dob)}
{/* Big life-path number */}
{lifePath.n}
Con số chủ đạo
Life Path 7
{lifePath.short}
{/* Radar chart */}
Biểu đồ 5 con số
{/* Mini legend */}
{NUMBERS.map((num, i) => ( { const card = document.getElementById(num.key); if (card) { e.preventDefault(); card.scrollIntoView({ block: 'start' }); } }} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 6, background: 'var(--bg-variant)', textDecoration: 'none', }}> {num.n} {num.vi} ))}
{/* Open detail of life path */} {onOpenDetail && ( )}
); } // ───────────────────────────────────────────────────────────── // Number detail card // ───────────────────────────────────────────────────────────── function NumberCard({ num, index, onOpenDetail }) { const sections = ['Tính cách', 'Điểm mạnh', 'Lưu ý']; const sectionIcons = { 'Tính cách': 'ri-user-3-line', 'Điểm mạnh': 'ri-flashlight-line', 'Lưu ý': 'ri-alert-line', }; const sectionColors = { 'Tính cách': RES_SN, 'Điểm mạnh': RES_SG_DEEP, 'Lưu ý': '#A29200', }; return (
{/* Watermark number */}
{num.n}
{/* Header */}
{num.n}
{num.label} {index === 0 && ( · Quan trọng nhất )}

{num.vi}

{num.short}
{/* Body sections */}
{sections.map(s => (
{s}

{num.body[s]}

))}
{/* Read more link */} {onOpenDetail && ( )}
); } // ───────────────────────────────────────────────────────────── // CTA — Download PDF (needs email) // ───────────────────────────────────────────────────────────── function PdfCta({ user }) { const [email, setEmail] = React.useState(user.email || ''); const [sent, setSent] = React.useState(false); return (

Tải báo cáo PDF đầy đủ

Bản phân tích 12 trang · gửi ngay vào email
{sent ? (
Đã gửi báo cáo PDF đến {email}. Kiểm tra hộp thư trong 1-2 phút.
) : (
{ e.preventDefault(); if (email) setSent(true); }} style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}> setEmail(e.target.value)} placeholder="email@cua-ban.com" style={{ flex: '1 1 220px', padding: '12px 14px', border: '1px solid var(--border-default)', borderRadius: 8, background: 'var(--bg)', fontSize: 14, fontFamily: 'inherit', color: 'var(--text-default)', outline: 'none', minWidth: 0, }} />
)}
Saladin không chia sẻ email của bạn cho bên thứ ba.
); } // ───────────────────────────────────────────────────────────── // CTA — Soft Saladin cross-sell // ───────────────────────────────────────────────────────────── function SaladinCta() { return (
Gợi ý từ Saladin

2026 hợp đầu tư dài hạn?

Personal Year 7 của bạn là chu kỳ "đào sâu" — thường phù hợp với những quyết định cẩn trọng như mua bảo hiểm sức khoẻ hoặc hợp đồng nhân thọ.

Xem các gói Saladin
); } // ───────────────────────────────────────────────────────────── // Result top hero (slim) // ───────────────────────────────────────────────────────────── function ResultHero({ user, mobile, onBack, onShare, onPrint }) { return (

Kết quả phân tích của {user.name.split(' ').slice(-1)[0]}

Hoàn tất · 5 chỉ số · phương pháp Pythagorean
{!mobile && (
)}
); } // ───────────────────────────────────────────────────────────── // ───────────────────────────────────────────────────────────── // BirthChartCard — Biểu đồ ngày sinh (matrix 3×3) // ───────────────────────────────────────────────────────────── function BirthChartCard({ user, mobile }) { if (typeof window === 'undefined' || !window.BirthChartMatrix) return null; return (
Bonus

Biểu đồ ngày sinh

Ma trận 3×3 cho thấy các con số xuất hiện trong ngày sinh — mỗi nhóm số liên tiếp tạo thành "Mũi tên cá tính" phản ánh phẩm chất bẩm sinh.

{React.createElement(window.BirthChartMatrix, { dob: user.dob, mobile })}
); } // ───────────────────────────────────────────────────────────── // EmailBanner — Sticky top banner for email capture (replaces popup) // Dismissible — saves "saladin-banner-dismissed-until" for 7 days // ───────────────────────────────────────────────────────────── function EmailBanner({ mobile, user }) { const N = (typeof window !== 'undefined' && window.SaladinNumerology) || {}; const [visible, setVisible] = React.useState(true); const [email, setEmail] = React.useState(''); const [sent, setSent] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); React.useEffect(() => { // Read localStorage on mount if (N.shouldShowBanner && !N.shouldShowBanner()) setVisible(false); }, []); if (!visible) return null; const dismiss = () => { if (N.dismissBanner) N.dismissBanner(); if (N.trackEvent) N.trackEvent('email_banner_dismissed', {}); setVisible(false); }; const submit = (e) => { e.preventDefault(); if (!email || !/^\S+@\S+\.\S+$/.test(email)) return; setSubmitting(true); // In production: POST to /api/save-result if (N.trackEvent) N.trackEvent('email_capture', { source: 'result_banner' }); setTimeout(() => { setSent(true); setSubmitting(false); // Auto-fade after 3s setTimeout(() => setVisible(false), 3000); }, 700); }; return (
{sent ? ( <>Đã gửi tới {email} ) : ( 'Lưu kết quả về email để đọc lại sau' )}
{!sent && (
setEmail(e.target.value)} placeholder="email@cua-ban.com" style={{ flex: 1, minWidth: 0, padding: '8px 12px', borderRadius: 6, border: '1px solid var(--border-default)', background: 'var(--bg)', fontSize: 13, fontFamily: 'inherit', color: 'var(--text-default)', outline: 'none', }} />
)}
); } // ───────────────────────────────────────────────────────────── // PosterCta — CTA card sending users to Poster Generator // ───────────────────────────────────────────────────────────── function PosterCta({ user, onOpen, mobile }) { return (

Khoe con số của bạn lên social

Tạo poster cá nhân hoá cho Facebook, Zalo, TikTok — đẹp như một designer pro.
); } // Main ResultScreen // ───────────────────────────────────────────────────────────── function ResultScreen({ mobile, user, onBack, onShare, onOpenDetail, onOpenPoster }) { const u = user || { name: 'Nguyễn Hoài An', dob: '1990-10-28', email: '' }; const NUMBERS = buildNumbersFromUser(u); return (
window.print()} />
{/* LEFT: sticky summary */} {/* RIGHT: scrolling number cards + CTAs */}
{NUMBERS.map((num, i) => ( ))} {/* Birth Chart matrix — visual signature of numerology */} {/* CTAs at end */}
); } // ───────────────────────────────────────────────────────────── // Helpers // ───────────────────────────────────────────────────────────── function formatVNDate(iso) { if (!iso) return ''; const [y, m, d] = iso.split('-'); return `${d}/${m}/${y}`; } Object.assign(window, { ResultScreen });