Upload 71 files

App.tsx

@@ -0,0 +1,1064 @@
+
+import React, { useState, useRef, useEffect, Suspense } from 'react';
+import { Header } from './components/Header';
+import { ImageUploader } from './components/ImageUploader';
+import { StyleSelector, STYLES } from './components/StyleSelector';
+import { ResultViewer } from './components/ResultViewer';
+import { FilterSelector, FILTERS } from './components/FilterSelector';
+import { Features } from './components/Features';
+import { Testimonials } from './components/Testimonials';
+// Lazy load AdminDashboard
+const AdminDashboard = React.lazy(() => import('./components/AdminDashboard').then(module => ({ default: module.AdminDashboard })));
+import { UserCenter } from './components/UserCenter';
+import { AuthModal } from './components/AuthModal';
+import { AboutModal } from './components/AboutModal';
+import { RedPacketModal } from './components/RedPacketModal'; 
+import { SlashModal } from './components/SlashModal'; 
+import { ShareModal } from './components/ShareModal';
+import { AnalysisModal } from './components/AnalysisModal';
+import { FeedbackModal } from './components/FeedbackModal'; 
+import { generateStyledWeddingImage } from './services/geminiService';
+import { crmService } from './services/crmService'; 
+import { WeddingStyle, LeadData, UserAccount, FeedbackItem } from './types';
+import { TRANSLATIONS } from './constants/translations';
+import { Loader2, Wand2, AlertCircle, Layers, Sparkles, PenTool, Image as ImageIcon, Users, Calendar, X, CheckCircle, MapPin, Phone, MessageCircle, ScanFace, Timer, Bell, Lock, StopCircle, Maximize } from 'lucide-react';
+// @ts-ignore
+import confetti from 'canvas-confetti';
+import { useUserStore, useUIStore, useGenerationStore } from './store';
+import { FloatingConcierge } from './components/FloatingConcierge';
+import { ExitIntentModal } from './components/ExitIntentModal';
+import { ipService } from './services/ipService';
+
+// Simple Toast Component
+const Toast = ({ msg, onClose }: { msg: string, onClose: () => void }) => (
+  <div className="fixed top-24 left-1/2 -translate-x-1/2 z-[200] animate-fade-in-down pointer-events-none">
+     <div className="bg-gray-900/90 backdrop-blur text-white text-sm font-medium px-4 py-3 rounded-full shadow-2xl flex items-center gap-2 border border-white/10">
+       <CheckCircle className="w-4 h-4 text-green-400" />
+       {msg}
+     </div>
+  </div>
+);
+
+const App: React.FC = () => {
+  // --- ZUSTAND STORES ---
+  const { 
+    currentUser, allUsers, leads, feedback, logs,
+    login, register, logout, updateUser, resetPassword, addPoints, 
+    addLead, updateLeadStatus, deleteLead, addFeedback, addLog
+  } = useUserStore();
+
+  const { 
+    language, adminConfig, modals, toastMsg,
+    setLanguage, setAdminConfig, toggleModal, showToast, closeAllModals
+  } = useUIStore();
+
+  const {
+    uploadedImages, selectedStyle, customStyleImage,
+    filter, blurAmount, compositionMode, resolution, subjectType, customPrompt,
+    results, status, progress, errorMsg,
+    isScanning, scanStep, recommendedStyleIds, analysisResult,
+    setUploadedImages, setSelectedStyle, setCustomStyleImage,
+    setGenerationConfig, setStatus, setProgress, setErrorMsg, addResult, setResults, resetGeneration,
+    startScanning, setScanStep, setAnalysisData, stopScanning
+  } = useGenerationStore();
+
+  const t = TRANSLATIONS[language];
+
+  // Lead Capture Local State (Ephemeral)
+  const [formState, setFormState] = useState<'idle'|'submitting'|'success'>('idle');
+  const [formData, setFormData] = useState({ name: '', phone: '', wechat: '', date: '', budget: '', service: '' });
+  
+  // PDD Viral Local State
+  const [slashingStyle, setSlashingStyle] = useState<WeddingStyle | null>(null);
+  
+  // Ticker State
+  const [tickerVisible, setTickerVisible] = useState(false);
+  const [tickerData, setTickerData] = useState({ name: '', style: '', time: '' });
+  
+  // Countdown State
+  const [countdown, setCountdown] = useState("02:14:59");
+  const [rotatingTip, setRotatingTip] = useState(t.genTips[0]);
+
+  // Refs
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const resultRef = useRef<HTMLDivElement>(null);
+  const adminTriggerCount = useRef(0);
+
+  // --- EFFECTS ---
+  
+  // IP Tracking
+  useEffect(() => {
+    ipService.trackVisit();
+  }, []);
+
+  // Failsafe: Remove loading spinner when App mounts
+  useEffect(() => {
+    const spinner = document.getElementById('loading-spinner');
+    if (spinner) {
+        spinner.style.opacity = '0';
+        setTimeout(() => spinner.remove(), 500);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4) {
+      document.body.classList.add('low-power');
+    }
+    if (selectedStyle) {
+      document.title = `${t.title} - ${selectedStyle.name}`;
+    } else {
+      document.title = t.title + " - AI Fitting Room";
+    }
+  }, [selectedStyle, t.title]);
+
+  // Initial Red Packet check
+  useEffect(() => {
+    const hasSeenRP = localStorage.getItem('seen_rp_' + new Date().toDateString());
+    if (!hasSeenRP) {
+       setTimeout(() => {
+          if (!currentUser && !modals.auth) toggleModal('redPacket', true);
+          localStorage.setItem('seen_rp_' + new Date().toDateString(), 'true');
+       }, 2000);
+    }
+  }, []);
+
+  // Rotating Tips
+  useEffect(() => {
+    if (status === 'generating') {
+        let i = 0;
+        const interval = setInterval(() => {
+            i = (i + 1) % t.genTips.length;
+            setRotatingTip(t.genTips[i]);
+        }, 4000);
+        return () => clearInterval(interval);
+    }
+  }, [status, language]);
+
+  // Countdown
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const now = new Date();
+      const targetTime = new Date(adminConfig.promoEnds).getTime() > now.getTime() 
+        ? new Date(adminConfig.promoEnds) 
+        : new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
+      const diff = targetTime.getTime() - now.getTime();
+      const hours = Math.floor((diff / (1000 * 60 * 60)));
+      const minutes = Math.floor((diff / (1000 * 60)) % 60);
+      const seconds = Math.floor((diff / 1000) % 60);
+      setCountdown(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [adminConfig.promoEnds]);
+
+  // Ticker
+  useEffect(() => {
+    const names = ['李小姐', '王女士', 'Ms. Chen', 'Sarah', '张小姐', 'Jessica', '刘女士', 'Emily'];
+    const showTicker = () => {
+      const randomName = names[Math.floor(Math.random() * names.length)];
+      const randomStyle = STYLES[Math.floor(Math.random() * STYLES.length)];
+      const styleName = (TRANSLATIONS[language].styles as any)[randomStyle.id] || randomStyle.name;
+      const time = Math.floor(Math.random() * 5) + 1; 
+      const timeStr = time === 1 ? TRANSLATIONS[language].tickerJustNow : `${time} ${TRANSLATIONS[language].tickerMinsAgo}`;
+      setTickerData({ name: randomName, style: styleName, time: timeStr });
+      setTickerVisible(true);
+      setTimeout(() => setTickerVisible(false), 5000); 
+    };
+    const interval = setInterval(showTicker, 15000); 
+    return () => clearInterval(interval);
+  }, [language]);
+
+  // --- HANDLERS ---
+
+  const handleLogin = (phone: string, password?: string) => {
+    const result = login(phone, password);
+    if (result.success) {
+        showToast(result.msg);
+        toggleModal('auth', false);
+        const user = allUsers.find(u => u.phone === phone);
+        if (user && (user.role === 'admin' || user.role === 'staff')) {
+            setTimeout(() => toggleModal('admin', true), 500);
+        }
+    } else {
+        alert(result.msg);
+    }
+  };
+
+  const handleRegister = (phone: string, name: string, pass: string) => {
+    const result = register(phone, name, pass);
+    if (result.success) {
+        showToast(result.msg);
+    } else {
+        showToast(result.msg);
+    }
+  };
+  
+  const handlePasswordReset = async (phone: string, newPass: string) => {
+      return resetPassword(phone, newPass);
+  };
+
+  const handleAdminLoginSuccess = () => {
+    const adminUser: UserAccount = {
+        id: 'ADMIN_SUPER',
+        name: 'Administrator',
+        phone: '000-0000',
+        points: 999999,
+        isVip: true,
+        joinDate: Date.now(),
+        history: [],
+        role: 'admin'
+    };
+    // We hack the currentUser in store for session only
+    useUserStore.setState({ currentUser: adminUser });
+    showToast("Admin Mode Activated");
+  };
+
+  const trackStyleUsage = (styleId: string) => {
+    if (!currentUser) return;
+    const stats = currentUser.styleStats || {};
+    stats[styleId] = (stats[styleId] || 0) + 1;
+    updateUser(currentUser.id, { styleStats: stats });
+    
+    // Log generation event
+    addLog({
+       styleId,
+       styleName: (TRANSLATIONS[language].styles as any)[styleId] || styleId,
+       userId: currentUser.id,
+       timestamp: Date.now(),
+       ip: ipService.currentIp,
+       location: ipService.currentLocation,
+       device: /Mobi|Android/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'
+    });
+  };
+
+  const handleBookClick = () => toggleModal('consult', true);
+
+  const handleAdminTrigger = () => {
+    adminTriggerCount.current += 1;
+    if (adminTriggerCount.current >= 5) {
+      toggleModal('admin', true);
+      adminTriggerCount.current = 0;
+    }
+  };
+
+  const handleSlashClick = (style: WeddingStyle) => {
+      setSlashingStyle(style);
+      toggleModal('slash', true);
+  };
+  
+  const handleSlashUnlock = () => {
+      if (currentUser) {
+          updateUser(currentUser.id, { isVip: true });
+          showToast(t.pddSlashSuccess);
+      } else {
+          showToast("Please login first!");
+          toggleModal('auth', true);
+      }
+  };
+
+  const handleFeedbackSubmit = async (data: Omit<FeedbackItem, 'id' | 'timestamp'>) => {
+      const newItem: FeedbackItem = {
+          id: Date.now().toString(),
+          timestamp: Date.now(),
+          ...data
+      };
+      
+      addFeedback(newItem);
+      
+      await new Promise(resolve => setTimeout(resolve, 800));
+      showToast(t.toastFeedback);
+      toggleModal('feedback', false);
+  };
+
+  const handleFormSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormState('submitting');
+    
+    let preferredStyleName = 'Unknown';
+    let genCount = 0;
+    if (currentUser && currentUser.styleStats) {
+        const entries = Object.entries(currentUser.styleStats);
+        if (entries.length > 0) {
+            genCount = entries.reduce((sum, [_, count]) => sum + (count as number), 0);
+            const [topId, _] = entries.reduce((max, curr) => (curr[1] as number) > (max[1] as number) ? curr : max);
+            const topStyleObj = STYLES.find(s => s.id === topId);
+            if (topStyleObj) preferredStyleName = (TRANSLATIONS[language].styles as any)[topId] || topStyleObj.name;
+        }
+    }
+
+    const newLead: LeadData = {
+      id: Date.now().toString(),
+      userId: currentUser?.id,
+      name: formData.name,
+      phone: formData.phone,
+      wechat: formData.wechat,
+      service: formData.service,
+      budget: formData.budget,
+      date: formData.date,
+      timestamp: Date.now(),
+      status: 'new',
+      preferredStyle: preferredStyleName,
+      generationCount: genCount,
+      syncStatus: 'pending'
+    };
+
+    // CRM Sync Logic
+    try {
+        const syncResult = await crmService.syncLead(newLead, adminConfig);
+        if (syncResult.success) {
+            newLead.syncStatus = 'synced';
+            newLead.crmId = syncResult.crmId;
+        } else {
+            newLead.syncStatus = 'failed';
+        }
+    } catch (e) {
+        console.error("CRM Sync failed", e);
+        newLead.syncStatus = 'failed';
+    }
+
+    addLead(newLead);
+
+    setTimeout(() => {
+        setFormState('success');
+        if (currentUser && !currentUser.isVip) {
+            addPoints(adminConfig.pointsBook || 100, 'Booking Inquiry');
+            updateUser(currentUser.id, { isVip: true });
+        }
+        confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
+        setTimeout(() => {
+            toggleModal('consult', false);
+            setFormState('idle');
+            setFormData({ name: '', phone: '', wechat: '', date: '', budget: '', service: '' });
+        }, 3000);
+    }, 1500);
+  };
+
+  const handleImagesSelect = (base64Images: string[]) => {
+    setUploadedImages(base64Images);
+    setResults({});
+    setStatus('idle');
+    setErrorMsg(null);
+    setAnalysisData([], { faceShape: '', skinTone: '', bestVibe: '' });
+
+    if (base64Images.length > 0) {
+      startScanning();
+      
+      setTimeout(() => setScanStep(1), 1000); 
+      setTimeout(() => {
+          if (language === 'zh') {
+             setAnalysisData([], {
+                faceShape: "标准鹅蛋脸",
+                skinTone: "暖白皮 / 象牙色",
+                bestVibe: "法式浪漫 & 韩式唯美"
+             });
+          } else {
+             setAnalysisData([], {
+                faceShape: "Oval (Goose Egg)",
+                skinTone: "Warm Porcelain",
+                bestVibe: "Romantic & Elegant"
+             });
+          }
+          setScanStep(2);
+      }, 2500);
+
+      setTimeout(() => {
+        stopScanning();
+        const hotStyles = STYLES.filter(s => s.tags?.includes('hot'));
+        const otherStyles = STYLES.filter(s => !s.tags?.includes('hot'));
+        const randomHot = hotStyles.sort(() => 0.5 - Math.random()).slice(0, 1);
+        const randomOthers = otherStyles.sort(() => 0.5 - Math.random()).slice(0, 2);
+        const finalRecs = [...randomHot, ...randomOthers].map(s => s.id);
+        setAnalysisData(finalRecs, { 
+             faceShape: language === 'zh' ? "标准鹅蛋脸" : "Oval", 
+             skinTone: language === 'zh' ? "暖白皮" : "Warm", 
+             bestVibe: language === 'zh' ? "法式浪漫" : "Romantic" 
+        });
+        
+        toggleModal('analysis', true);
+      }, 3500);
+    }
+  };
+
+  const handleStyleSelect = (style: WeddingStyle) => {
+    if (currentUser?.role === 'admin') {
+        setSelectedStyle(style);
+        setCustomStyleImage(null);
+        return;
+    }
+    if (style.isLocked && (!currentUser || !currentUser.isVip)) {
+      if (!currentUser) toggleModal('auth', true); 
+      else toggleModal('consult', true);
+      return;
+    }
+    setSelectedStyle(style);
+    setCustomStyleImage(null);
+  };
+
+  const handleCustomStyleSelect = (base64Style: string) => {
+    setCustomStyleImage(base64Style);
+    const customStyle: WeddingStyle = {
+      id: 'custom',
+      name: t.customStyle,
+      prompt: 'Custom style from reference image',
+      description: 'Using your uploaded photo as style guide',
+      coverColor: 'bg-rose-100',
+      icon: <ImageIcon className="w-5 h-5 text-rose-500" />,
+      isCustom: true
+    };
+    setSelectedStyle(customStyle);
+  };
+  
+  const handleLuckySelect = () => {
+    const isVip = currentUser?.isVip || currentUser?.role === 'admin' || false;
+    // Filter available styles: if not VIP, exclude locked styles
+    const availableStyles = STYLES.filter(s => !s.isLocked || isVip);
+    
+    if (availableStyles.length > 0) {
+        const randomStyle = availableStyles[Math.floor(Math.random() * availableStyles.length)];
+        handleStyleSelect(randomStyle);
+        
+        // Show Toast
+        const styleName = (TRANSLATIONS[language].styles as any)[randomStyle.id] || randomStyle.name;
+        showToast(`✨ Lucky Pick: ${styleName}!`);
+        
+        // Trigger confetti for fun
+        confetti({
+            particleCount: 50,
+            spread: 60,
+            origin: { y: 0.7 },
+            colors: ['#fbbf24', '#f43f5e']
+        });
+    }
+  };
+
+  const handleReset = () => {
+    resetGeneration();
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const generateSingleStyle = async (images: string[], style: WeddingStyle, customPromptText: string) => {
+    try {
+      const referenceImage = style.id === 'custom' ? customStyleImage : null;
+      const generated = await generateStyledWeddingImage(images, style.prompt, customPromptText, referenceImage, compositionMode, resolution, subjectType);
+      
+      if (style.id !== 'custom') trackStyleUsage(style.id);
+
+      const dateKey = new Date().toDateString();
+      const hasGenToday = localStorage.getItem('gen_today_' + dateKey);
+      if (!hasGenToday) {
+         addPoints(50, 'Daily First Look');
+         localStorage.setItem('gen_today_' + dateKey, 'true');
+      }
+
+      return { 
+        styleId: style.id, 
+        imageUrl: generated, 
+        timestamp: Date.now(),
+        config: {
+            customInstruction: customPromptText,
+            filter: filter,
+            blurAmount: blurAmount,
+            compositionMode: compositionMode,
+            resolution: resolution,
+            subjectType: subjectType
+        }
+      };
+    } catch (e) {
+      console.error(`Failed to generate style ${style.name}`, e);
+      throw e;
+    }
+  };
+
+  const handleGenerateSingle = async () => {
+    if (uploadedImages.length === 0 || !selectedStyle) return;
+    setStatus('generating');
+    setErrorMsg(null);
+    setProgress({ current: 0, total: 1, statusMsg: "Initializing AI Designer..." });
+    setTimeout(() => { resultRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 100);
+
+    try {
+      setTimeout(() => setProgress({ current: 0, total: 1, statusMsg: "Analyzing facial features..." }), 500);
+      setTimeout(() => setProgress({ current: 0, total: 1, statusMsg: "Applying wedding style..." }), 1500);
+
+      const result = await generateSingleStyle(uploadedImages, selectedStyle, customPrompt);
+      if (result) {
+        addResult(result);
+        setStatus('success');
+        setProgress(null);
+      } else {
+        throw new Error("Generation failed");
+      }
+    } catch (error) {
+      setStatus('error');
+      setErrorMsg("Failed to generate image. Please try again.");
+      setProgress(null);
+    }
+  };
+
+  const stopGeneration = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    setStatus('idle');
+    setProgress(null);
+    showToast("Generation stopped.");
+  };
+
+  const handleGenerateAll = () => {
+    if (uploadedImages.length === 0) return;
+    setStatus('generating');
+    setErrorMsg(null);
+    showToast("Starting Batch Generation...");
+    setProgress({ current: 0, total: STYLES.length, statusMsg: "Initializing Batch Engine..." });
+    
+    setTimeout(async () => {
+        try {
+            resultRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            
+            const isSuperAdmin = currentUser?.role === 'admin';
+            const isVip = currentUser?.isVip || isSuperAdmin;
+
+            if (!isSuperAdmin && !isVip) {
+                const hasLocked = STYLES.some(s => s.isLocked);
+                if(hasLocked) {
+                    setStatus('idle');
+                    setProgress(null);
+                    if(!currentUser) toggleModal('auth', true);
+                    else toggleModal('consult', true);
+                    return;
+                }
+            }
+            
+            abortControllerRef.current = new AbortController();
+            const presetStyles = STYLES; 
+            const total = presetStyles.length;
+            let successCount = 0;
+            
+            const baseDelay = resolution === 'ultra' ? 6000 : resolution === 'high' ? 4000 : 2500;
+            
+            for (let i = 0; i < presetStyles.length; i++) {
+                if (abortControllerRef.current?.signal.aborted) break;
+                
+                const style = presetStyles[i];
+                const styleName = (TRANSLATIONS[language].styles as any)[style.id] || style.name;
+                
+                if (results[style.id]) {
+                    successCount++;
+                    setProgress({ current: i + 1, total, statusMsg: `Skipping ${styleName} (Done)` });
+                    continue;
+                }
+
+                let attempts = 0;
+                let success = false;
+                while (attempts < 3 && !success) {
+                    if (abortControllerRef.current?.signal.aborted) break;
+                    try {
+                        setProgress({ current: i + 1, total, statusMsg: `Designing: ${styleName}...` });
+                        const result = await generateSingleStyle(uploadedImages, style, customPrompt);
+                        if (result) {
+                            addResult(result);
+                            successCount++;
+                            success = true;
+                        }
+                    } catch (e: any) {
+                        attempts++;
+                        console.warn(`Failed ${styleName} attempt ${attempts}`, e);
+                        const isRateLimit = e?.message?.includes('429');
+                        const waitTime = isRateLimit ? 5000 * attempts : 1500;
+                        setProgress({ current: i + 1, total, statusMsg: `Cooling down (Retrying)...` });
+                        await new Promise(r => setTimeout(r, waitTime));
+                    }
+                }
+                
+                if (i < presetStyles.length - 1) {
+                    setProgress({ current: i + 1, total, statusMsg: `Success! Preparing next style...` });
+                    await new Promise(r => setTimeout(r, baseDelay));
+                }
+            }
+
+            setStatus(successCount > 0 ? 'success' : 'error');
+            if (successCount === 0) setErrorMsg("Batch generation failed. Please check network.");
+            
+        } catch (err) {
+            console.error(err);
+            setStatus('error');
+            setErrorMsg("System error during batch.");
+        } finally {
+            abortControllerRef.current = null;
+            setProgress(null);
+        }
+    }, 100);
+  };
+
+  const hasResults = Object.keys(results).length > 0;
+  const activeFilterCss = FILTERS.find(f => f.id === filter)?.css || 'none';
+  const hasUploaded = uploadedImages.length > 0;
+
+  return (
+    <div className="min-h-screen bg-white font-sans text-gray-900 selection:bg-rose-100 selection:text-rose-900 flex flex-col relative overflow-x-hidden">
+      
+      {toastMsg && <Toast msg={toastMsg} onClose={() => {}} />}
+      
+      <FloatingConcierge language={language} config={adminConfig} />
+      <ExitIntentModal language={language} onClose={() => {}} />
+
+      <Suspense fallback={null}>
+          <AdminDashboard 
+            isVisible={modals.admin} 
+            onClose={() => toggleModal('admin', false)} 
+            language={language} 
+            leads={leads}
+            feedback={feedback}
+            config={adminConfig}
+            allUsers={allUsers}
+            currentUser={currentUser}
+            onUpdateConfig={setAdminConfig}
+            onUpdateLeadStatus={updateLeadStatus}
+            onDeleteLead={deleteLead}
+            onUpdateUser={updateUser}
+            showToast={showToast}
+            onAdminLoginSuccess={handleAdminLoginSuccess} 
+            logs={logs}
+          />
+      </Suspense>
+
+      {currentUser && (
+        <UserCenter 
+            isVisible={modals.userCenter}
+            onClose={() => toggleModal('userCenter', false)}
+            language={language}
+            user={currentUser}
+            leads={leads} 
+            config={adminConfig}
+            onRedeem={() => {
+              const cost = adminConfig.pointsVipCost || 100;
+              if (currentUser.points >= cost) {
+                  updateUser(currentUser.id, { points: currentUser.points - cost, isVip: true });
+                  showToast("VIP Unlocked!");
+              }
+            }}
+            showToast={showToast}
+            onAddPoints={addPoints}
+        />
+      )}
+
+      <AuthModal 
+        isVisible={modals.auth}
+        onClose={() => toggleModal('auth', false)}
+        language={language}
+        onLogin={handleLogin}
+        onRegister={handleRegister}
+        onResetPassword={handlePasswordReset}
+      />
+      
+      <AboutModal
+         isVisible={modals.about}
+         onClose={() => toggleModal('about', false)}
+         language={language}
+         config={adminConfig}
+      />
+      
+      <AnalysisModal
+         isVisible={modals.analysis}
+         onClose={() => toggleModal('analysis', false)}
+         language={language}
+         result={analysisResult}
+         onUnlock={() => toggleModal('analysis', false)}
+      />
+      
+      <RedPacketModal
+         isVisible={modals.redPacket}
+         onClose={() => toggleModal('redPacket', false)}
+         language={language}
+         adminConfig={adminConfig} 
+         user={currentUser}
+         onUpdateUser={(bal) => currentUser && updateUser(currentUser.id, { redPacketBalance: bal })}
+         onOpenShare={() => toggleModal('share', true)}
+      />
+
+      <SlashModal
+         isVisible={modals.slash}
+         onClose={() => toggleModal('slash', false)}
+         style={slashingStyle}
+         onUnlock={handleSlashUnlock}
+         language={language}
+         adminConfig={adminConfig}
+         user={currentUser}
+         onUpdateUser={(prog) => currentUser && updateUser(currentUser.id, { slashProgress: prog })}
+         onOpenShare={() => toggleModal('share', true)}
+      />
+      
+      <ShareModal
+         isVisible={modals.share}
+         onClose={() => toggleModal('share', false)}
+         language={language}
+         config={adminConfig.shareConfig}
+         showToast={showToast}
+         onShareSuccess={() => addPoints(adminConfig.pointsShare || 10, 'Viral Share')}
+      />
+
+      <FeedbackModal 
+         isVisible={modals.feedback}
+         onClose={() => toggleModal('feedback', false)}
+         language={language}
+         user={currentUser}
+         onSubmit={handleFeedbackSubmit}
+      />
+
+      {isScanning && (
+        <div className="fixed inset-0 z-[70] bg-black/95 flex flex-col items-center justify-center text-white p-4">
+           <div className="relative w-64 h-64 sm:w-80 sm:h-80 border-2 border-rose-500/50 rounded-full flex items-center justify-center overflow-hidden mb-8 shadow-[0_0_50px_rgba(244,63,94,0.4)]">
+              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-rose-500/20 to-transparent w-full h-full animate-scan" style={{animationDuration: '1.5s'}}></div>
+              <div className="absolute inset-0 border-4 border-rose-500 rounded-full animate-ping opacity-20"></div>
+              {uploadedImages[0] && <img src={uploadedImages[0]} className="w-full h-full object-cover opacity-50 grayscale" />}
+              <ScanFace className="absolute w-16 h-16 text-rose-500 animate-pulse" />
+              <div className="absolute top-10 left-10 w-2 h-2 bg-rose-400 rounded-full animate-ping"></div>
+              <div className="absolute bottom-10 right-10 w-2 h-2 bg-rose-400 rounded-full animate-ping" style={{animationDelay: '0.3s'}}></div>
+           </div>
+           <div className="text-center space-y-2">
+              <h2 className="text-2xl font-bold font-serif text-rose-300 tracking-wider">
+                {scanStep === 0 ? t.aiScanning : scanStep === 1 ? t.aiAnalyzing : t.aiMatching}
+              </h2>
+              <p className="text-gray-400 text-sm font-mono tracking-widest">SYSTEM ANALYSIS v2.4.0</p>
+           </div>
+           <div className="mt-8 w-64 h-1 bg-gray-800 rounded-full overflow-hidden">
+              <div className="h-full bg-rose-500 transition-all duration-[3500ms] ease-linear w-full shadow-[0_0_10px_#f43f5e]"></div>
+           </div>
+        </div>
+      )}
+
+      <div className={`fixed bottom-24 left-4 z-40 bg-white/90 backdrop-blur border border-rose-100 shadow-xl rounded-full px-4 py-3 flex items-center gap-3 transition-all duration-500 transform ${tickerVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0 pointer-events-none'}`}>
+         <div className="w-8 h-8 rounded-full bg-rose-100 flex items-center justify-center">
+            <Bell className="w-4 h-4 text-rose-500 animate-swing" />
+         </div>
+         <div className="text-xs">
+            <p className="font-bold text-gray-800">
+              <span className="text-rose-600">{tickerData.name}</span> {t.tickerBooked}
+            </p>
+            <p className="text-gray-500 flex items-center gap-1">
+               {tickerData.style} • {tickerData.time}
+            </p>
+         </div>
+      </div>
+
+      {adminConfig.showBanner && (
+        <div className="bg-gradient-to-r from-rose-600 to-rose-500 text-white text-xs sm:text-sm py-2 px-4 flex items-center justify-center gap-2 sm:gap-4 font-medium relative animate-fade-in flex-wrap shadow-md z-[60]">
+           <span className="text-center drop-shadow-sm">{adminConfig.promoText}</span>
+           <div className="flex items-center gap-1.5 bg-rose-800/40 px-2 py-0.5 rounded-lg border border-rose-400/30">
+             <Timer className="w-3.5 h-3.5 text-rose-200" />
+             <span className="font-mono font-bold text-rose-100 tracking-wide">{t.promoEnds} {countdown}</span>
+           </div>
+           <button onClick={() => setAdminConfig({...adminConfig, showBanner: false})} className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-rose-700/50 rounded-full transition-colors">
+             <X className="w-3 h-3" />
+           </button>
+        </div>
+      )}
+
+      <Header 
+        language={language} 
+        onLanguageChange={setLanguage} 
+        onBookClick={handleBookClick}
+        user={currentUser}
+        config={adminConfig}
+        onOpenUserCenter={() => toggleModal('userCenter', true)}
+        onLoginClick={() => toggleModal('auth', true)}
+        onOpenAdmin={() => toggleModal('admin', true)} 
+        onOpenAbout={() => toggleModal('about', true)}
+        onOpenFeedback={() => toggleModal('feedback', true)}
+      />
+
+      <button 
+        onClick={handleBookClick}
+        className="fixed bottom-6 right-6 z-40 bg-gradient-to-r from-rose-500 to-rose-600 text-white rounded-full p-4 shadow-xl shadow-rose-300 transition-transform hover:scale-110 active:scale-95 animate-bounce-slow group"
+      >
+        <MessageCircle className="w-6 h-6" />
+        <span className="absolute right-full mr-3 top-1/2 -translate-y-1/2 bg-gray-900 text-white text-xs font-bold px-3 py-1.5 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity shadow-lg">
+          {t.floatConsult}
+        </span>
+        <span className="absolute -top-1 -right-1 flex h-3 w-3">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+          <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+        </span>
+      </button>
+
+      {modals.consult && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
+           <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden relative">
+              <button onClick={() => toggleModal('consult', false)} className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 p-1">
+                <X className="w-5 h-5" />
+              </button>
+              
+              <div className="p-6">
+                 {formState === 'success' ? (
+                   <div className="flex flex-col items-center justify-center py-8 text-center space-y-4">
+                      <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-2">
+                        <CheckCircle className="w-10 h-10" />
+                      </div>
+                      <h3 className="text-xl font-bold text-gray-800">{t.formSuccess}</h3>
+                      <p className="text-gray-500 text-sm">We will contact you shortly.</p>
+                   </div>
+                 ) : (
+                   <>
+                    <div className="text-center mb-6">
+                        {(!currentUser?.isVip) ? (
+                           <div className="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center text-amber-600 mx-auto mb-3 animate-pulse">
+                              <Lock className="w-6 h-6" />
+                           </div>
+                        ) : (
+                           <div className="w-12 h-12 bg-rose-100 rounded-full flex items-center justify-center text-rose-600 mx-auto mb-3">
+                              <Calendar className="w-6 h-6" />
+                           </div>
+                        )}
+                        <h3 className="text-xl font-bold text-gray-900">{(!currentUser?.isVip) ? t.vipUnlockTitle : t.consultTitle}</h3>
+                        <p className="text-sm text-gray-500 mt-1">{(!currentUser?.isVip) ? t.vipUnlockDesc : t.consultDesc}</p>
+                    </div>
+
+                    <form onSubmit={handleFormSubmit} className="space-y-4">
+                        <div className="grid grid-cols-2 gap-4">
+                            <div>
+                                <label className="block text-xs font-bold text-gray-700 mb-1">{t.formName} *</label>
+                                <input required type="text" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} className="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 focus:border-rose-500 outline-none" />
+                            </div>
+                            <div>
+                                <label className="block text-xs font-bold text-gray-700 mb-1">{t.formPhone} *</label>
+                                <input required type="tel" value={formData.phone} onChange={e => setFormData({...formData, phone: e.target.value})} className="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 focus:border-rose-500 outline-none" />
+                            </div>
+                        </div>
+                        <div>
+                            <label className="block text-xs font-bold text-gray-700 mb-1">{t.formWeChat}</label>
+                            <input type="text" value={formData.wechat} onChange={e => setFormData({...formData, wechat: e.target.value})} className="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 focus:border-rose-500 outline-none" />
+                        </div>
+                        <div>
+                            <label className="block text-xs font-bold text-gray-700 mb-1">{t.formService}</label>
+                            <select value={formData.service} onChange={e => setFormData({...formData, service: e.target.value})} className="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 bg-white focus:border-rose-500 outline-none">
+                                <option value="">- Select -</option>
+                                <option value="wedding">{t.service1}</option>
+                                <option value="art">{t.service2}</option>
+                                <option value="family">{t.service3}</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label className="block text-xs font-bold text-gray-700 mb-1">{t.formBudget}</label>
+                            <select value={formData.budget} onChange={e => setFormData({...formData, budget: e.target.value})} className="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 bg-white focus:border-rose-500 outline-none">
+                                <option value="">- Select -</option>
+                                <option value="1">{t.budget1}</option>
+                                <option value="2">{t.budget2}</option>
+                                <option value="3">{t.budget3}</option>
+                                <option value="4">{t.budget4}</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label className="block text-xs font-bold text-gray-700 mb-1">{t.formDate}</label>
+                            <input type="date" value={formData.date} onChange={e => setFormData({...formData, date: e.target.value})} className="w-full px-3 py-2 text-sm rounded-lg border border-gray-200 focus:border-rose-500 outline-none" />
+                        </div>
+                        <button type="submit" disabled={formState === 'submitting'} className="w-full py-3 rounded-xl bg-gray-900 text-white font-bold shadow-lg hover:bg-black transition-all flex items-center justify-center gap-2 mt-4">
+                          {formState === 'submitting' && <Loader2 className="w-4 h-4 animate-spin" />}
+                          {t.formSubmit}
+                        </button>
+                    </form>
+                   </>
+                 )}
+              </div>
+           </div>
+        </div>
+      )}
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 py-8 sm:py-12 flex-grow w-full">
+        <div className="text-center mb-8 sm:mb-12 max-w-2xl mx-auto animate-fade-in">
+          <h2 className="font-serif text-3xl sm:text-5xl font-bold text-gray-900 mb-4 leading-tight">
+             {t.heroTitle}
+          </h2>
+          <p className="text-sm sm:text-lg text-gray-600">
+            {t.heroDesc}
+          </p>
+        </div>
+
+        <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-start">
+          <div className="lg:col-span-5 space-y-8">
+            <section className="space-y-4">
+              <div className="flex items-center gap-3 mb-2">
+                <span className="flex items-center justify-center w-8 h-8 rounded-full bg-rose-100 text-rose-600 font-bold text-sm">1</span>
+                <h3 className="text-lg sm:text-xl font-bold">{t.step1}</h3>
+              </div>
+              <ImageUploader onImagesSelect={handleImagesSelect} currentImages={uploadedImages} disabled={status === 'generating'} language={language} />
+            </section>
+
+            <section className={`space-y-4 transition-opacity duration-500 ${!hasUploaded ? 'opacity-40 pointer-events-none' : 'opacity-100'}`}>
+              <div className="flex items-center gap-3 mb-2 justify-between">
+                <div className="flex items-center gap-3">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-full bg-rose-100 text-rose-600 font-bold text-sm">2</span>
+                  <h3 className="text-lg sm:text-xl font-bold">{t.step2}</h3>
+                </div>
+                {selectedStyle && <button onClick={() => { setSelectedStyle(null); setCustomStyleImage(null); }} className="text-xs text-rose-500 hover:underline">{t.clearSelection}</button>}
+              </div>
+              <div className="max-h-[350px] overflow-y-auto pr-2 custom-scrollbar">
+                <StyleSelector 
+                   selectedStyle={selectedStyle} 
+                   onSelect={handleStyleSelect} 
+                   onCustomSelect={handleCustomStyleSelect}
+                   onLuckySelect={handleLuckySelect}
+                   onSlashClick={handleSlashClick}
+                   disabled={status === 'generating'} 
+                   language={language} 
+                   recommendedStyleIds={recommendedStyleIds}
+                   isVipUnlocked={currentUser?.isVip}
+                   resolution={resolution}
+                   onResolutionChange={(res) => setGenerationConfig({ resolution: res })}
+                />
+              </div>
+              {customStyleImage && (
+                <div className="flex items-center gap-3 p-3 bg-rose-50 rounded-xl border border-rose-100">
+                   <div className="w-12 h-12 rounded-lg overflow-hidden border border-rose-200 shrink-0"><img src={customStyleImage} alt="Reference" className="w-full h-full object-cover" /></div>
+                   <div className="flex-1"><p className="text-sm font-bold text-gray-800">{t.usingCustom}</p><p className="text-xs text-gray-500">{t.usingCustomDesc}</p></div>
+                   <button onClick={() => { setCustomStyleImage(null); setSelectedStyle(null); }} className="p-2 hover:bg-rose-100 rounded-full text-rose-500"><Sparkles className="w-4 h-4" /></button>
+                </div>
+              )}
+            </section>
+
+             <section className={`space-y-4 transition-opacity duration-500 ${!hasUploaded ? 'opacity-40 pointer-events-none' : 'opacity-100'}`}>
+               <div className="flex items-center gap-3 mb-2">
+                  <span className="flex items-center justify-center w-8 h-8 rounded-full bg-rose-100 text-rose-600 font-bold text-sm">3</span>
+                  <h3 className="text-lg sm:text-xl font-bold">{t.step3}</h3>
+               </div>
+               <div className="bg-gray-50 rounded-2xl border border-gray-200 p-5 space-y-5">
+                  <div>
+                      <div className="flex items-center gap-2 mb-2"><Users className="w-4 h-4 text-gray-500" /><label className="text-sm font-bold text-gray-700">{t.subjType}</label></div>
+                      <div className="grid grid-cols-3 gap-2">
+                         <button onClick={() => setGenerationConfig({ subjectType: 'female' })} className={`px-2 py-2 text-xs rounded-lg border font-medium transition-all ${subjectType === 'female' ? 'bg-rose-50 border-rose-500 text-rose-700' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}>{t.subjFemale}</button>
+                         <button onClick={() => setGenerationConfig({ subjectType: 'male' })} className={`px-2 py-2 text-xs rounded-lg border font-medium transition-all ${subjectType === 'male' ? 'bg-rose-50 border-rose-500 text-rose-700' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}>{t.subjMale}</button>
+                         <button onClick={() => setGenerationConfig({ subjectType: 'couple' })} className={`px-2 py-2 text-xs rounded-lg border font-medium transition-all ${subjectType === 'couple' ? 'bg-rose-50 border-rose-500 text-rose-700' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}>{t.subjCouple}</button>
+                         <button onClick={() => setGenerationConfig({ subjectType: 'child' })} className={`px-2 py-2 text-xs rounded-lg border font-medium transition-all ${subjectType === 'child' ? 'bg-rose-50 border-rose-500 text-rose-700' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}>{t.subjChild}</button>
+                         <button onClick={() => setGenerationConfig({ subjectType: 'family' })} className={`px-2 py-2 text-xs rounded-lg border font-medium transition-all ${subjectType === 'family' ? 'bg-rose-50 border-rose-500 text-rose-700' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}>{t.subjFamily}</button>
+                      </div>
+                  </div>
+                  
+                  <div className="border-t border-gray-200 my-4"></div>
+                  <div><FilterSelector selectedFilter={filter} onSelect={(f) => setGenerationConfig({ filter: f })} blurAmount={blurAmount} onBlurChange={(b) => setGenerationConfig({ blurAmount: b })} disabled={status === 'generating'} language={language} /></div>
+                  
+                  <div className="border-t border-gray-200 my-4"></div>
+
+                  {(uploadedImages.length > 1 || subjectType === 'family' || subjectType === 'couple') && (
+                    <div className="animate-fade-in">
+                      <div className="flex items-center gap-2 mb-3"><Users className="w-4 h-4 text-gray-500" /><label className="text-sm font-bold text-gray-700">{t.groupComp}</label></div>
+                      <div className="grid grid-cols-3 gap-2">
+                         <button onClick={() => setGenerationConfig({ compositionMode: 'classic' })} className={`px-2 py-2 text-xs rounded-lg border font-medium transition-all ${compositionMode === 'classic' ? 'bg-rose-50 border-rose-500 text-rose-700' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}>{t.compClassic}</button>
+                         <button onClick={() => setGenerationConfig({ compositionMode: 'dynamic' })} className={`px-2 py-2 text-xs rounded-lg border font-medium transition-all ${compositionMode === 'dynamic' ? 'bg-rose-50 border-rose-500 text-rose-700' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}>{t.compDynamic}</button>
+                         <button onClick={() => setGenerationConfig({ compositionMode: 'cinematic' })} className={`px-2 py-2 text-xs rounded-lg border font-medium transition-all ${compositionMode === 'cinematic' ? 'bg-rose-50 border-rose-500 text-rose-700' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}>{t.compCinematic}</button>
+                      </div>
+                      <div className="border-t border-gray-200 my-4"></div>
+                    </div>
+                  )}
+                  
+                  <div>
+                    <div className="flex items-center gap-2 mb-2"><PenTool className="w-4 h-4 text-gray-500" /><label className="text-sm font-bold text-gray-700">{t.customInstruct}</label></div>
+                    <textarea value={customPrompt} onChange={(e) => setGenerationConfig({ customPrompt: e.target.value })} placeholder={uploadedImages.length > 1 ? "Describe how you want the group to be arranged..." : t.customInstructPlaceholder} className="w-full px-4 py-3 text-sm rounded-xl border border-gray-200 focus:border-rose-500 focus:ring-2 focus:ring-rose-200 outline-none transition-all resize-none h-24 bg-white shadow-sm placeholder:text-gray-400" disabled={status === 'generating'} />
+                    <p className="text-[10px] text-gray-500 mt-2 flex items-center gap-1.5"><Sparkles className="w-3 h-3 text-rose-400" />{t.customInstructHint}</p>
+                  </div>
+               </div>
+             </section>
+
+            <div className={`pt-4 flex flex-col gap-3 transition-opacity duration-500 ${!hasUploaded ? 'opacity-50' : 'opacity-100'}`}>
+              {errorMsg && <div className="p-3 bg-red-50 text-red-600 rounded-lg flex items-center gap-2 text-sm"><AlertCircle className="w-4 h-4 shrink-0" />{errorMsg}</div>}
+              {status === 'generating' && progress && (
+                <div className="space-y-3 bg-white p-4 rounded-xl shadow-lg border border-rose-100 relative overflow-hidden">
+                   <div className="absolute top-0 right-0 w-32 h-32 bg-rose-500/5 rounded-full blur-2xl animate-pulse"></div>
+                   
+                   <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-full bg-rose-50 flex items-center justify-center shrink-0">
+                         <Loader2 className="w-5 h-5 text-rose-500 animate-spin" />
+                      </div>
+                      <div className="flex-1">
+                          <p className="text-sm font-bold text-gray-800 animate-fade-in">{progress.statusMsg}</p>
+                          <p className="text-xs text-rose-400 italic mt-0.5">{rotatingTip}</p>
+                      </div>
+                      <div className="text-right">
+                         <span className="text-xl font-bold text-gray-900">{Math.round((progress.current / progress.total) * 100)}%</span>
+                      </div>
+                   </div>
+                   
+                   <div className="h-2 w-full bg-gray-100 rounded-full overflow-hidden mt-2">
+                      <div className="h-full bg-gradient-to-r from-rose-400 to-rose-600 transition-all duration-300 relative" style={{width: `${(progress.current / progress.total) * 100}%`}}>
+                         <div className="absolute top-0 right-0 h-full w-2 bg-white/50 animate-pulse"></div>
+                      </div>
+                   </div>
+                   
+                   <button onClick={stopGeneration} className="w-full mt-2 text-[10px] text-gray-400 hover:text-red-500 flex items-center justify-center gap-1">
+                      <StopCircle className="w-3 h-3" /> Stop Generation
+                   </button>
+                </div>
+              )}
+              
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                 <button onClick={handleGenerateSingle} disabled={!hasUploaded || !selectedStyle || status === 'generating'} className={`flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-bold text-white shadow-lg transition-all duration-200 ${!hasUploaded || !selectedStyle || status === 'generating' ? 'bg-gray-300 text-gray-500 cursor-not-allowed shadow-none' : 'bg-gray-900 hover:bg-black hover:scale-[1.02]'}`}>
+                  <Wand2 className="w-4 h-4" />
+                  <span>{selectedStyle?.id === 'custom' ? t.genCustom : t.genSelected}</span>
+                </button>
+                <button onClick={handleGenerateAll} disabled={!hasUploaded || status === 'generating'} className={`relative overflow-hidden group flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-bold text-white shadow-lg shadow-rose-200 transition-all duration-200 ${!hasUploaded || status === 'generating' ? 'bg-rose-200 text-white cursor-not-allowed shadow-none opacity-70' : 'bg-gradient-to-r from-rose-500 to-rose-600 hover:scale-[1.02] hover:shadow-rose-300'}`}>
+                   <Layers className="w-4 h-4" />
+                  <span>{t.genAll}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="lg:col-span-7" ref={resultRef}>
+            {hasResults ? (
+               <ResultViewer 
+                  originalImages={uploadedImages} 
+                  results={results} 
+                  initialSelectedId={selectedStyle?.id}
+                  onReset={handleReset}
+                  activeFilter={activeFilterCss}
+                  blurAmount={blurAmount}
+                  language={language}
+                  onBookClick={handleBookClick}
+                  onShareClick={() => toggleModal('share', true)}
+               />
+            ) : (
+              <div className="h-full min-h-[400px] rounded-3xl border-2 border-dashed border-gray-100 flex flex-col items-center justify-center text-center p-8 bg-gray-50/50">
+                <div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center shadow-sm mb-4"><Sparkles className="w-8 h-8 text-gray-300" /></div>
+                <h3 className="text-xl font-serif font-bold text-gray-300">{t.emptyGallery}</h3>
+                <p className="text-gray-400 mt-2 max-w-xs text-sm">{t.emptyGalleryDesc}</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+
+      <Features language={language} />
+      <Testimonials language={language} />
+
+      <footer className="bg-gray-900 text-white py-8 border-t border-gray-800">
+         <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-6">
+             <div className="text-center md:text-left">
+                <h3 className="font-serif font-bold text-xl">{t.posterBrand}</h3>
+                <div className="flex gap-4 justify-center md:justify-start mt-2">
+                    <button onClick={() => toggleModal('about', true)} className="text-xs text-gray-400 hover:text-rose-400 transition-colors">
+                        {t.aboutUsBtn}
+                    </button>
+                    <p className="text-xs text-gray-500 cursor-default select-none active:text-gray-400" onClick={handleAdminTrigger}>
+                      {t.footerRights}
+                    </p>
+                </div>
+             </div>
+             
+             <div className="flex flex-col md:flex-row items-center gap-6 md:gap-12">
+                <div className="flex flex-col gap-2 text-sm text-gray-300 md:text-right">
+                   <p className="flex items-center gap-2 justify-center md:justify-end"><MapPin className="w-4 h-4 text-rose-500" /> {adminConfig.footerAddress}</p>
+                   <p className="flex items-center gap-2 justify-center md:justify-end"><Phone className="w-4 h-4 text-rose-500" /> {adminConfig.contactPhone}</p>
+                </div>
+                
+                <div className="flex flex-col items-center gap-2 group cursor-pointer" onClick={() => window.open(adminConfig.qrCodeUrl || 'https://romantic-life.com/book', '_blank')}>
+                   <div className="bg-white p-2 rounded-xl shadow-lg border-2 border-rose-500/30 group-hover:border-rose-500 group-hover:scale-105 transition-all duration-300">
+                      <img src={adminConfig.qrCodeUrl || "https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=https://romantic-life.com/book"} alt="Book QR" className="w-20 h-20 sm:w-24 sm:h-24 object-cover" />
+                   </div>
+                   <span className="text-[10px] text-rose-200 uppercase font-bold tracking-wider group-hover:text-rose-400 transition-colors">{t.posterTitle}</span>
+                </div>
+             </div>
+         </div>
+      </footer>
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -1,11 +1,54 @@
 ---
-title: AIWeddingFittingRoom
-emoji: 💻
-colorFrom: gray
-colorTo: green
+title: Romantic Life - AI Wedding Fitting Room
+emoji: 👰‍♀️
+colorFrom: pink
+colorTo: red
 sdk: docker
 pinned: false
-short_description: AI Wedding Fitting Room
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 厦门浪漫一生 - AI 婚纱试衣间 (Romantic Life AI)
+
+本项目是一个基于 React + Vite + Google Gemini API 的 AI 婚纱摄影试衣间应用。
+
+## 🌐 域名访问故障排查 (Troubleshooting)
+
+如果您上传后无法通过 `xmlove520.dpdns.org` 访问，请按以下步骤检查：
+
+1.  **检查 HTTPS**：
+    *   如果您没有为该域名购买/配置 SSL 证书，请**务必使用 `http://`** 而不是 `https://` 访问。
+    *   尝试访问: `http://xmlove520.dpdns.org`
+
+2.  **检查端口**：
+    *   家庭宽带通常屏蔽 80/443 端口。您可能需要访问带端口的地址，例如 `http://xmlove520.dpdns.org:8080` (具体端口取决于您的映射设置)。
+
+3.  **检查构建**：
+    *   确保您上传的是 `npm run build` 生成的 `dist` 文件夹中的内容，而不是源码。
+    *   确保 `dist` 文件夹中包含 `index.html`。
+
+## 🚀 部署指南
+
+### 选项 A: Hugging Face Spaces (Docker)
+
+1.  创建 Space (SDK: Docker, Template: Blank)。
+2.  上传所有文件（包括 Dockerfile, nginx.conf, package.json 等）。
+3.  系统会自动构建并运行在 `https://huggingface.co/spaces/您的用户名/您的Space名`。
+
+### 选项 B: Windows IIS / 空间 (dpdns.org)
+
+1.  运行 `npm run build`。
+2.  将 `dist` 文件夹内的所有文件上传到您的服务器根目录。
+3.  **注意**：`web.config` 文件已包含在构建中，这对于 IIS 服务器至关重要，它能防止刷新页面 404。
+
+## ✨ 功能特性
+
+*   **60+ 婚纱风格**: 涵盖韩式、法式、中式、古风、二次元等。
+*   **AI 智能换装**: 基于 Google Gemini Vision 模型。
+*   **后台管理**: 完整的客资管理(CRM)与系统设置面板。
+
+## 🛠️ 技术栈
+
+*   **Frontend**: React 18, TypeScript, Vite
+*   **State**: Zustand
+*   **AI**: Google Gemini Pro Vision

components/AboutModal.tsx

@@ -0,0 +1,103 @@
+
+import React from 'react';
+import { X, Camera, Heart, MapPin, Award } from 'lucide-react';
+import { Language, AdminConfig } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface AboutModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+  language: Language;
+  config?: AdminConfig; // Optional to handle undefined initially
+}
+
+export const AboutModal: React.FC<AboutModalProps> = ({ isVisible, onClose, language, config }) => {
+  const t = TRANSLATIONS[language];
+
+  if (!isVisible) return null;
+
+  // Prefer dynamic config content, fallback to translation file
+  const story = config?.aboutStory || t.aboutStoryContent;
+  const philosophy = config?.aboutPhilosophy || t.aboutPhilosophyContent;
+  const location = config?.aboutLocation || t.aboutLocationContent;
+  const address = config?.footerAddress || t.footerAddress;
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden relative flex flex-col max-h-[90vh]">
+        {/* Header with Image Background */}
+        <div className="relative h-48 bg-gray-900 flex items-center justify-center overflow-hidden shrink-0">
+           <div className="absolute inset-0 bg-gradient-to-r from-rose-900 to-gray-900 opacity-90"></div>
+           {/* Decorative patterns */}
+           <div className="absolute top-0 left-0 w-full h-full opacity-20" style={{backgroundImage: 'radial-gradient(circle at 20% 50%, white 1px, transparent 1px)', backgroundSize: '20px 20px'}}></div>
+           
+           <button 
+             onClick={onClose}
+             className="absolute top-4 right-4 p-2 bg-black/30 text-white rounded-full hover:bg-black/50 transition-colors z-20"
+           >
+             <X className="w-5 h-5" />
+           </button>
+
+           <div className="relative z-10 text-center px-6">
+              <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center text-rose-600 mx-auto mb-3 shadow-lg">
+                 <Camera className="w-8 h-8" />
+              </div>
+              <h2 className="text-3xl font-serif font-bold text-white tracking-wide">{t.aboutTitle}</h2>
+              <p className="text-rose-200 text-sm mt-1 uppercase tracking-widest">{t.subtitle}</p>
+           </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 sm:p-8 overflow-y-auto space-y-8 bg-gray-50/50">
+           {/* Brand Story */}
+           <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-rose-100 flex items-center justify-center text-rose-600 shrink-0 mt-1">
+                 <Award className="w-5 h-5" />
+              </div>
+              <div>
+                 <h3 className="text-lg font-bold text-gray-900 mb-2">{t.aboutStory}</h3>
+                 <p className="text-gray-600 leading-relaxed text-sm text-justify whitespace-pre-wrap">
+                    {story}
+                 </p>
+              </div>
+           </div>
+
+           {/* Philosophy */}
+           <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 shrink-0 mt-1">
+                 <Heart className="w-5 h-5" />
+              </div>
+              <div>
+                 <h3 className="text-lg font-bold text-gray-900 mb-2">{t.aboutPhilosophy}</h3>
+                 <p className="text-gray-600 leading-relaxed text-sm text-justify whitespace-pre-wrap">
+                    {philosophy}
+                 </p>
+              </div>
+           </div>
+
+           {/* Location */}
+           <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 shrink-0 mt-1">
+                 <MapPin className="w-5 h-5" />
+              </div>
+              <div>
+                 <h3 className="text-lg font-bold text-gray-900 mb-2">{t.aboutLocation}</h3>
+                 <p className="text-gray-600 leading-relaxed text-sm text-justify whitespace-pre-wrap">
+                    {location}
+                 </p>
+                 <div className="mt-3 p-3 bg-white rounded-lg border border-gray-200 text-xs text-gray-500 font-mono flex items-center gap-2">
+                    <MapPin className="w-3 h-3 text-rose-500" />
+                    {address}
+                 </div>
+              </div>
+           </div>
+        </div>
+        
+        {/* Footer */}
+        <div className="p-4 bg-white border-t border-gray-100 text-center">
+           <p className="text-xs text-gray-400">{t.footerRights}</p>
+        </div>
+      </div>
+    </div>
+  );
+};

components/AdminDashboard.tsx

@@ -0,0 +1,360 @@
+import React, { useState, useEffect } from 'react';
+import { X, Users, Settings, Download, Save, LogIn, Cloud, RefreshCw, ChevronDown, ChevronUp, Link as LinkIcon, Image as ImageIcon, MessageSquare } from 'lucide-react';
+import { Language, LeadData, AdminConfig, UserAccount, FeedbackItem } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface AdminDashboardProps {
+  isVisible: boolean;
+  onClose: () => void;
+  language: Language;
+  leads: LeadData[];
+  feedback?: FeedbackItem[];
+  config: AdminConfig;
+  allUsers: UserAccount[];
+  currentUser?: UserAccount;
+  onUpdateConfig: (newConfig: AdminConfig) => void;
+  onUpdateLeadStatus: (id: string, status: LeadData['status']) => void;
+  onDeleteLead: (id: string) => void;
+  onUpdateUser: (id: string, updates: Partial<UserAccount>) => void;
+  showToast: (msg: string) => void;
+  onAdminLoginSuccess: () => void;
+}
+
+const CollapsibleSection = ({ title, children, defaultOpen = false }: { title: string, children?: React.ReactNode, defaultOpen?: boolean }) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    return (
+        <div className="border border-gray-200 rounded-xl overflow-hidden mb-4 shadow-sm">
+            <button 
+                onClick={() => setIsOpen(!isOpen)}
+                className="w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100 transition-colors font-bold text-gray-800"
+            >
+                {title}
+                {isOpen ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+            </button>
+            {isOpen && <div className="p-4 bg-white animate-fade-in">{children}</div>}
+        </div>
+    );
+};
+
+export const AdminDashboard: React.FC<AdminDashboardProps> = ({ 
+  isVisible, onClose, language, leads, feedback = [], config, onUpdateConfig, onUpdateLeadStatus, onDeleteLead, showToast, onAdminLoginSuccess
+}) => {
+  const [activeTab, setActiveTab] = useState<'leads' | 'settings' | 'feedback'>('leads');
+  const [tempConfig, setTempConfig] = useState<AdminConfig>(config);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [password, setPassword] = useState('');
+  const t = TRANSLATIONS[language];
+
+  // Sync temp config when prop changes
+  useEffect(() => {
+    setTempConfig(config);
+  }, [config]);
+
+  if (!isVisible) return null;
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password === 'admin888') {
+      setIsLoggedIn(true);
+      onAdminLoginSuccess();
+    } else { alert("密码错误"); }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-gray-900/80 backdrop-blur-sm">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-5xl h-[85vh] flex flex-col overflow-hidden relative">
+        
+        {!isLoggedIn && (
+           <div className="absolute inset-0 z-50 bg-gray-900 flex flex-col items-center justify-center text-white">
+              <h2 className="text-2xl font-bold font-serif mb-6">{t.adminLoginTitle || '员工登录'}</h2>
+              <form onSubmit={handleLogin} className="flex flex-col gap-4 w-64">
+                 <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="请输入管理密码" className="p-3 rounded bg-gray-800 border border-gray-700 text-center outline-none focus:border-rose-500 placeholder:text-gray-500" />
+                 <button type="submit" className="p-3 bg-rose-600 rounded font-bold hover:bg-rose-700 transition-colors">登录后台</button>
+              </form>
+           </div>
+        )}
+
+        <div className="bg-gray-900 text-white p-4 flex justify-between items-center shadow-md z-10">
+           <div className="flex items-center gap-2">
+               <Settings className="w-5 h-5 text-rose-500" />
+               <h2 className="text-lg font-bold">{t.adminTitle}</h2>
+           </div>
+           <button onClick={onClose} className="p-2 hover:bg-gray-800 rounded-full"><X className="w-5 h-5" /></button>
+        </div>
+
+        <div className="flex flex-1 overflow-hidden">
+           <div className="w-48 bg-gray-50 border-r border-gray-200 p-4 space-y-2 shrink-0">
+              <button onClick={() => setActiveTab('leads')} className={`w-full text-left p-3 rounded-lg font-medium transition-all ${activeTab === 'leads' ? 'bg-white shadow text-rose-600 border border-rose-100' : 'text-gray-600 hover:bg-gray-200'}`}>客资管理 (Leads)</button>
+              <button onClick={() => setActiveTab('feedback')} className={`w-full text-left p-3 rounded-lg font-medium transition-all ${activeTab === 'feedback' ? 'bg-white shadow text-rose-600 border border-rose-100' : 'text-gray-600 hover:bg-gray-200'}`}>用户反馈 (Feedback)</button>
+              <button onClick={() => setActiveTab('settings')} className={`w-full text-left p-3 rounded-lg font-medium transition-all ${activeTab === 'settings' ? 'bg-white shadow text-rose-600 border border-rose-100' : 'text-gray-600 hover:bg-gray-200'}`}>系统设置 (Settings)</button>
+           </div>
+
+           <div className="flex-1 p-6 overflow-y-auto custom-scrollbar bg-gray-50/50">
+              {activeTab === 'leads' && (
+                  <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                      <div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
+                          <h3 className="font-bold text-gray-800">客资列表 ({leads.length})</h3>
+                          <button className="text-xs flex items-center gap-1 text-gray-500 hover:text-gray-800">
+                             <Download className="w-3 h-3" /> 导出表格
+                          </button>
+                      </div>
+                      <div className="overflow-x-auto">
+                        <table className="w-full text-sm">
+                            <thead>
+                                <tr className="bg-gray-100 text-left text-gray-600">
+                                    <th className="p-3 font-semibold">姓名</th>
+                                    <th className="p-3 font-semibold">电话</th>
+                                    <th className="p-3 font-semibold">意向服务</th>
+                                    <th className="p-3 font-semibold">CRM同步</th>
+                                    <th className="p-3 font-semibold">状态</th>
+                                    <th className="p-3 font-semibold">操作</th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-100">
+                                {leads.map(lead => (
+                                    <tr key={lead.id} className="hover:bg-gray-50 transition-colors">
+                                        <td className="p-3 font-medium">{lead.name}</td>
+                                        <td className="p-3 text-gray-600">{lead.phone}</td>
+                                        <td className="p-3 text-gray-500">{lead.service || '-'}</td>
+                                        <td className="p-3">
+                                            {lead.syncStatus === 'synced' ? (
+                                                <span className="flex items-center gap-1 text-green-600 text-xs font-bold"><Cloud className="w-3 h-3"/> 已同步</span>
+                                            ) : (
+                                                <span className="text-gray-400 text-xs">-</span>
+                                            )}
+                                        </td>
+                                        <td className="p-3">
+                                            <select 
+                                                value={lead.status} 
+                                                onChange={e => onUpdateLeadStatus(lead.id, e.target.value as any)} 
+                                                className={`border rounded-lg p-1.5 text-xs font-bold outline-none cursor-pointer ${
+                                                    lead.status === 'new' ? 'bg-blue-50 text-blue-700 border-blue-200' :
+                                                    lead.status === 'contacted' ? 'bg-amber-50 text-amber-700 border-amber-200' :
+                                                    'bg-green-50 text-green-700 border-green-200'
+                                                }`}
+                                            >
+                                                <option value="new">新客</option>
+                                                <option value="contacted">已联系</option>
+                                                <option value="booked">已成交</option>
+                                            </select>
+                                        </td>
+                                        <td className="p-3">
+                                            <button onClick={() => onDeleteLead(lead.id)} className="text-red-400 hover:text-red-600 p-1" title="删除"><X className="w-4 h-4" /></button>
+                                        </td>
+                                    </tr>
+                                ))}
+                                {leads.length === 0 && (
+                                    <tr>
+                                        <td colSpan={6} className="p-8 text-center text-gray-400">暂无客资数据</td>
+                                    </tr>
+                                )}
+                            </tbody>
+                        </table>
+                      </div>
+                  </div>
+              )}
+              
+              {activeTab === 'feedback' && (
+                  <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                      <div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
+                          <h3 className="font-bold text-gray-800">用户反馈 ({feedback.length})</h3>
+                      </div>
+                      <div className="overflow-x-auto">
+                        <table className="w-full text-sm">
+                            <thead>
+                                <tr className="bg-gray-100 text-left text-gray-600">
+                                    <th className="p-3 font-semibold">类型</th>
+                                    <th className="p-3 font-semibold">评分</th>
+                                    <th className="p-3 font-semibold">内容</th>
+                                    <th className="p-3 font-semibold">联系方式</th>
+                                    <th className="p-3 font-semibold">时间</th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-100">
+                                {feedback.map(item => (
+                                    <tr key={item.id} className="hover:bg-gray-50 transition-colors">
+                                        <td className="p-3">
+                                            <span className={`px-2 py-0.5 rounded text-xs font-bold uppercase ${
+                                                item.type === 'bug' ? 'bg-red-100 text-red-600' : 
+                                                item.type === 'suggestion' ? 'bg-amber-100 text-amber-600' : 'bg-blue-100 text-blue-600'
+                                            }`}>
+                                                {item.type}
+                                            </span>
+                                        </td>
+                                        <td className="p-3 font-bold text-yellow-500">{item.rating} ★</td>
+                                        <td className="p-3 text-gray-700 max-w-xs truncate" title={item.content}>{item.content}</td>
+                                        <td className="p-3 text-gray-500 text-xs">{item.contact || '-'}</td>
+                                        <td className="p-3 text-gray-400 text-xs">{new Date(item.timestamp).toLocaleString()}</td>
+                                    </tr>
+                                ))}
+                                {feedback.length === 0 && (
+                                    <tr>
+                                        <td colSpan={5} className="p-8 text-center text-gray-400">暂无反馈数据</td>
+                                    </tr>
+                                )}
+                            </tbody>
+                        </table>
+                      </div>
+                  </div>
+              )}
+
+              {activeTab === 'settings' && (
+                  <div className="max-w-3xl mx-auto space-y-2">
+                      <div className="flex justify-between items-center mb-6">
+                          <h3 className="text-xl font-bold text-gray-800">小程序/网页配置</h3>
+                          <button 
+                             onClick={() => { onUpdateConfig(tempConfig); showToast("配置已保存！"); }} 
+                             className="px-6 py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-xl font-bold shadow-lg shadow-rose-200 flex items-center gap-2 transition-all active:scale-95"
+                          >
+                             <Save className="w-4 h-4" /> 保存设置
+                          </button>
+                      </div>
+
+                      <CollapsibleSection title="📍 基础信息 & 品牌设置" defaultOpen>
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                              <div className="col-span-2">
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">顶部活动通知文案</label>
+                                  <input type="text" value={tempConfig.promoText} onChange={e => setTempConfig({...tempConfig, promoText: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                              </div>
+                              <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">联系电话</label>
+                                  <input type="text" value={tempConfig.contactPhone} onChange={e => setTempConfig({...tempConfig, contactPhone: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                              </div>
+                              <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">门店地址</label>
+                                  <input type="text" value={tempConfig.footerAddress} onChange={e => setTempConfig({...tempConfig, footerAddress: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                              </div>
+                              <div className="col-span-2">
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">Logo URL (品牌标志图片)</label>
+                                  <div className="flex gap-2 relative">
+                                      <ImageIcon className="absolute left-3 top-3 w-4 h-4 text-gray-400" />
+                                      <input type="text" value={tempConfig.logoUrl || ''} onChange={e => setTempConfig({...tempConfig, logoUrl: e.target.value})} placeholder="https://example.com/logo.png" className="w-full p-2.5 pl-10 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                                      {tempConfig.logoUrl && <img src={tempConfig.logoUrl} alt="Logo" className="w-10 h-10 object-contain rounded border bg-white" />}
+                                  </div>
+                              </div>
+                              <div className="col-span-2">
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">预约/客服二维码图片链接 (QR Code URL)</label>
+                                  <div className="flex gap-2">
+                                      <input type="text" value={tempConfig.qrCodeUrl || ''} onChange={e => setTempConfig({...tempConfig, qrCodeUrl: e.target.value})} placeholder="https://example.com/my-qr.png" className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                                      {tempConfig.qrCodeUrl && <img src={tempConfig.qrCodeUrl} alt="Preview" className="w-10 h-10 object-cover rounded border" />}
+                                  </div>
+                                  <p className="text-[10px] text-gray-400 mt-1">
+                                     提示: 如果您使用家庭宽带部署，请记得在 URL 中加上端口号 (例如 :8080)
+                                  </p>
+                              </div>
+                          </div>
+                      </CollapsibleSection>
+
+                      <CollapsibleSection title="📖 关于我们内容设置">
+                          <div className="space-y-4">
+                              <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">品牌故事 (Brand Story)</label>
+                                  <textarea rows={3} value={tempConfig.aboutStory || ''} onChange={e => setTempConfig({...tempConfig, aboutStory: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" placeholder="请输入品牌故事..." />
+                              </div>
+                              <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">服务理念 (Philosophy)</label>
+                                  <textarea rows={2} value={tempConfig.aboutPhilosophy || ''} onChange={e => setTempConfig({...tempConfig, aboutPhilosophy: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" placeholder="请输入服务理念..." />
+                              </div>
+                              <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">基地环境 (Location)</label>
+                                  <textarea rows={2} value={tempConfig.aboutLocation || ''} onChange={e => setTempConfig({...tempConfig, aboutLocation: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" placeholder="描述拍摄基地环境..." />
+                              </div>
+                          </div>
+                      </CollapsibleSection>
+
+                      <CollapsibleSection title="💎 会员与积分策略">
+                           <div className="grid grid-cols-2 gap-4">
+                               <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">奖励: 分享海报 (积分)</label>
+                                  <div className="relative">
+                                      <input type="number" value={tempConfig.pointsShare ?? 10} onChange={e => setTempConfig({...tempConfig, pointsShare: parseInt(e.target.value)})} className="w-full p-2.5 pl-8 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                                      <span className="absolute left-3 top-2.5 text-gray-400 font-bold">Pt</span>
+                                  </div>
+                               </div>
+                               <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">奖励: 邀请好友 (积分)</label>
+                                  <div className="relative">
+                                      <input type="number" value={tempConfig.pointsInvite ?? 50} onChange={e => setTempConfig({...tempConfig, pointsInvite: parseInt(e.target.value)})} className="w-full p-2.5 pl-8 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                                      <span className="absolute left-3 top-2.5 text-gray-400 font-bold">Pt</span>
+                                  </div>
+                               </div>
+                               <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">奖励: 预约留资 (积分)</label>
+                                  <div className="relative">
+                                      <input type="number" value={tempConfig.pointsBook ?? 100} onChange={e => setTempConfig({...tempConfig, pointsBook: parseInt(e.target.value)})} className="w-full p-2.5 pl-8 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                                      <span className="absolute left-3 top-2.5 text-gray-400 font-bold">Pt</span>
+                                  </div>
+                               </div>
+                               <div>
+                                  <label className="block text-xs font-bold text-rose-500 mb-1">消耗: 兑换VIP (积分)</label>
+                                  <div className="relative">
+                                      <input type="number" value={tempConfig.pointsVipCost ?? 100} onChange={e => setTempConfig({...tempConfig, pointsVipCost: parseInt(e.target.value)})} className="w-full p-2.5 pl-8 border border-rose-200 bg-rose-50 text-rose-700 font-bold rounded-lg text-sm focus:border-rose-500 outline-none" />
+                                      <span className="absolute left-3 top-2.5 text-rose-400 font-bold">Pt</span>
+                                  </div>
+                               </div>
+                           </div>
+                      </CollapsibleSection>
+
+                      <CollapsibleSection title="🚀 裂变营销与红包">
+                          <div className="space-y-4">
+                              <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">分享标题 (Share Title)</label>
+                                  <input type="text" value={tempConfig.shareTitle || ''} onChange={e => setTempConfig({...tempConfig, shareTitle: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                              </div>
+                              <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">分享描述 (Share Description)</label>
+                                  <input type="text" value={tempConfig.shareDesc || ''} onChange={e => setTempConfig({...tempConfig, shareDesc: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                              </div>
+                              <div className="flex gap-4">
+                                  <div className="flex-1">
+                                      <label className="block text-xs font-bold text-gray-500 mb-1">红包最大金额 (¥)</label>
+                                      <input type="number" value={tempConfig.redPacketMax || 2000} onChange={e => setTempConfig({...tempConfig, redPacketMax: parseInt(e.target.value)})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none" />
+                                  </div>
+                              </div>
+                          </div>
+                      </CollapsibleSection>
+
+                      <CollapsibleSection title="🔌 系统集成 (CRM/AI)">
+                          <div className="space-y-4">
+                              <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">CRM 接口地址 (API Endpoint)</label>
+                                  <div className="relative">
+                                     <Cloud className="absolute left-3 top-3 w-4 h-4 text-gray-400" />
+                                     <input type="text" value={tempConfig.crmApiUrl || ''} onChange={e => setTempConfig({...tempConfig, crmApiUrl: e.target.value})} className="w-full p-2.5 pl-10 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none font-mono text-xs" placeholder="https://api.crm.com/leads" />
+                                  </div>
+                              </div>
+                              <div>
+                                  <label className="block text-xs font-bold text-gray-500 mb-1">CRM API 密钥</label>
+                                  <input type="password" value={tempConfig.crmApiKey || ''} onChange={e => setTempConfig({...tempConfig, crmApiKey: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-rose-500 outline-none font-mono" />
+                              </div>
+                              <div className="p-4 bg-blue-50 rounded-lg border border-blue-100">
+                                  <h4 className="font-bold text-blue-700 mb-2 text-xs uppercase tracking-wider flex items-center gap-2">
+                                     <Cloud className="w-4 h-4" /> Gemini AI Configuration
+                                  </h4>
+                                  <div className="space-y-3">
+                                      <div>
+                                          <label className="block text-xs font-bold text-gray-500 mb-1">API Key</label>
+                                          <input type="password" value={tempConfig.geminiApiKey || ''} onChange={e => setTempConfig({...tempConfig, geminiApiKey: e.target.value})} className="w-full p-2.5 border border-gray-200 rounded-lg text-sm focus:border-blue-500 outline-none font-mono" placeholder="AIzSy..." />
+                                      </div>
+                                      <div>
+                                          <label className="block text-xs font-bold text-gray-500 mb-1">API Base URL (Proxy/Mirror) - Optional</label>
+                                          <div className="relative">
+                                              <LinkIcon className="absolute left-3 top-3 w-4 h-4 text-gray-400" />
+                                              <input type="text" value={tempConfig.geminiApiUrl || ''} onChange={e => setTempConfig({...tempConfig, geminiApiUrl: e.target.value})} className="w-full p-2.5 pl-10 border border-gray-200 rounded-lg text-sm focus:border-blue-500 outline-none font-mono" placeholder="https://my-proxy.com (Leave empty for default)" />
+                                          </div>
+                                          <p className="text-[10px] text-gray-400 mt-1">
+                                             如果您在中国大陆地区，请配置反向代理地址以解决网络问题。
+                                          </p>
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
+                      </CollapsibleSection>
+                  </div>
+              )}
+           </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/AnalysisModal.tsx

@@ -0,0 +1,86 @@
+
+
+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>
+  );
+};

components/AuthModal.tsx

@@ -0,0 +1,242 @@
+
+
+import React, { useState } from 'react';
+import { X, User, Lock, Phone, CheckCircle, ArrowRight, AlertCircle, RefreshCw, MessageSquare, Eye, EyeOff } from 'lucide-react';
+import { Language } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface AuthModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+  language: Language;
+  onLogin: (phone: string, password?: string) => void;
+  onRegister: (phone: string, name: string, pass: string) => void;
+  onResetPassword?: (phone: string, newPass: string) => Promise<boolean>;
+}
+
+export const AuthModal: React.FC<AuthModalProps> = ({ isVisible, onClose, language, onLogin, onRegister, onResetPassword }) => {
+  const [mode, setMode] = useState<'login' | 'register' | 'reset'>('login');
+  const [formData, setFormData] = useState({ phone: '', name: '', password: '', confirmPassword: '', code: '' });
+  const [error, setError] = useState<string | null>(null);
+  const [successMsg, setSuccessMsg] = useState<string | null>(null);
+  const [isCodeSent, setIsCodeSent] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const t = TRANSLATIONS[language];
+
+  if (!isVisible) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setSuccessMsg(null);
+
+    if (mode === 'login') {
+      onLogin(formData.phone, formData.password);
+    } else if (mode === 'register') {
+      // Registration Validation
+      if (!formData.name.trim()) {
+        setError("Name is required");
+        return;
+      }
+      if (formData.password.length < 6) {
+        setError("Password must be at least 6 characters");
+        return;
+      }
+      if (formData.password !== formData.confirmPassword) {
+        setError(t.authPassMismatch);
+        return;
+      }
+      onRegister(formData.phone, formData.name, formData.password);
+      setFormData({ phone: '', name: '', password: '', confirmPassword: '', code: '' });
+      onClose();
+    } else if (mode === 'reset') {
+        // Reset Password Flow
+        if (!isCodeSent) {
+             // Simulate Sending Code
+             if (formData.phone.length < 5) {
+                 setError("Please enter a valid phone number");
+                 return;
+             }
+             setIsCodeSent(true);
+             setSuccessMsg(`${t.authCodeSent} 8888`); // Simulation
+             return;
+        }
+
+        // Verify Step
+        if (formData.code !== '8888') {
+             setError("Invalid verification code (Demo: 8888)");
+             return;
+        }
+        if (formData.password.length < 6) {
+             setError("New password must be at least 6 characters");
+             return;
+        }
+        if (formData.password !== formData.confirmPassword) {
+             setError(t.authPassMismatch);
+             return;
+        }
+        
+        if (onResetPassword) {
+            const success = await onResetPassword(formData.phone, formData.password);
+            if (success) {
+                setSuccessMsg(t.authResetSuccess);
+                setTimeout(() => {
+                    setMode('login');
+                    setIsCodeSent(false);
+                    setSuccessMsg(null);
+                    setFormData({ ...formData, password: '', confirmPassword: '', code: '' });
+                }, 2000);
+            } else {
+                setError(t.authPhoneNotFound);
+            }
+        }
+    }
+  };
+
+  const toggleMode = (newMode: 'login' | 'register' | 'reset') => {
+      setMode(newMode);
+      setFormData({ phone: '', name: '', password: '', confirmPassword: '', code: '' }); // Clear form
+      setError(null);
+      setSuccessMsg(null);
+      setIsCodeSent(false);
+      setShowPassword(false);
+  };
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm animate-fade-in">
+       <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden relative">
+          <button onClick={onClose} className="absolute top-4 right-4 p-1 rounded-full hover:bg-gray-100 transition-colors z-10">
+             <X className="w-5 h-5 text-gray-500" />
+          </button>
+          
+          <div className="p-8">
+             <div className="text-center mb-6">
+                <div className={`w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 transition-colors ${mode === 'login' ? 'bg-rose-100 text-rose-500' : mode === 'register' ? 'bg-green-100 text-green-500' : 'bg-blue-100 text-blue-500'}`}>
+                    {mode === 'login' ? <User className="w-6 h-6" /> : mode === 'register' ? <CheckCircle className="w-6 h-6" /> : <RefreshCw className="w-6 h-6" />}
+                </div>
+                <h2 className="text-2xl font-serif font-bold text-gray-900">
+                  {mode === 'login' ? t.authLogin : mode === 'register' ? t.authRegister : t.authReset}
+                </h2>
+                <p className="text-sm text-gray-500 mt-1">Romantic Life Studio</p>
+             </div>
+
+             {error && (
+                <div className="mb-4 p-3 bg-red-50 border border-red-100 rounded-lg flex items-center gap-2 text-xs text-red-600 font-medium animate-pulse">
+                   <AlertCircle className="w-4 h-4 shrink-0" />
+                   {error}
+                </div>
+             )}
+             
+             {successMsg && (
+                <div className="mb-4 p-3 bg-green-50 border border-green-100 rounded-lg flex items-center gap-2 text-xs text-green-600 font-medium animate-fade-in">
+                   <CheckCircle className="w-4 h-4 shrink-0" />
+                   {successMsg}
+                </div>
+             )}
+
+             <form onSubmit={handleSubmit} className="space-y-4">
+                {mode === 'register' && (
+                  <div className="relative group animate-fade-in-down">
+                     <User className="absolute top-3 left-3 w-5 h-5 text-gray-400 group-focus-within:text-rose-500 transition-colors" />
+                     <input 
+                       type="text" 
+                       placeholder={t.authNamePlace}
+                       required
+                       value={formData.name}
+                       onChange={e => setFormData({...formData, name: e.target.value})}
+                       className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-200 focus:border-rose-500 outline-none bg-gray-50 focus:bg-white transition-all"
+                     />
+                  </div>
+                )}
+                
+                <div className="relative group">
+                   <Phone className="absolute top-3 left-3 w-5 h-5 text-gray-400 group-focus-within:text-rose-500 transition-colors" />
+                   <input 
+                     type="tel" 
+                     placeholder={t.authPhonePlace}
+                     required
+                     disabled={mode === 'reset' && isCodeSent}
+                     value={formData.phone}
+                     onChange={e => setFormData({...formData, phone: e.target.value})}
+                     className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-200 focus:border-rose-500 outline-none bg-gray-50 focus:bg-white transition-all disabled:bg-gray-100 disabled:text-gray-500"
+                   />
+                </div>
+
+                {mode === 'reset' && isCodeSent && (
+                    <div className="relative group animate-fade-in-down">
+                        <MessageSquare className="absolute top-3 left-3 w-5 h-5 text-gray-400 group-focus-within:text-rose-500 transition-colors" />
+                        <input 
+                          type="text" 
+                          placeholder={t.authCodePlace}
+                          required
+                          value={formData.code}
+                          onChange={e => setFormData({...formData, code: e.target.value})}
+                          className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-200 focus:border-rose-500 outline-none bg-gray-50 focus:bg-white transition-all"
+                        />
+                    </div>
+                )}
+
+                {/* Password Fields - Hidden for Reset step 1 */}
+                {!(mode === 'reset' && !isCodeSent) && (
+                    <div className="relative group">
+                       <Lock className="absolute top-3 left-3 w-5 h-5 text-gray-400 group-focus-within:text-rose-500 transition-colors" />
+                       <input 
+                         type={showPassword ? "text" : "password"}
+                         placeholder={mode === 'reset' ? t.authNewPassPlace : t.authPassPlace}
+                         required
+                         value={formData.password}
+                         onChange={e => setFormData({...formData, password: e.target.value})}
+                         className="w-full pl-10 pr-10 py-2.5 rounded-lg border border-gray-200 focus:border-rose-500 outline-none bg-gray-50 focus:bg-white transition-all"
+                       />
+                       <button 
+                         type="button" 
+                         onClick={() => setShowPassword(!showPassword)}
+                         className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 focus:outline-none"
+                         tabIndex={-1}
+                       >
+                         {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                       </button>
+                    </div>
+                )}
+
+                {(mode === 'register' || (mode === 'reset' && isCodeSent)) && (
+                   <div className="relative group animate-fade-in-down">
+                      <CheckCircle className="absolute top-3 left-3 w-5 h-5 text-gray-400 group-focus-within:text-rose-500 transition-colors" />
+                      <input 
+                        type="password" 
+                        placeholder={t.authConfirmPassPlace}
+                        required
+                        value={formData.confirmPassword}
+                        onChange={e => setFormData({...formData, confirmPassword: e.target.value})}
+                        className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-200 focus:border-rose-500 outline-none bg-gray-50 focus:bg-white transition-all"
+                      />
+                   </div>
+                )}
+
+                <button type="submit" className={`w-full py-3 text-white rounded-xl font-bold shadow-lg transition-all flex items-center justify-center gap-2 mt-2 ${mode === 'login' ? 'bg-rose-600 hover:bg-rose-700 shadow-rose-200' : mode === 'reset' ? 'bg-blue-600 hover:bg-blue-700 shadow-blue-200' : 'bg-green-600 hover:bg-green-700 shadow-green-200'}`}>
+                   {mode === 'login' ? t.authLogin : mode === 'register' ? t.authRegister : isCodeSent ? t.authSubmit : t.authSendCode}
+                   {!(mode === 'reset' && !isCodeSent) && <ArrowRight className="w-4 h-4" />}
+                </button>
+             </form>
+             
+             {mode === 'login' && (
+                 <div className="mt-3 text-right">
+                    <button onClick={() => toggleMode('reset')} className="text-xs text-gray-500 hover:text-rose-500 transition-colors">
+                        {t.authForgotPass}
+                    </button>
+                 </div>
+             )}
+
+             <div className="mt-6 text-center border-t border-gray-100 pt-4">
+                <button 
+                  onClick={() => toggleMode(mode === 'login' ? 'register' : 'login')}
+                  className="text-sm text-rose-500 font-bold hover:text-rose-600 transition-colors hover:underline"
+                >
+                   {mode === 'login' ? t.authNoAccount : t.authHasAccount}
+                </button>
+             </div>
+          </div>
+       </div>
+    </div>
+  );
+};

components/ErrorBoundary.tsx

@@ -0,0 +1,52 @@
+import React, { ErrorInfo, ReactNode } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-4 text-center">
+          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center text-red-500 mb-4">
+             <AlertTriangle className="w-8 h-8" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-800 mb-2">出错了</h1>
+          <p className="text-gray-600 mb-6 max-w-xs">
+            抱歉，系统遇到了一些问题。<br/>
+            <span className="text-xs text-gray-400 mt-2 block font-mono bg-gray-100 p-2 rounded">
+                {this.state.error?.message || 'Unknown Error'}
+            </span>
+          </p>
+          <button
+            className="flex items-center gap-2 px-6 py-3 bg-rose-600 text-white rounded-xl font-bold hover:bg-rose-700 transition-all shadow-lg"
+            onClick={() => window.location.reload()}
+          >
+            <RefreshCw className="w-4 h-4" /> 刷新页面
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

components/ExitIntentModal.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { X, Gift } from 'lucide-react';
+import { Language } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface ExitIntentModalProps {
+  language: Language;
+  onClose: () => void;
+}
+
+export const ExitIntentModal: React.FC<ExitIntentModalProps> = ({ language, onClose }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const t = TRANSLATIONS[language];
+
+  useEffect(() => {
+    // Only run on desktop where mouse leaves viewport
+    if (window.innerWidth < 768) return;
+
+    const handleMouseLeave = (e: MouseEvent) => {
+      if (e.clientY <= 0) {
+        // User moved mouse to top of browser (tabs/close button)
+        const hasShown = localStorage.getItem('exit_intent_shown');
+        if (!hasShown) {
+          setIsVisible(true);
+          localStorage.setItem('exit_intent_shown', 'true');
+        }
+      }
+    };
+
+    document.addEventListener('mouseleave', handleMouseLeave);
+    return () => document.removeEventListener('mouseleave', handleMouseLeave);
+  }, []);
+
+  if (!isVisible) return null;
+
+  const handleClose = () => {
+    setIsVisible(false);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm animate-fade-in">
+      <div className="bg-white rounded-2xl shadow-2xl max-w-sm w-full overflow-hidden relative text-center p-8">
+        <button 
+          onClick={handleClose} 
+          className="absolute top-2 right-2 p-1.5 hover:bg-gray-100 rounded-full text-gray-400"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4 text-red-500 animate-bounce">
+           <Gift className="w-8 h-8" />
+        </div>
+
+        <h3 className="text-2xl font-bold text-gray-900 mb-2">等一下！</h3>
+        <p className="text-gray-600 mb-6 text-sm">
+           现在离开就错过了 <strong>500元</strong> 现金抵用券！<br/>
+           仅限今日，留下联系方式即可领取。
+        </p>
+
+        <div className="space-y-3">
+           <button 
+             onClick={handleClose} // In real app, open consult modal
+             className="w-full py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl shadow-lg shadow-red-200 transition-all"
+           >
+             领取优惠
+           </button>
+           <button 
+             onClick={handleClose}
+             className="w-full py-2 text-gray-400 text-xs hover:text-gray-600 font-medium"
+           >
+             忍痛放弃
+           </button>
+        </div>
+      </div>
+    </div>
+  );
+};

components/Features.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ShieldCheck, HeartHandshake, Crown, Camera, Sparkles } from 'lucide-react';
+import { Language } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface FeaturesProps {
+  language: Language;
+}
+
+export const Features: React.FC<FeaturesProps> = ({ language }) => {
+  const t = TRANSLATIONS[language];
+
+  const features = [
+    {
+      icon: <ShieldCheck className="w-8 h-8 text-rose-500" />,
+      title: t.feat1Title,
+      desc: t.feat1Desc,
+    },
+    {
+      icon: <HeartHandshake className="w-8 h-8 text-rose-500" />,
+      title: t.feat2Title,
+      desc: t.feat2Desc,
+    },
+    {
+      icon: <Crown className="w-8 h-8 text-rose-500" />,
+      title: t.feat3Title,
+      desc: t.feat3Desc,
+    },
+    {
+      icon: <Camera className="w-8 h-8 text-rose-500" />,
+      title: t.feat4Title,
+      desc: t.feat4Desc,
+    },
+  ];
+
+  return (
+    <section className="py-12 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6">
+        <div className="text-center mb-10">
+          <h2 className="text-2xl sm:text-3xl font-serif font-bold text-gray-900 mb-2">
+            {t.whyUsTitle}
+          </h2>
+          <p className="text-gray-500">{t.whyUsDesc}</p>
+        </div>
+        
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {features.map((feat, idx) => (
+            <div key={idx} className="bg-rose-50/50 rounded-xl p-6 text-center hover:shadow-lg transition-shadow border border-rose-100">
+              <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-sm mx-auto mb-4 text-rose-500">
+                {feat.icon}
+              </div>
+              <h3 className="font-bold text-gray-800 mb-2">{feat.title}</h3>
+              <p className="text-sm text-gray-600 leading-relaxed">{feat.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

components/FeedbackModal.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { X, MessageSquare, AlertCircle, Lightbulb, HelpCircle, Star, Loader2 } from 'lucide-react';
+import { Language, FeedbackItem, UserAccount } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface FeedbackModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+  language: Language;
+  user?: UserAccount;
+  onSubmit: (data: Omit<FeedbackItem, 'id' | 'timestamp'>) => Promise<void>;
+}
+
+export const FeedbackModal: React.FC<FeedbackModalProps> = ({ isVisible, onClose, language, user, onSubmit }) => {
+  const t = TRANSLATIONS[language];
+  const [type, setType] = useState<FeedbackItem['type']>('suggestion');
+  const [content, setContent] = useState('');
+  const [rating, setRating] = useState(5);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  if (!isVisible) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!content.trim()) return;
+
+    setIsSubmitting(true);
+    try {
+      await onSubmit({
+        userId: user?.id,
+        type,
+        rating,
+        content,
+        contact: user?.phone
+      });
+      // Reset form
+      setContent('');
+      setRating(5);
+      setType('suggestion');
+    } catch (error) {
+      console.error("Feedback error", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const getIcon = () => {
+    switch (type) {
+      case 'bug': return <AlertCircle className="w-6 h-6 text-red-500" />;
+      case 'suggestion': return <Lightbulb className="w-6 h-6 text-amber-500" />;
+      default: return <HelpCircle className="w-6 h-6 text-blue-500" />;
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
+       <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden relative">
+          <button onClick={onClose} className="absolute top-4 right-4 p-1 rounded-full hover:bg-gray-100 transition-colors z-10">
+             <X className="w-5 h-5 text-gray-500" />
+          </button>
+          
+          <div className="p-6">
+             <div className="text-center mb-6">
+                <div className="w-12 h-12 bg-rose-50 rounded-full flex items-center justify-center mx-auto mb-3 text-rose-500">
+                    <MessageSquare className="w-6 h-6" />
+                </div>
+                <h2 className="text-xl font-bold text-gray-900">{t.feedbackTitle}</h2>
+                <p className="text-sm text-gray-500 mt-1">{t.feedbackDesc}</p>
+             </div>
+
+             <form onSubmit={handleSubmit} className="space-y-5">
+                {/* Rating */}
+                <div className="text-center">
+                    <label className="block text-xs font-bold text-gray-500 mb-2">{t.feedbackRating}</label>
+                    <div className="flex justify-center gap-2">
+                        {[1, 2, 3, 4, 5].map((star) => (
+                            <button 
+                                key={star} 
+                                type="button"
+                                onClick={() => setRating(star)}
+                                className="focus:outline-none transition-transform hover:scale-110"
+                            >
+                                <Star className={`w-8 h-8 ${star <= rating ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`} />
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Type Selection */}
+                <div className="grid grid-cols-3 gap-2">
+                    <button 
+                        type="button" 
+                        onClick={() => setType('bug')}
+                        className={`p-3 rounded-xl border flex flex-col items-center gap-1 transition-all ${type === 'bug' ? 'bg-red-50 border-red-200 text-red-600' : 'bg-white border-gray-200 text-gray-500 hover:bg-gray-50'}`}
+                    >
+                        <AlertCircle className="w-5 h-5" />
+                        <span className="text-xs font-bold">{t.feedbackTypeBug}</span>
+                    </button>
+                    <button 
+                        type="button" 
+                        onClick={() => setType('suggestion')}
+                        className={`p-3 rounded-xl border flex flex-col items-center gap-1 transition-all ${type === 'suggestion' ? 'bg-amber-50 border-amber-200 text-amber-600' : 'bg-white border-gray-200 text-gray-500 hover:bg-gray-50'}`}
+                    >
+                        <Lightbulb className="w-5 h-5" />
+                        <span className="text-xs font-bold">{t.feedbackTypeSugg}</span>
+                    </button>
+                    <button 
+                        type="button" 
+                        onClick={() => setType('other')}
+                        className={`p-3 rounded-xl border flex flex-col items-center gap-1 transition-all ${type === 'other' ? 'bg-blue-50 border-blue-200 text-blue-600' : 'bg-white border-gray-200 text-gray-500 hover:bg-gray-50'}`}
+                    >
+                        <HelpCircle className="w-5 h-5" />
+                        <span className="text-xs font-bold">{t.feedbackTypeOther}</span>
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div>
+                   <div className="relative">
+                      <textarea 
+                         value={content}
+                         onChange={(e) => setContent(e.target.value)}
+                         placeholder={t.feedbackContentPlace}
+                         className="w-full p-4 rounded-xl border border-gray-200 focus:border-rose-500 focus:ring-1 focus:ring-rose-200 outline-none h-32 resize-none bg-gray-50 focus:bg-white transition-all text-sm"
+                         required
+                      />
+                      <div className="absolute top-3 right-3 opacity-50 pointer-events-none">
+                          {getIcon()}
+                      </div>
+                   </div>
+                </div>
+
+                <button 
+                  type="submit" 
+                  disabled={isSubmitting || !content.trim()}
+                  className="w-full py-3 bg-gray-900 text-white rounded-xl font-bold shadow-lg hover:bg-black transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                   {isSubmitting && <Loader2 className="w-4 h-4 animate-spin" />}
+                   {t.feedbackSubmit}
+                </button>
+             </form>
+          </div>
+       </div>
+    </div>
+  );
+};

components/FilterSelector.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Palette, Sun, Moon, Coffee, Droplet, Zap, Maximize, Aperture, Sparkles, Cloud } from 'lucide-react';
+import { Language } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+export interface ImageFilter {
+  id: string;
+  name: string;
+  css: string; // CSS filter string
+  icon?: React.ReactNode;
+}
+
+export const FILTERS: ImageFilter[] = [
+  { id: 'none', name: 'Original', css: 'none', icon: <Palette className="w-4 h-4" /> },
+  { id: 'bw', name: 'B&W', css: 'grayscale(100%)', icon: <Aperture className="w-4 h-4" /> },
+  { id: 'sepia', name: 'Sepia', css: 'sepia(100%)', icon: <Coffee className="w-4 h-4" /> },
+  { id: 'vintage', name: 'Vintage', css: 'sepia(0.4) contrast(1.2) brightness(0.9)', icon: <Droplet className="w-4 h-4" /> },
+  { id: 'soft', name: 'Soft', css: 'brightness(1.1) contrast(0.9) saturate(0.8)', icon: <Sun className="w-4 h-4" /> },
+  { id: 'dramatic', name: 'Dramatic', css: 'contrast(1.4) saturate(0.2)', icon: <Zap className="w-4 h-4" /> },
+  { id: 'golden', name: 'Golden', css: 'sepia(0.3) saturate(1.4) contrast(1.1)', icon: <Maximize className="w-4 h-4" /> },
+  { id: 'glow', name: 'Glow', css: 'brightness(1.1) saturate(1.2) contrast(0.9)', icon: <Sparkles className="w-4 h-4" /> },
+  { id: 'dark', name: 'Dark Mode', css: 'brightness(0.8) contrast(1.2) saturate(1.1) hue-rotate(-15deg)', icon: <Moon className="w-4 h-4" /> },
+];
+
+interface FilterSelectorProps {
+  selectedFilter: string;
+  onSelect: (filterId: string) => void;
+  blurAmount: number;
+  onBlurChange: (amount: number) => void;
+  disabled: boolean;
+  language: Language;
+}
+
+export const FilterSelector: React.FC<FilterSelectorProps> = ({ 
+  selectedFilter, 
+  onSelect, 
+  blurAmount,
+  onBlurChange,
+  disabled,
+  language
+}) => {
+  const t = TRANSLATIONS[language];
+
+  return (
+    <div className="w-full space-y-4">
+      {/* Filters Row */}
+      <div>
+        <div className="flex items-center gap-2 mb-2">
+          <Palette className="w-4 h-4 text-gray-500" />
+          <h4 className="text-sm font-bold text-gray-700">{t.colorFilters}</h4>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {FILTERS.map((filter) => (
+            <button
+              key={filter.id}
+              onClick={() => onSelect(filter.id)}
+              disabled={disabled}
+              className={`
+                flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium border transition-all
+                ${selectedFilter === filter.id
+                  ? 'bg-rose-50 border-rose-500 text-rose-700 shadow-sm' 
+                  : 'bg-white border-gray-200 text-gray-600 hover:border-rose-200 hover:bg-gray-50'}
+                ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+              `}
+            >
+              {filter.icon}
+              {filter.name}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Blur Slider Row */}
+      <div className="pt-2">
+         <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              <Cloud className="w-4 h-4 text-gray-500" />
+              <h4 className="text-sm font-bold text-gray-700">{t.bgBlur}</h4>
+            </div>
+            <span className="text-xs font-mono text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
+              {blurAmount.toFixed(1)}px
+            </span>
+         </div>
+         <div className="flex items-center gap-4">
+            <input
+              type="range"
+              min="0"
+              max="10"
+              step="0.5"
+              value={blurAmount}
+              onChange={(e) => onBlurChange(parseFloat(e.target.value))}
+              disabled={disabled}
+              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-rose-500"
+            />
+         </div>
+         <p className="text-[10px] text-gray-400 mt-1">
+           {t.bgBlurDesc}
+         </p>
+      </div>
+    </div>
+  );
+};

components/FloatingConcierge.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Phone, MessageCircle, X, ChevronLeft } from 'lucide-react';
+import { Language, AdminConfig } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface FloatingConciergeProps {
+  language: Language;
+  config: AdminConfig;
+}
+
+export const FloatingConcierge: React.FC<FloatingConciergeProps> = ({ language, config }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const t = TRANSLATIONS[language];
+
+  const handleContact = (type: 'phone' | 'wechat') => {
+    if (type === 'phone' && config.contactPhone) {
+      window.location.href = `tel:${config.contactPhone}`;
+    }
+    // WeChat logic usually involves showing a QR code, handled by the UI expansion
+  };
+
+  if (!isOpen) {
+    return (
+      <button 
+        onClick={() => setIsOpen(true)}
+        className="fixed right-0 top-1/2 -translate-y-1/2 z-40 bg-rose-600 text-white p-3 rounded-l-xl shadow-lg hover:bg-rose-700 transition-all flex flex-col items-center gap-1 group"
+        aria-label="Open Concierge"
+      >
+        <MessageCircle className="w-5 h-5 animate-pulse" />
+        <span className="text-[10px] font-bold writing-vertical-lr hidden sm:block pt-1">咨询</span>
+        <ChevronLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed right-4 top-1/2 -translate-y-1/2 z-50 animate-fade-in">
+      <div className="bg-white rounded-2xl shadow-2xl p-5 border border-rose-100 w-64 relative">
+        <button 
+          onClick={() => setIsOpen(false)}
+          className="absolute -top-3 -right-3 bg-gray-900 text-white p-1.5 rounded-full hover:bg-black transition-colors shadow-md"
+        >
+          <X className="w-4 h-4" />
+        </button>
+
+        <div className="text-center mb-4">
+           <h3 className="font-bold text-gray-800 text-lg">金牌管家</h3>
+           <p className="text-xs text-gray-500">1对1 专属服务</p>
+        </div>
+
+        <div className="space-y-4">
+           {/* Phone */}
+           <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl hover:bg-rose-50 transition-colors cursor-pointer" onClick={() => handleContact('phone')}>
+              <div className="w-10 h-10 bg-rose-100 rounded-full flex items-center justify-center text-rose-600">
+                 <Phone className="w-5 h-5" />
+              </div>
+              <div className="text-left">
+                 <p className="text-xs font-bold text-gray-500">电话咨询</p>
+                 <p className="text-sm font-bold text-gray-800">{config.contactPhone || '0592-8888888'}</p>
+              </div>
+           </div>
+
+           {/* WeChat / QR */}
+           <div className="flex flex-col items-center gap-2 p-3 bg-gray-50 rounded-xl border-2 border-dashed border-gray-200">
+              <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-1">
+                 <MessageCircle className="w-5 h-5" />
+              </div>
+              <p className="text-xs font-bold text-gray-500 mb-1">添加微信客服</p>
+              <div className="w-32 h-32 bg-white p-1 rounded-lg shadow-sm">
+                 <img 
+                   src={config.qrCodeUrl || "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://romantic-life.com"} 
+                   alt="WeChat QR" 
+                   className="w-full h-full object-cover rounded"
+                 />
+              </div>
+              <p className="text-[10px] text-gray-400">扫一扫，获取最新报价</p>
+           </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/Header.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Camera, Globe, PhoneCall, User, LogIn, Settings, Info, MessageSquarePlus } from 'lucide-react';
+import { Language, UserAccount, AdminConfig } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface HeaderProps {
+  language: Language;
+  onLanguageChange: (lang: Language) => void;
+  onBookClick: () => void;
+  user?: UserAccount;
+  config?: AdminConfig; // NEW: Receive AdminConfig for logo
+  onOpenUserCenter?: () => void;
+  onLoginClick?: () => void; 
+  onOpenAdmin?: () => void; 
+  onOpenAbout?: () => void; 
+  onOpenFeedback?: () => void; 
+}
+
+export const Header: React.FC<HeaderProps> = ({ language, onLanguageChange, onBookClick, user, config, onOpenUserCenter, onLoginClick, onOpenAdmin, onOpenAbout, onOpenFeedback }) => {
+  const t = TRANSLATIONS[language];
+  const isStaffOrAdmin = user && (user.role === 'admin' || user.role === 'staff');
+
+  return (
+    <header className="w-full py-4 sm:py-6 px-4 sm:px-8 border-b border-rose-100 bg-white/80 backdrop-blur-md sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto flex items-center justify-between">
+        <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.location.reload()}>
+          {config?.logoUrl ? (
+             <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden shadow-lg ring-2 ring-rose-100">
+                <img src={config.logoUrl} alt="Logo" className="w-full h-full object-cover" />
+             </div>
+          ) : (
+             <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gray-900 rounded-full flex items-center justify-center text-rose-300 shadow-lg ring-2 ring-rose-100">
+                <Camera className="w-6 h-6" />
+             </div>
+          )}
+          
+          <div>
+            <h1 className="font-serif text-xl sm:text-2xl font-bold text-gray-900 tracking-tight leading-none">
+              {t.title}
+            </h1>
+            <p className="text-[10px] sm:text-xs text-rose-500 font-sans tracking-widest uppercase font-bold mt-1">
+              {t.subtitle}
+            </p>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-3 sm:gap-4">
+           {/* About Us Button (Desktop) */}
+           <button 
+              onClick={onOpenAbout}
+              className="hidden sm:flex items-center gap-1 text-xs font-bold text-gray-600 hover:text-rose-600 transition-colors mr-2"
+           >
+              <Info className="w-3.5 h-3.5" />
+              {t.aboutUsBtn}
+           </button>
+
+            {/* Feedback Button */}
+           <button 
+              onClick={onOpenFeedback}
+              className="flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 text-gray-500 hover:text-rose-500 transition-colors"
+              title="Feedback"
+           >
+              <MessageSquarePlus className="w-5 h-5" />
+           </button>
+
+           {/* Admin Panel Button */}
+           {isStaffOrAdmin && (
+             <button 
+                onClick={onOpenAdmin}
+                className="hidden sm:flex items-center gap-2 px-3 py-1.5 bg-gray-800 text-white rounded-full text-xs font-bold hover:bg-gray-700 transition-colors"
+             >
+                <Settings className="w-3.5 h-3.5" />
+                Admin Panel
+             </button>
+           )}
+
+           {/* Book Now Button (Mobile: Icon only, Desktop: Text) */}
+           <button 
+             onClick={onBookClick}
+             className="flex items-center gap-2 bg-rose-600 hover:bg-rose-700 text-white px-4 py-2 rounded-full shadow-lg shadow-rose-200 transition-all hover:scale-105 active:scale-95"
+           >
+              <PhoneCall className="w-4 h-4" />
+              <span className="hidden sm:inline text-xs font-bold uppercase tracking-wide">{t.bookNow}</span>
+           </button>
+
+           {/* User Avatar / Points OR Login Button */}
+           {user ? (
+             <button 
+               onClick={onOpenUserCenter}
+               className="flex items-center gap-2 bg-gray-50 hover:bg-rose-50 border border-gray-200 pl-2 pr-3 py-1.5 rounded-full transition-colors group"
+             >
+                <div className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
+                   {user.avatar ? <img src={user.avatar} className="w-full h-full object-cover" /> : <User className="w-4 h-4 text-gray-500" />}
+                </div>
+                <div className="flex flex-col items-start leading-none">
+                   <span className="text-[9px] text-gray-400 font-bold uppercase">{t.myPoints}</span>
+                   <span className="text-xs font-bold text-amber-500 group-hover:text-amber-600">{user.points}</span>
+                </div>
+             </button>
+           ) : (
+             <button 
+               onClick={onLoginClick}
+               className="flex items-center gap-2 text-gray-600 hover:text-rose-600 font-bold text-xs"
+             >
+                <LogIn className="w-4 h-4" />
+                <span className="hidden sm:inline">{t.authLogin}</span>
+             </button>
+           )}
+
+           {/* Language Selector */}
+           <div className="relative group hidden sm:block">
+              <button className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white border border-gray-200 text-xs font-semibold text-gray-700 hover:bg-gray-50 transition-colors">
+                <Globe className="w-3.5 h-3.5" />
+                <span className="uppercase">{language}</span>
+              </button>
+              
+              <div className="absolute right-0 mt-2 w-32 bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden hidden group-hover:block animate-fade-in z-50">
+                 <div className="flex flex-col py-1">
+                    {['en', 'zh', 'ja', 'ko', 'es', 'fr'].map((lang) => (
+                      <button 
+                        key={lang}
+                        onClick={() => onLanguageChange(lang as Language)} 
+                        className={`px-4 py-2 text-left text-xs hover:bg-rose-50 ${language === lang ? 'text-rose-600 font-bold bg-rose-50' : 'text-gray-700'}`}
+                      >
+                        {lang === 'en' ? 'English' : 
+                         lang === 'zh' ? '中文' :
+                         lang === 'ja' ? '日本語' :
+                         lang === 'ko' ? '한국어' :
+                         lang === 'es' ? 'Español' : 'Français'}
+                      </button>
+                    ))}
+                 </div>
+              </div>
+           </div>
+        </div>
+      </div>
+    </header>
+  );
+};

components/ImageUploader.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback } from 'react';
+import { Upload, X, Plus } from 'lucide-react';
+import { Language } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface ImageUploaderProps {
+  onImagesSelect: (base64Images: string[]) => void;
+  currentImages: string[];
+  disabled: boolean;
+  language: Language;
+}
+
+export const ImageUploader: React.FC<ImageUploaderProps> = ({ onImagesSelect, currentImages, disabled, language }) => {
+  const t = TRANSLATIONS[language];
+  
+  const handleFileChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0) {
+      const newImages: string[] = [];
+      let processed = 0;
+
+      // Limit to 5 images for performance
+      const maxFiles = Math.min(files.length, 5);
+
+      for (let i = 0; i < maxFiles; i++) {
+        const file = files[i];
+        if (file.size > 5 * 1024 * 1024) {
+          alert(`File ${file.name} is too large. Skip.`);
+          processed++;
+          if (processed === maxFiles) onImagesSelect([...currentImages, ...newImages]);
+          continue;
+        }
+
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          newImages.push(reader.result as string);
+          processed++;
+          if (processed === maxFiles) {
+            // Append to existing images
+            onImagesSelect([...currentImages, ...newImages]);
+          }
+        };
+        reader.readAsDataURL(file);
+      }
+    }
+  }, [currentImages, onImagesSelect]);
+
+  const removeImage = (index: number) => {
+    const newImages = currentImages.filter((_, i) => i !== index);
+    onImagesSelect(newImages);
+  };
+
+  const hasImages = currentImages.length > 0;
+
+  return (
+    <div className="w-full">
+      <div className={`
+        relative w-full min-h-[300px] rounded-2xl border-2 border-dashed
+        transition-all duration-300 flex flex-col items-center justify-center p-4
+        ${hasImages ? 'border-rose-300 bg-rose-50' : 'border-gray-300 bg-gray-50 hover:bg-gray-100 hover:border-gray-400'}
+        ${disabled ? 'opacity-60 cursor-not-allowed' : ''}
+      `}>
+        
+        {!hasImages ? (
+           // Empty State
+           <div className="flex flex-col items-center justify-center text-center pointer-events-none">
+              <div className="w-16 h-16 mb-4 rounded-full bg-white flex items-center justify-center shadow-sm">
+                <Upload className="w-8 h-8 text-rose-400" />
+              </div>
+              <p className="text-lg font-medium text-gray-700">{t.uploadTitle}</p>
+              <p className="text-sm text-gray-500 mt-2 max-w-xs">{t.uploadDesc}</p>
+           </div>
+        ) : (
+           // Grid View for Multiple Images
+           <div className="w-full grid grid-cols-2 sm:grid-cols-3 gap-4">
+              {currentImages.map((img, idx) => (
+                <div key={idx} className="relative aspect-[3/4] rounded-xl overflow-hidden shadow-sm group">
+                  <img src={img} alt={`Uploaded ${idx}`} className="w-full h-full object-cover" />
+                  {!disabled && (
+                    <button 
+                      onClick={() => removeImage(idx)}
+                      className="absolute top-2 right-2 bg-black/50 text-white p-1 rounded-full hover:bg-red-500 transition-colors"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                  )}
+                </div>
+              ))}
+              
+              {/* Add More Button (if less than 5) */}
+              {currentImages.length < 5 && !disabled && (
+                <div className="relative aspect-[3/4] rounded-xl border-2 border-dashed border-rose-300 flex flex-col items-center justify-center bg-white/50 hover:bg-white transition-colors cursor-pointer group">
+                   <Plus className="w-8 h-8 text-rose-400 mb-2 group-hover:scale-110 transition-transform" />
+                   <span className="text-xs text-rose-500 font-bold">Add Photo</span>
+                   <input
+                      type="file"
+                      multiple
+                      accept="image/png, image/jpeg, image/jpg, image/webp"
+                      onChange={handleFileChange}
+                      disabled={disabled}
+                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                   />
+                </div>
+              )}
+           </div>
+        )}
+
+        {/* Hidden Input for Initial Drag/Drop area */}
+        {!hasImages && (
+          <input
+            type="file"
+            multiple
+            accept="image/png, image/jpeg, image/jpg, image/webp"
+            onChange={handleFileChange}
+            disabled={disabled}
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+          />
+        )}
+      </div>
+      
+      {hasImages && (
+        <p className="text-center text-xs text-gray-400 mt-2">
+          {currentImages.length} photo(s) selected. Max 5.
+        </p>
+      )}
+    </div>
+  );
+};

components/RedPacketModal.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from 'react';
+import { X, Gift } from 'lucide-react';
+import { Language, AdminConfig, UserAccount } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+// @ts-ignore
+import confetti from 'canvas-confetti';
+
+interface RedPacketModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+  language: Language;
+  adminConfig: AdminConfig;
+  user?: UserAccount;
+  onUpdateUser: (balance: number) => void;
+  onOpenShare: () => void;
+}
+
+export const RedPacketModal: React.FC<RedPacketModalProps> = ({ 
+  isVisible, onClose, language, adminConfig, user, onUpdateUser, onOpenShare 
+}) => {
+  const [stage, setStage] = useState<'closed' | 'opened'>('closed');
+  const [amount, setAmount] = useState(0);
+  const t = TRANSLATIONS[language];
+
+  // Determine target amount
+  const max = adminConfig.redPacketMax || 2000;
+  // If user exists, show their balance. If no user (guest), show default almost-max (e.g. max - 20)
+  const userBalance = user?.redPacketBalance ?? (max - 20);
+
+  useEffect(() => {
+    if (isVisible) {
+       setStage('closed');
+
+       // Animate amount up to userBalance
+       let current = 0;
+       // Animation speed
+       const step = userBalance / 40; 
+       const interval = setInterval(() => {
+          current += step;
+          if (current >= userBalance) {
+             current = userBalance;
+             clearInterval(interval);
+          }
+          setAmount(Math.floor(current));
+       }, 30);
+       return () => clearInterval(interval);
+    }
+  }, [isVisible, userBalance]);
+
+  if (!isVisible) return null;
+
+  const handleOpen = () => {
+     setStage('opened');
+     confetti({
+        particleCount: 150,
+        spread: 80,
+        origin: { y: 0.6 },
+        colors: ['#fbbf24', '#ef4444', '#ffffff']
+     });
+     // Ensure user gets this balance if they haven't already
+     if (user && (user.redPacketBalance === undefined || user.redPacketBalance === 0)) {
+         onUpdateUser(userBalance);
+     }
+  };
+  
+  const handleWithdraw = () => {
+      onOpenShare();
+      onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-[120] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fade-in">
+       <div className="relative w-full max-w-sm">
+          <button onClick={onClose} className="absolute -top-10 right-0 p-2 bg-white/20 rounded-full text-white hover:bg-white/40">
+             <X className="w-5 h-5" />
+          </button>
+          
+          {stage === 'closed' ? (
+             // Stage 1: The Big Red Envelope
+             <div className="bg-gradient-to-b from-red-500 to-red-600 rounded-3xl shadow-2xl overflow-hidden text-center p-8 relative animate-bounce-slow">
+                 <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-32 bg-red-700 rounded-b-full opacity-50"></div>
+                 <div className="relative z-10 pt-10">
+                    <p className="text-yellow-200 text-lg font-bold mb-2">{t.pddRedPacketTitle}</p>
+                    <h3 className="text-3xl font-bold text-white mb-8">{t.pddRedPacketDesc}</h3>
+                    
+                    <button 
+                       onClick={handleOpen}
+                       className="w-24 h-24 rounded-full bg-yellow-400 border-4 border-yellow-200 text-red-600 font-bold text-xl shadow-lg hover:scale-110 transition-transform flex items-center justify-center mx-auto"
+                    >
+                       <span className="animate-pulse">{t.pddRedPacketCta}</span>
+                    </button>
+                 </div>
+             </div>
+          ) : (
+             // Stage 2: The "Almost There" Trap
+             <div className="bg-white rounded-3xl shadow-2xl overflow-hidden relative">
+                 <div className="bg-red-500 p-6 text-center pb-12">
+                     <p className="text-white/80 text-sm font-bold uppercase tracking-wider">Account Balance</p>
+                     <h2 className="text-5xl font-bold text-white mt-2">¥{amount}</h2>
+                 </div>
+                 
+                 <div className="px-6 -mt-8 relative z-10">
+                    <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-100 text-center">
+                        <p className="text-gray-800 font-bold text-lg">{t.pddWithdrawTitle}</p>
+                        <div className="w-full h-3 bg-gray-100 rounded-full mt-3 overflow-hidden">
+                           <div className="h-full bg-red-500 animate-pulse" style={{ width: `${(amount / max) * 100}%` }}></div>
+                        </div>
+                        <p className="text-xs text-red-500 mt-2 font-bold">{t.pddWithdrawDesc}</p>
+                        
+                        <button 
+                           onClick={handleWithdraw}
+                           className="w-full py-3 bg-red-500 text-white rounded-full font-bold mt-4 shadow-lg shadow-red-200 hover:bg-red-600 flex items-center justify-center gap-2"
+                        >
+                           <Gift className="w-4 h-4" /> Share to Withdraw
+                        </button>
+                    </div>
+                 </div>
+                 
+                 <div className="p-6 bg-gray-50">
+                    <div className="space-y-3">
+                       {['User 123 withdrew ¥2000', 'Amy unlocked VIP', 'Mike got ¥500'].map((txt, i) => (
+                          <div key={i} className="flex items-center gap-2 text-xs text-gray-500">
+                             <div className="w-6 h-6 bg-gray-200 rounded-full"></div>
+                             <span>{txt}</span>
+                             <span className="ml-auto text-gray-400">1m ago</span>
+                          </div>
+                       ))}
+                    </div>
+                 </div>
+             </div>
+          )}
+       </div>
+    </div>
+  );
+};

components/ResultViewer.tsx

@@ -0,0 +1,762 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Download, Maximize2, X, Grid, Loader2, Video, Settings, Type, Sparkles, Layers, Stamp, Clock, PlayCircle, Share2, CalendarCheck, ArrowLeftRight, Music, FileText, CheckCircle, Monitor, SplitSquareHorizontal, Zap, Activity, Snowflake, ChevronDown, ChevronUp, CheckSquare, Square, Check } from 'lucide-react';
+import { GeneratedResult, WeddingStyle, Language, VideoTemplate } from '../types';
+import { STYLES } from './StyleSelector';
+import { FILTERS } from './FilterSelector';
+import { TRANSLATIONS } from '../constants/translations';
+import JSZip from 'jszip';
+
+interface ResultViewerProps {
+  originalImages: string[];
+  results: Record<string, GeneratedResult>;
+  initialSelectedId?: string;
+  onReset: () => void;
+  activeFilter?: string;
+  blurAmount?: number;
+  language: Language;
+  onBookClick: () => void;
+  onShareClick: () => void;
+}
+
+interface VideoConfig {
+  transition: 'fade' | 'slide' | 'none';
+  customTitle: string;
+  enableCustomTitle: boolean;
+  showWatermark: boolean;
+  transitionDuration: number;
+  musicTrack: string; 
+  format: 'mp4' | 'webm';
+  resolution: '720p' | '1080p';
+  template: VideoTemplate; 
+}
+
+// Available Music Options
+const MUSIC_OPTIONS = [
+  { id: 'none', labelKey: 'musicNone', src: '' },
+  { id: 'romantic', labelKey: 'musicRomantic', src: 'https://cdn.pixabay.com/download/audio/2022/05/27/audio_1808fbf07a.mp3?filename=romantic-wedding-111663.mp3' },
+  { id: 'cinematic', labelKey: 'musicCinematic', src: 'https://cdn.pixabay.com/download/audio/2022/03/24/audio_3335555c27.mp3?filename=cinematic-atmosphere-1936.mp3' },
+  { id: 'upbeat', labelKey: 'musicUpbeat', src: 'https://cdn.pixabay.com/download/audio/2022/10/25/audio_5e062d1646.mp3?filename=upbeat-pop-1234.mp3' },
+];
+
+const applyEffectsToCanvas = (
+  ctx: CanvasRenderingContext2D, 
+  img: HTMLImageElement, 
+  width: number, 
+  height: number, 
+  filter: string, 
+  blurAmount: number, 
+  addWatermark: boolean, 
+  watermarkText: string
+) => {
+  ctx.filter = filter;
+  ctx.drawImage(img, 0, 0, width, height);
+  ctx.filter = 'none';
+
+  if (blurAmount > 0) {
+    const offCanvas = document.createElement('canvas');
+    offCanvas.width = width;
+    offCanvas.height = height;
+    const offCtx = offCanvas.getContext('2d');
+    
+    if (offCtx) {
+      const scale = Math.max(1, width / 600); 
+      const scaledBlur = blurAmount * scale;
+      const filterStr = filter !== 'none' ? `${filter} blur(${scaledBlur}px)` : `blur(${scaledBlur}px)`;
+      offCtx.filter = filterStr;
+      offCtx.drawImage(img, 0, 0, width, height);
+      offCtx.globalCompositeOperation = 'destination-out';
+      const minDim = Math.min(width, height);
+      const gradient = offCtx.createRadialGradient(
+        width / 2, height / 2, minDim * 0.4, 
+        width / 2, height / 2, minDim * 0.8
+      );
+      gradient.addColorStop(0, 'rgba(0,0,0,1)'); 
+      gradient.addColorStop(1, 'rgba(0,0,0,0)');
+      offCtx.fillStyle = gradient;
+      offCtx.fillRect(0, 0, width, height);
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.drawImage(offCanvas, 0, 0);
+    }
+  }
+
+  if (addWatermark) {
+    ctx.save();
+    const fontSize = Math.max(14, Math.floor(width * 0.03));
+    const padding = Math.floor(fontSize * 1.5);
+    ctx.font = `500 ${fontSize}px 'Playfair Display', serif`;
+    ctx.textAlign = 'right';
+    ctx.textBaseline = 'bottom';
+    ctx.shadowColor = 'rgba(0,0,0,0.5)';
+    ctx.shadowBlur = 4;
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
+    ctx.fillText(watermarkText, width - padding, height - padding);
+    ctx.restore();
+  }
+};
+
+async function generateVideo(
+  originalSrcs: string[],
+  results: Record<string, GeneratedResult>,
+  allStyles: WeddingStyle[],
+  filter: string = 'none',
+  blurAmount: number = 0,
+  config: VideoConfig,
+  language: Language,
+  targetStyleId?: string
+): Promise<string | null> {
+    return new Promise(async (resolve, reject) => {
+        try {
+            const canvas = document.createElement('canvas');
+            const is1080p = config.resolution === '1080p';
+            canvas.width = is1080p ? 1080 : 720;
+            canvas.height = is1080p ? 1920 : 1280;
+            const ctx = canvas.getContext('2d');
+            
+            if (!ctx) throw new Error("Canvas context failed");
+
+            // Template Logic
+            let durationPerSlide = 2000;
+            let transitionDuration = config.transition === 'none' ? 0 : config.transitionDuration;
+            
+            if (config.template === 'flash') {
+                durationPerSlide = 500;
+                transitionDuration = 0;
+            } else if (config.template === 'slow') {
+                durationPerSlide = 3000;
+                transitionDuration = 1000;
+            }
+
+            // Prepare Audio
+            let audioCtx: AudioContext | null = null;
+            let dest: MediaStreamAudioDestinationNode | null = null;
+            if (config.musicTrack !== 'none') {
+                const track = MUSIC_OPTIONS.find(m => m.id === config.musicTrack);
+                if (track && track.src) {
+                    try {
+                        audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
+                        const response = await fetch(track.src);
+                        const arrayBuffer = await response.arrayBuffer();
+                        const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
+                        dest = audioCtx.createMediaStreamDestination();
+                        const sourceNode = audioCtx.createBufferSource();
+                        sourceNode.buffer = audioBuffer;
+                        sourceNode.loop = true;
+                        sourceNode.connect(dest);
+                        sourceNode.start(0);
+                    } catch (e) { console.warn("Audio load failed", e); }
+                }
+            }
+
+            const stream = canvas.captureStream(30);
+            if (dest) {
+                const audioTrack = dest.stream.getAudioTracks()[0];
+                if (audioTrack) stream.addTrack(audioTrack);
+            }
+
+            const mimeType = MediaRecorder.isTypeSupported('video/webm; codecs=vp9') ? 'video/webm; codecs=vp9' : 'video/webm';
+            const recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 4000000 });
+            const chunks: Blob[] = [];
+            recorder.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data); };
+            recorder.onstop = () => {
+                const blob = new Blob(chunks, { type: 'video/webm' });
+                const url = URL.createObjectURL(blob);
+                if (audioCtx) audioCtx.close();
+                resolve(url);
+            };
+            recorder.start();
+
+            let itemsToRender: GeneratedResult[] = [];
+            if (targetStyleId) {
+                itemsToRender = [{ styleId: 'ORIGINAL', imageUrl: originalSrcs[0], timestamp: 0 }];
+                if(results[targetStyleId]) itemsToRender.push(results[targetStyleId]);
+            } else {
+                itemsToRender = Object.values(results) as GeneratedResult[];
+            }
+
+            const loadImage = (url: string) => new Promise<HTMLImageElement>(r => {
+                const i = new Image(); i.crossOrigin = "anonymous"; i.onload = () => r(i); i.src = url;
+            });
+
+            for (let i = 0; i < itemsToRender.length; i++) {
+                const item = itemsToRender[i];
+                const img = await loadImage(item.imageUrl);
+                
+                let label = '';
+                if (config.enableCustomTitle && config.customTitle) label = config.customTitle;
+                else if (item.styleId === 'ORIGINAL') label = 'Before';
+                else {
+                    const s = allStyles.find(st => st.id === item.styleId);
+                    label = s ? s.name : item.styleId;
+                }
+
+                const startTime = Date.now();
+                while (Date.now() - startTime < durationPerSlide) {
+                    applyEffectsToCanvas(ctx, img, canvas.width, canvas.height, filter, blurAmount, config.showWatermark, "Romantic Life");
+                    
+                    if (config.template !== 'flash') {
+                        ctx.fillStyle = 'rgba(0,0,0,0.5)';
+                        ctx.fillRect(0, canvas.height - 100, canvas.width, 100);
+                        ctx.fillStyle = 'white';
+                        ctx.font = 'bold 40px sans-serif';
+                        ctx.textAlign = 'center';
+                        ctx.fillText(label, canvas.width / 2, canvas.height - 35);
+                    }
+                    await new Promise(r => requestAnimationFrame(r));
+                }
+
+                if (config.template !== 'flash' && i < itemsToRender.length - 1) {
+                    const nextImg = await loadImage(itemsToRender[i+1].imageUrl);
+                    const transStart = Date.now();
+                    while (Date.now() - transStart < transitionDuration) {
+                        const progress = (Date.now() - transStart) / transitionDuration;
+                        ctx.globalAlpha = 1;
+                        applyEffectsToCanvas(ctx, img, canvas.width, canvas.height, filter, blurAmount, config.showWatermark, "Romantic Life");
+                        ctx.globalAlpha = progress;
+                        applyEffectsToCanvas(ctx, nextImg, canvas.width, canvas.height, filter, blurAmount, config.showWatermark, "Romantic Life");
+                        ctx.globalAlpha = 1;
+                        await new Promise(r => requestAnimationFrame(r));
+                    }
+                }
+            }
+            recorder.stop();
+        } catch (e) { reject(e); }
+    });
+}
+
+export const ResultViewer: React.FC<ResultViewerProps> = ({ 
+  originalImages, results, initialSelectedId, onReset, activeFilter = 'none', blurAmount = 0, language, onBookClick, onShareClick
+}) => {
+  const resultKeys = Object.keys(results);
+  const [activeId, setActiveId] = useState<string | null>(initialSelectedId && results[initialSelectedId] ? initialSelectedId : resultKeys[0]);
+  const [showVideoSettings, setShowVideoSettings] = useState(false);
+  const [videoConfig, setVideoConfig] = useState<VideoConfig>({
+    transition: 'fade',
+    customTitle: '',
+    enableCustomTitle: false,
+    showWatermark: true,
+    transitionDuration: 800,
+    musicTrack: 'none',
+    format: 'mp4',
+    resolution: '1080p',
+    template: 'default'
+  });
+  
+  // States
+  const [liveEffect, setLiveEffect] = useState<'none'|'breath'|'glitch'|'particles'>('none');
+  const [compareMode, setCompareMode] = useState(false);
+  const [compareId, setCompareId] = useState<string | null>(null); // null means Original
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const [isSingleVideoGenerating, setIsSingleVideoGenerating] = useState(false);
+  const [includeWatermark, setIncludeWatermark] = useState(true);
+  const [openSection, setOpenSection] = useState<'composition' | 'effects' | 'audio' | null>('composition');
+  const [isZipping, setIsZipping] = useState(false);
+  
+  // Selection States
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+  const t = TRANSLATIONS[language];
+
+  // SYNC Logic: Listen for parent prop changes
+  useEffect(() => {
+    if (initialSelectedId && results[initialSelectedId]) {
+      setActiveId(initialSelectedId);
+    }
+  }, [initialSelectedId, results]);
+
+  const activeResult = activeId ? results[activeId] : null;
+  const activeStyle = activeId ? STYLES.find(s => s.id === activeId) : null;
+  const activeStyleName = activeStyle ? (t.styles as any)[activeStyle.id] || activeStyle.name : '';
+  
+  // Resolve Comparison Image (Left side)
+  const compareResult = compareId ? results[compareId] : null;
+  const compareImageUrl = compareResult ? compareResult.imageUrl : originalImages[0];
+  const compareLabel = compareId 
+      ? (STYLES.find(s => s.id === compareId) ? ((t.styles as any)[compareId] || compareId) : compareId) 
+      : t.original;
+
+  // Slider Handlers
+  const handleMouseDown = useCallback(() => { isDragging.current = true; }, []);
+  const handleMouseUp = useCallback(() => { isDragging.current = false; }, []);
+  
+  const updateSlider = useCallback((clientX: number) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const pos = ((clientX - rect.left) / rect.width) * 100;
+    setSliderPosition(Math.max(0, Math.min(100, pos)));
+  }, []);
+
+  const handleMouseMove = useCallback((e: MouseEvent | TouchEvent) => {
+    if (!isDragging.current) return;
+    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+    updateSlider(clientX);
+  }, [updateSlider]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (!compareMode) return;
+    
+    let delta = 0;
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = -5;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = 5;
+    
+    if (delta !== 0) {
+        e.preventDefault();
+        setSliderPosition(prev => Math.max(0, Math.min(100, prev + delta)));
+    }
+  }, [compareMode]);
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('touchend', handleMouseUp);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('touchmove', handleMouseMove);
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('touchend', handleMouseUp);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('touchmove', handleMouseMove);
+    };
+  }, [handleMouseMove, handleMouseUp]);
+
+  // Selection Logic
+  const toggleSelection = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const newSet = new Set(selectedIds);
+    if (newSet.has(id)) newSet.delete(id);
+    else newSet.add(id);
+    setSelectedIds(newSet);
+  };
+
+  const handleSelectAll = () => {
+    const resultIds = Object.keys(results);
+    // If all currently selected, deselect all. Otherwise select all.
+    // Check if current selection covers all available results
+    const allSelected = resultIds.every(id => selectedIds.has(id));
+    
+    if (allSelected) {
+        setSelectedIds(new Set());
+    } else {
+        setSelectedIds(new Set(resultIds));
+    }
+  };
+
+  const handleGenerateSingleVideo = async () => {
+    if (!activeResult || !activeStyle) return;
+    setIsSingleVideoGenerating(true);
+    try {
+        const url = await generateVideo(originalImages, results, STYLES, activeFilter, blurAmount, videoConfig, language, activeResult.styleId);
+        if (url) {
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `RomanticLife_Video_${activeStyleName}.webm`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            alert("Video saved! You can import this into CapCut or TikTok for editing.");
+        }
+    } catch (e) {
+        console.error("Video gen failed", e);
+        alert("Video generation failed.");
+    } finally {
+        setIsSingleVideoGenerating(false);
+    }
+  };
+
+  const handleDownloadAll = async () => {
+    if (Object.keys(results).length === 0) return;
+    setIsZipping(true);
+
+    try {
+      const zip = new JSZip();
+      const imgFolder = zip.folder("RomanticLife_Photos");
+      
+      // Filter: If selectedIds has items, use only those. Else use all results.
+      // Explicitly typing res to GeneratedResult to fix type error
+      const values = Object.values(results) as GeneratedResult[];
+      const targetResults: GeneratedResult[] = selectedIds.size > 0 
+         ? values.filter((res) => selectedIds.has(res.styleId))
+         : values;
+
+      let count = 0;
+      targetResults.forEach((res: GeneratedResult) => {
+         if (res.imageUrl.startsWith('data:image')) {
+           const base64Data = res.imageUrl.split(',')[1];
+           const style = STYLES.find(s => s.id === res.styleId);
+           const styleName = style ? ((t.styles as any)[style.id] || style.name) : res.styleId;
+           const safeName = styleName.replace(/[^a-z0-9\u4e00-\u9fa5]/gi, '_');
+           imgFolder?.file(`${safeName}_${res.timestamp}.png`, base64Data, { base64: true });
+           count++;
+         }
+      });
+      if (count === 0) {
+          alert("No valid images to zip.");
+          setIsZipping(false);
+          return;
+      }
+      const content = await zip.generateAsync({ type: "blob" });
+      const url = URL.createObjectURL(content);
+      const link = document.createElement('a');
+      const dateStr = new Date().toISOString().slice(0,10);
+      link.href = url;
+      link.download = `RomanticLife_Album_${dateStr}.zip`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Zip failed", error);
+      alert("Failed to package images.");
+    } finally {
+      setIsZipping(false);
+    }
+  };
+
+  if (!activeResult || !activeStyle) return null;
+
+  return (
+    <div className="flex flex-col h-full gap-6">
+      {/* Video Settings Modal */}
+      {showVideoSettings && (
+         <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+            <div className="bg-white rounded-2xl p-0 max-w-sm w-full shadow-2xl overflow-hidden flex flex-col max-h-[85vh]">
+               {/* Header */}
+               <div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+                   <h3 className="font-bold text-lg font-serif text-gray-800">{t.vidSettings}</h3>
+                   <button 
+                       onClick={() => setShowVideoSettings(false)} 
+                       className="p-1 hover:bg-gray-200 rounded-full transition-colors"
+                       aria-label="Close"
+                   >
+                       <X className="w-5 h-5 text-gray-500" />
+                   </button>
+               </div>
+
+               {/* Scrollable Content */}
+               <div className="overflow-y-auto p-4 space-y-3 custom-scrollbar">
+                   {/* Composition Section */}
+                   <div className="border border-gray-200 rounded-xl overflow-hidden">
+                       <button
+                           onClick={() => setOpenSection(openSection === 'composition' ? null : 'composition')}
+                           className="w-full flex justify-between items-center p-3 bg-gray-50 hover:bg-gray-100 transition-colors text-sm font-bold text-gray-700"
+                           aria-expanded={openSection === 'composition'}
+                       >
+                           <span className="flex items-center gap-2"><Grid className="w-4 h-4 text-rose-500" /> {t.sectComposition || 'Composition'}</span>
+                           {openSection === 'composition' ? <ChevronUp className="w-4 h-4 text-gray-400" /> : <ChevronDown className="w-4 h-4 text-gray-400" />}
+                       </button>
+                       {openSection === 'composition' && (
+                           <div className="p-4 bg-white space-y-4 animate-fade-in">
+                               <div>
+                                   <label className="text-xs font-bold text-gray-500 mb-1.5 block">Template</label>
+                                   <div className="relative">
+                                       <select 
+                                           value={videoConfig.template} 
+                                           onChange={e => setVideoConfig({...videoConfig, template: e.target.value as any})} 
+                                           className="w-full p-2.5 pl-3 pr-8 bg-gray-50 border border-gray-200 rounded-lg text-sm appearance-none outline-none focus:border-rose-500 focus:ring-1 focus:ring-rose-200"
+                                       >
+                                           <option value="default">Default</option>
+                                           <option value="flash">Flash Cut (Fast)</option>
+                                           <option value="slow">Slow Motion</option>
+                                       </select>
+                                       <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+                                   </div>
+                               </div>
+                               <div className="grid grid-cols-2 gap-3">
+                                   <div>
+                                       <label className="text-xs font-bold text-gray-500 mb-1.5 block">{t.vidFormat}</label>
+                                       <div className="relative">
+                                           <select 
+                                               value={videoConfig.format} 
+                                               onChange={e => setVideoConfig({...videoConfig, format: e.target.value as any})} 
+                                               className="w-full p-2.5 pl-3 pr-8 bg-gray-50 border border-gray-200 rounded-lg text-sm appearance-none outline-none focus:border-rose-500 focus:ring-1 focus:ring-rose-200"
+                                           >
+                                               <option value="mp4">MP4</option>
+                                               <option value="webm">WebM</option>
+                                           </select>
+                                           <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+                                       </div>
+                                   </div>
+                                   <div>
+                                       <label className="text-xs font-bold text-gray-500 mb-1.5 block">{t.vidResolution}</label>
+                                       <div className="relative">
+                                           <select 
+                                               value={videoConfig.resolution} 
+                                               onChange={e => setVideoConfig({...videoConfig, resolution: e.target.value as any})} 
+                                               className="w-full p-2.5 pl-3 pr-8 bg-gray-50 border border-gray-200 rounded-lg text-sm appearance-none outline-none focus:border-rose-500 focus:ring-1 focus:ring-rose-200"
+                                           >
+                                               <option value="1080p">1080p</option>
+                                               <option value="720p">720p</option>
+                                           </select>
+                                           <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+                                       </div>
+                                   </div>
+                               </div>
+                           </div>
+                       )}
+                   </div>
+
+                   {/* Effects Section */}
+                   <div className="border border-gray-200 rounded-xl overflow-hidden">
+                       <button
+                           onClick={() => setOpenSection(openSection === 'effects' ? null : 'effects')}
+                           className="w-full flex justify-between items-center p-3 bg-gray-50 hover:bg-gray-100 transition-colors text-sm font-bold text-gray-700"
+                           aria-expanded={openSection === 'effects'}
+                       >
+                           <span className="flex items-center gap-2"><Sparkles className="w-4 h-4 text-purple-500" /> {t.sectEffects || 'Effects'}</span>
+                           {openSection === 'effects' ? <ChevronUp className="w-4 h-4 text-gray-400" /> : <ChevronDown className="w-4 h-4 text-gray-400" />}
+                       </button>
+                       {openSection === 'effects' && (
+                           <div className="p-4 bg-white space-y-4 animate-fade-in">
+                               <div>
+                                   <label className="text-xs font-bold text-gray-500 mb-1.5 block">{t.transEffect}</label>
+                                   <div className="relative">
+                                       <select 
+                                           value={videoConfig.transition} 
+                                           onChange={e => setVideoConfig({...videoConfig, transition: e.target.value as any})} 
+                                           className="w-full p-2.5 pl-3 pr-8 bg-gray-50 border border-gray-200 rounded-lg text-sm appearance-none outline-none focus:border-rose-500 focus:ring-1 focus:ring-rose-200"
+                                       >
+                                           <option value="fade">Fade</option>
+                                           <option value="slide">Slide</option>
+                                           <option value="none">None</option>
+                                       </select>
+                                       <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+                                   </div>
+                               </div>
+                           </div>
+                       )}
+                   </div>
+
+                   {/* Audio Section */}
+                   <div className="border border-gray-200 rounded-xl overflow-hidden">
+                        <button
+                           onClick={() => setOpenSection(openSection === 'audio' ? null : 'audio')}
+                           className="w-full flex justify-between items-center p-3 bg-gray-50 hover:bg-gray-100 transition-colors text-sm font-bold text-gray-700"
+                           aria-expanded={openSection === 'audio'}
+                       >
+                           <span className="flex items-center gap-2"><Music className="w-4 h-4 text-blue-500" /> {t.sectAudio || 'Audio'}</span>
+                           {openSection === 'audio' ? <ChevronUp className="w-4 h-4 text-gray-400" /> : <ChevronDown className="w-4 h-4 text-gray-400" />}
+                       </button>
+                       {openSection === 'audio' && (
+                           <div className="p-4 bg-white space-y-4 animate-fade-in">
+                                <div>
+                                  <label className="text-xs font-bold text-gray-500 mb-1.5 block">{t.videoMusic}</label>
+                                  <div className="relative">
+                                      <select 
+                                          value={videoConfig.musicTrack} 
+                                          onChange={e => setVideoConfig({...videoConfig, musicTrack: e.target.value})} 
+                                          className="w-full p-2.5 pl-3 pr-8 bg-gray-50 border border-gray-200 rounded-lg text-sm appearance-none outline-none focus:border-rose-500 focus:ring-1 focus:ring-rose-200"
+                                      >
+                                          {MUSIC_OPTIONS.map(m => (
+                                              <option key={m.id} value={m.id}>{(t as any)[m.labelKey] || m.id}</option>
+                                          ))}
+                                      </select>
+                                      <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+                                  </div>
+                              </div>
+                           </div>
+                       )}
+                   </div>
+               </div>
+
+               {/* Footer */}
+               <div className="p-4 border-t border-gray-100 bg-gray-50/50">
+                   <button 
+                       onClick={() => setShowVideoSettings(false)} 
+                       className="w-full py-3 bg-gray-900 text-white rounded-xl font-bold hover:bg-black transition-all shadow-lg shadow-gray-200 flex items-center justify-center gap-2"
+                   >
+                       <CheckCircle className="w-4 h-4" />
+                       Done
+                   </button>
+               </div>
+            </div>
+         </div>
+      )}
+
+      {/* Main Preview Area */}
+      <div className="flex-1 bg-gray-50 rounded-3xl border border-gray-200 overflow-hidden relative shadow-inner min-h-[500px] group">
+         {/* Live Effects Layer */}
+         <div className={`absolute inset-0 pointer-events-none z-10 ${
+             liveEffect === 'breath' ? 'effect-breath' : 
+             liveEffect === 'glitch' ? 'effect-glitch' : 
+             liveEffect === 'particles' ? 'effect-particles' : ''
+         }`} aria-hidden="true"></div>
+
+         {/* Control Bar */}
+         <div className="absolute top-0 left-0 right-0 p-4 flex justify-between items-start z-40 pointer-events-none">
+            <div className="bg-white/90 backdrop-blur-sm px-4 py-2 rounded-full shadow-sm border border-gray-100 pointer-events-auto">
+                <span className="font-serif font-bold text-gray-800">{activeStyleName}</span>
+            </div>
+            
+            <div className="flex gap-2 pointer-events-auto">
+               <button onClick={() => setLiveEffect(liveEffect === 'none' ? 'breath' : 'none')} className="p-2 bg-white rounded-full shadow-sm" aria-label="Toggle Live Effect"><Zap className="w-4 h-4" aria-hidden="true" /></button>
+               <button 
+                  onClick={() => setCompareMode(!compareMode)} 
+                  className={`p-2 rounded-full shadow-sm transition-colors ${compareMode ? 'bg-blue-600 text-white' : 'bg-white hover:bg-gray-100'}`} 
+                  aria-label={compareMode ? "Exit Compare Mode" : "Enter Compare Mode"}
+                >
+                    <SplitSquareHorizontal className="w-4 h-4" aria-hidden="true" />
+                </button>
+               <button onClick={onReset} className="p-2 bg-gray-900 text-white rounded-full shadow-lg hover:bg-black" aria-label="Reset and Close"><X className="w-4 h-4" aria-hidden="true" /></button>
+            </div>
+         </div>
+
+         {/* Canvas Area with Keyboard Support */}
+         <div 
+           className="relative w-full h-full cursor-col-resize select-none flex items-center justify-center bg-gray-200 outline-none focus:ring-2 focus:ring-rose-500 focus:ring-inset rounded-lg overflow-hidden"
+           ref={containerRef}
+           onMouseDown={handleMouseDown}
+           onTouchStart={handleMouseDown}
+           role={compareMode ? "slider" : "img"}
+           aria-label={compareMode ? "Comparison Slider. Use Left/Right arrows to adjust." : `Generated image for ${activeStyleName}`}
+           aria-valuenow={compareMode ? sliderPosition : undefined}
+           aria-valuemin={compareMode ? 0 : undefined}
+           aria-valuemax={compareMode ? 100 : undefined}
+           tabIndex={0}
+           onKeyDown={handleKeyDown}
+         >
+            {/* Background Image (Active Style / Right Side) */}
+            <img src={activeResult.imageUrl} className="absolute inset-0 w-full h-full object-contain p-2 sm:p-8 transition-opacity duration-300" alt="After" />
+            
+            {compareMode && (
+               <>
+                  {/* Overlay Image (Original or Compare Style / Left Side) - Clipped */}
+                  <img 
+                     src={compareImageUrl} 
+                     className="absolute inset-0 w-full h-full object-contain p-2 sm:p-8 transition-[clip-path] duration-75 ease-linear bg-gray-200" 
+                     alt="Before" 
+                     style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
+                  />
+
+                  {/* Slider Handle */}
+                  <div 
+                     className="absolute top-0 bottom-0 w-0.5 bg-white cursor-ew-resize z-30 filter drop-shadow-[0_0_5px_rgba(0,0,0,0.5)]"
+                     style={{ left: `${sliderPosition}%` }}
+                  >
+                     <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center text-rose-500 hover:scale-110 transition-transform group-active:scale-110">
+                        <ArrowLeftRight className="w-4 h-4" />
+                     </div>
+                  </div>
+
+                  {/* Floating Labels */}
+                  <div className="absolute top-16 left-4 z-20 bg-black/60 text-white px-3 py-1 rounded-full text-xs font-bold backdrop-blur-md border border-white/10 shadow-lg pointer-events-none animate-fade-in">
+                      {compareLabel}
+                  </div>
+                  <div className="absolute top-16 right-4 z-20 bg-rose-500/90 text-white px-3 py-1 rounded-full text-xs font-bold backdrop-blur-md border border-white/10 shadow-lg pointer-events-none animate-fade-in">
+                      {activeStyleName}
+                  </div>
+               </>
+            )}
+         </div>
+      </div>
+
+      {/* Action Bar */}
+      <div className="flex justify-between items-center bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
+         <button onClick={() => setIncludeWatermark(!includeWatermark)} className={`text-xs font-bold ${includeWatermark ? 'text-rose-600' : 'text-gray-400'}`}>
+            Watermark: {includeWatermark ? 'ON' : 'OFF'}
+         </button>
+         <div className="flex gap-2">
+            <button onClick={onShareClick} className="p-2 bg-gray-100 rounded-full hover:bg-gray-200 text-gray-700" aria-label="Share">
+                <Share2 className="w-4 h-4" aria-hidden="true" />
+            </button>
+            <button onClick={() => setShowVideoSettings(true)} className="p-2 bg-gray-100 rounded-full hover:bg-gray-200" aria-label="Video Settings"><Settings className="w-4 h-4" aria-hidden="true" /></button>
+            
+            <button 
+                onClick={handleDownloadAll}
+                disabled={isZipping}
+                className="px-4 py-2 bg-gray-800 text-white rounded-xl font-bold text-xs flex items-center gap-2 hover:bg-black transition-colors"
+            >
+                {isZipping ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4" />}
+                {isZipping ? t.zipLoading : (selectedIds.size > 0 ? `Download (${selectedIds.size})` : t.zipBtn)}
+            </button>
+
+            <button onClick={handleGenerateSingleVideo} disabled={isSingleVideoGenerating} className="px-4 py-2 bg-rose-600 text-white rounded-xl font-bold text-xs flex items-center gap-2">
+               {isSingleVideoGenerating ? <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" /> : <PlayCircle className="w-4 h-4" aria-hidden="true" />}
+               {t.videoBtn}
+            </button>
+         </div>
+      </div>
+
+      {/* Thumbnail Grid */}
+      <div className="flex flex-col gap-2">
+         {/* Grid Toolbar */}
+         <div className="flex items-center justify-between px-2">
+             <button 
+                onClick={handleSelectAll}
+                className="flex items-center gap-1.5 text-xs font-bold text-gray-500 hover:text-rose-500 transition-colors"
+             >
+                 {Object.keys(results).length > 0 && selectedIds.size === Object.keys(results).length ? (
+                    <CheckSquare className="w-4 h-4 text-rose-500" />
+                 ) : (
+                    <Square className="w-4 h-4" />
+                 )}
+                 Select All
+             </button>
+             <span className="text-xs text-gray-400 font-mono">
+                 {selectedIds.size} selected
+             </span>
+         </div>
+         
+         <div className="grid grid-cols-5 gap-2 overflow-x-auto pb-2" role="list" aria-label="Generated Results">
+             {/* Original Image Button (Visible only in Compare Mode) */}
+             {compareMode && (
+                 <button 
+                    onClick={() => setCompareId(null)}
+                    aria-pressed={compareId === null}
+                    className={`aspect-square rounded-lg overflow-hidden cursor-pointer border-2 relative ${compareId === null ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-200'}`}
+                 >
+                    <img src={originalImages[0]} className="w-full h-full object-cover" alt="Original" />
+                    <span className="absolute bottom-0 left-0 w-full bg-black/60 text-white text-[9px] font-bold text-center py-0.5 backdrop-blur-sm">{t.original}</span>
+                    {compareId === null && <div className="absolute top-1 left-1 w-2 h-2 rounded-full bg-blue-500 ring-1 ring-white"></div>}
+                 </button>
+             )}
+
+             {STYLES.filter(s => results[s.id]).map(style => {
+                 const isSelectedView = activeId === style.id;
+                 const isCompare = compareId === style.id;
+                 const isChecked = selectedIds.has(style.id);
+                 
+                 let borderClass = 'border-transparent';
+                 if (compareMode) {
+                     if (isSelectedView) borderClass = 'border-rose-500'; // Right Side
+                     if (isCompare) borderClass = 'border-blue-500 ring-2 ring-blue-200'; // Left Side
+                 } else {
+                     if (isSelectedView) borderClass = 'border-rose-500';
+                 }
+
+                 return (
+                     <button 
+                        key={style.id} 
+                        onClick={() => {
+                            if(compareMode) {
+                                if (activeId !== style.id) setCompareId(style.id);
+                            } else {
+                                setActiveId(style.id);
+                            }
+                        }}
+                        aria-pressed={isSelectedView || isCompare}
+                        aria-label={`View ${style.name} result`}
+                        className={`aspect-square rounded-lg overflow-hidden cursor-pointer border-2 relative transition-all group ${borderClass}`}
+                     >
+                         <img src={results[style.id].imageUrl} className="w-full h-full object-cover" alt="" />
+                         
+                         {/* Selection Checkbox Overlay */}
+                         <div 
+                             className="absolute top-1 left-1 z-20 cursor-pointer"
+                             onClick={(e) => toggleSelection(style.id, e)}
+                         >
+                             <div className={`w-5 h-5 rounded border shadow-sm flex items-center justify-center transition-colors ${isChecked ? 'bg-rose-500 border-rose-600' : 'bg-white/80 border-gray-300 hover:bg-white'}`}>
+                                 {isChecked && <Check className="w-3.5 h-3.5 text-white" />}
+                             </div>
+                         </div>
+
+                         {/* Visual Indicators for Compare Mode */}
+                         {compareMode && isCompare && <div className="absolute top-1 right-1 w-2 h-2 rounded-full bg-blue-500 ring-1 ring-white"></div>}
+                         {compareMode && isSelectedView && <div className="absolute top-1 right-1 w-2 h-2 rounded-full bg-rose-500 ring-1 ring-white"></div>}
+                     </button>
+                 );
+             })}
+         </div>
+      </div>
+    </div>
+  );
+};

components/ShareModal.tsx

@@ -0,0 +1,143 @@
+
+import React from 'react';
+import { X, Copy, Share2, MessageCircle, Facebook, Twitter, Check } from 'lucide-react';
+import { Language } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface ShareModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+  language: Language;
+  config?: any; // Share config from admin
+  showToast: (msg: string) => void;
+  onShareSuccess: () => void;
+}
+
+export const ShareModal: React.FC<ShareModalProps> = ({ 
+  isVisible, onClose, language, config, showToast, onShareSuccess 
+}) => {
+  const t = TRANSLATIONS[language];
+  const [copied, setCopied] = React.useState(false);
+  
+  if (!isVisible) return null;
+
+  const shareTitle = config?.shareTitle || "Check out Romantic Life AI Studio!";
+  const shareUrl = window.location.href;
+  const fullShareText = `${shareTitle} ${shareUrl}`;
+
+  const handleCopyLink = async () => {
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(fullShareText);
+        setCopied(true);
+        showToast(t.toastCopy);
+        onShareSuccess();
+        setTimeout(() => {
+            setCopied(false);
+            onClose();
+        }, 1500);
+      } else {
+        // Fallback for older browsers
+        const textArea = document.createElement("textarea");
+        textArea.value = fullShareText;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+        setCopied(true);
+        showToast(t.toastCopy);
+        onShareSuccess();
+        setTimeout(() => onClose(), 1500);
+      }
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+      alert("Failed to copy link. Please copy manually from address bar.");
+    }
+  };
+
+  const handleWeChat = () => {
+    // In a real PWA, this might trigger a native share if available, 
+    // or show a QR code modal. For now, we simulate the "Shared" callback.
+    if (navigator.share) {
+        navigator.share({
+            title: shareTitle,
+            text: shareTitle,
+            url: shareUrl,
+        }).then(() => {
+            onShareSuccess();
+            onClose();
+        }).catch((error) => console.log('Error sharing', error));
+    } else {
+        alert("Please screenshot this page and share to WeChat Moments.");
+        onShareSuccess(); // Assume they did it for UX flow
+        setTimeout(onClose, 500);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[130] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
+       <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden relative">
+          <div className="bg-gray-50 p-4 border-b border-gray-100 flex justify-between items-center">
+             <h3 className="font-bold text-gray-800 flex items-center gap-2">
+                <Share2 className="w-4 h-4 text-rose-500" /> Share to Earn
+             </h3>
+             <button onClick={onClose} className="p-1 hover:bg-gray-200 rounded-full">
+                <X className="w-5 h-5 text-gray-500" />
+             </button>
+          </div>
+          
+          <div className="p-6 grid grid-cols-2 gap-4">
+             <button 
+               onClick={handleWeChat}
+               className="flex flex-col items-center justify-center gap-2 p-4 rounded-xl bg-green-50 text-green-700 hover:bg-green-100 transition-colors group"
+             >
+                <div className="w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
+                   <MessageCircle className="w-6 h-6" />
+                </div>
+                <span className="text-xs font-bold">WeChat</span>
+             </button>
+
+             <button 
+               onClick={handleCopyLink}
+               className={`flex flex-col items-center justify-center gap-2 p-4 rounded-xl transition-colors group ${copied ? 'bg-gray-800 text-white' : 'bg-gray-50 text-gray-700 hover:bg-gray-100'}`}
+             >
+                <div className={`w-10 h-10 rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform ${copied ? 'bg-green-500 text-white' : 'bg-gray-700 text-white'}`}>
+                   {copied ? <Check className="w-6 h-6" /> : <Copy className="w-5 h-5" />}
+                </div>
+                <span className="text-xs font-bold">{copied ? "Copied!" : "Copy Link"}</span>
+             </button>
+             
+             <button 
+                className="flex flex-col items-center justify-center gap-2 p-4 rounded-xl bg-blue-50 text-blue-700 hover:bg-blue-100 transition-colors opacity-60 hover:opacity-100"
+                onClick={() => {
+                    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, '_blank');
+                    onShareSuccess();
+                }}
+             >
+                <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center shadow-lg">
+                   <Facebook className="w-5 h-5" />
+                </div>
+                <span className="text-xs font-bold">Facebook</span>
+             </button>
+
+             <button 
+                className="flex flex-col items-center justify-center gap-2 p-4 rounded-xl bg-sky-50 text-sky-700 hover:bg-sky-100 transition-colors opacity-60 hover:opacity-100"
+                onClick={() => {
+                    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareTitle)}&url=${encodeURIComponent(shareUrl)}`, '_blank');
+                    onShareSuccess();
+                }}
+             >
+                <div className="w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center shadow-lg">
+                   <Twitter className="w-5 h-5" />
+                </div>
+                <span className="text-xs font-bold">Twitter</span>
+             </button>
+          </div>
+          
+          <div className="p-4 bg-gray-50 text-center">
+             <p className="text-xs text-gray-500">Share now to earn +10 Points instantly!</p>
+          </div>
+       </div>
+    </div>
+  );
+};

components/SlashModal.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from 'react';
+import { X, Zap, Timer } from 'lucide-react';
+import { Language, WeddingStyle, AdminConfig, UserAccount } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface SlashModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+  language: Language;
+  style: WeddingStyle | null;
+  onUnlock: () => void;
+  adminConfig: AdminConfig;
+  user?: UserAccount;
+  onUpdateUser: (progress: Record<string, number>) => void;
+  onOpenShare: () => void;
+}
+
+export const SlashModal: React.FC<SlashModalProps> = ({ 
+  isVisible, onClose, language, style, onUnlock, adminConfig, user, onUpdateUser, onOpenShare 
+}) => {
+  const t = TRANSLATIONS[language];
+  const [progress, setProgress] = useState(98);
+
+  useEffect(() => {
+     if (isVisible && style) {
+         if (user?.slashProgress && user.slashProgress[style.id]) {
+             setProgress(user.slashProgress[style.id]);
+         } else {
+             setProgress(98);
+         }
+     }
+  }, [isVisible, style, user]);
+
+  if (!isVisible || !style) return null;
+  
+  const styleName = (t.styles as any)[style.id] || style.name;
+
+  const handleInvite = () => {
+     onOpenShare();
+     
+     // Update progress logic
+     const remaining = 100 - progress;
+     // Slash logic: Cut 50-80% of remaining
+     const cutPercent = 0.5 + Math.random() * 0.3;
+     let newProgress = progress + (remaining * cutPercent);
+     
+     // If very close, complete it (e.g. > 99.5)
+     if (newProgress > 99.5) {
+         newProgress = 100;
+     }
+
+     setProgress(newProgress);
+
+     if (user) {
+         const newMap = { ...(user.slashProgress || {}), [style.id]: newProgress };
+         onUpdateUser(newMap);
+     }
+     
+     if (newProgress >= 100) {
+         onUnlock();
+     }
+     
+     onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm animate-fade-in">
+       <div className="bg-gradient-to-b from-orange-500 to-red-600 rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden relative text-white">
+          <button onClick={onClose} className="absolute top-2 right-2 p-1.5 bg-black/20 rounded-full hover:bg-black/40 z-20">
+             <X className="w-4 h-4" />
+          </button>
+          
+          <div className="p-6 text-center">
+             <div className="inline-block px-3 py-1 bg-black/30 rounded-full text-xs font-bold mb-4 flex items-center gap-1 mx-auto border border-white/20">
+                <Timer className="w-3 h-3" /> Ends in 23:59:10
+             </div>
+             
+             <h2 className="text-2xl font-bold italic drop-shadow-md">{t.pddSlashTitle}</h2>
+             <p className="text-orange-100 text-sm mt-1">{t.pddSlashDesc}</p>
+             
+             {/* Product Card */}
+             <div className="bg-white text-gray-900 rounded-xl p-3 mt-6 flex items-center gap-3 shadow-lg">
+                 <div className="w-16 h-16 bg-gray-200 rounded-lg shrink-0 overflow-hidden relative">
+                     <div className={`w-full h-full ${style.coverColor} opacity-50`}></div>
+                     <div className="absolute inset-0 flex items-center justify-center">
+                        <span className="text-xs font-bold text-gray-500">IMG</span>
+                     </div>
+                 </div>
+                 <div className="text-left flex-1">
+                     <p className="font-bold text-sm truncate">{styleName}</p>
+                     <p className="text-xs text-gray-500">VIP Premium Collection</p>
+                     <p className="text-red-500 font-bold text-sm mt-1">¥0.00 <span className="text-gray-400 line-through text-xs">¥199</span></p>
+                 </div>
+             </div>
+             
+             {/* Progress Bar */}
+             <div className="mt-6 relative">
+                 <div className="flex justify-between text-xs font-bold mb-1">
+                     <span className="text-yellow-200">{t.pddSlashProgress}</span>
+                     <span>{progress.toFixed(2)}%</span>
+                 </div>
+                 <div className="h-4 bg-black/30 rounded-full overflow-hidden border border-white/20">
+                     <div className="h-full bg-gradient-to-r from-yellow-300 to-yellow-500 relative" style={{ width: `${progress}%` }}>
+                         <div className="absolute top-0 right-0 h-full w-2 bg-white/50 animate-pulse"></div>
+                     </div>
+                 </div>
+                 <div className="absolute -right-2 -top-2 bg-red-100 text-red-600 text-[10px] font-bold px-1.5 rounded-full border border-red-500 shadow-sm animate-bounce">
+                     Only {(100 - progress).toFixed(2)}% left!
+                 </div>
+             </div>
+             
+             <button 
+                onClick={handleInvite}
+                className="w-full py-3 bg-yellow-400 hover:bg-yellow-300 text-red-700 font-extrabold text-lg rounded-full mt-6 shadow-xl shadow-orange-700/50 flex items-center justify-center gap-2 transform active:scale-95 transition-all"
+             >
+                <Zap className="w-5 h-5 fill-current" /> {t.pddSlashCta}
+             </button>
+          </div>
+          
+          {/* Social Proof List */}
+          <div className="bg-white/10 p-4 border-t border-white/10">
+              <p className="text-xs text-white/60 mb-2 text-center">Friends who helped</p>
+              <div className="flex justify-center -space-x-2">
+                  {[1,2,3].map(i => (
+                      <div key={i} className="w-8 h-8 rounded-full bg-gray-200 border-2 border-orange-500"></div>
+                  ))}
+                  <div className="w-8 h-8 rounded-full bg-gray-800 border-2 border-orange-500 flex items-center justify-center text-[10px] text-white">
+                      +99
+                  </div>
+              </div>
+          </div>
+       </div>
+    </div>
+  );
+};

components/StyleSelector.tsx

@@ -0,0 +1,1318 @@
+import React, { useRef, useState, useMemo, useEffect } from 'react';
+import { WeddingStyle, Language, Resolution } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+import { useUserStore } from '../store';
+import { 
+  Heart, Crown, Leaf, Zap, Clock, Sparkles, 
+  Camera, Feather, Film, Palette, Coffee, 
+  Sun, Music, BookOpen, Star, Aperture, 
+  Smile, PenTool, Layout, Image as ImageIcon, Upload,
+  Flower, Gem, Eye, Cog, Rocket, Cpu,
+  Castle, Anchor, Snowflake, Droplets, Warehouse,
+  Trees, Tv, Brush, Cloud, Layers, Unlink, ScanFace,
+  Lock, Dice5, Users, ArrowRight, Search, Briefcase, User, Watch, GraduationCap, Baby, Grid,
+  Fish, Flame, Moon, Hourglass, Landmark, Sword, Monitor, Shirt, Box, Home, Book, Circle, Globe, Activity, Check, Maximize, Loader2
+} from 'lucide-react';
+
+interface StyleSelectorProps {
+  selectedStyle: WeddingStyle | null;
+  onSelect: (style: WeddingStyle) => void;
+  onCustomSelect: (image: string) => void;
+  onLuckySelect: () => void;
+  onSlashClick: (style: WeddingStyle) => void; 
+  disabled: boolean;
+  language: Language;
+  recommendedStyleIds?: string[];
+  isVipUnlocked?: boolean;
+  isLoading?: boolean;
+  resolution: Resolution;
+  onResolutionChange: (res: Resolution) => void;
+}
+
+// Simple icon wrapper
+const BoxIcon = ({ className }: { className?: string }) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className} aria-hidden="true">
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+  </svg>
+);
+
+// Skeleton for loading state
+const StyleCardSkeleton = () => (
+  <li className="list-none aspect-[3/4] rounded-xl overflow-hidden bg-gray-100 relative animate-pulse border border-gray-100">
+    <div className="absolute inset-0 bg-gray-200/50"></div>
+    <div className="absolute bottom-0 left-0 right-0 p-3 space-y-2 bg-gradient-to-t from-gray-200 to-transparent pt-10">
+       <div className="flex justify-between items-end">
+           <div className="space-y-1.5 w-full">
+               <div className="h-4 bg-gray-300 rounded w-2/3"></div>
+               <div className="h-3 bg-gray-300 rounded w-1/2"></div>
+           </div>
+           <div className="w-8 h-8 rounded-full bg-gray-300 shrink-0"></div>
+       </div>
+    </div>
+  </li>
+);
+
+// Lazy Background Component with Pulse Effect
+const LazyStyleBackground = ({ src, colorClass }: { src?: string, colorClass: string }) => {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+
+  // If no image or error, return just the color background (original behavior)
+  if (!src || error) {
+    return <div className={`absolute inset-0 opacity-40 ${colorClass} transition-opacity group-hover:opacity-60`} aria-hidden="true" />;
+  }
+
+  return (
+    <>
+      {/* Skeleton / Loading State for individual image */}
+      {!loaded && (
+         <div className={`absolute inset-0 ${colorClass} flex items-center justify-center z-10`} aria-hidden="true">
+            <div className="absolute inset-0 bg-white/20 animate-pulse" />
+            <Loader2 className="w-6 h-6 text-gray-400/50 animate-spin" />
+         </div>
+      )}
+      
+      {/* Lazy Loaded Image */}
+      <img
+        src={src}
+        alt=""
+        loading="lazy"
+        onLoad={() => setLoaded(true)}
+        onError={() => setError(true)}
+        className={`absolute inset-0 w-full h-full object-cover transition-all duration-500 ${loaded ? 'opacity-30 group-hover:opacity-50 scale-100' : 'opacity-0 scale-105'}`}
+        aria-hidden="true"
+      />
+    </>
+  );
+};
+
+// We keep the logic constants here, but names will be dynamic based on language
+export const STYLES: WeddingStyle[] = [
+  // 1. Classic & Western
+  {
+    id: 'korean',
+    name: '韩式 (Korean)', // Fallback
+    prompt: 'Korean wedding photography style, minimalist, clean solid background, soft studio lighting, elegant white mermaid dress, simple veil, romantic and sweet atmosphere, flawless makeup, K-drama aesthetic.',
+    description: 'Minimalist, sweet, and elegant.',
+    coverColor: 'bg-rose-50',
+    previewImage: 'https://images.unsplash.com/photo-1520854221256-17451cc330e7?auto=format&fit=crop&w=400&q=60',
+    icon: <Heart className="w-5 h-5 text-rose-400" aria-hidden="true" />,
+    tags: ['hot'],
+    isLocked: true, // Aggressive VIP Strategy: Lock the most popular style
+    groupCount: 523 // PDD: Fake group count
+  },
+  {
+    id: 'british',
+    name: '英伦 (British)',
+    prompt: 'British royal style wedding, vintage manor background, groom in morning suit, bride in lace vintage gown, elegant hat, overcast soft light, noble and aristocratic atmosphere.',
+    description: 'Aristocratic, vintage manor vibes.',
+    coverColor: 'bg-blue-50',
+    previewImage: 'https://images.unsplash.com/photo-1505944270255-72b8c68c6a70?auto=format&fit=crop&w=400&q=60',
+    icon: <Crown className="w-5 h-5 text-blue-600" aria-hidden="true" />
+  },
+  {
+    id: 'euro_american',
+    name: '欧美 (Western)',
+    prompt: 'Western fashion wedding style, Vogue magazine aesthetic, bold emotions, grand cathedral or outdoor lawn background, classic tuxedo and ballgown, dramatic lighting.',
+    description: 'Classic western grandeur and emotion.',
+    coverColor: 'bg-slate-50',
+    previewImage: 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=400&q=60',
+    icon: <Star className="w-5 h-5 text-slate-600" aria-hidden="true" />
+  },
+  {
+    id: 'hollywood',
+    name: '好莱坞 (Hollywood)',
+    prompt: 'Classic Hollywood movie glamour, black and white, dramatic lighting, elegant 1950s gowns, tuxedo, red carpet aesthetic, high contrast film noir style.',
+    description: 'Glamorous 1950s film noir.',
+    coverColor: 'bg-gray-200',
+    previewImage: 'https://images.unsplash.com/photo-1537633552985-df8429e8048b?auto=format&fit=crop&w=400&q=60',
+    icon: <Film className="w-5 h-5 text-gray-800" aria-hidden="true" />
+  },
+  
+  // 2. Cultural & Traditional
+  {
+    id: 'chinese',
+    name: '中国风 (Chinese)',
+    prompt: 'Modern Chinese wedding style, luxurious red embroidery, traditional elements mixed with modern aesthetics, fan, porcelain, red background, festive and grand.',
+    description: 'Modern red aesthetics and embroidery.',
+    coverColor: 'bg-red-50',
+    previewImage: 'https://images.unsplash.com/photo-1588667822949-a034d612df08?auto=format&fit=crop&w=400&q=60',
+    icon: <Leaf className="w-5 h-5 text-red-600" aria-hidden="true" />,
+    tags: ['hot'],
+    isLocked: true, // Aggressive VIP Strategy: Lock the most popular style
+    groupCount: 890 // PDD
+  },
+  {
+    id: 'gufeng',
+    name: '古风 (Ancient)',
+    prompt: 'Ancient Chinese Hanfu style, ethereal fairy tale vibe, flowing silk robes, ink painting background, bamboo forest, flute, poetic and historical atmosphere.',
+    description: 'Ethereal Hanfu and poetic vibes.',
+    coverColor: 'bg-emerald-50',
+    previewImage: 'https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=400&q=60',
+    icon: <Feather className="w-5 h-5 text-emerald-600" aria-hidden="true" />
+  },
+  {
+    id: 'japanese',
+    name: '日系 (Japanese)',
+    prompt: 'Japanese aesthetic, bright and airy, overexposed soft light, film grain, emotional close-up, clean streets or cherry blossoms background, natural makeup, pure and fresh.',
+    description: 'Bright, airy, and emotional.',
+    coverColor: 'bg-sky-50',
+    previewImage: 'https://images.unsplash.com/photo-1492596985094-52771095ad79?auto=format&fit=crop&w=400&q=60',
+    icon: <Sun className="w-5 h-5 text-sky-400" aria-hidden="true" />
+  },
+  {
+    id: 'ethnic',
+    name: '民族风 (Ethnic)',
+    prompt: 'Exotic ethnic wedding style, colorful traditional patterns, heavy silver jewelry, vibrant fabrics, wild nature background, bohemian spirit, cultural richness.',
+    description: 'Vibrant colors and cultural patterns.',
+    coverColor: 'bg-orange-50',
+    previewImage: 'https://images.unsplash.com/photo-1606216794074-735e91aa2c92?auto=format&fit=crop&w=400&q=60',
+    icon: <Music className="w-5 h-5 text-orange-500" aria-hidden="true" />
+  },
+  {
+    id: 'exotic',
+    name: '异域风 (Exotic)',
+    prompt: 'Exotic desert or island wedding, Persian or Moroccan influence, warm sunset lighting, golden accessories, mysterious and alluring atmosphere.',
+    description: 'Mysterious, warm, and unique.',
+    coverColor: 'bg-amber-50',
+    previewImage: 'https://images.unsplash.com/photo-1516815231560-8f41ec531527?auto=format&fit=crop&w=400&q=60',
+    icon: <Sun className="w-5 h-5 text-amber-600" aria-hidden="true" />
+  },
+
+  // 3. Artistic & Mood
+  {
+    id: 'cinematic',
+    name: '电影感 (Cinematic)',
+    prompt: 'Cinematic movie still, Wong Kar-wai style, moody lighting, strong shadows, emotional storytelling, color graded, wide aspect ratio composition feeling.',
+    description: 'Moody, storytelling movie stills.',
+    coverColor: 'bg-gray-100',
+    previewImage: 'https://images.unsplash.com/photo-1470163395405-d2b80e7450ed?auto=format&fit=crop&w=400&q=60',
+    icon: <Film className="w-5 h-5 text-gray-700" aria-hidden="true" />,
+    tags: ['recommend']
+  },
+  {
+    id: 'film',
+    name: '胶片 (Film)',
+    prompt: 'Vintage film photography, Kodak Portra 400 look, grain, light leaks, nostalgic color palette, candid moment, timeless texture.',
+    description: 'Nostalgic grain and analog texture.',
+    coverColor: 'bg-yellow-50',
+    previewImage: 'https://images.unsplash.com/photo-1522673607200-1645062cd958?auto=format&fit=crop&w=400&q=60',
+    icon: <Camera className="w-5 h-5 text-yellow-600" aria-hidden="true" />
+  },
+  {
+    id: 'blackwhite',
+    name: '黑白 (B&W)',
+    prompt: 'Classic black and white photography, high contrast, Ansel Adams style, timeless, emotional focus, artistic composition, removing color distractions.',
+    description: 'Timeless high-contrast monochrome.',
+    coverColor: 'bg-gray-50',
+    previewImage: 'https://images.unsplash.com/photo-1604017011826-d3b4c23f8914?auto=format&fit=crop&w=400&q=60',
+    icon: <Aperture className="w-5 h-5 text-black" aria-hidden="true" />
+  },
+  {
+    id: 'artistic',
+    name: '艺术 (Artistic)',
+    prompt: 'Fine art wedding photography, abstract elements, creative lighting, blurry motion, painterly texture, museum quality, avant-garde outfit styling.',
+    description: 'Abstract, creative, fine art.',
+    coverColor: 'bg-purple-50',
+    previewImage: 'https://images.unsplash.com/photo-1523438885200-e635ba2c371e?auto=format&fit=crop&w=400&q=60',
+    icon: <Palette className="w-5 h-5 text-purple-500" aria-hidden="true" />
+  },
+  {
+    id: 'illustration',
+    name: '手绘 (Illustration)',
+    prompt: 'Wedding illustration style, watercolor or sketch effect, soft pastel colors, artistic strokes, dreamy and romantic drawing style, 2D art.',
+    description: 'Watercolor and sketch effects.',
+    coverColor: 'bg-pink-50',
+    previewImage: 'https://images.unsplash.com/photo-1544890225-2f3faec4cd60?auto=format&fit=crop&w=400&q=60',
+    icon: <PenTool className="w-5 h-5 text-pink-500" aria-hidden="true" />
+  },
+  {
+    id: 'oil_painting',
+    name: '油画 (Oil Painting)',
+    prompt: 'Classic oil painting style wedding, rich textured brushstrokes, Renaissance lighting, deep colors, artistic masterpiece, framed museum quality.',
+    description: 'Classic textured masterpiece.',
+    coverColor: 'bg-amber-100',
+    previewImage: 'https://images.unsplash.com/photo-1579783902614-a3fb39279c0f?auto=format&fit=crop&w=400&q=60',
+    icon: <Brush className="w-5 h-5 text-amber-700" aria-hidden="true" />
+  },
+  {
+    id: 'anime',
+    name: '动漫 (Anime)',
+    prompt: 'Japanese anime art style, Makoto Shinkai inspired, vibrant blue sky with cumulus clouds, sparkling light effects, high contrast, emotional and beautiful 2D animation aesthetic.',
+    description: 'Vibrant, emotional 2D animation.',
+    coverColor: 'bg-indigo-50',
+    previewImage: 'https://images.unsplash.com/photo-1563784462041-5f97ac9523dd?auto=format&fit=crop&w=400&q=60',
+    icon: <Tv className="w-5 h-5 text-indigo-500" aria-hidden="true" />
+  },
+  {
+    id: 'glitch',
+    name: 'Glitch',
+    prompt: 'Cyberpunk glitch art aesthetic, distorted neon lights, digital artifacts, fragmented reality, futuristic wedding attire, vibrant cyan and magenta hues, high-tech urban backdrop.',
+    description: 'Digital distortion and neon artifacts.',
+    coverColor: 'bg-teal-50',
+    previewImage: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=400&q=60',
+    icon: <Unlink className="w-5 h-5 text-teal-600" aria-hidden="true" />,
+    isLocked: true // VIP
+  },
+
+  // 4. Modern & Trendy
+  {
+    id: 'ins',
+    name: 'Ins风 (Insta)',
+    prompt: 'Instagram aesthetic, trendy filters, low contrast, lifestyle vibe, stylish decor, succulents, macrame, influencer style, highly shareable.',
+    description: 'Trendy, lifestyle, social media ready.',
+    coverColor: 'bg-fuchsia-50',
+    previewImage: 'https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?auto=format&fit=crop&w=400&q=60',
+    icon: <Camera className="w-5 h-5 text-fuchsia-500" aria-hidden="true" />
+  },
+  {
+    id: 'magazine',
+    name: '杂志 (Magazine)',
+    prompt: 'High fashion magazine cover, Vogue or Harper\'s Bazaar style, bold typography feeling, confident poses, studio lighting, sharp focus, luxury fashion.',
+    description: 'High fashion editorial look.',
+    coverColor: 'bg-zinc-50',
+    previewImage: 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=400&q=60',
+    icon: <Layout className="w-5 h-5 text-zinc-600" aria-hidden="true" />
+  },
+  {
+    id: 'minimalist',
+    name: '简约 (Minimalist)',
+    prompt: 'Minimalist wedding, clean lines, plenty of negative space, monochromatic color palette, simple but high-quality silk dress, sophisticated simplicity.',
+    description: 'Less is more, sophisticated.',
+    coverColor: 'bg-stone-50',
+    previewImage: 'https://images.unsplash.com/photo-1445633475854-60c07d57cf84?auto=format&fit=crop&w=400&q=60',
+    icon: <BoxIcon className="w-5 h-5 text-stone-500" />
+  },
+  {
+    id: 'fashion',
+    name: '时尚 (Fashion)',
+    prompt: 'Street fashion wedding, urban setting, sunglasses, blazer over dress, running shoes with gown, chic, modern, rebellious, city lights.',
+    description: 'Chic, urban, and runway ready.',
+    coverColor: 'bg-indigo-50',
+    previewImage: 'https://images.unsplash.com/photo-1532453288672-3a27e9be9efd?auto=format&fit=crop&w=400&q=60',
+    icon: <Zap className="w-5 h-5 text-indigo-500" aria-hidden="true" />
+  },
+
+  // 5. Atmosphere & Theme
+  {
+    id: 'retro',
+    name: '复古 (Retro)',
+    prompt: '1980s or 1990s retro hong kong style, warm yellowish tint, vintage disco vibe, sequins, puffy sleeves, nostalgic romance.',
+    description: '80s/90s nostalgic vibes.',
+    coverColor: 'bg-orange-100',
+    previewImage: 'https://images.unsplash.com/photo-1551024601-56296352630a?auto=format&fit=crop&w=400&q=60',
+    icon: <Clock className="w-5 h-5 text-orange-700" aria-hidden="true" />,
+    tags: ['hot']
+  },
+  {
+    id: 'literary',
+    name: '文艺 (Literary)',
+    prompt: 'Literary youth style, library or cafe background, soft knitted textures, glasses, muted colors, intellectual and quiet atmosphere.',
+    description: 'Soft, intellectual, quiet beauty.',
+    coverColor: 'bg-teal-50',
+    previewImage: 'https://images.unsplash.com/photo-1456327102063-fb5054efe647?auto=format&fit=crop&w=400&q=60',
+    icon: <BookOpen className="w-5 h-5 text-teal-600" aria-hidden="true" />
+  },
+  {
+    id: 'campus',
+    name: '校园风 (Campus)',
+    prompt: 'School days romance, school uniforms or casual wedding wear, classroom or playground background, youthful energy, sunshine, innocent love.',
+    description: 'Youthful, innocent school memories.',
+    coverColor: 'bg-blue-100',
+    previewImage: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=400&q=60',
+    icon: <BookOpen className="w-5 h-5 text-blue-500" aria-hidden="true" />
+  },
+  {
+    id: 'fairytale',
+    name: '童话 (Fairy Tale)',
+    prompt: 'Disney fairy tale style, magical castle, glowing lights, cinderella dress, sparkles, pumpkin carriage, dreamy blue and purple tones.',
+    description: 'Magical castles and dreams.',
+    coverColor: 'bg-purple-100',
+    previewImage: 'https://images.unsplash.com/photo-1520024146169-3240400354ae?auto=format&fit=crop&w=400&q=60',
+    icon: <Sparkles className="w-5 h-5 text-purple-600" aria-hidden="true" />
+  },
+  {
+    id: 'sweet',
+    name: '甜美 (Sweet)',
+    prompt: 'Sweet and cute style, candy colors, balloons, playful poses, pink background, joyful expressions, ribbons and bows.',
+    description: 'Cute, playful, candy colors.',
+    coverColor: 'bg-pink-100',
+    previewImage: 'https://images.unsplash.com/photo-1522083165195-3424ed129620?auto=format&fit=crop&w=400&q=60',
+    icon: <Smile className="w-5 h-5 text-pink-500" aria-hidden="true" />
+  },
+  {
+    id: 'story',
+    name: '故事 (Story)',
+    prompt: 'Storytelling photography, sequence of emotions, documentary approach, meaningful props, looking at each other, narrative composition.',
+    description: 'Narrative and emotional moments.',
+    coverColor: 'bg-slate-100',
+    previewImage: 'https://images.unsplash.com/photo-1511285560982-1351c4f809b9?auto=format&fit=crop&w=400&q=60',
+    icon: <Film className="w-5 h-5 text-slate-600" aria-hidden="true" />
+  },
+  {
+    id: 'documentary',
+    name: '纪实 (Documentary)',
+    prompt: 'Documentary wedding photojournalism, raw emotions, unposed, natural lighting, messy hair, genuine laughter, tears of joy, authentic.',
+    description: 'Raw, unposed, authentic moments.',
+    coverColor: 'bg-neutral-50',
+    previewImage: 'https://images.unsplash.com/photo-1519225421980-715cb0202128?auto=format&fit=crop&w=400&q=60',
+    icon: <Camera className="w-5 h-5 text-neutral-600" aria-hidden="true" />
+  },
+  {
+    id: 'fresh',
+    name: '小清新 (Fresh)',
+    prompt: 'Small fresh style (Xiao Qing Xin), nature, green grass, blue sky, white dress, oxygen girl vibe, high key lighting, natural and clean.',
+    description: 'Nature, clean air, greenery.',
+    coverColor: 'bg-lime-50',
+    previewImage: 'https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?auto=format&fit=crop&w=400&q=60',
+    icon: <Leaf className="w-5 h-5 text-lime-500" aria-hidden="true" />
+  },
+  {
+    id: 'garden',
+    name: '森系 (Garden)',
+    prompt: 'Dreamy garden wedding, surrounded by blooming flowers, lush greenery, soft dappled sunlight filtering through trees, romantic fairy tale atmosphere, floral arch, ethereal beauty.',
+    description: 'Lush greenery and soft sunlight.',
+    coverColor: 'bg-green-50',
+    previewImage: 'https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?auto=format&fit=crop&w=400&q=60',
+    icon: <Trees className="w-5 h-5 text-green-600" aria-hidden="true" />
+  },
+  {
+    id: 'sexy',
+    name: '性感 (Sexy)',
+    prompt: 'Boudoir or glamorous sexy style, silk slip dress, moody lighting, red lipstick, confident gaze, allure, intimate atmosphere.',
+    description: 'Confident, glamorous, allure.',
+    coverColor: 'bg-red-100',
+    previewImage: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=400&q=60',
+    icon: <Heart className="w-5 h-5 text-red-800" aria-hidden="true" />
+  },
+  {
+    id: 'personality',
+    name: '个性 (Unique)',
+    prompt: 'Avant-garde personality style, quirky props, sunglasses, unconventional wedding outfit, color blocking, pop art background, fun and weird.',
+    description: 'Quirky, fun, unconventional.',
+    coverColor: 'bg-yellow-100',
+    previewImage: 'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?auto=format&fit=crop&w=400&q=60',
+    icon: <Zap className="w-5 h-5 text-yellow-500" aria-hidden="true" />
+  },
+  
+  // 6. New Diverse Styles
+  {
+    id: 'bohemian',
+    name: '波西米亚 (Bohemian)',
+    prompt: 'Bohemian wedding style, outdoor nature setting, macrame decorations, pampas grass, wildflower bouquet, lace dress, relaxed groom attire, warm earth tones, sunset light.',
+    description: 'Free-spirited, earthy, and natural.',
+    coverColor: 'bg-orange-50',
+    previewImage: 'https://images.unsplash.com/photo-1515488764276-beab7607c1e6?auto=format&fit=crop&w=400&q=60',
+    icon: <Flower className="w-5 h-5 text-orange-600" aria-hidden="true" />
+  },
+  {
+    id: 'art_deco',
+    name: '装饰艺术 (Art Deco)',
+    prompt: 'Great Gatsby 1920s Art Deco style, gold and black geometric patterns, luxurious ballroom, pearls, feathers, sharp tuxedo, vintage glamour, jazz age atmosphere.',
+    description: '1920s Gatsby luxury and geometry.',
+    coverColor: 'bg-yellow-50',
+    previewImage: 'https://images.unsplash.com/photo-1560963689-02e0397d66b7?auto=format&fit=crop&w=400&q=60',
+    icon: <Gem className="w-5 h-5 text-yellow-600" aria-hidden="true" />
+  },
+  {
+    id: 'masquerade',
+    name: 'Masquerade Ball',
+    prompt: 'Venetian Masquerade Ball wedding, elegant ornate masks, candlelit ballroom, velvet textures, mystery, dramatic shadows, opulent gowns and suits.',
+    description: 'Mysterious, opulent, masked elegance.',
+    coverColor: 'bg-purple-50',
+    previewImage: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=400&q=60',
+    icon: <Eye className="w-5 h-5 text-purple-700" aria-hidden="true" />
+  },
+  {
+    id: 'steampunk',
+    name: '蒸汽朋克 (Steampunk)',
+    prompt: 'Steampunk wedding style, Victorian industrial era, brass gears, clockwork elements, corsets, goggles, leather accessories, steam fog, copper tones, sepia lighting.',
+    description: 'Victorian sci-fi, gears, and brass.',
+    coverColor: 'bg-amber-100',
+    previewImage: 'https://images.unsplash.com/photo-1535581652167-3d6b98c39327?auto=format&fit=crop&w=400&q=60',
+    icon: <Cog className="w-5 h-5 text-amber-700" aria-hidden="true" />
+  },
+  {
+    id: 'galactic',
+    name: '银河 (Galactic)',
+    prompt: 'Sci-fi galactic wedding, outer space background, nebulae, stars, futuristic glowing fabrics, metallic silver outfits, neon lights, ethereal cosmic atmosphere.',
+    description: 'Futuristic, cosmic, among the stars.',
+    coverColor: 'bg-indigo-100',
+    previewImage: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=400&q=60',
+    icon: <Rocket className="w-5 h-5 text-indigo-600" aria-hidden="true" />,
+    isLocked: true // VIP
+  },
+  {
+    id: 'cyberpunk',
+    name: '赛博朋克 (Cyberpunk)',
+    prompt: 'Cyberpunk wedding style, neon lights, night city, rain, futuristic techwear mixed with wedding attire, glowing accessories, blue and pink lighting, Blade Runner aesthetic.',
+    description: 'Neon, high-tech, futuristic city.',
+    coverColor: 'bg-cyan-100',
+    previewImage: 'https://images.unsplash.com/photo-1535295972055-1c762f4483e5?auto=format&fit=crop&w=400&q=60',
+    icon: <Cpu className="w-5 h-5 text-cyan-600" aria-hidden="true" />,
+    tags: ['new'],
+    isLocked: true // VIP
+  },
+  
+  // 7. Expanded Thematic Styles
+  {
+    id: 'gothic',
+    name: '哥特 (Gothic)',
+    prompt: 'High-fashion Gothic wedding, dramatic cathedral architecture, stained glass light, black lace gown, mysterious fog, candlelight, deep burgundy and charcoal tones, moody cinematic atmosphere.',
+    description: 'Dark, mysterious, dramatic elegance.',
+    coverColor: 'bg-slate-700',
+    previewImage: 'https://images.unsplash.com/photo-1539103377911-4909a1bac382?auto=format&fit=crop&w=400&q=60',
+    icon: <Castle className="w-5 h-5 text-slate-800" aria-hidden="true" />
+  },
+  {
+    id: 'beach',
+    name: '海岛 (Beach)',
+    prompt: 'Luxury destination beach wedding, golden hour sunlight, turquoise ocean background, white sands, flowing boho dress, tropical florals, relaxed but elegant, warm and airy aesthetic.',
+    description: 'Sunset, ocean, tropical breeze.',
+    coverColor: 'bg-cyan-50',
+    previewImage: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=400&q=60',
+    icon: <Anchor className="w-5 h-5 text-cyan-500" aria-hidden="true" />,
+    tags: ['hot']
+  },
+  {
+    id: 'winter',
+    name: '冰雪 (Winter)',
+    prompt: 'Ethereal winter wedding, snowy forest backdrop, falling snow, ice blue and silver tones, fur stole, crystal accessories, magical frozen lighting, crisp and pure atmosphere.',
+    description: 'Snowy, magical, frozen beauty.',
+    coverColor: 'bg-blue-50',
+    previewImage: 'https://images.unsplash.com/photo-1483664852095-d6cc6870705d?auto=format&fit=crop&w=400&q=60',
+    icon: <Snowflake className="w-5 h-5 text-blue-400" aria-hidden="true" />
+  },
+  {
+    id: 'underwater',
+    name: '水下 (Underwater)',
+    prompt: 'Fine art underwater wedding photography, weightless flowing fabric, deep blue water, shafts of sunlight breaking through surface, bubbles, serene and dreamlike composition.',
+    description: 'Ethereal, weightless, dreamlike.',
+    coverColor: 'bg-indigo-50',
+    previewImage: 'https://images.unsplash.com/photo-1504198266287-1659872e6590?auto=format&fit=crop&w=400&q=60',
+    icon: <Droplets className="w-5 h-5 text-indigo-500" aria-hidden="true" />
+  },
+  {
+    id: 'rustic',
+    name: '乡村 (Rustic)',
+    prompt: 'Cozy rustic barn wedding, warm string lights, wooden beams, dried flowers, vintage lace, warm brown and amber tones, intimate countryside celebration vibe.',
+    description: 'Barns, fairy lights, cozy warmth.',
+    coverColor: 'bg-amber-50',
+    previewImage: 'https://images.unsplash.com/photo-1470790376778-a9fcd484f839?auto=format&fit=crop&w=400&q=60',
+    icon: <Warehouse className="w-5 h-5 text-amber-600" aria-hidden="true" />
+  },
+
+  // 8. Cultural & Artistic Extras
+  {
+    id: 'elf',
+    name: '精灵 (Elf)',
+    prompt: 'Ethereal Elven wedding style, Lord of the Rings Rivendell vibe, magical forest, soft glowing light, bride in flowing gown with cape, pointed ears hint, mystical and dreamy atmosphere.',
+    description: 'Magical forest and ethereal vibes.',
+    coverColor: 'bg-emerald-100',
+    previewImage: 'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?auto=format&fit=crop&w=400&q=60',
+    icon: <Cloud className="w-5 h-5 text-emerald-500" aria-hidden="true" />,
+    tags: ['new'],
+    isLocked: true // VIP
+  },
+  {
+    id: 'indian',
+    name: '印度 (Indian)',
+    prompt: 'Traditional Indian wedding, luxurious red and gold Lehenga and Sherwani, intricate jewelry, Henna, marigold flowers, festive and opulent atmosphere, Bollywood grandeur.',
+    description: 'Opulent red and gold festivity.',
+    coverColor: 'bg-orange-200',
+    previewImage: 'https://images.unsplash.com/photo-1583391724094-067980337059?auto=format&fit=crop&w=400&q=60',
+    icon: <Sun className="w-5 h-5 text-orange-700" aria-hidden="true" />
+  },
+  {
+    id: 'thai',
+    name: '泰式 (Thai)',
+    prompt: 'Traditional Thai wedding style, Chut Thai silk costumes, golden accessories, elegant temple architectural background, warm lighting, noble and serene.',
+    description: 'Elegant silk and golden nobility.',
+    coverColor: 'bg-yellow-200',
+    previewImage: 'https://images.unsplash.com/photo-1596711912530-9b391787d55c?auto=format&fit=crop&w=400&q=60',
+    icon: <Flower className="w-5 h-5 text-yellow-700" aria-hidden="true" />
+  },
+  {
+    id: 'double_exposure',
+    name: '双重曝光 (Double Exp)',
+    prompt: 'Artistic double exposure photography, silhouette of the couple blended with a forest or cityscape, dreamy overlay, high contrast, surreal and creative art style.',
+    description: 'Surreal artistic silhouette blend.',
+    coverColor: 'bg-gray-200',
+    previewImage: 'https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&w=400&q=60',
+    icon: <Layers className="w-5 h-5 text-gray-700" aria-hidden="true" />
+  },
+  
+  // 9. Douyin Viral (TikTok China)
+  {
+    id: 'old_money',
+    name: '老钱风 (Old Money)',
+    prompt: 'Old Money aesthetic wedding, Ralph Lauren style, luxurious country club or yacht background, understated elegance, beige and navy tones, pearl necklace, tennis sweater or classy suit, rich lifestyle vibe.',
+    description: 'Understated wealth, luxury vibe.',
+    coverColor: 'bg-stone-100',
+    previewImage: 'https://images.unsplash.com/photo-1566737236500-c8ac43014a67?auto=format&fit=crop&w=400&q=60',
+    icon: <Briefcase className="w-5 h-5 text-stone-700" aria-hidden="true" />,
+    tags: ['new', 'hot'],
+    isLocked: true
+  },
+  {
+    id: 'phoenix_crown',
+    name: '凤冠霞帔 (Phoenix)',
+    prompt: 'Traditional Chinese Phoenix Crown style, extremely luxurious gold headdress, heavy makeup with red lips, dark background with spot lighting, majestic and dramatic queen vibe, intricate embroidery.',
+    description: 'Majestic gold crown, dramatic.',
+    coverColor: 'bg-red-200',
+    previewImage: 'https://images.unsplash.com/photo-1540932296774-34d6d45e933a?auto=format&fit=crop&w=400&q=60',
+    icon: <Crown className="w-5 h-5 text-red-800" aria-hidden="true" />,
+    tags: ['hot']
+  },
+  {
+    id: 'balletcore',
+    name: '芭蕾风 (Balletcore)',
+    prompt: 'Balletcore wedding style, ballerina aesthetics, tulle skirt, corset, ribbon lace-up, ballet flats, soft pink studio background, elegant poses, dreamy and graceful.',
+    description: 'Graceful ballerina ribbons.',
+    coverColor: 'bg-pink-50',
+    previewImage: 'https://images.unsplash.com/photo-1516575334481-f85287c2c81d?auto=format&fit=crop&w=400&q=60',
+    icon: <Music className="w-5 h-5 text-pink-400" aria-hidden="true" />,
+    tags: ['new']
+  },
+  {
+    id: 'dopamine',
+    name: '多巴胺 (Dopamine)',
+    prompt: 'Dopamine dressing wedding style, high saturation bright colors, colorful sunglasses, playful props, y2k vibes, happy energetic atmosphere, rainbow background elements.',
+    description: 'Bright colors, happy Y2K vibe.',
+    coverColor: 'bg-yellow-100',
+    previewImage: 'https://images.unsplash.com/photo-1496747611176-843222e1e57c?auto=format&fit=crop&w=400&q=60',
+    icon: <Palette className="w-5 h-5 text-yellow-600" aria-hidden="true" />
+  },
+  {
+    id: 'clean_fit',
+    name: '极简智性 (Clean Fit)',
+    prompt: 'Clean fit aesthetic wedding, oversized blazer, city walk street background, effortless chic, neutral tones, smart casual wedding attire, intellectual and high-end vibe.',
+    description: 'Effortless chic, intellectual.',
+    coverColor: 'bg-gray-50',
+    previewImage: 'https://images.unsplash.com/photo-1496440738361-1e38b979f6d4?auto=format&fit=crop&w=400&q=60',
+    icon: <Search className="w-5 h-5 text-gray-600" aria-hidden="true" />
+  },
+
+  // 10. Groom / Male Styles
+  {
+    id: 'groom_classic',
+    name: 'Classic Tuxedo',
+    prompt: 'Classic Groom portrait, sharp black tuxedo, bow tie, crisp white shirt, studio grey background, confident pose, high-end men\'s fashion photography.',
+    description: 'Sharp, timeless black tuxedo.',
+    coverColor: 'bg-gray-100',
+    previewImage: 'https://images.unsplash.com/photo-1507679799987-c73779587ccf?auto=format&fit=crop&w=400&q=60',
+    icon: <Briefcase className="w-5 h-5 text-gray-800" aria-hidden="true" />
+  },
+  {
+    id: 'groom_modern',
+    name: 'Modern Suit',
+    prompt: 'Modern Groom style, fitted navy or beige suit, no tie, relaxed but elegant, outdoor urban background, natural lighting, GQ magazine style.',
+    description: 'Relaxed modern fitted suit.',
+    coverColor: 'bg-blue-50',
+    previewImage: 'https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?auto=format&fit=crop&w=400&q=60',
+    icon: <User className="w-5 h-5 text-blue-600" aria-hidden="true" />
+  },
+  {
+    id: 'groom_hanfu',
+    name: 'Scholar Hanfu',
+    prompt: 'Traditional Chinese Scholar Groom, elegant flowing Hanfu robes, ink painting background, holding a fan or scroll, poetic and noble atmosphere.',
+    description: 'Noble scholar in flowing robes.',
+    coverColor: 'bg-emerald-50',
+    previewImage: 'https://images.unsplash.com/photo-1531303435785-3853fb435460?auto=format&fit=crop&w=400&q=60',
+    icon: <Feather className="w-5 h-5 text-emerald-600" aria-hidden="true" />
+  },
+  {
+    id: 'groom_retro',
+    name: 'Retro Gent',
+    prompt: 'Retro Gentleman Groom, Peaky Blinders style, tweed suit, flat cap, vintage pocket watch, moody lighting, 1920s vintage atmosphere.',
+    description: '1920s vintage gentleman.',
+    coverColor: 'bg-amber-100',
+    previewImage: 'https://images.unsplash.com/photo-1506839683516-433b283c7438?auto=format&fit=crop&w=400&q=60',
+    icon: <Watch className="w-5 h-5 text-amber-800" aria-hidden="true" />
+  },
+  {
+    id: 'groom_cyber',
+    name: 'Cyber Warrior',
+    prompt: 'Futuristic Groom, high-tech tactical suit mixed with formal wear, neon lighting, cyberpunk city background, cool and edgy sci-fi vibe.',
+    description: 'Edgy, high-tech futuristic suit.',
+    coverColor: 'bg-cyan-100',
+    previewImage: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=400&q=60',
+    icon: <Cpu className="w-5 h-5 text-cyan-600" aria-hidden="true" />
+  },
+
+  // 11. Children's Styles
+  {
+    id: 'child_prince',
+    name: 'Little Prince',
+    prompt: 'Cute little boy dressed as a prince, royal outfit with sash and medals, small crown, castle interior background, magical lighting, adorable and noble.',
+    description: 'Royal outfit for a little prince.',
+    coverColor: 'bg-blue-100',
+    previewImage: 'https://images.unsplash.com/photo-1519340570198-63a234f9a56e?auto=format&fit=crop&w=400&q=60',
+    icon: <Crown className="w-5 h-5 text-blue-600" aria-hidden="true" />
+  },
+  {
+    id: 'child_princess',
+    name: 'Little Princess',
+    prompt: 'Adorable little girl in a puffy princess ballgown, sparkling tiara, magical fairy tale forest background, soft pink and glittery atmosphere.',
+    description: 'Magical puffy dress and tiara.',
+    coverColor: 'bg-pink-100',
+    previewImage: 'https://images.unsplash.com/photo-1526466384813-f54668b82402?auto=format&fit=crop&w=400&q=60',
+    icon: <Heart className="w-5 h-5 text-pink-500" aria-hidden="true" />
+  },
+  {
+    id: 'child_suit',
+    name: 'Mini Gentleman',
+    prompt: 'Little boy in a miniature modern suit and bow tie, hands in pockets, clean studio background, looking cool and fashion-forward, child model vibe.',
+    description: 'Cool mini suit and bow tie.',
+    coverColor: 'bg-gray-100',
+    previewImage: 'https://images.unsplash.com/photo-1489710437720-ebb67ec84dd2?auto=format&fit=crop&w=400&q=60',
+    icon: <Briefcase className="w-5 h-5 text-gray-800" aria-hidden="true" />
+  },
+  
+  // 12. NEW 38 STYLES (Total 100)
+  {
+      id: 'mermaid',
+      name: 'Mermaid',
+      prompt: 'Magical Mermaid fantasy, underwater vibe, iridescent scales, flowing hair, pearls, shells, ethereal lighting, blue and aquamarine tones.',
+      description: 'Magical underwater mermaid.',
+      coverColor: 'bg-cyan-200',
+      previewImage: 'https://images.unsplash.com/photo-1534954714659-3a362f79029a?auto=format&fit=crop&w=400&q=60',
+      icon: <Fish className="w-5 h-5 text-cyan-600" />
+  },
+  {
+      id: 'angel',
+      name: 'Angel',
+      prompt: 'Heavenly Angel wedding style, massive white feathered wings, glowing halo, clouds background, divine light, pure white gown, holy and serene.',
+      description: 'Divine wings and halo.',
+      coverColor: 'bg-blue-50',
+      previewImage: 'https://images.unsplash.com/photo-1560130958-eff2f8546fd7?auto=format&fit=crop&w=400&q=60',
+      icon: <Feather className="w-5 h-5 text-blue-400" />
+  },
+  {
+      id: 'demon',
+      name: 'Demon',
+      prompt: 'Dark Fantasy Demon queen style, black horns, gothic makeup, red eyes, dramatic shadows, fire and smoke background, fierce and powerful.',
+      description: 'Dark fantasy demon queen.',
+      coverColor: 'bg-red-900',
+      previewImage: 'https://images.unsplash.com/photo-1620583486376-79c855422892?auto=format&fit=crop&w=400&q=60',
+      icon: <Flame className="w-5 h-5 text-red-600" />,
+      isLocked: true
+  },
+  {
+      id: 'vampire',
+      name: 'Vampire',
+      prompt: 'Victorian Vampire aesthetic, pale skin, red lips, vintage lace choker, gothic castle background, moonlight, romantic horror vibe.',
+      description: 'Romantic gothic horror.',
+      coverColor: 'bg-slate-800',
+      previewImage: 'https://images.unsplash.com/photo-1628260412297-a3377e45006f?auto=format&fit=crop&w=400&q=60',
+      icon: <Moon className="w-5 h-5 text-purple-400" />
+  },
+  {
+      id: 'victorian',
+      name: 'Victorian',
+      prompt: 'Victorian era portrait, high collar lace dress, corset, cameo brooch, vintage furniture background, sepia tone, historical accuracy.',
+      description: '19th century historical elegance.',
+      coverColor: 'bg-amber-100',
+      previewImage: 'https://images.unsplash.com/photo-1534567215160-b9df4b4f8d29?auto=format&fit=crop&w=400&q=60',
+      icon: <Hourglass className="w-5 h-5 text-amber-700" />
+  },
+  {
+      id: 'renaissance',
+      name: 'Renaissance',
+      prompt: 'Renaissance art style portrait, velvet robes, rich jewel tones, chiaroscuro lighting, Da Vinci painting aesthetic, museum quality.',
+      description: 'Classic art masterpiece.',
+      coverColor: 'bg-yellow-200',
+      previewImage: 'https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?auto=format&fit=crop&w=400&q=60',
+      icon: <Brush className="w-5 h-5 text-yellow-800" />
+  },
+  {
+      id: 'egyptian',
+      name: 'Egyptian',
+      prompt: 'Ancient Egyptian royalty, Cleopatra style, gold headpiece, heavy eyeliner, desert background, pyramids, turquoise and gold jewelry.',
+      description: 'Pharaoh queen luxury.',
+      coverColor: 'bg-yellow-300',
+      previewImage: 'https://images.unsplash.com/photo-1563200989-123498877665?auto=format&fit=crop&w=400&q=60',
+      icon: <Landmark className="w-5 h-5 text-yellow-600" />
+  },
+  {
+      id: 'greek',
+      name: 'Greek Goddess',
+      prompt: 'Greek Goddess style, flowing white toga, laurel wreath, marble columns background, Mediterranean sunlight, ethereal and statuesque.',
+      description: 'Olympian goddess ethereal.',
+      coverColor: 'bg-blue-50',
+      previewImage: 'https://images.unsplash.com/photo-1601004890684-d8cbf643f5f2?auto=format&fit=crop&w=400&q=60',
+      icon: <Landmark className="w-5 h-5 text-blue-500" />
+  },
+  {
+      id: 'roman',
+      name: 'Roman Holiday',
+      prompt: 'Roman Holiday movie style, 1950s Vespa, Audrey Hepburn look, Rome street background, black and white or technicolor, chic and joyful.',
+      description: '50s chic Rome holiday.',
+      coverColor: 'bg-orange-50',
+      previewImage: 'https://images.unsplash.com/photo-1516483638261-f4dbaf036963?auto=format&fit=crop&w=400&q=60',
+      icon: <Film className="w-5 h-5 text-orange-500" />
+  },
+  {
+      id: 'viking',
+      name: 'Viking',
+      prompt: 'Nordic Viking wedding, fur cloaks, braided hair, snowy mountain background, leather armor elements, fierce and rustic atmosphere.',
+      description: 'Fierce Nordic warrior.',
+      coverColor: 'bg-stone-200',
+      previewImage: 'https://images.unsplash.com/photo-1616786524317-1c19b673676c?auto=format&fit=crop&w=400&q=60',
+      icon: <Sword className="w-5 h-5 text-stone-700" />
+  },
+  {
+      id: 'y2k',
+      name: 'Y2K',
+      prompt: 'Y2K aesthetic wedding, millennium cyber fashion, metallic fabrics, butterfly clips, tinted sunglasses, flip phone prop, holographic background.',
+      description: 'Millennium cyber fashion.',
+      coverColor: 'bg-pink-200',
+      previewImage: 'https://images.unsplash.com/photo-1617196034096-16408229e710?auto=format&fit=crop&w=400&q=60',
+      icon: <Monitor className="w-5 h-5 text-pink-600" />
+  },
+  {
+      id: 'neon',
+      name: 'Neon',
+      prompt: 'Neon noir style, dark background with bright neon sign lights (blue/pink), wet pavement, cinematic night vibe, edgy and cool.',
+      description: 'Dark city neon lights.',
+      coverColor: 'bg-purple-900',
+      previewImage: 'https://images.unsplash.com/photo-1563297129-9dc476717462?auto=format&fit=crop&w=400&q=60',
+      icon: <Zap className="w-5 h-5 text-purple-400" />
+  },
+  {
+      id: 'denim',
+      name: 'Denim',
+      prompt: 'Casual Denim wedding theme, matching denim jackets over wedding outfits, cool sunglasses, American vibes, relaxed and stylish.',
+      description: 'Casual cool denim.',
+      coverColor: 'bg-blue-200',
+      previewImage: 'https://images.unsplash.com/photo-1520336208070-13d80630b4ac?auto=format&fit=crop&w=400&q=60',
+      icon: <Shirt className="w-5 h-5 text-blue-700" />
+  },
+  {
+      id: 'suit_bride',
+      name: 'Bridal Suit',
+      prompt: 'Androgynous chic, bride in a tailored white tuxedo suit, slicked back hair, minimalist studio background, confident power pose, high fashion.',
+      description: 'Power suit chic.',
+      coverColor: 'bg-gray-50',
+      previewImage: 'https://images.unsplash.com/photo-1594912959648-2c262a6d71b3?auto=format&fit=crop&w=400&q=60',
+      icon: <Briefcase className="w-5 h-5 text-gray-700" />
+  },
+  {
+      id: 'sketch',
+      name: 'Sketch',
+      prompt: 'Pencil sketch art style, graphite texture, white paper background, artistic shading, hand-drawn look, creative and unique.',
+      description: 'Hand-drawn pencil art.',
+      coverColor: 'bg-gray-100',
+      previewImage: 'https://images.unsplash.com/photo-1516962215378-7fa2e137ae93?auto=format&fit=crop&w=400&q=60',
+      icon: <PenTool className="w-5 h-5 text-gray-500" />
+  },
+  {
+      id: 'pixel',
+      name: 'Pixel Art',
+      prompt: '8-bit Pixel Art style, retro game aesthetic, blocky graphics, vibrant colors, digital nostalgia, fun and playful.',
+      description: 'Retro 8-bit game style.',
+      coverColor: 'bg-green-100',
+      previewImage: 'https://images.unsplash.com/photo-1550684848-86a5d8727436?auto=format&fit=crop&w=400&q=60',
+      icon: <Box className="w-5 h-5 text-green-600" />
+  },
+  {
+      id: 'clay',
+      name: 'Claymation',
+      prompt: 'Stop-motion claymation style, Aardman animation look, plasticine texture, soft lighting, whimsical and cute.',
+      description: 'Whimsical stop-motion clay.',
+      coverColor: 'bg-orange-200',
+      previewImage: 'https://images.unsplash.com/photo-1620023642398-a006c7104a37?auto=format&fit=crop&w=400&q=60',
+      icon: <Smile className="w-5 h-5 text-orange-600" />
+  },
+  {
+      id: 'pop_art',
+      name: 'Pop Art',
+      prompt: 'Andy Warhol Pop Art style, comic book dots, bold solid colors, speech bubbles, high contrast, retro 60s artistic vibe.',
+      description: 'Bold colorful comic art.',
+      coverColor: 'bg-yellow-200',
+      previewImage: 'https://images.unsplash.com/photo-1563725656-78c9b2f67644?auto=format&fit=crop&w=400&q=60',
+      icon: <Zap className="w-5 h-5 text-yellow-600" />
+  },
+  {
+      id: 'autumn',
+      name: 'Autumn',
+      prompt: 'Golden Autumn wedding, falling yellow leaves, park setting, warm sweater textures, soft golden light, cozy and romantic.',
+      description: 'Golden leaves and cozy.',
+      coverColor: 'bg-orange-100',
+      previewImage: 'https://images.unsplash.com/photo-1507783548239-5198030bb402?auto=format&fit=crop&w=400&q=60',
+      icon: <Leaf className="w-5 h-5 text-orange-500" />
+  },
+  {
+      id: 'sakura',
+      name: 'Sakura',
+      prompt: 'Cherry Blossom season, pink petals falling, soft spring light, Japanese street or park background, pastel pink tones, romantic anime vibe.',
+      description: 'Pink cherry blossom romance.',
+      coverColor: 'bg-pink-100',
+      previewImage: 'https://images.unsplash.com/photo-1522383225653-ed111181a951?auto=format&fit=crop&w=400&q=60',
+      icon: <Flower className="w-5 h-5 text-pink-400" />
+  },
+  {
+      id: 'rainforest',
+      name: 'Rainforest',
+      prompt: 'Tropical Rainforest wedding, giant monstera leaves, waterfall background, mist, vibrant green tones, exotic flowers, wild nature.',
+      description: 'Lush tropical jungle.',
+      coverColor: 'bg-green-100',
+      previewImage: 'https://images.unsplash.com/photo-1542614945-316279f064f2?auto=format&fit=crop&w=400&q=60',
+      icon: <Trees className="w-5 h-5 text-green-700" />
+  },
+  {
+      id: 'barbie',
+      name: 'Barbie',
+      prompt: 'Barbiecore aesthetic, everything hot pink, plastic perfect textures, doll-like poses, fun and glamorous, fashion doll box prop.',
+      description: 'Hot pink doll glamour.',
+      coverColor: 'bg-pink-300',
+      previewImage: 'https://images.unsplash.com/photo-1596489369903-a128695d73ba?auto=format&fit=crop&w=400&q=60',
+      icon: <Heart className="w-5 h-5 text-pink-600" />
+  },
+  {
+      id: 'wes',
+      name: 'Wes Anderson',
+      prompt: 'Wes Anderson film style, perfect symmetry, pastel color palette, quirky props, deadpan expressions, distinctive centered composition.',
+      description: 'Symmetrical pastel quirky.',
+      coverColor: 'bg-yellow-100',
+      previewImage: 'https://images.unsplash.com/photo-1520635467475-6eb86a22b406?auto=format&fit=crop&w=400&q=60',
+      icon: <Film className="w-5 h-5 text-yellow-600" />
+  },
+  {
+      id: 'cottagecore',
+      name: 'Cottagecore',
+      prompt: 'Cottagecore aesthetic, picnic in a meadow, gingham dress, straw hat, wildflowers, soft sunlight, simple rural life vibe.',
+      description: 'Rural meadow picnic.',
+      coverColor: 'bg-green-50',
+      previewImage: 'https://images.unsplash.com/photo-1523168892408-c8167f0022d1?auto=format&fit=crop&w=400&q=60',
+      icon: <Home className="w-5 h-5 text-green-500" />
+  },
+  {
+      id: 'dark_academia',
+      name: 'Dark Academia',
+      prompt: 'Dark Academia aesthetic, old library background, tweed blazers, books, mood lighting, coffee tones, intellectual and mysterious.',
+      description: 'Moody library intellectual.',
+      coverColor: 'bg-stone-200',
+      previewImage: 'https://images.unsplash.com/photo-1519340241574-2cec6aef0c01?auto=format&fit=crop&w=400&q=60',
+      icon: <Book className="w-5 h-5 text-stone-700" />
+  },
+  {
+      id: 'light_academia',
+      name: 'Light Academia',
+      prompt: 'Light Academia aesthetic, beige and cream tones, classical statues, sunlight, poetry books, soft and scholarly vibe.',
+      description: 'Beige scholarly softness.',
+      coverColor: 'bg-orange-50',
+      previewImage: 'https://images.unsplash.com/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=400&q=60',
+      icon: <BookOpen className="w-5 h-5 text-orange-400" />
+  },
+  {
+      id: 'mob_wife',
+      name: 'Mob Wife',
+      prompt: 'Mob Wife aesthetic, fur coat, heavy gold jewelry, animal print, big sunglasses, confident attitude, luxury SUV background, maximalist glamour.',
+      description: 'Maximalist fur glamour.',
+      coverColor: 'bg-stone-300',
+      previewImage: 'https://images.unsplash.com/photo-1616166417772-520f34086db0?auto=format&fit=crop&w=400&q=60',
+      icon: <Gem className="w-5 h-5 text-stone-800" />
+  },
+  {
+      id: 'all_red',
+      name: 'Monochrome Red',
+      prompt: 'Artistic monochrome red photography, everything in shades of red, high fashion, bold and dramatic, intense emotion.',
+      description: 'Intense all-red artistic.',
+      coverColor: 'bg-red-200',
+      previewImage: 'https://images.unsplash.com/photo-1529139574466-a302d2d3f524?auto=format&fit=crop&w=400&q=60',
+      icon: <Circle className="w-5 h-5 text-red-600" />
+  },
+  {
+      id: 'all_black',
+      name: 'Monochrome Black',
+      prompt: 'Artistic monochrome black photography, playing with shadows and textures, mysterious, elegant, high contrast.',
+      description: 'Elegant all-black mystery.',
+      coverColor: 'bg-gray-800',
+      previewImage: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=400&q=60',
+      icon: <Circle className="w-5 h-5 text-black" />
+  },
+  {
+      id: 'pastel',
+      name: 'Pastel Dream',
+      prompt: 'Pastel dreamscape, cotton candy clouds, soft mint, lilac and baby pink tones, dreamy and surreal atmosphere.',
+      description: 'Soft pastel dreamscape.',
+      coverColor: 'bg-purple-50',
+      previewImage: 'https://images.unsplash.com/photo-1492596985094-52771095ad79?auto=format&fit=crop&w=400&q=60',
+      icon: <Cloud className="w-5 h-5 text-purple-300" />
+  },
+  {
+      id: 'cyber_angel',
+      name: 'Cyber Angel',
+      prompt: 'Cybernetic Angel, mechanical wings, glowing halo, futuristic armor mixed with robes, high-tech divine aesthetic.',
+      description: 'High-tech divine wings.',
+      coverColor: 'bg-cyan-100',
+      previewImage: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=400&q=60',
+      icon: <Cpu className="w-5 h-5 text-cyan-500" />
+  },
+  {
+      id: 'hanbok',
+      name: 'Hanbok',
+      prompt: 'Traditional Korean Hanbok wedding, vibrant colors, simple elegance, palace background, graceful and cultural.',
+      description: 'Traditional Korean dress.',
+      coverColor: 'bg-rose-50',
+      previewImage: 'https://images.unsplash.com/photo-1588667822949-a034d612df08?auto=format&fit=crop&w=400&q=60',
+      icon: <Globe className="w-5 h-5 text-rose-500" />
+  },
+  {
+      id: 'kimono',
+      name: 'Kimono',
+      prompt: 'Traditional Japanese Kimono wedding (Shiromuku), shrine background, white silk, serene and ceremonial atmosphere.',
+      description: 'Traditional Japanese silk.',
+      coverColor: 'bg-white',
+      previewImage: 'https://images.unsplash.com/photo-1492596985094-52771095ad79?auto=format&fit=crop&w=400&q=60',
+      icon: <Globe className="w-5 h-5 text-red-500" />
+  },
+  {
+      id: 'cheongsam',
+      name: 'Qipao',
+      prompt: 'Shanghai 1930s style Qipao (Cheongsam), vintage interior, finger wave hair, elegant and seductive oriental beauty.',
+      description: 'Vintage Shanghai elegance.',
+      coverColor: 'bg-red-50',
+      previewImage: 'https://images.unsplash.com/photo-1540932296774-34d6d45e933a?auto=format&fit=crop&w=400&q=60',
+      icon: <Flower className="w-5 h-5 text-red-700" />
+  },
+  {
+      id: 'cowboy',
+      name: 'Cowboy',
+      prompt: 'Western Cowboy wedding, ranch setting, cowboy hats, boots, denim and leather, horses in background, rustic and adventurous.',
+      description: 'Western ranch adventure.',
+      coverColor: 'bg-amber-100',
+      previewImage: 'https://images.unsplash.com/photo-1533514114760-43846b07bd26?auto=format&fit=crop&w=400&q=60',
+      icon: <Briefcase className="w-5 h-5 text-amber-800" />
+  },
+  {
+      id: 'disco',
+      name: 'Disco',
+      prompt: '70s Disco wedding, mirror ball, funky patterns, platform shoes, dance floor lighting, groovy and fun.',
+      description: '70s funky groove.',
+      coverColor: 'bg-purple-100',
+      previewImage: 'https://images.unsplash.com/photo-1551024601-56296352630a?auto=format&fit=crop&w=400&q=60',
+      icon: <Music className="w-5 h-5 text-purple-600" />
+  },
+  {
+      id: 'jazz',
+      name: 'Jazz Bar',
+      prompt: 'Jazz Club wedding vibe, smoky atmosphere, saxophone, spotlight, velvet curtains, classy and soulful.',
+      description: 'Smoky classy club vibe.',
+      coverColor: 'bg-stone-900',
+      previewImage: 'https://images.unsplash.com/photo-1514525253440-b39345208668?auto=format&fit=crop&w=400&q=60',
+      icon: <Music className="w-5 h-5 text-yellow-500" />
+  },
+  {
+      id: 'sporty',
+      name: 'Sporty',
+      prompt: 'Sporty chic wedding, tennis court or stadium background, sneakers with wedding outfit, energetic and healthy vibe.',
+      description: 'Active energy and sneakers.',
+      coverColor: 'bg-green-50',
+      previewImage: 'https://images.unsplash.com/photo-1530549387789-4c1017266635?auto=format&fit=crop&w=400&q=60',
+      icon: <Activity className="w-5 h-5 text-green-600" />
+  }
+];
+
+export const StyleSelector: React.FC<StyleSelectorProps> = ({ 
+  selectedStyle, 
+  onSelect, 
+  onCustomSelect, 
+  onLuckySelect, 
+  onSlashClick, 
+  disabled, 
+  language,
+  recommendedStyleIds,
+  isVipUnlocked,
+  isLoading,
+  resolution,
+  onResolutionChange
+}) => {
+  const t = TRANSLATIONS[language];
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  
+  // Connect to User Store for Favorites Management
+  const { currentUser, guestFavorites, toggleFavorite } = useUserStore();
+  
+  // Derived favorites state: Use user's if logged in, otherwise guest favorites
+  const favorites = currentUser ? (currentUser.favorites || []) : guestFavorites;
+  
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        onCustomSelect(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleCustomClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleToggleFavorite = (id: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      toggleFavorite(id);
+  };
+
+  const filteredStyles = useMemo(() => {
+    return STYLES.filter(style => {
+      const name = (t.styles as any)[style.id] || style.name;
+      const term = searchTerm.toLowerCase();
+      return name.toLowerCase().includes(term) || style.description.toLowerCase().includes(term);
+    });
+  }, [searchTerm, language, t.styles]);
+
+  // Card Renderer Helper
+  const renderStyleCard = (style: WeddingStyle) => {
+     const isSelected = selectedStyle?.id === style.id;
+     const isRecommended = recommendedStyleIds?.includes(style.id);
+     const isLocked = style.isLocked && !isVipUnlocked;
+     const name = (t.styles as any)[style.id] || style.name;
+     const isFav = favorites.includes(style.id);
+
+     return (
+        <li key={style.id} className="list-none">
+          <button
+             onClick={() => !isLocked && onSelect(style)}
+             disabled={disabled}
+             className={`
+                w-full group relative aspect-[3/4] rounded-xl overflow-hidden text-left transition-all duration-300
+                border-2 ${isSelected ? 'border-rose-500 ring-4 ring-rose-100 scale-[1.02] shadow-xl z-10' : 'border-transparent hover:border-gray-200 hover:shadow-lg hover:scale-[1.01]'}
+                ${isLocked ? 'cursor-not-allowed opacity-80' : 'cursor-pointer'}
+             `}
+          >
+             {/* Background Image / Color */}
+             <LazyStyleBackground src={style.previewImage} colorClass={style.coverColor} />
+             
+             {/* Content Overlay */}
+             <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-3 flex flex-col justify-end">
+                <div className="flex items-start justify-between mb-auto">
+                   {/* Left: Tags */}
+                   <div className="flex flex-col gap-1">
+                      {style.tags?.includes('hot') && (
+                         <span className="px-1.5 py-0.5 bg-red-500 text-white text-[9px] font-bold rounded flex items-center gap-0.5 w-fit shadow-sm">
+                            <Flame className="w-2.5 h-2.5" aria-hidden="true" /> HOT
+                         </span>
+                      )}
+                      {style.tags?.includes('new') && (
+                         <span className="px-1.5 py-0.5 bg-blue-500 text-white text-[9px] font-bold rounded flex items-center gap-0.5 w-fit shadow-sm">
+                            <Sparkles className="w-2.5 h-2.5" aria-hidden="true" /> NEW
+                         </span>
+                      )}
+                      {isRecommended && (
+                         <span className="px-1.5 py-0.5 bg-green-500 text-white text-[9px] font-bold rounded flex items-center gap-0.5 w-fit animate-pulse shadow-sm">
+                            <ScanFace className="w-2.5 h-2.5" aria-hidden="true" /> MATCH
+                         </span>
+                      )}
+                   </div>
+                   
+                   {/* Right: Actions (Fav + Status) */}
+                   <div className="flex gap-1 items-start">
+                      {/* Favorite Button */}
+                      <button
+                         onClick={(e) => handleToggleFavorite(style.id, e)}
+                         className={`
+                            p-1.5 rounded-full backdrop-blur-sm transition-all duration-300 z-20 shadow-sm
+                            hover:scale-110 active:scale-90
+                            ${isFav 
+                              ? 'bg-white text-yellow-400 shadow-yellow-200/50' 
+                              : 'bg-black/40 text-white hover:bg-black/60'}
+                         `}
+                         aria-label={isFav ? "Remove from favorites" : "Add to favorites"}
+                         aria-pressed={isFav}
+                      >
+                         <Star 
+                           className={`w-3.5 h-3.5 transition-all duration-300 ${isFav ? 'fill-yellow-400 scale-110' : 'fill-transparent'}`} 
+                         />
+                      </button>
+
+                      {/* Status Icon */}
+                      {isSelected ? (
+                          <div className="bg-rose-500 text-white p-1 rounded-full shadow-lg animate-fade-in" aria-label="Selected">
+                             <CheckIcon className="w-3.5 h-3.5" />
+                          </div>
+                       ) : isLocked ? (
+                          <button 
+                             onClick={(e) => { e.stopPropagation(); onSlashClick(style); }}
+                             className="bg-black/60 backdrop-blur text-white p-1.5 rounded-full hover:bg-rose-500 transition-colors z-20"
+                             aria-label="Locked, click to unlock"
+                          >
+                             <Lock className="w-3.5 h-3.5" />
+                          </button>
+                       ) : (
+                          <div className="bg-white/20 backdrop-blur text-white p-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true">
+                             {style.icon}
+                          </div>
+                       )}
+                   </div>
+                </div>
+
+                <h3 className="font-bold text-white text-sm leading-tight drop-shadow-md" aria-hidden={isLocked && !isSelected}>
+                   {name}
+                </h3>
+                <p className="text-[10px] text-gray-300 line-clamp-2 mt-0.5" aria-hidden="true">
+                   {style.description}
+                </p>
+             </div>
+             
+             {/* Selection Indicator Border Overlay */}
+             {isSelected && <div className="absolute inset-0 border-2 border-rose-500 rounded-xl pointer-events-none"></div>}
+          </button>
+        </li>
+     );
+  };
+
+  if (isLoading) {
+    return (
+        <div className="space-y-6">
+            <div className="flex flex-col sm:flex-row gap-3">
+                <div className="flex-1 h-12 bg-gray-100 rounded-xl animate-pulse"></div>
+                <div className="w-full sm:w-48 h-12 bg-gray-100 rounded-xl animate-pulse"></div>
+            </div>
+            <ul className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 list-none p-0">
+                {[...Array(8)].map((_, i) => <StyleCardSkeleton key={i} />)}
+            </ul>
+        </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+       {/* Search and Resolution Toolbar */}
+       <div className="flex flex-col sm:flex-row gap-3">
+           {/* Search Bar */}
+           <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" aria-hidden="true" />
+              <input 
+                 type="text" 
+                 placeholder={t.styleSearchPlace} 
+                 value={searchTerm}
+                 onChange={e => setSearchTerm(e.target.value)}
+                 className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-rose-500 focus:ring-1 focus:ring-rose-200 outline-none text-sm transition-all"
+                 disabled={disabled}
+                 aria-label="Search styles"
+              />
+           </div>
+
+           {/* Resolution Selector */}
+           <div className="flex bg-gray-100 p-1 rounded-xl shrink-0 overflow-x-auto">
+                <button 
+                  onClick={() => onResolutionChange('standard')}
+                  className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all whitespace-nowrap ${resolution === 'standard' ? 'bg-white shadow text-gray-800' : 'text-gray-500 hover:text-gray-700'}`}
+                >
+                  HD
+                </button>
+                <button 
+                  onClick={() => onResolutionChange('high')}
+                  className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all whitespace-nowrap ${resolution === 'high' ? 'bg-white shadow text-rose-600' : 'text-gray-500 hover:text-gray-700'}`}
+                >
+                  4K
+                </button>
+                <button 
+                  onClick={() => onResolutionChange('ultra')}
+                  className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1 whitespace-nowrap ${resolution === 'ultra' ? 'bg-gradient-to-r from-rose-500 to-orange-500 text-white shadow' : 'text-gray-500 hover:text-gray-700'}`}
+                >
+                  {resolution === 'ultra' && <Maximize className="w-3 h-3" />}
+                  Ultra 8K
+                </button>
+           </div>
+       </div>
+
+       {/* Quick Actions Grid */}
+       <ul className="grid grid-cols-2 sm:grid-cols-4 gap-3 list-none p-0">
+          {/* Custom Upload */}
+          <li>
+            <button 
+               onClick={handleCustomClick}
+               disabled={disabled}
+               className="w-full h-full relative overflow-hidden group flex flex-col items-center justify-center p-3 rounded-xl border border-gray-200 hover:border-rose-300 hover:bg-rose-50 transition-all bg-white"
+               aria-label="Upload custom style image"
+            >
+               <div className="w-8 h-8 rounded-full bg-rose-100 flex items-center justify-center mb-1 group-hover:scale-110 transition-transform">
+                  <Upload className="w-4 h-4 text-rose-500" aria-hidden="true" />
+               </div>
+               <span className="text-xs font-bold text-gray-700">{t.customStyle}</span>
+               <input type="file" accept="image/*" className="hidden" ref={fileInputRef} onChange={handleFileChange} tabIndex={-1} aria-hidden="true" />
+            </button>
+          </li>
+
+          {/* Lucky Pick */}
+          <li>
+            <button 
+               onClick={onLuckySelect}
+               disabled={disabled}
+               className="w-full h-full relative overflow-hidden group flex flex-col items-center justify-center p-3 rounded-xl border border-gray-200 hover:border-amber-300 hover:bg-amber-50 transition-all bg-white"
+               aria-label="Lucky Pick: Random style"
+            >
+               <div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center mb-1 group-hover:scale-110 transition-transform">
+                  <Sparkles className="w-4 h-4 text-amber-500" aria-hidden="true" />
+               </div>
+               <span className="text-xs font-bold text-gray-700">{t.luckyStyle}</span>
+            </button>
+          </li>
+
+          {/* VIP Unlock / Slash - Only show if not VIP */}
+          {!isVipUnlocked && (
+             <li className="col-span-2 sm:col-span-2">
+                <button 
+                   onClick={() => onSlashClick(STYLES[0])} // Just trigger modal
+                   disabled={disabled}
+                   className="w-full h-full relative overflow-hidden group flex flex-col items-center justify-center p-3 rounded-xl border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all bg-white"
+                   aria-label="Unlock styles via viral share"
+                >
+                   <div className="flex items-center gap-2 mb-1">
+                      <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center group-hover:scale-110 transition-transform">
+                         <Zap className="w-4 h-4 text-purple-500" aria-hidden="true" />
+                      </div>
+                   </div>
+                   <span className="text-xs font-bold text-gray-700">{t.pddSlashTitle}</span>
+                   <span className="text-[10px] text-gray-400" aria-hidden="true">Limited Time Offer</span>
+                </button>
+             </li>
+          )}
+       </ul>
+
+       {/* Favorites Section */}
+       {!searchTerm && favorites.length > 0 && (
+          <section className="space-y-3" aria-label="Favorites">
+             <h3 className="text-sm font-bold text-gray-800 flex items-center gap-2 px-1">
+                <Star className="w-4 h-4 fill-rose-500 text-rose-500" aria-hidden="true" />
+                {t.sectFavorites || "My Favorites"}
+             </h3>
+             <ul className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 list-none p-0">
+                {favorites.map(id => {
+                    const s = STYLES.find(style => style.id === id);
+                    return s ? renderStyleCard(s) : null;
+                })}
+             </ul>
+          </section>
+       )}
+
+       {/* Styles Grid */}
+       <section className="space-y-3" aria-label="All Styles">
+          {(!searchTerm && favorites.length > 0) && (
+             <h3 className="text-sm font-bold text-gray-700 px-1">{t.browseAll || "All Styles"}</h3>
+          )}
+          <ul className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar pb-10 list-none p-0">
+              {filteredStyles.map(renderStyleCard)}
+              {filteredStyles.length === 0 && (
+                  <li className="col-span-full py-8 text-center text-gray-400 text-sm">
+                      No styles found matching "{searchTerm}"
+                  </li>
+              )}
+          </ul>
+       </section>
+    </div>
+  );
+};
+
+const CheckIcon = ({ className }: { className?: string }) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className={className} aria-hidden="true">
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);

components/Testimonials.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Star, Quote } from 'lucide-react';
+import { Language } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface TestimonialsProps {
+  language: Language;
+}
+
+export const Testimonials: React.FC<TestimonialsProps> = ({ language }) => {
+  const t = TRANSLATIONS[language];
+
+  const reviews = [
+    {
+      text: t.review1,
+      user: t.review1User,
+      initials: "AT",
+      color: "bg-blue-100 text-blue-600"
+    },
+    {
+      text: t.review2,
+      user: t.review2User,
+      initials: "Z",
+      color: "bg-rose-100 text-rose-600"
+    },
+    {
+      text: t.review3,
+      user: t.review3User,
+      initials: "EW",
+      color: "bg-amber-100 text-amber-600"
+    }
+  ];
+
+  return (
+    <section className="py-12 bg-gray-50 border-t border-gray-100">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6">
+        <div className="text-center mb-10">
+          <h2 className="text-2xl sm:text-3xl font-serif font-bold text-gray-900 mb-2">
+            {t.reviewsTitle}
+          </h2>
+          <div className="flex items-center justify-center gap-1 text-yellow-400 mb-2">
+             {[1,2,3,4,5].map(i => <Star key={i} className="w-5 h-5 fill-current" />)}
+          </div>
+          <p className="text-gray-500">{t.reviewsDesc}</p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {reviews.map((review, idx) => (
+            <div key={idx} className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 relative hover:-translate-y-1 transition-transform duration-300">
+              <Quote className="absolute top-6 right-6 w-8 h-8 text-gray-100" />
+              <div className="flex items-center gap-1 text-yellow-400 mb-4">
+                 {[1,2,3,4,5].map(i => <Star key={i} className="w-4 h-4 fill-current" />)}
+              </div>
+              <p className="text-gray-600 text-sm italic mb-6 leading-relaxed relative z-10">
+                "{review.text}"
+              </p>
+              <div className="flex items-center gap-3">
+                <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm ${review.color}`}>
+                  {review.initials}
+                </div>
+                <div>
+                  <h4 className="font-bold text-gray-900 text-sm">{review.user}</h4>
+                  <p className="text-xs text-gray-400">Verified Customer</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

components/UserCenter.tsx

@@ -0,0 +1,232 @@
+
+import React, { useState } from 'react';
+import { X, Crown, Star, Share2, UserPlus, Gift, Calendar, Check, User, Clock, FileText } from 'lucide-react';
+import { Language, UserAccount, LeadData, AdminConfig } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+
+interface UserCenterProps {
+  isVisible: boolean;
+  onClose: () => void;
+  language: Language;
+  user: UserAccount;
+  leads?: LeadData[]; 
+  config?: AdminConfig; // NEW
+  onRedeem: () => void;
+  showToast: (msg: string) => void;
+  onAddPoints: (amount: number, reason: string) => void;
+}
+
+export const UserCenter: React.FC<UserCenterProps> = ({ 
+  isVisible, onClose, language, user, leads = [], config, onRedeem, showToast, onAddPoints
+}) => {
+  const [activeTab, setActiveTab] = useState<'profile' | 'bookings'>('profile');
+  const t = TRANSLATIONS[language];
+  
+  if (!isVisible) return null;
+
+  // Filter leads for this user
+  const myBookings = leads.filter(l => l.userId === user.id);
+
+  // Dynamic Point Values
+  const ptShare = config?.pointsShare || 10;
+  const ptInvite = config?.pointsInvite || 50;
+  const ptBook = config?.pointsBook || 100;
+  const costVip = config?.pointsVipCost || 100;
+
+  const handleCopyLink = () => {
+    navigator.clipboard.writeText("https://romantic-life.com/invite/" + user.id);
+    showToast(t.toastCopy);
+    setTimeout(() => {
+        const recent = user.history.find(h => h.action === 'invite' && (Date.now() - h.timestamp) < 60000);
+        if(!recent) onAddPoints(ptInvite, 'Invite Link Shared');
+    }, 1000);
+  };
+
+  const handleShare = () => {
+    showToast("Sharing to WeChat...");
+    setTimeout(() => {
+        const recent = user.history.find(h => h.action === 'share' && (Date.now() - h.timestamp) < 60000);
+        if(!recent) onAddPoints(ptShare, 'Poster Shared');
+    }, 1000);
+  }
+
+  const getStatusBadge = (status: LeadData['status']) => {
+      switch(status) {
+          case 'new': return <span className="text-[10px] font-bold px-2 py-0.5 rounded bg-blue-100 text-blue-700 uppercase">{t.statusNew}</span>;
+          case 'contacted': return <span className="text-[10px] font-bold px-2 py-0.5 rounded bg-amber-100 text-amber-700 uppercase">{t.statusContacted}</span>;
+          case 'booked': return <span className="text-[10px] font-bold px-2 py-0.5 rounded bg-green-100 text-green-700 uppercase">{t.statusBooked}</span>;
+      }
+  }
+
+  return (
+    <div className="fixed inset-0 z-[90] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
+       <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden relative flex flex-col max-h-[80vh]">
+          {/* Header Card */}
+          <div className="bg-gray-900 text-white p-6 relative overflow-hidden shrink-0">
+             <button onClick={onClose} className="absolute top-4 right-4 p-1 bg-white/10 rounded-full hover:bg-white/20 transition-colors z-20">
+                <X className="w-5 h-5 text-white" />
+             </button>
+             
+             {/* Decorative Circles */}
+             <div className="absolute -top-10 -right-10 w-32 h-32 bg-rose-500/20 rounded-full blur-2xl"></div>
+             <div className="absolute bottom-0 left-0 w-24 h-24 bg-blue-500/20 rounded-full blur-2xl"></div>
+
+             <div className="relative z-10 flex items-center gap-4">
+                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-rose-400 to-orange-500 p-0.5">
+                   <div className="w-full h-full rounded-full bg-gray-800 flex items-center justify-center overflow-hidden">
+                      {user.avatar ? (
+                        <img src={user.avatar} className="w-full h-full object-cover" />
+                      ) : (
+                        <span className="text-2xl font-bold text-white">{user.name.charAt(0)}</span>
+                      )}
+                   </div>
+                </div>
+                <div>
+                   <h2 className="text-xl font-bold">{user.name}</h2>
+                   <div className="flex items-center gap-2 mt-1">
+                      <div className={`text-[10px] font-bold px-2 py-0.5 rounded-full flex items-center gap-1 ${user.isVip ? 'bg-amber-400 text-amber-900' : 'bg-gray-700 text-gray-300'}`}>
+                         <Crown className="w-3 h-3" />
+                         {user.isVip ? t.vipActive : t.vipInactive}
+                      </div>
+                      <span className="text-xs text-gray-400">ID: {user.id.slice(0,6)}</span>
+                   </div>
+                </div>
+             </div>
+
+             <div className="mt-6 bg-white/10 rounded-xl p-4 flex items-center justify-between backdrop-blur-sm">
+                <div>
+                   <p className="text-xs text-gray-400 uppercase tracking-wider">{t.myPoints}</p>
+                   <p className="text-3xl font-bold text-amber-400 mt-1">{user.points}</p>
+                </div>
+                {user.isVip ? (
+                   <div className="px-3 py-1.5 bg-amber-500/20 text-amber-400 rounded-lg text-xs font-bold border border-amber-500/50 flex items-center gap-1">
+                      <Check className="w-3 h-3" /> VIP Unlocked
+                   </div>
+                ) : (
+                   <button 
+                     onClick={onRedeem}
+                     disabled={user.points < costVip}
+                     className={`px-4 py-2 rounded-lg text-xs font-bold transition-colors ${user.points >= costVip ? 'bg-amber-400 text-amber-900 hover:bg-amber-300' : 'bg-gray-700 text-gray-500 cursor-not-allowed'}`}
+                   >
+                      {t.rewardVip} ({costVip} pts)
+                   </button>
+                )}
+             </div>
+          </div>
+
+          {/* Navigation Tabs */}
+          <div className="flex border-b border-gray-100 bg-white shrink-0">
+             <button 
+               onClick={() => setActiveTab('profile')}
+               className={`flex-1 py-3 text-sm font-bold flex items-center justify-center gap-2 ${activeTab === 'profile' ? 'text-rose-600 border-b-2 border-rose-600' : 'text-gray-500'}`}
+             >
+                <User className="w-4 h-4" /> {t.tabProfile}
+             </button>
+             <button 
+               onClick={() => setActiveTab('bookings')}
+               className={`flex-1 py-3 text-sm font-bold flex items-center justify-center gap-2 ${activeTab === 'bookings' ? 'text-rose-600 border-b-2 border-rose-600' : 'text-gray-500'}`}
+             >
+                <Clock className="w-4 h-4" /> {t.tabBookings}
+             </button>
+          </div>
+
+          {/* Content Area */}
+          <div className="p-6 space-y-6 overflow-y-auto flex-1 bg-gray-50/50">
+             
+             {activeTab === 'profile' && (
+               <>
+                 {/* Tasks Section */}
+                 <div>
+                    <h3 className="font-bold text-gray-900 mb-3 flex items-center gap-2">
+                       <Star className="w-4 h-4 text-rose-500" /> {t.earnPoints}
+                    </h3>
+                    <div className="space-y-3">
+                       <div className="flex items-center justify-between p-3 bg-white rounded-xl border border-rose-100 shadow-sm">
+                          <div className="flex items-center gap-3">
+                             <div className="w-8 h-8 rounded-full bg-rose-50 flex items-center justify-center text-rose-500"><Share2 className="w-4 h-4" /></div>
+                             <div>
+                                <p className="text-sm font-bold text-gray-800">{t.taskShare}</p>
+                                <p className="text-xs text-rose-500">+{ptShare} pts</p>
+                             </div>
+                          </div>
+                          <button onClick={handleShare} className="text-xs font-bold bg-gray-50 px-3 py-1.5 rounded-full border border-gray-200 text-gray-600 hover:bg-rose-50 transition-colors">Go</button>
+                       </div>
+                       
+                       <div className="flex items-center justify-between p-3 bg-white rounded-xl border border-blue-100 shadow-sm">
+                          <div className="flex items-center gap-3">
+                             <div className="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center text-blue-500"><UserPlus className="w-4 h-4" /></div>
+                             <div>
+                                <p className="text-sm font-bold text-gray-800">{t.taskInvite}</p>
+                                <p className="text-xs text-blue-500">+{ptInvite} pts</p>
+                             </div>
+                          </div>
+                          <button onClick={handleCopyLink} className="text-xs font-bold bg-gray-50 px-3 py-1.5 rounded-full border border-gray-200 text-gray-600 hover:bg-blue-50 transition-colors">Copy</button>
+                       </div>
+                       
+                       <div className="flex items-center justify-between p-3 bg-white rounded-xl border border-amber-100 shadow-sm">
+                          <div className="flex items-center gap-3">
+                             <div className="w-8 h-8 rounded-full bg-amber-50 flex items-center justify-center text-amber-500"><Calendar className="w-4 h-4" /></div>
+                             <div>
+                                <p className="text-sm font-bold text-gray-800">{t.taskBook}</p>
+                                <p className="text-xs text-amber-500">+{ptBook} pts</p>
+                             </div>
+                          </div>
+                          <button className="text-xs font-bold bg-gray-50 px-3 py-1.5 rounded-full border border-gray-200 text-gray-600 cursor-default opacity-60">Book</button>
+                       </div>
+                    </div>
+                 </div>
+
+                 {/* Rewards Section */}
+                 <div>
+                    <h3 className="font-bold text-gray-900 mb-3 flex items-center gap-2">
+                       <Gift className="w-4 h-4 text-purple-500" /> {t.redeemRewards}
+                    </h3>
+                    <div className="grid grid-cols-2 gap-3">
+                       <div className={`p-4 bg-white rounded-xl border border-gray-200 shadow-sm flex flex-col items-center text-center transition-opacity ${user.isVip ? 'opacity-50' : 'opacity-100'}`}>
+                          <div className="w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center text-gray-400 mb-2"><Crown className="w-5 h-5" /></div>
+                          <p className="text-xs font-bold text-gray-800">{t.rewardVip}</p>
+                          <p className="text-[10px] text-gray-500 mt-1">{costVip} pts</p>
+                       </div>
+                       <div className="p-4 bg-white rounded-xl border border-gray-200 shadow-sm flex flex-col items-center text-center opacity-50">
+                          <div className="w-10 h-10 bg-green-50 rounded-full flex items-center justify-center text-green-500 mb-2"><Gift className="w-5 h-5" /></div>
+                          <p className="text-xs font-bold text-gray-800">{t.rewardCoupon}</p>
+                          <p className="text-[10px] text-gray-500 mt-1">500 pts</p>
+                       </div>
+                    </div>
+                 </div>
+               </>
+             )}
+
+             {activeTab === 'bookings' && (
+                 <div className="space-y-4">
+                     {myBookings.length === 0 ? (
+                         <div className="text-center py-10 text-gray-400">
+                             <Calendar className="w-12 h-12 mx-auto mb-3 opacity-30" />
+                             <p>{t.noBookings}</p>
+                         </div>
+                     ) : (
+                         myBookings.map(lead => (
+                             <div key={lead.id} className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
+                                 <div className="flex items-center justify-between mb-2">
+                                     <div className="flex items-center gap-2">
+                                         <FileText className="w-4 h-4 text-gray-400" />
+                                         <span className="text-sm font-bold text-gray-800">{lead.service}</span>
+                                     </div>
+                                     {getStatusBadge(lead.status)}
+                                 </div>
+                                 <div className="text-xs text-gray-500 space-y-1 pl-6">
+                                     <p>Date: {lead.date || 'Pending'}</p>
+                                     <p>Budget: {lead.budget}</p>
+                                     <p className="text-[10px] text-gray-400 mt-2">{new Date(lead.timestamp).toLocaleString()}</p>
+                                 </div>
+                             </div>
+                         ))
+                     )}
+                 </div>
+             )}
+             
+          </div>
+       </div>
+    </div>
+  );
+};

constants/translations.ts

@@ -0,0 +1,965 @@
+
+
+import { Language } from '../types';
+
+const en = {
+  title: "Romantic Life",
+  subtitle: "Xiamen Wedding Photography",
+  heroTitle: "AI Wedding Fitting Room",
+  heroDesc: "Try 100+ premier wedding styles instantly. From Classic to Avant-Garde, find your perfect look with Romantic Life.",
+  beta: "AI Fitting v2.0",
+  
+  // Marketing
+  promoBanner: "🎉 Spring Wedding Expo: Book online today and get a Free Makeup Trial + ¥500 Voucher!",
+  promoEnds: "Offer ends in:",
+  tagHot: "HOT",
+  tagNew: "NEW",
+  tagRec: "EDITOR'S PICK",
+  floatConsult: "Consult",
+
+  // PDD Viral Copy
+  pddSlashBtn: "Help Me Unlock",
+  pddSlashTitle: "Unlock for FREE!",
+  pddSlashDesc: "Invite 1 friend to cut the price to ¥0!",
+  pddSlashProgress: "Unlocked 98%...",
+  pddSlashCta: "Invite Friend to Cut",
+  pddSlashSuccess: "Cut Successfully!",
+  pddRedPacketTitle: "Congratulations!",
+  pddRedPacketDesc: "You received a Wedding Cash Voucher",
+  pddRedPacketCta: "Open Now",
+  pddWithdrawTitle: "Withdraw ¥2000",
+  pddWithdrawDesc: "Only ¥20 left to withdraw! Share to boost.",
+  pddGroupJoin: "Join Group",
+  pddGroupJoined: "people joined",
+  
+  // AI & Ticker
+  aiScanning: "AI Face Scanning...",
+  aiAnalyzing: "Analyzing facial features & skin tone...",
+  aiMatching: "Matching best wedding styles...",
+  aiBestMatch: "AI MATCH 98%",
+  tickerBooked: "booked",
+  tickerJustNow: "Just now",
+  tickerMinsAgo: "mins ago",
+
+  // Analysis Modal (NEW)
+  analysisTitle: "AI DIAGNOSIS",
+  analysisSubtitle: "Biometric Esthetics Report",
+  lblFaceShape: "Face Shape",
+  lblSkinTone: "Skin Tone Analysis",
+  lblRecVibe: "Recommended Vibe",
+  aiConfidence: "AI MATCHING CONFIDENCE",
+
+  // Steps
+  step1: "Upload Photo",
+  step2: "Select Style",
+  step3: "Personalize",
+  
+  // Upload
+  uploadTitle: "Upload Your Portrait",
+  uploadDesc: "Drag & drop or click. Best results with clear face visibility.",
+  changePhoto: "Change Photo",
+  
+  // Styles
+  styleSearchPlace: "Search styles...", 
+  customStyle: "Custom Style",
+  customStyleDesc: "Upload reference photo",
+  luckyStyle: "Lucky Pick",
+  luckyStyleDesc: "Random style selection",
+  clearSelection: "Clear selection",
+  usingCustom: "Using Custom Reference",
+  usingCustomDesc: "Applying this style to your photo.",
+  sectFavorites: "My Favorites", // NEW
+  browseAll: "Browse All Styles", // NEW
+  viewCategories: "View Categories", // NEW
+  
+  // VIP
+  vipLocked: "VIP Style",
+  vipUnlockTitle: "Unlock VIP Styles",
+  vipUnlockDesc: "Register as a member to unlock all premium styles for free!",
+  
+  // Personalize
+  colorFilters: "Color Grading",
+  bgBlur: "Depth of Field",
+  bgBlurDesc: "Professional lens blur effect.",
+  groupComp: "Group Composition",
+  compClassic: "Classic Formal",
+  compDynamic: "Candid Moment",
+  compCinematic: "Cinematic",
+  resolutionTitle: "Image Quality",
+  resStandard: "Standard",
+  resHigh: "High (4K)",
+  resUltra: "Ultra (8K)",
+  customInstruct: "Stylist Instructions",
+  customInstructPlaceholder: "e.g. 'Add a bouquet of red roses', 'Sunset beach background'...",
+  customInstructHint: "Tell our AI stylist specific details you want.",
+  
+  // Actions
+  generating: "Designing...",
+  genWait: "Our AI stylist is working on your photos...",
+  genSelected: "Try This Style",
+  genCustom: "Try Custom Style",
+  genAll: "Generate All Styles",
+  confirmGenAll: "Generate previews for all 100+ styles? This takes a few minutes.",
+  
+  // Results
+  gallery: "My Lookbook",
+  startOver: "New Customer",
+  holdCompare: "Compare Original",
+  sliderHint: "Drag to Compare",
+  compareMode: "PK Mode",
+  compareHint: "Select another style to compare",
+  exitCompare: "Exit PK",
+  original: "ORIGINAL",
+  watermark: "Romantic Life Photography",
+  videoBtn: "Video",
+  zipBtn: "Download All",
+  zipLoading: "Packing...",
+  videoLoading: "Recording...",
+  emptyGallery: "Your fitting results will appear here",
+  emptyGalleryDesc: "Select a style to see how you look in our latest collections.",
+  saveRecipe: "Save Recipe",
+  
+  // Marketing & Lead Gen
+  bookNow: "Book Consultation",
+  bookStyle: "Book This Style",
+  genPoster: "Share Poster",
+  consultTitle: "Book Your Shoot",
+  consultDesc: "Leave your info, our consultant will contact you with an exclusive offer.",
+  formName: "Your Name",
+  formPhone: "Phone Number",
+  formWeChat: "WeChat ID (Optional)",
+  formDate: "Wedding Date (Optional)",
+  formBudget: "Budget Range",
+  formService: "Service Type",
+  budget1: "Under ¥5k",
+  budget2: "¥5k - ¥10k",
+  budget3: "¥10k - ¥20k",
+  budget4: "¥20k+",
+  service1: "Wedding Photography",
+  service2: "Artistic Portrait",
+  service3: "Family / Group",
+  formSubmit: "Submit Inquiry",
+  formSuccess: "Received! VIP Styles Unlocked!",
+  posterTitle: "Scan to Book",
+  posterBrand: "Romantic Life Photography",
+  
+  // Features (Why Choose Us)
+  whyUsTitle: "Why Choose Romantic Life?",
+  whyUsDesc: "Experience the premier wedding photography service in Xiamen.",
+  feat1Title: "No Hidden Costs",
+  feat1Desc: "Transparent pricing. All raw files included.",
+  feat2Title: "Satisfaction Guaranteed",
+  feat2Desc: "Free reshoot if you are not satisfied.",
+  feat3Title: "1-on-1 Service",
+  feat3Desc: "Dedicated team for every couple.",
+  feat4Title: "Premium Gowns",
+  feat4Desc: "1000+ designer dresses to choose from.",
+
+  // Testimonials
+  reviewsTitle: "Client Love Notes",
+  reviewsDesc: "See what our happy couples have to say.",
+  review1: "The AI fitting saved us so much time! We knew exactly what we wanted before arriving. The actual shoot was even better.",
+  review1User: "Alice & Tom",
+  review2: "Highly recommend the 'Chinese Traditional' style. The team was professional and the photos are stunning.",
+  review2User: "Ms. Zhang",
+  review3: "No hidden fees, great service. The makeup artist is a magician! Loved every moment.",
+  review3User: "Emily W.",
+
+  // Footer
+  footerAddress: "No. 188, Huandao Road, Siming District, Xiamen",
+  footerPhone: "TEL: 0592-8888888",
+  footerRights: "© 2024 Romantic Life Photography. All Rights Reserved.",
+
+  // About Us
+  aboutUsBtn: "About Us",
+  aboutTitle: "About Romantic Life",
+  aboutStory: "Brand Story",
+  aboutStoryContent: "Founded in 2004, Xiamen Romantic Life Photography is a premier luxury wedding studio located on the scenic Huandao Road. With over 20 years of experience and serving 100,000+ couples, we combine artistic aesthetics with genuine emotion to capture timeless memories.",
+  aboutPhilosophy: "Our Philosophy",
+  aboutPhilosophyContent: "We reject assembly-line photography. Every shutter press is a tribute to love. This AI Fitting Room allows you to explore possibilities, but our dedicated team makes them reality.",
+  aboutLocation: "Prime Location",
+  aboutLocationContent: "Our 5000m² exclusive sea-view base offers private beaches, gardens, and diverse indoor scenes.",
+
+  // Video Settings
+  vidSettings: "Video Settings",
+  sectComposition: "Composition",
+  sectEffects: "Effects",
+  sectAudio: "Audio",
+  transEffect: "Transition",
+  transSpeed: "Speed",
+  textOverlay: "Title Overlay",
+  textOverlayDesc: "Show style name",
+  watermarkToggle: "Show Brand Watermark",
+  videoMusic: "Background Music",
+  musicNone: "None",
+  musicRomantic: "Romantic Piano",
+  musicCinematic: "Cinematic Strings",
+  musicUpbeat: "Upbeat Pop",
+  cancel: "Cancel",
+  genVideo: "Create Video",
+  vidFormat: "Format",
+  vidResolution: "Resolution",
+
+  // --- NEW: User Center & Admin ---
+  userCenterTitle: "User Center",
+  myPoints: "My Points",
+  vipStatus: "VIP Status",
+  vipActive: "Active",
+  vipInactive: "Inactive",
+  earnPoints: "Earn Points",
+  taskShare: "Share Poster",
+  taskInvite: "Invite Friends",
+  taskBook: "Book Shoot",
+  redeemRewards: "Redeem Rewards",
+  rewardVip: "Unlock All Styles (VIP)",
+  rewardCoupon: "¥100 Voucher",
+  
+  // Admin & CRM
+  adminTitle: "Studio Admin Panel",
+  adminLoginTitle: "Staff Login",
+  adminPassword: "Password",
+  adminLoginBtn: "Login",
+  adminTabLeads: "Leads Management",
+  adminTabSettings: "App Settings",
+  adminTabUsers: "User Management",
+  adminTabStaff: "Staff & Permissions",
+  adminTotalLeads: "Total Leads",
+  adminNewLeads: "New Today",
+  adminExport: "Export CSV",
+  adminSave: "Save Settings",
+  adminPromoText: "Promo Banner Text",
+  adminContactPhone: "Contact Phone",
+  adminFooterAddr: "Studio Address",
+  adminInsights: "Insights",
+  adminHotLead: "🔥 High Intent",
+  
+  statusNew: "New",
+  statusContacted: "Contacted",
+  statusBooked: "Booked",
+  actionDelete: "Delete",
+  actionUpdate: "Update Status",
+  
+  // Auth
+  authLogin: "Login",
+  authRegister: "Register",
+  authReset: "Reset Password",
+  authPhonePlace: "Phone Number",
+  authNamePlace: "Your Name",
+  authPassPlace: "Password",
+  authNewPassPlace: "New Password",
+  authConfirmPassPlace: "Confirm Password",
+  authCodePlace: "Verification Code (SMS)",
+  authSendCode: "Get Code",
+  authCodeSent: "Code sent: ",
+  authPassMismatch: "Passwords do not match!",
+  authNoAccount: "No account? Register",
+  authHasAccount: "Have an account? Login",
+  authForgotPass: "Forgot Password?",
+  authSubmit: "Submit",
+  authWelcome: "Welcome!",
+  authResetSuccess: "Password reset successful! Please login.",
+  authPhoneNotFound: "Phone number not registered.",
+  
+  // User Management
+  userPointsEdit: "Edit Points",
+  userVipToggle: "VIP Access",
+  
+  // Staff Management
+  staffAddBtn: "Add Staff",
+  staffSearchPlace: "Enter user phone...",
+  staffPromote: "Promote to Staff",
+  staffRole: "Role",
+  permExport: "Can Export Data",
+  permDelete: "Can Delete Data",
+  permSettings: "Can Edit Settings",
+  permUsers: "Can Manage Users",
+  
+  // Toasts
+  toastCopy: "Link copied to clipboard!",
+  toastSaved: "Settings saved successfully!",
+  toastWelcome: "Welcome back, Admin!",
+  toastDeleted: "Lead deleted.",
+  toastPromoted: "User promoted to Staff!",
+  toastUpdated: "Permissions updated!",
+  toastFeedback: "Thank you for your feedback!",
+  
+  // Feedback
+  feedbackTitle: "User Feedback",
+  feedbackDesc: "We value your opinion. Help us improve.",
+  feedbackTypeBug: "Bug Report",
+  feedbackTypeSugg: "Suggestion",
+  feedbackTypeOther: "Other",
+  feedbackContentPlace: "Please describe your issue or suggestion...",
+  feedbackSubmit: "Submit Feedback",
+  feedbackRating: "Rate your experience",
+  
+  // My Bookings
+  tabProfile: "Profile",
+  tabBookings: "My Bookings",
+  noBookings: "No bookings yet.",
+  
+  // Tips & Nudges
+  genTips: [
+    "Did you know? We have a private beach for sunset shoots.",
+    "Tip: Match your accessories to the style for best results.",
+    "Our makeup artists are trained in Korean & Japanese styles.",
+    "Fun Fact: We've shot over 10,000 couples at the Botanical Garden.",
+    "Relax your shoulders for a more natural pose.",
+    "We provide fresh flowers for all garden shoots."
+  ],
+  pointNudgeDownload: "+10 Pts",
+  pointNudgeShare: "Share for +10 Pts!",
+  
+  // New Live Effects
+  liveEffect: "Live Photo",
+  effectBreath: "Breathing",
+  effectGlitch: "Glitch",
+  effectParticles: "Particles",
+  
+  // New Subject Types
+  subjType: "Subject",
+  subjFemale: "Bride / Female",
+  subjMale: "Groom / Male",
+  subjCouple: "Couple",
+  subjChild: "Child",
+  subjFamily: "Family",
+
+  // Style Names
+  styles: {
+    korean: "Korean Minimalist",
+    british: "British Royal",
+    euro_american: "Western Vogue",
+    hollywood: "Classic Hollywood",
+    chinese: "Chinese Traditional",
+    gufeng: "Ancient Hanfu",
+    japanese: "Japanese Airy",
+    ethnic: "Ethnic Vibes",
+    exotic: "Exotic Morocco",
+    cinematic: "Cinematic Mood",
+    film: "Vintage Film",
+    blackwhite: "Classic B&W",
+    artistic: "Fine Art",
+    illustration: "Illustration",
+    oil_painting: "Oil Painting",
+    anime: "Anime Dream",
+    glitch: "Cyber Glitch",
+    ins: "Insta Chic",
+    magazine: "Magazine Cover",
+    minimalist: "Modern Minimalist",
+    fashion: "High Fashion",
+    retro: "Retro HK",
+    literary: "Literary",
+    campus: "Campus Love",
+    fairytale: "Fairy Tale",
+    sweet: "Sweet Pink",
+    story: "Love Story",
+    documentary: "Documentary",
+    fresh: "Nature Fresh",
+    garden: "Secret Garden",
+    sexy: "Glamour",
+    personality: "Unique Pop",
+    bohemian: "Bohemian",
+    art_deco: "Art Deco",
+    masquerade: "Masquerade Ball",
+    steampunk: "Steampunk",
+    galactic: "Galactic",
+    cyberpunk: "Cyberpunk",
+    gothic: "Gothic Romance",
+    beach: "Island Beach",
+    winter: "Winter Snow",
+    underwater: "Underwater",
+    rustic: "Rustic Barn",
+    elf: "Elven Magic",
+    indian: "Indian Luxury",
+    thai: "Thai Royal",
+    double_exposure: "Double Exposure",
+    
+    // Douyin Viral
+    old_money: "Old Money Aesthetic",
+    phoenix_crown: "Phoenix Crown",
+    balletcore: "Balletcore",
+    dopamine: "Dopamine",
+    clean_fit: "Clean Fit",
+    
+    // Groom Styles
+    groom_classic: "Classic Tuxedo",
+    groom_modern: "Modern Suit",
+    groom_hanfu: "Scholar Hanfu",
+    groom_retro: "Retro Gent",
+    groom_cyber: "Cyber Warrior",
+    
+    // Child Styles
+    child_prince: "Little Prince",
+    child_princess: "Little Princess",
+    child_suit: "Mini Gentleman",
+    child_traditional: "Eastern Kid",
+    child_fairy: "Forest Fairy",
+
+    // NEW 38 STYLES
+    mermaid: "Mermaid Core",
+    angel: "Angel Wings",
+    demon: "Dark Fantasy",
+    vampire: "Vampire Gothic",
+    victorian: "Victorian Era",
+    renaissance: "Renaissance Art",
+    egyptian: "Ancient Egypt",
+    greek: "Greek Goddess",
+    roman: "Roman Holiday",
+    viking: "Nordic Viking",
+    y2k: "Y2K Millennium",
+    neon: "Neon Lights",
+    denim: "Denim Casual",
+    suit_bride: "Bridal Suit",
+    sketch: "Pencil Sketch",
+    pixel: "Pixel Art",
+    clay: "Claymation",
+    pop_art: "Pop Art",
+    autumn: "Golden Autumn",
+    sakura: "Cherry Blossom",
+    rainforest: "Tropical Rainforest",
+    barbie: "Pink Doll",
+    wes: "Pastel Symmetry",
+    cottagecore: "Cottagecore",
+    dark_academia: "Dark Academia",
+    light_academia: "Light Academia",
+    mob_wife: "Mob Wife Aesthetic",
+    all_red: "Monochrome Red",
+    all_black: "Gothic Black",
+    pastel: "Pastel Dream",
+    cyber_angel: "Cybernetic Angel",
+    hanbok: "Korean Hanbok",
+    kimono: "Japanese Kimono",
+    cheongsam: "Qipao",
+    cowboy: "Western Cowboy",
+    disco: "70s Disco",
+    jazz: "Jazz Bar",
+    sporty: "Sporty Chic"
+  }
+};
+
+export type TranslationType = typeof en;
+
+const zh: TranslationType = {
+  title: "厦门浪漫一生",
+  subtitle: "婚纱摄影 AI 试衣间",
+  heroTitle: "在线试衣 预见你的美",
+  heroDesc: "上传照片，一键体验100+种全球热门婚纱风格。先试穿，再拍摄，所见即所得。",
+  beta: "AI 拓客版",
+  promoBanner: "🎉 春季婚博会限时活动：现在预约进店，赠送“明星级”试妆一次 + 500元现金抵用券！",
+  promoEnds: "距活动结束仅剩",
+  tagHot: "爆款",
+  tagNew: "新品",
+  tagRec: "店长推荐",
+  floatConsult: "在线咨询",
+
+  // PDD Viral
+  pddSlashBtn: "免费拿",
+  pddSlashTitle: "0元解锁 VIP风格",
+  pddSlashDesc: "邀请1位好友助力，直接砍到 0元 拿走！",
+  pddSlashProgress: "已砍 98.9%...",
+  pddSlashCta: "喊好友砍一刀",
+  pddSlashSuccess: "砍价成功！",
+  pddRedPacketTitle: "恭喜！",
+  pddRedPacketDesc: "您获得一个婚纱照现金红包",
+  pddRedPacketCta: "立即拆开",
+  pddWithdrawTitle: "提现 2000元",
+  pddWithdrawDesc: "再分享给 2个 群，即可提现到账！",
+  pddGroupJoin: "去拼团",
+  pddGroupJoined: "人已拼",
+  
+  aiScanning: "AI 智能面部扫描中...",
+  aiAnalyzing: "正在分析五官骨相与肤色...",
+  aiMatching: "正在匹配最适合您的婚纱风格...",
+  aiBestMatch: "AI 契合度 98%",
+  tickerBooked: "预约了",
+  tickerJustNow: "刚刚",
+  tickerMinsAgo: "分钟前",
+
+  // Analysis Modal (NEW - CHINESE)
+  analysisTitle: "AI 形象诊断报告",
+  analysisSubtitle: "面部生物美学分析",
+  lblFaceShape: "面部轮廓",
+  lblSkinTone: "肤色质感",
+  lblRecVibe: "推荐风格气质",
+  aiConfidence: "AI 匹配置信度",
+
+  step1: "上传客照",
+  step2: "选择风格",
+  step3: "定制细节",
+  uploadTitle: "上传您的照片",
+  uploadDesc: "支持自拍或生活照，五官清晰效果最佳",
+  changePhoto: "更换照片",
+  styleSearchPlace: "搜索风格...", 
+  customStyle: "自定义风格",
+  customStyleDesc: "上传网图/样片",
+  luckyStyle: "手气不错",
+  luckyStyleDesc: "随机匹配一款风格",
+  clearSelection: "清除选择",
+  usingCustom: "使用自定义样片",
+  usingCustomDesc: "我们将复刻这张样片的风格。",
+  sectFavorites: "我的收藏", // NEW
+  browseAll: "浏览全部风格", // NEW
+  viewCategories: "查看分类", // NEW
+  
+  vipLocked: "VIP 专享",
+  vipUnlockTitle: "解锁 VIP 风格",
+  vipUnlockDesc: "简单注册/留资，即可免费解锁全部高级风格！",
+
+  colorFilters: "后期滤镜",
+  bgBlur: "大光圈虚化",
+  bgBlurDesc: "模拟单反镜头景深效果",
+  groupComp: "多人拍摄模式",
+  compClassic: "经典合影",
+  compDynamic: "互动抓拍",
+  compCinematic: "电影叙事",
+  resolutionTitle: "画质选择",
+  resStandard: "标准 (HD)",
+  resHigh: "高清 (4K)",
+  resUltra: "超清 (8K)",
+  customInstruct: "修图师指令",
+  customInstructPlaceholder: "例如：'要手捧红玫瑰'，'背景换成鼓浪屿海边'...",
+  customInstructHint: "像告诉修图师一样告诉AI您的需求。",
+  generating: "正在设计中...",
+  genWait: "AI修图师正在为您生成样片，请稍候...",
+  genSelected: "生成该风格",
+  genCustom: "生成自定义",
+  genAll: "一键生成全套样片",
+  confirmGenAll: "确定生成全套100+种风格吗？这将制作您的专属电子相册。",
+  gallery: "我的试衣间",
+  startOver: "接待下一位",
+  holdCompare: "对比原图",
+  sliderHint: "拖动对比",
+  compareMode: "风格PK",
+  compareHint: "请点击下方选择另一张进行对比",
+  exitCompare: "退出PK",
+  original: "原图",
+  watermark: "厦门浪漫一生婚纱摄影",
+  videoBtn: "生成视频",
+  zipBtn: "打包下载",
+  zipLoading: "打包中...",
+  videoLoading: "渲染中...",
+  emptyGallery: "试衣效果将在这里显示",
+  emptyGalleryDesc: "选择左侧风格，为客户展示拍摄效果。",
+  saveRecipe: "保存配方",
+  
+  // Marketing & Lead Gen
+  bookNow: "预约进店",
+  bookStyle: "拍这套",
+  genPoster: "生成种草海报",
+  consultTitle: "预约拍摄档期",
+  consultDesc: "留下您的联系方式，获取本季最新优惠报价。",
+  formName: "您的称呼",
+  formPhone: "联系电话",
+  formWeChat: "微信号 (选填)",
+  formDate: "婚期/拍摄日期 (选填)",
+  formBudget: "预算范围",
+  formService: "拍摄类型",
+  budget1: "5000元以下",
+  budget2: "5000 - 10000元",
+  budget3: "10000 - 20000元",
+  budget4: "20000元以上",
+  service1: "婚纱摄影",
+  service2: "艺术写真",
+  service3: "全家福/多人",
+  formSubmit: "提交预约，解锁VIP",
+  formSuccess: "预约成功！VIP风格已解锁！",
+  posterTitle: "扫码咨询",
+  posterBrand: "厦门浪漫一生婚纱摄影",
+  
+  // Features
+  whyUsTitle: "为什么选择浪漫一生？",
+  whyUsDesc: "专注高端婚纱摄影20年，服务超10万对新人。",
+  feat1Title: "无隐形消费",
+  feat1Desc: "价格透明，所有底片全送。",
+  feat2Title: "不满意重拍",
+  feat2Desc: "拍摄不满意无条件重拍，直到满意为止。",
+  feat3Title: "一客一选",
+  feat3Desc: "专属团队一对一服务，拒绝流水线。",
+  feat4Title: "高定礼服",
+  feat4Desc: "全馆1000+套品牌礼服任选。",
+
+  // Testimonials
+  reviewsTitle: "客户真实评价",
+  reviewsDesc: "听听我们的新人怎么说",
+  review1: "AI试衣太方便了，不用去店里就能选好风格，省了一整天时间！",
+  review1User: "林小姐 & 张先生",
+  review2: "极力推荐‘中式喜嫁’风格，非常喜庆，家人都很喜欢。服务团队也很专业。",
+  review2User: "张女士",
+  review3: "没有任何隐形消费，化妆师技术超好，成片效果比AI生成的还要惊艳！",
+  review3User: "Emily W.",
+  
+  // Footer
+  footerAddress: "厦门市思明区环岛路188号",
+  footerPhone: "咨询热线: 0592-8888888",
+  footerRights: "© 2024 厦门浪漫一生婚纱摄影 版权所有",
+
+  // About Us
+  aboutUsBtn: "关于我们",
+  aboutTitle: "关于浪漫一生",
+  aboutStory: "品牌故事",
+  aboutStoryContent: "厦门浪漫一生婚纱摄影成立于2004年，是坐落于环岛路的高端婚纱摄影品牌。20年来，我们服务了超过10万对新人。我们坚持用镜头捕捉最真实的情感，将艺术美学与幸福瞬间完美融合。",
+  aboutPhilosophy: "服务理念",
+  aboutPhilosophyContent: "我们拒绝流水线式的拍摄。每一次快门都是对爱情的礼赞。这个AI试衣间只是开始，我们专业的摄影团队将把无限的想象变为触手可及的现实。",
+  aboutLocation: "黄金地段",
+  aboutLocationContent: "我们拥有5000平米独家海景基地，私人沙滩、花园及多样化室内实景，满足您对婚纱照的所有幻想。",
+
+  vidSettings: "视频参数",
+  sectComposition: "画面构图",
+  sectEffects: "特效调整",
+  sectAudio: "音频配乐",
+  transEffect: "转场",
+  transSpeed: "速度",
+  textOverlay: "风格字幕",
+  textOverlayDesc: "显示风格名称",
+  watermarkToggle: "显示品牌水印",
+  videoMusic: "背景音乐",
+  musicNone: "无音乐",
+  musicRomantic: "浪漫钢琴",
+  musicCinematic: "电影弦乐",
+  musicUpbeat: "欢快流行",
+  cancel: "取消",
+  genVideo: "导出视频",
+  vidFormat: "视频格式",
+  vidResolution: "分辨率",
+  
+  // User Center & Admin
+  userCenterTitle: "用户中心",
+  myPoints: "我的积分",
+  vipStatus: "VIP 状态",
+  vipActive: "已激活",
+  vipInactive: "未激活",
+  earnPoints: "赚取积分",
+  taskShare: "分享海报 (+10)",
+  taskInvite: "邀请好友 (+50)",
+  taskBook: "预约拍摄 (+100)",
+  redeemRewards: "积分兑换",
+  rewardVip: "解锁全套风格 (VIP)",
+  rewardCoupon: "100元现金券",
+  
+  // Admin CRM
+  adminTitle: "影楼管理后台",
+  adminLoginTitle: "员工登录",
+  adminPassword: "密码",
+  adminLoginBtn: "登录",
+  adminTabLeads: "客资管理",
+  adminTabSettings: "软件设置",
+  adminTabUsers: "用户管理",
+  adminTabStaff: "员工权限",
+  adminTotalLeads: "总客资数",
+  adminNewLeads: "今日新增",
+  adminExport: "导出 CSV",
+  adminSave: "保存设置",
+  adminPromoText: "顶部活动文案",
+  adminContactPhone: "联系电话",
+  adminFooterAddr: "店铺地址",
+  adminInsights: "AI画像分析",
+  adminHotLead: "🔥 高意向",
+  
+  statusNew: "新客",
+  statusContacted: "已联系",
+  statusBooked: "已成交",
+  actionDelete: "删除",
+  actionUpdate: "更新状态",
+  
+  // Auth
+  authLogin: "用户登录",
+  authRegister: "注册会员",
+  authReset: "重置密码",
+  authPhonePlace: "手机号码",
+  authNamePlace: "您的称呼",
+  authPassPlace: "输入密码",
+  authNewPassPlace: "设置新密码",
+  authConfirmPassPlace: "确认密码",
+  authCodePlace: "短信验证码",
+  authSendCode: "获取验证码",
+  authCodeSent: "验证码已发送: ",
+  authPassMismatch: "两次密码不一致！",
+  authNoAccount: "没有账号？去注册",
+  authHasAccount: "已有账号？去登录",
+  authForgotPass: "忘记密码?",
+  authSubmit: "确定",
+  authWelcome: "欢迎回来！",
+  authResetSuccess: "密码重置成功！请重新登录。",
+  authPhoneNotFound: "手机号未注册",
+  
+  // User Management
+  userPointsEdit: "修改积分",
+  userVipToggle: "VIP权限",
+
+  // Staff Management
+  staffAddBtn: "添加员工",
+  staffSearchPlace: "输入用户手机号...",
+  staffPromote: "设为员工",
+  staffRole: "角色",
+  permExport: "导出数据",
+  permDelete: "删除数据",
+  permSettings: "修改设置",
+  permUsers: "管理用户",
+  
+  toastCopy: "链接已复制！",
+  toastSaved: "设置已保存！",
+  toastWelcome: "欢迎回来，店长！",
+  toastDeleted: "客资已删除。",
+  toastPromoted: "已成功设为员工！",
+  toastUpdated: "权限已更新！",
+  toastFeedback: "感谢您的反馈！",
+  
+  // Feedback
+  feedbackTitle: "用户反馈",
+  feedbackDesc: "您的意见是我们进步的动力",
+  feedbackTypeBug: "功能故障",
+  feedbackTypeSugg: "产品建议",
+  feedbackTypeOther: "其他问题",
+  feedbackContentPlace: "请详细描述您遇到的问题或建议...",
+  feedbackSubmit: "提交反馈",
+  feedbackRating: "您对本次体验满意吗？",
+
+  // My Bookings
+  tabProfile: "个人资料",
+  tabBookings: "我的预约",
+  noBookings: "暂无预约记录。",
+  
+  genTips: [
+    "您知道吗？我们拥有环岛路私人海滩拍摄基地。",
+    "小贴士：搭配与风格相符的配���效果更佳哦。",
+    "我们的化妆师团队均定期赴韩、日进修。",
+    "有趣的事实：我们在植物园已经拍摄了超过一万对新人。",
+    "放松肩膀，您的体态会更加自然优雅。",
+    "花园拍摄我们提供当日空运的鲜花道具。"
+  ],
+  pointNudgeDownload: "+10 积分",
+  pointNudgeShare: "分享赚 +10 积分!",
+  
+  // New Live Effects
+  liveEffect: "动态照片",
+  effectBreath: "呼吸",
+  effectGlitch: "故障",
+  effectParticles: "粒子",
+  
+  // New Subject Types
+  subjType: "主角类型",
+  subjFemale: "新娘/女士",
+  subjMale: "新郎/男士",
+  subjCouple: "情侣/夫妻",
+  subjChild: "儿童/宝宝",
+  subjFamily: "全家福",
+
+  styles: {
+    korean: "韩式唯美",
+    british: "英伦皇室",
+    euro_american: "欧美时尚",
+    hollywood: "好莱坞大片",
+    chinese: "中式喜嫁",
+    gufeng: "古风汉服",
+    japanese: "日系小清新",
+    ethnic: "民族风情",
+    exotic: "异域风情",
+    cinematic: "电影质感",
+    film: "胶片复古",
+    blackwhite: "经典黑白",
+    artistic: "艺术画意",
+    illustration: "手绘插画",
+    oil_painting: "古典油画",
+    anime: "唯美动漫",
+    glitch: "故障艺术",
+    ins: "Ins网红风",
+    magazine: "杂志大片",
+    minimalist: "极简主义",
+    fashion: "潮流街拍",
+    retro: "复古港风",
+    literary: "文艺青年",
+    campus: "校园回忆",
+    fairytale: "迪士尼童话",
+    sweet: "甜美可爱",
+    story: "故事剧情",
+    documentary: "纪实抓拍",
+    fresh: "森系氧气",
+    garden: "莫奈花园",
+    sexy: "性感私房",
+    personality: "个性搞怪",
+    bohemian: "波西米亚",
+    art_deco: "盖茨比奢华",
+    masquerade: "假面舞会",
+    steampunk: "蒸汽朋克",
+    galactic: "银河科幻",
+    cyberpunk: "赛博朋克",
+    gothic: "暗黑哥特",
+    beach: "海岛旅拍",
+    winter: "冰雪奇缘",
+    underwater: "唯美水下",
+    rustic: "美式庄园",
+    elf: "梦幻精灵",
+    indian: "印度风情",
+    thai: "泰式风情",
+    double_exposure: "双重曝光",
+    
+    // Douyin Viral
+    old_money: "老钱风",
+    phoenix_crown: "凤冠霞帔",
+    balletcore: "芭蕾风",
+    dopamine: "多巴胺",
+    clean_fit: "极简智性",
+    
+    // Groom Styles
+    groom_classic: "经典黑西装",
+    groom_modern: "现代轻奢",
+    groom_hanfu: "书卷汉服",
+    groom_retro: "复古绅士",
+    groom_cyber: "赛博战士",
+    
+    // Child Styles
+    child_prince: "在逃小王子",
+    child_princess: "迪士尼公主",
+    child_suit: "小小绅士",
+    child_traditional: "国潮萌娃",
+    child_fairy: "森林小精灵",
+
+    // NEW 38 STYLES (CHINESE)
+    mermaid: "人鱼传说",
+    angel: "天使之翼",
+    demon: "暗黑恶魔",
+    vampire: "暮光之城",
+    victorian: "维多利亚",
+    renaissance: "文艺复兴",
+    egyptian: "埃及艳后",
+    greek: "希腊女神",
+    roman: "罗马假日",
+    viking: "北欧维京",
+    y2k: "Y2K千禧风",
+    neon: "霓虹光影",
+    denim: "丹宁牛仔",
+    suit_bride: "新娘西装",
+    sketch: "素描手绘",
+    pixel: "像素艺术",
+    clay: "粘土动画",
+    pop_art: "波普艺术",
+    autumn: "金秋童话",
+    sakura: "樱花恋人",
+    rainforest: "热带雨林",
+    barbie: "芭比粉红",
+    wes: "韦斯安德森",
+    cottagecore: "田园牧歌",
+    dark_academia: "暗黑学院",
+    light_academia: "明亮学院",
+    mob_wife: "黑帮大嫂",
+    all_red: "纯红视觉",
+    all_black: "纯黑哥特",
+    pastel: "马卡龙梦境",
+    cyber_angel: "机械天使",
+    hanbok: "传统韩服",
+    kimono: "传统和服",
+    cheongsam: "海派旗袍",
+    cowboy: "西部牛仔",
+    disco: "复古迪斯科",
+    jazz: "爵士名伶",
+    sporty: "运动活力"
+  }
+};
+
+const createTranslation = (overrides: Partial<TranslationType> & { styles?: Partial<TranslationType['styles']> }): TranslationType => {
+  return {
+    ...en,
+    ...overrides,
+    styles: {
+      ...en.styles,
+      ...overrides.styles,
+    } as TranslationType['styles']
+  };
+};
+
+const ja = createTranslation({
+  title: "Romantic Life",
+  subtitle: "Wedding Studio",
+  styleSearchPlace: "スタイルを検索...", 
+  customStyle: "カスタムスタイル", 
+  luckyStyle: "ラッキーピック", 
+  luckyStyleDesc: "スタイルをランダムに選択",
+  compareMode: "比較モード",
+  compareHint: "別のスタイルを選択してください",
+  exitCompare: "終了",
+  adminInsights: "AI分析",
+  adminHotLead: "🔥 高関心",
+  authReset: "パスワードのリセット",
+  authNewPassPlace: "新しいパスワード",
+  authCodePlace: "認証コード",
+  authSendCode: "コードを送信",
+  authForgotPass: "パスワードをお忘れですか？",
+  sectFavorites: "お気に入り", // NEW
+  browseAll: "すべて表示", // NEW
+  viewCategories: "カテゴリ表示", // NEW
+});
+
+const ko = createTranslation({
+  title: "Romantic Life",
+  subtitle: "Wedding Studio",
+  styleSearchPlace: "스타일 검색...",
+  customStyle: "사용자 정의 스타일", 
+  luckyStyle: "럭키 픽", 
+  luckyStyleDesc: "스타일 랜덤 선택",
+  compareMode: "비교 모드",
+  compareHint: "비교할 다른 스타일을 선택하세요",
+  exitCompare: "나가기",
+  adminInsights: "AI 인사이트",
+  adminHotLead: "🔥 높은 관심",
+  authReset: "비밀번호 재설정",
+  authNewPassPlace: "새 비밀번호",
+  authCodePlace: "인증 코드",
+  authSendCode: "코드 보내기",
+  authForgotPass: "비밀번호를 잊으셨나요?",
+  sectFavorites: "즐겨찾기", // NEW
+  browseAll: "전체 스타일 보기", // NEW
+  viewCategories: "카테고리 보기", // NEW
+});
+
+const es = createTranslation({
+  title: "Romantic Life",
+  subtitle: "Wedding Studio",
+  styleSearchPlace: "Buscar estilos...",
+  customStyle: "Estilo personalizado", 
+  luckyStyle: "Elección de suerte", 
+  luckyStyleDesc: "Selección de estilo aleatorio",
+  compareMode: "Modo Comparar",
+  compareHint: "Selecciona otro estilo",
+  exitCompare: "Salir",
+  adminInsights: "Insights IA",
+  adminHotLead: "🔥 Alto Interés",
+  authReset: "Restablecer contraseña",
+  authNewPassPlace: "Nueva contraseña",
+  authCodePlace: "Código de verificación",
+  authSendCode: "Enviar código",
+  authForgotPass: "¿Olvidaste tu contraseña?",
+  sectFavorites: "Mis Favoritos", // NEW
+  browseAll: "Ver todos", // NEW
+  viewCategories: "Ver categorías", // NEW
+});
+
+const fr = createTranslation({
+  title: "Romantic Life",
+  subtitle: "Wedding Studio",
+  styleSearchPlace: "Rechercher des styles...",
+  customStyle: "Style personnalisé", 
+  luckyStyle: "Choix chanceux", 
+  luckyStyleDesc: "Sélection de style aléatoire",
+  compareMode: "Mode Comparaison",
+  compareHint: "Sélectionnez un autre style",
+  exitCompare: "Quitter",
+  adminInsights: "Aperçu IA",
+  adminHotLead: "🔥 Fort Intérêt",
+  authReset: "Réinitialiser le mot de passe",
+  authNewPassPlace: "Nouveau mot de passe",
+  authCodePlace: "Code de vérification",
+  authSendCode: "Envoyer le code",
+  authForgotPass: "Mot de passe oublié ?",
+  sectFavorites: "Mes Favoris", // NEW
+  browseAll: "Tout afficher", // NEW
+  viewCategories: "Voir catégories", // NEW
+});
+
+export const TRANSLATIONS: Record<Language, TranslationType> = {
+  en,
+  zh,
+  ja,
+  ko,
+  es,
+  fr
+};

index.css

@@ -0,0 +1,48 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom Global Styles */
+body {
+    background-color: #fdfdfd;
+    -webkit-tap-highlight-color: transparent;
+    overscroll-behavior-y: none;
+}
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(244, 63, 94, 0.3);
+    border-radius: 20px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(244, 63, 94, 0.6);
+}
+
+.animate-scan { animation: scan 2s linear infinite; }
+.animate-swing { animation: swing 3s ease-in-out infinite; }
+
+/* Live Effects Utility Classes */
+.effect-breath { animation: breathing 5s ease-in-out infinite; }
+.effect-glitch { animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite; }
+.effect-particles::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background-image: radial-gradient(white 1px, transparent 1px);
+    background-size: 20px 20px;
+    opacity: 0.3;
+    animation: float 3s linear infinite;
+    pointer-events: none;
+}
+
+/* Low Power Mode Disables */
+body.low-power .effect-breath,
+body.low-power .effect-glitch,
+body.low-power .animate-scan {
+    animation: none !important;
+}

index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>厦门浪漫一生 - AI 婚纱试衣间</title>
+    <meta name="description" content="AI Wedding Style Fitting Room - Xiamen Romantic Life Photography">
+    <meta name="theme-color" content="#f43f5e">
+    
+    <!-- PWA Config -->
+    <link rel="manifest" href="/manifest.json">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Romantic AI">
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://aistudiocdn.com/react@^19.2.1",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
+    "react/": "https://aistudiocdn.com/react@^19.2.1/",
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.31.0",
+    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.556.0",
+    "jszip": "https://aistudiocdn.com/jszip@^3.10.1",
+    "canvas-confetti": "https://aistudiocdn.com/canvas-confetti@^1.9.4",
+    "zustand": "https://aistudiocdn.com/zustand@^5.0.9",
+    "zustand/": "https://aistudiocdn.com/zustand@^5.0.9/",
+    "vite": "https://aistudiocdn.com/vite@^7.2.6",
+    "@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.1"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root">
+      <!-- Loading Spinner for Initial Load -->
+      <div id="loading-spinner" style="display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; background-color:#fdfdfd; position:fixed; top:0; left:0; width:100%; z-index:9999;">
+        <div style="width:40px; height:40px; border:4px solid #fecdd3; border-top-color:#f43f5e; border-radius:50%; animation:spin 1s linear infinite;"></div>
+        <p style="margin-top:16px; font-family:sans-serif; color:#fb7185; font-size:14px; font-weight:bold;">Loading...</p>
+      </div>
+      <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
+    </div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+import { ErrorBoundary } from './components/ErrorBoundary';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+// Register Service Worker for PWA support
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/service-worker.js')
+      .then(registration => {
+        console.log('SW registered: ', registration);
+      })
+      .catch(registrationError => {
+        console.log('SW registration failed: ', registrationError);
+      });
+  });
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </React.StrictMode>
+);

manifest.json

@@ -0,0 +1,24 @@
+{
+  "name": "厦门浪漫一生 AI 试衣间",
+  "short_name": "Romantic AI",
+  "description": "Xiamen Romantic Life Wedding Photography AI Fitting Room",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#f43f5e",
+  "orientation": "portrait",
+  "icons": [
+    {
+      "src": "https://api.iconify.design/lucide:camera.svg?color=%23f43f5e",
+      "sizes": "192x192",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "https://api.iconify.design/lucide:camera.svg?color=%23f43f5e",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Copy of Romantic Life - AI Wedding Fitting Room",
+  "description": "Xiamen Romantic Life Wedding Photography AI Fitting Room. Try different wedding styles instantly and book your photoshoot.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,32 @@
+
+{
+  "name": "romantic-life-ai-studio",
+  "private": true,
+  "version": "2.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/genai": "^0.1.0",
+    "canvas-confetti": "^1.9.2",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/canvas-confetti": "^1.6.4",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}