File size: 4,196 Bytes
8fb4cca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import React from 'react';
import { X, ScanFace, CheckCircle, ArrowRight, Sparkles } from 'lucide-react';
import { Language } from '../types';
import { TRANSLATIONS } from '../constants/translations';
interface AnalysisModalProps {
isVisible: boolean;
onClose: () => void;
language: Language;
result: { faceShape: string; skinTone: string; bestVibe: string; };
onUnlock: () => void;
}
export const AnalysisModal: React.FC<AnalysisModalProps> = ({
isVisible, onClose, language, result, onUnlock
}) => {
const t = TRANSLATIONS[language];
if (!isVisible) return null;
return (
<div className="fixed inset-0 z-[80] flex items-center justify-center p-4 bg-gray-900/90 backdrop-blur-md animate-fade-in">
<div className="w-full max-w-md bg-black text-white rounded-3xl overflow-hidden border border-gray-800 shadow-2xl relative">
{/* Header */}
<div className="p-6 text-center border-b border-gray-800 relative">
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-rose-500 to-transparent"></div>
<div className="w-16 h-16 mx-auto bg-gray-900 rounded-full flex items-center justify-center border border-gray-700 mb-4 shadow-[0_0_30px_rgba(244,63,94,0.3)]">
<ScanFace className="w-8 h-8 text-rose-500" />
</div>
<h2 className="text-2xl font-serif font-bold tracking-wide text-rose-100">{t.analysisTitle}</h2>
<p className="text-xs text-gray-500 font-mono mt-1 tracking-widest uppercase">{t.analysisSubtitle}</p>
</div>
{/* Report Content */}
<div className="p-8 space-y-6">
<div className="flex items-center justify-between group">
<div>
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{t.lblFaceShape}</p>
<p className="text-lg font-bold text-white group-hover:text-rose-400 transition-colors">{result.faceShape}</p>
</div>
<div className="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center">
<div className="w-6 h-8 border-2 border-white rounded-[40%] opacity-80"></div>
</div>
</div>
<div className="w-full h-px bg-gray-800"></div>
<div className="flex items-center justify-between group">
<div>
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{t.lblSkinTone}</p>
<p className="text-lg font-bold text-white group-hover:text-rose-400 transition-colors">{result.skinTone}</p>
</div>
<div className="w-8 h-8 rounded-full bg-[#fde3e3] border-2 border-white/20"></div>
</div>
<div className="w-full h-px bg-gray-800"></div>
<div className="bg-gradient-to-r from-rose-900/50 to-gray-900 p-4 rounded-xl border border-rose-500/30 flex items-center gap-4">
<div className="w-10 h-10 bg-rose-500 rounded-full flex items-center justify-center text-white shrink-0 shadow-lg shadow-rose-900">
<Sparkles className="w-5 h-5" />
</div>
<div>
<p className="text-xs text-rose-300 font-bold uppercase mb-0.5">{t.lblRecVibe}</p>
<p className="text-xl font-serif font-bold text-white leading-none">{result.bestVibe}</p>
</div>
</div>
</div>
{/* Footer Action */}
<div className="p-6 bg-gray-900 border-t border-gray-800">
<button
onClick={onUnlock}
className="w-full py-4 bg-white text-black font-bold text-lg rounded-xl hover:bg-rose-50 transition-all flex items-center justify-center gap-2 group"
>
{t.pddSlashBtn} <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</button>
<p className="text-center text-[10px] text-gray-600 mt-3 font-mono">
{t.aiConfidence}: 98.4%
</p>
</div>
</div>
</div>
);
};
|