Upload 75 files

APP_DEVELOPMENT.md

@@ -0,0 +1,188 @@
+# 厦门浪漫一生 AI - 移动端 App 开发指南
+
+本文档旨在指导开发人员将 **Romantic Life AI (Web)** 项目打包为移动端应用 (**Android / iOS**)。
+
+本项目采用 **Hybrid (混合开发)** 架构：
+*   **核心代码**: React + TypeScript + Vite (现有 Web 代码)
+*   **原生容器**: [Capacitor](https://capacitorjs.com/) (用于打包和调用原生 API)
+*   **UI 适配**: Tailwind CSS (已配置响应式设计)
+
+---
+
+## 1. 方案选择
+
+我们提供两种移动端交付方式：
+
+### 方案 A: PWA (渐进式 Web 应用)
+*   **优点**: 无需上架应用商店，通过浏览器直接安装，更新即时。
+*   **现状**: 项目已包含 `manifest.json` 和 `service-worker.js`，已支持 PWA。
+*   **适用**: 快速验证，微信生态分享。
+
+### 方案 B: 原生 App (使用 Capacitor)
+*   **优点**: 可上架 App Store / Google Play，性能更好，原生权限（相机/相册）支持更佳。
+*   **适用**: 正式商业发布，建立品牌形象。
+
+---
+
+## 2. 环境准备 (Prerequisites)
+
+在开始构建原生 App 之前，请确保您的开发环境已安装：
+
+1.  **Node.js** (v18+)
+2.  **移动端开发工具**:
+    *   **Android**: [Android Studio](https://developer.android.com/studio) (需安装 Android SDK)
+    *   **iOS**: Xcode (仅限 macOS 系统, 需安装 CocoaPods)
+
+---
+
+## 3. Capacitor 集成步骤
+
+如果您决定构建原生 App，请执行以下步骤将 Capacitor 集成到项目中。
+
+### 第一步：安装依赖
+
+在项目根目录下运行终端命令：
+
+```bash
+# 安装 Capacitor 核心
+npm install @capacitor/core
+npm install -D @capacitor/cli
+
+# 初始化 Capacitor (App Name: RomanticAI, ID: com.romantic.life)
+npx cap init "Romantic AI" com.romantic.life
+```
+
+### 第二步：安装平台依赖
+
+```bash
+# 安装 Android 和 iOS 平台库
+npm install @capacitor/android @capacitor/ios
+
+# 添加平台到项目
+npx cap add android
+npx cap add ios
+```
+
+### 第三步：构建 Web 资源
+
+在同步到原生项目之前，必须先构建 React 代码：
+
+```bash
+# 必须先生成 dist 目录
+npm run build
+```
+
+### 第四步：同步资源到原生平台
+
+此命令会将 `dist` 目录下的代码复制到 `android/` 和 `ios/` 目录中：
+
+```bash
+npx cap sync
+```
+
+---
+
+## 4. 权限配置 (关键)
+
+由于本项目核心功能是 **AI 试衣**，必须配置 **相机 (Camera)** 和 **相册 (Photo Library)** 权限。
+
+### Android 配置
+修改文件: `android/app/src/main/AndroidManifest.xml`
+
+在 `<manifest>` 标签内添加：
+```xml
+<!-- 网络权限 -->
+<uses-permission android:name="android.permission.INTERNET" />
+<!-- 相机权限 -->
+<uses-permission android:name="android.permission.CAMERA" />
+<uses-feature android:name="android.hardware.camera" />
+<!-- 文件读取权限 -->
+<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+```
+
+### iOS 配置
+修改文件: `ios/App/App/Info.plist`
+
+添加以下键值对：
+```xml
+<key>NSCameraUsageDescription</key>
+<string>我们需要使用您的相机来拍摄照片进行 AI 试衣。</string>
+<key>NSPhotoLibraryAddUsageDescription</key>
+<string>我们需要保存生成的婚纱照到您的相册。</string>
+<key>NSPhotoLibraryUsageDescription</key>
+<string>我们需要访问您的相册以选择照片进行 AI 试衣。</string>
+```
+
+---
+
+## 5. 构建与运行
+
+### 运行 Android App
+
+1.  执行同步命令确保代码最新：
+    ```bash
+    npm run build && npx cap sync
+    ```
+2.  打开 Android Studio：
+    ```bash
+    npx cap open android
+    ```
+3.  在 Android Studio 中，连接真机或启动模拟器，点击 **Run (绿三角)** 按钮。
+
+### 运行 iOS App (仅 macOS)
+
+1.  执行同步命令：
+    ```bash
+    npm run build && npx cap sync
+    ```
+2.  打开 Xcode：
+    ```bash
+    npx cap open ios
+    ```
+3.  在 Xcode 中选择模拟器或连接 iPhone，点击 **Run**。
+
+---
+
+## 6. 应用图标与启动图 (Assets)
+
+为了生成不同尺寸的应用图标和启动图，推荐使用 `@capacitor/assets`。
+
+1.  准备一张 `1024x1024` 的 logo 图片，命名为 `logo.png`，放入 `assets` 文件夹（需新建）。
+2.  安装工具：
+    ```bash
+    npm install -D @capacitor/assets
+    ```
+3.  生成资源：
+    ```bash
+    npx capacitor-assets generate
+    ```
+
+这将自动替换 Android 和 iOS 项目中的默认图标。
+
+---
+
+## 7. 打包发布 (Release)
+
+### Android (APK / AAB)
+1.  在 Android Studio 中，点击菜单栏 **Build > Generate Signed Bundle / APK**。
+2.  创建密钥库 (Keystore) 并填写密码。
+3.  选择 **Release** 模式。
+4.  生成的 APK 文件即可分发给用户安装。
+
+### iOS (IPA)
+1.  在 Xcode 中，选择 **Product > Archive**。
+2.  构建完成后，使用 **Distribute App** 上传至 App Store Connect 或导出 Ad Hoc 用于测试。
+
+---
+
+## 8. 常见问题 (FAQ)
+
+*   **Q: 接口请求失败？**
+    *   **A**: 请确保 Android/iOS 允许明文 HTTP 请求（如果 API 不是 HTTPS），或者配置 `server.allowNavigation`。在 `capacitor.config.ts` 中配置 `server` 选项可以指向本地 IP 进行调试。
+
+*   **Q: 页面包含 "刘海屏" 遮挡？**
+    *   **A**: 我们已经在 `index.html` 中设置了 `viewport-fit=cover`，并在 CSS 中使用了 `safe-area-inset` 变量，通常能自动适配。
+
+*   **Q: 返回键退出应用？**
+    *   **A**: Capacitor 默认处理了 Android 物理返回键。如果需要自定义逻辑（如在首页双击退出），需在 `App.tsx` 中监听 `App.addListener('backButton', ...)`。

App.tsx

@@ -0,0 +1,280 @@
+
+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 { Features } from './components/Features';
+import { Testimonials } from './components/Testimonials';
+const AdminDashboard = React.lazy(() => import('./components/AdminDashboard').then(module => ({ default: module.AdminDashboard })));
+import { SlashModal } from './components/SlashModal'; 
+import { ShareModal } from './components/ShareModal';
+import { generateStyledWeddingImage } from './services/geminiService';
+import { WeddingStyle } from './types';
+import { TRANSLATIONS } from './constants/translations';
+import { Loader2, Wand2, CheckCircle, Sparkles, GitMerge, Zap } from 'lucide-react';
+// @ts-ignore
+import confetti from 'canvas-confetti';
+import { useUserStore, useUIStore, useGenerationStore } from './store';
+import { FloatingConcierge } from './components/FloatingConcierge';
+import { ipService } from './services/ipService';
+
+const Toast = ({ msg }: { msg: string }) => (
+  <div className="fixed top-24 left-1/2 -translate-x-1/2 z-[200] animate-fade-in-down">
+     <div className="bg-gray-900/95 backdrop-blur text-white text-sm font-black px-6 py-3 rounded-full shadow-2xl flex items-center gap-2 border border-white/10 ring-4 ring-rose-500/10">
+       <CheckCircle className="w-4 h-4 text-emerald-400" />
+       {msg}
+     </div>
+  </div>
+);
+
+const App: React.FC = () => {
+  const { currentUser, updateUser } = useUserStore();
+  const { language, adminConfig, modals, toastMsg, setLanguage, toggleModal } = useUIStore();
+  const {
+    uploadedImages, selectedStyle, customStyleImage,
+    compositionMode, resolution, subjectType, customPrompt,
+    results, status, progress, setUploadedImages, setSelectedStyle, setCustomStyleImage,
+    setGenerationConfig, setStatus, setProgress, setErrorMsg, addResult, resetGeneration,
+  } = useGenerationStore();
+
+  const [selectedStylesForBlend, setSelectedStylesForBlend] = useState<WeddingStyle[]>([]);
+  const t = TRANSLATIONS[language];
+  const [slashingStyle, setSlashingStyle] = useState<WeddingStyle | null>(null);
+  const resultRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => { ipService.trackVisit(); }, []);
+  useEffect(() => {
+    const spinner = document.getElementById('loading-spinner');
+    if (spinner) {
+        spinner.style.opacity = '0';
+        setTimeout(() => spinner.remove(), 500);
+    }
+  }, []);
+
+  const handleStyleSelection = (style: WeddingStyle) => {
+    // Clear blend selections when choosing a direct single style
+    setSelectedStylesForBlend([]);
+    setSelectedStyle(style);
+    setCustomStyleImage(null);
+  };
+
+  const handleBlendSelection = (styles: WeddingStyle[]) => {
+    setSelectedStylesForBlend(styles);
+    if (styles.length > 0) {
+      // Clear direct single style when blend is active
+      setSelectedStyle(null);
+      setCustomStyleImage(null);
+    }
+  };
+
+  const handleGenerate = async () => {
+    const isBlending = selectedStylesForBlend.length === 2;
+    const activeStyle = isBlending 
+      ? { id: 'blend', name: 'Hybrid Blend', prompt: selectedStylesForBlend.map(s => s.prompt), keywords: selectedStylesForBlend.map(s => s.promptKeywords || []) } 
+      : { ...selectedStyle, keywords: selectedStyle?.promptKeywords || [] };
+    
+    if (uploadedImages.length === 0 || !activeStyle) return;
+
+    setStatus('generating');
+    setErrorMsg(null);
+    setProgress({ current: 0, total: 1, statusMsg: isBlending ? "Synthesizing Hybrid Aesthetic..." : "Preparing Studio Environment..." });
+    
+    if (resultRef.current) {
+        resultRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+
+    try {
+      const generated = await generateStyledWeddingImage(
+        uploadedImages, 
+        activeStyle.prompt, 
+        customPrompt, 
+        selectedStyle?.id === 'custom' ? customStyleImage : null, 
+        compositionMode, 
+        resolution, 
+        subjectType,
+        (activeStyle as any).keywords
+      );
+      
+      const resId = isBlending ? `blend-${Date.now()}` : activeStyle.id;
+      addResult({ 
+        styleId: resId, 
+        imageUrl: generated, 
+        timestamp: Date.now(),
+        config: { customInstruction: customPrompt, resolution } as any
+      });
+      
+      setStatus('success');
+      setProgress(null);
+      
+      // Flashy celebration
+      if (isBlending) {
+          confetti({ particleCount: 150, spread: 90, origin: { y: 0.6 }, colors: ['#f43f5e', '#fbbf24', '#ffffff'] });
+      }
+    } catch (error: any) {
+      setStatus('error');
+      setErrorMsg(error.message || "Something went wrong. Please try again.");
+      setProgress(null);
+    }
+  };
+
+  const isBlendModeActive = selectedStylesForBlend.length > 0;
+  const isBlendValid = selectedStylesForBlend.length === 2;
+  const canGenerate = uploadedImages.length > 0 && status !== 'generating' && (selectedStyle || isBlendValid);
+
+  return (
+    <div className="min-h-screen bg-[#fafafa] font-sans text-gray-900 selection:bg-rose-100 flex flex-col relative overflow-x-hidden">
+      {toastMsg && <Toast msg={toastMsg} />}
+      <FloatingConcierge language={language} config={adminConfig} />
+      
+      <Header 
+        language={language} 
+        onLanguageChange={setLanguage} 
+        onBookClick={() => toggleModal('consult', true)}
+        user={currentUser}
+        config={adminConfig}
+        onOpenAbout={() => toggleModal('about', true)}
+      />
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 py-8 sm:py-16 flex-grow w-full">
+        <div className="text-center mb-16 max-w-3xl mx-auto space-y-4">
+          <div className="inline-flex items-center gap-2 px-3 py-1 bg-rose-50 text-rose-600 rounded-full text-[10px] font-black uppercase tracking-widest shadow-sm">
+             <Sparkles className="w-3 h-3" /> Professional AI Photography
+          </div>
+          <h2 className="font-serif text-4xl sm:text-6xl font-black text-gray-900 leading-tight">{t.heroTitle}</h2>
+          <p className="text-gray-500 text-lg leading-relaxed">{t.heroDesc}</p>
+        </div>
+
+        <div className="grid lg:grid-cols-12 gap-10 items-start">
+          <div className="lg:col-span-5 space-y-10">
+            {/* Step 1: Upload */}
+            <section className="space-y-5">
+              <div className="flex items-center justify-between">
+                <h3 className="text-xl font-black flex items-center gap-3">
+                  <span className="w-10 h-10 rounded-2xl bg-gray-900 text-white flex items-center justify-center text-sm shadow-xl">1</span> 
+                  {t.step1}
+                </h3>
+              </div>
+              <ImageUploader onImagesSelect={setUploadedImages} currentImages={uploadedImages} disabled={status === 'generating'} language={language} />
+            </section>
+
+            {/* Step 2: Select Style */}
+            <section className={`space-y-5 transition-all duration-500 ${uploadedImages.length === 0 ? 'opacity-30 blur-sm pointer-events-none' : 'opacity-100'}`}>
+              <h3 className="text-xl font-black flex items-center gap-3">
+                <span className="w-10 h-10 rounded-2xl bg-gray-900 text-white flex items-center justify-center text-sm shadow-xl">2</span> 
+                {t.step2}
+              </h3>
+              <StyleSelector 
+                 selectedStyle={selectedStyle} 
+                 selectedStyles={selectedStylesForBlend}
+                 onSelect={handleStyleSelection} 
+                 onBlendSelect={handleBlendSelection}
+                 onCustomSelect={(img) => { setCustomStyleImage(img); setSelectedStyle({ id: 'custom', prompt: 'custom', name: 'Custom' } as any); }}
+                 onLuckySelect={() => handleStyleSelection(STYLES[Math.floor(Math.random() * STYLES.length)])}
+                 onSlashClick={(s) => { setSlashingStyle(s); toggleModal('slash', true); }}
+                 disabled={status === 'generating'} 
+                 language={language} 
+                 isVipUnlocked={currentUser?.isVip}
+                 resolution={resolution}
+                 onResolutionChange={(res) => setGenerationConfig({ resolution: res })}
+              />
+            </section>
+
+            {/* Step 3: Refine & Generate */}
+            <section className={`space-y-5 transition-all duration-500 ${uploadedImages.length === 0 ? 'opacity-30 blur-sm pointer-events-none' : 'opacity-100'}`}>
+               <h3 className="text-xl font-black flex items-center gap-3">
+                  <span className="w-10 h-10 rounded-2xl bg-gray-900 text-white flex items-center justify-center text-sm shadow-xl">3</span> 
+                  {t.step3}
+               </h3>
+               <div className="bg-white rounded-3xl p-8 shadow-xl border border-gray-100 space-y-6">
+                  <div className="space-y-3">
+                    <label className="text-xs font-black text-gray-400 uppercase tracking-widest flex items-center gap-2">
+                       <Zap className="w-3 h-3" /> Custom Instructions (Optional)
+                    </label>
+                    <textarea 
+                      value={customPrompt} 
+                      onChange={(e) => setGenerationConfig({ customPrompt: e.target.value })} 
+                      placeholder="e.g. Add a sunset background, make the dress more flowing..." 
+                      className="w-full px-5 py-4 rounded-2xl border border-gray-200 outline-none h-32 bg-gray-50 focus:bg-white focus:ring-4 focus:ring-rose-500/5 transition-all text-sm font-medium" 
+                      disabled={status === 'generating'} 
+                    />
+                  </div>
+                  
+                  <div className="space-y-4">
+                    {status === 'generating' && progress && (
+                      <div className="p-5 bg-rose-50 rounded-2xl border border-rose-100 animate-pulse">
+                        <div className="flex justify-between items-center mb-3">
+                           <span className="text-[10px] font-black text-rose-600 uppercase tracking-tighter">{progress.statusMsg}</span>
+                           <Loader2 className="w-4 h-4 text-rose-500 animate-spin" />
+                        </div>
+                        <div className="h-2 w-full bg-rose-100/50 rounded-full overflow-hidden">
+                           <div className="h-full bg-rose-500 transition-all duration-1000" style={{width: '60%'}}></div>
+                        </div>
+                      </div>
+                    )}
+                    
+                    <button 
+                      onClick={handleGenerate} 
+                      disabled={!canGenerate} 
+                      className="w-full relative overflow-hidden group flex items-center justify-center gap-3 px-8 py-5 rounded-2xl font-black text-white bg-gray-900 hover:bg-black transition-all active:scale-[0.98] disabled:opacity-30 disabled:grayscale shadow-2xl shadow-gray-200"
+                    >
+                      <div className="absolute inset-0 bg-gradient-to-r from-rose-500 to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity"></div>
+                      {isBlendModeActive ? <GitMerge className={`w-6 h-6 ${isBlendValid ? 'animate-pulse' : ''}`} /> : <Wand2 className="w-6 h-6" />}
+                      <span className="uppercase tracking-widest text-sm">
+                        {isBlendModeActive ? (isBlendValid ? "Synthesize Hybrid Style" : "Pick 2nd Style to Blend") : t.genSelected}
+                      </span>
+                    </button>
+                    
+                    {/* Secondary Context Tip */}
+                    {!isBlendValid && isBlendModeActive && (
+                        <p className="text-[10px] text-rose-400 font-bold text-center animate-fade-in uppercase tracking-tighter">
+                          Select one more style below to unlock Hybrid Synthesis
+                        </p>
+                    )}
+                  </div>
+               </div>
+            </section>
+          </div>
+
+          <div className="lg:col-span-7" ref={resultRef}>
+            {Object.keys(results).length > 0 ? (
+               <ResultViewer 
+                  originalImages={uploadedImages} 
+                  results={results} 
+                  onReset={resetGeneration}
+                  language={language}
+                  onBookClick={() => toggleModal('consult', true)}
+                  onShareClick={() => toggleModal('share', true)}
+               />
+            ) : (
+              <div className="h-full min-h-[600px] rounded-[3rem] border-4 border-dashed border-gray-100 flex flex-col items-center justify-center text-center p-12 bg-white/50 backdrop-blur-sm relative overflow-hidden">
+                <div className="absolute top-0 left-0 w-full h-full opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#000 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
+                <div className="w-24 h-24 bg-rose-50 rounded-full flex items-center justify-center mb-8 animate-float">
+                  <Sparkles className="w-10 h-10 text-rose-300" />
+                </div>
+                <h3 className="text-2xl font-black text-gray-300 uppercase tracking-tighter mb-4">{t.emptyGallery}</h3>
+                <p className="text-gray-400 max-w-sm text-sm font-medium leading-relaxed">{t.emptyGalleryDesc}</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+
+      <Features language={language} />
+      <Testimonials language={language} />
+
+      <SlashModal 
+        isVisible={modals.slash} 
+        onClose={() => toggleModal('slash', false)} 
+        style={slashingStyle} 
+        language={language} 
+        adminConfig={adminConfig} 
+        onUnlock={() => { if(currentUser) updateUser(currentUser.id, { isVip: true }); toggleModal('slash', false); }} 
+        onOpenShare={() => toggleModal('share', true)} 
+        onUpdateUser={() => {}} 
+      />
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -1,11 +1,45 @@
 ---
-title: Ai
-emoji: 💻
+title: Romantic Life - AI Wedding Fitting Room
+emoji: 👰‍♀️
 colorFrom: pink
-colorTo: blue
+colorTo: red
 sdk: docker
 pinned: false
-short_description: 厦门浪漫一生婚纱摄影ai试衣间
+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 婚纱摄影试衣间应用，专为移动端优化，支持 PWA 离线访问。
+
+## 🚀 Hugging Face 部署步骤
+
+1.  **创建 Space**: 在 Hugging Face 上创建一个新的 Space。
+2.  **选择 SDK**: 选择 **Docker**。
+3.  **上传文件**: 将本项目的所有文件（包括 `Dockerfile`, `nginx.conf`, `package.json` 等）上传到该 Space。
+4.  **配置变量**: 在 Space 的 **Settings** 页面，添加环境变量 `API_KEY`（您的 Google Gemini API Key）。
+5.  **自定义域名**: 在 Space 的 **Settings** 页面配置自定义域名 `ai.xmloveai.com`。
+6.  **自动构建**: Hugging Face 会自动根据 `Dockerfile` 构建镜像并在 7860 端口运行。
+
+## ✨ 访问地址
+上线后可通过以下地址访问：
+*   **官方域名**: [https://ai.xmloveai.com](https://ai.xmloveai.com)
+*   **HF 镜像**: `https://huggingface.co/spaces/您的用户名/您的Space名`
+
+## 🛠 开发与构建
+本地开发：
+```bash
+npm install
+npm run dev
+```
+
+构建发布：
+```bash
+npm run build
+```
+
+## 📄 架构说明
+- **Frontend**: React 19 + Tailwind CSS + Lucide Icons
+- **State**: Zustand (Persisted)
+- **AI**: Gemini-3-flash-preview (Standard) / Gemini-3-pro-image-preview (High-res)
+- **Deployment**: Docker + Nginx (Port 7860)

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,59 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  // Explicitly declare props to satisfy strict TypeScript configurations
+  declare props: Readonly<Props>;
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  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,203 @@
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Download, Maximize2, X, Grid, Loader2, Video, Settings, Sparkles, Share2, ArrowLeftRight, PlayCircle, CheckCircle, Info, Quote, FolderDown } from 'lucide-react';
+import { GeneratedResult, WeddingStyle, Language } from '../types';
+import { STYLES } from './StyleSelector';
+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;
+}
+
+export const ResultViewer: React.FC<ResultViewerProps> = ({ 
+  originalImages, results, initialSelectedId, onReset, language, onBookClick, onShareClick 
+}) => {
+  const resultKeys = Object.keys(results);
+  const [activeId, setActiveId] = useState<string | null>(initialSelectedId || resultKeys[0]);
+  const [compareMode, setCompareMode] = useState(false);
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const [isZipping, setIsZipping] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+  const t = TRANSLATIONS[language];
+
+  // Sync activeId if results update
+  useEffect(() => {
+    if (!activeId && resultKeys.length > 0) {
+      setActiveId(resultKeys[0]);
+    }
+  }, [results, activeId, resultKeys]);
+
+  const activeResult = activeId ? results[activeId] : null;
+
+  const getFounderAdvice = (styleId: string) => {
+    const advices: Record<string, string> = {
+      'korean': language === 'zh' ? "韩式风格最能体现您的温婉，建议搭配简约珍珠项链。" : "Korean style best highlights your elegance. Pair with pearls.",
+      'chinese': language === 'zh' ? "大红喜嫁色非常衬您的肤色，建议拍摄时多一些互动抓拍。" : "The wedding red really complements your skin tone. Go for candid shots.",
+      'cinematic': language === 'zh' ? "这种电影感非常适合您的五官，光影层次感十足。" : "This cinematic vibe suits your features perfectly, full of depth."
+    };
+    if (styleId.startsWith('blend')) {
+      return language === 'zh' ? "混搭风格展现了您的独特个性，建议妆造保持自然通透。" : "Hybrid styles showcase your unique personality. Keep the makeup natural and sheer.";
+    }
+    return advices[styleId] || (language === 'zh' ? "这一套造型非常惊艳，完美展现了您的气质。" : "This look is stunning and fits your aura perfectly.");
+  };
+
+  const updateSlider = (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 = (e: any) => {
+    if (!isDragging.current) return;
+    const clientX = e.clientX || e.touches?.[0]?.clientX;
+    updateSlider(clientX);
+  };
+
+  const handleDownloadAll = async () => {
+    if (Object.keys(results).length === 0) return;
+    setIsZipping(true);
+    try {
+      const zip = new JSZip();
+      const timestamp = new Date().getTime();
+      
+      const promises = Object.entries(results).map(async ([id, res], index) => {
+        const resultItem = res as GeneratedResult;
+        // Extract base64 part
+        const base64Data = resultItem.imageUrl.split(',')[1];
+        const fileName = `RomanticLife_${id}_${index + 1}.png`;
+        zip.file(fileName, base64Data, { base64: true });
+      });
+
+      await Promise.all(promises);
+      const content = await zip.generateAsync({ type: "blob" });
+      const url = URL.createObjectURL(content);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `RomanticLife_Wedding_Album_${timestamp}.zip`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("ZIP Generation failed:", error);
+      alert("Failed to generate ZIP. Please try individual downloads.");
+    } finally {
+      setIsZipping(false);
+    }
+  };
+
+  if (!activeResult) return null;
+
+  return (
+    <div className="flex flex-col h-full gap-4 animate-fade-in">
+      {/* 沉浸式展示区 */}
+      <div 
+        ref={containerRef}
+        className="relative flex-1 bg-zinc-900 rounded-3xl border border-zinc-800 overflow-hidden shadow-2xl min-h-[500px]"
+        onMouseDown={() => { isDragging.current = true; }}
+        onMouseUp={() => { isDragging.current = false; }}
+        onMouseMove={handleMouseMove}
+        onTouchMove={handleMouseMove}
+        onTouchStart={() => { isDragging.current = true; }}
+        onTouchEnd={() => { isDragging.current = false; }}
+      >
+        <img src={originalImages[0]} className="absolute inset-0 w-full h-full object-contain p-4 opacity-50 blur-sm" alt="original" />
+        
+        <img 
+          src={activeResult.imageUrl} 
+          className="absolute inset-0 w-full h-full object-contain p-4 z-10" 
+          alt="result"
+          style={compareMode ? { clipPath: `inset(0 0 0 ${sliderPosition}%)` } : {}}
+        />
+
+        {compareMode && (
+          <>
+            <img 
+              src={originalImages[0]} 
+              className="absolute inset-0 w-full h-full object-contain p-4 z-10" 
+              alt="original-overlay"
+              style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
+            />
+            <div className="absolute top-0 bottom-0 z-20 w-1 bg-white/50 cursor-ew-resize" 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-zinc-900">
+                <ArrowLeftRight className="w-4 h-4" />
+              </div>
+            </div>
+          </>
+        )}
+
+        <div className="absolute bottom-6 left-6 right-6 z-30 flex justify-between items-end pointer-events-none">
+           <div className="bg-black/40 backdrop-blur-md p-4 rounded-2xl border border-white/10 max-w-[70%] pointer-events-auto">
+              <div className="flex items-center gap-2 mb-1 text-rose-400">
+                 <Quote className="w-4 h-4" />
+                 <span className="text-[10px] font-bold uppercase tracking-widest">{t.aboutUsBtn}</span>
+              </div>
+              <p className="text-white text-xs leading-relaxed italic">
+                "{getFounderAdvice(activeId!)}"
+              </p>
+           </div>
+           
+           <div className="flex flex-col gap-2 pointer-events-auto">
+              <button 
+                onClick={() => setCompareMode(!compareMode)}
+                className={`p-3 rounded-full backdrop-blur-md transition-all ${compareMode ? 'bg-rose-500 text-white' : 'bg-white/10 text-white border border-white/20'}`}
+              >
+                 <ArrowLeftRight className="w-5 h-5" />
+              </button>
+              <button onClick={onShareClick} className="p-3 bg-white/10 backdrop-blur-md text-white rounded-full border border-white/20">
+                 <Share2 className="w-5 h-5" />
+              </button>
+           </div>
+        </div>
+
+        <div className="absolute top-6 left-6 z-30 pointer-events-none opacity-30">
+           <p className="text-white font-serif tracking-widest text-lg uppercase">{t.watermark}</p>
+        </div>
+      </div>
+
+      {/* 底部交互 */}
+      <div className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-4">
+         <div className="flex -space-x-2 overflow-hidden py-1">
+            {Object.keys(results).map(id => (
+               <button 
+                key={id}
+                onClick={() => setActiveId(id)}
+                className={`w-12 h-12 rounded-lg border-2 transition-all overflow-hidden shrink-0 ${activeId === id ? 'border-rose-500 scale-110 z-10 shadow-lg' : 'border-transparent opacity-50 hover:opacity-100'}`}
+               >
+                  <img src={(results[id] as GeneratedResult).imageUrl} className="w-full h-full object-cover" alt="thumb" />
+               </button>
+            ))}
+         </div>
+
+         <div className="flex gap-2 w-full sm:w-auto">
+            <button 
+              onClick={handleDownloadAll}
+              disabled={isZipping || resultKeys.length === 0}
+              className="flex-1 sm:flex-none px-4 py-2.5 bg-gray-100 text-gray-800 rounded-xl text-xs font-black transition-all flex items-center justify-center gap-2 hover:bg-gray-200 active:scale-95 disabled:opacity-50"
+            >
+              {isZipping ? <Loader2 className="w-4 h-4 animate-spin" /> : <FolderDown className="w-4 h-4" />}
+              <span>{isZipping ? "Packing..." : (t.zipBtn || "Download All ZIP")}</span>
+            </button>
+            <button 
+              onClick={onBookClick}
+              className="flex-1 sm:flex-none px-6 py-2.5 bg-rose-600 text-white rounded-xl text-xs font-black hover:bg-rose-700 shadow-lg shadow-rose-200 transition-all flex items-center justify-center gap-2 active:scale-95"
+            >
+              <CheckCircle className="w-4 h-4" />
+              <span>{t.bookStyle}</span>
+            </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,389 @@
+
+import React, { useRef, useState, useMemo } from 'react';
+import { WeddingStyle, Language, Resolution } from '../types';
+import { TRANSLATIONS } from '../constants/translations';
+import { useUserStore } from '../store';
+import { 
+  Heart, Crown, Leaf, Sparkles, Film, Sun, Star, Aperture, 
+  Upload, Cpu, Clock, Lock, Search, Check, Loader2, GitMerge,
+  Dice5, Wand2
+} from 'lucide-react';
+
+interface StyleSelectorProps {
+  selectedStyle: WeddingStyle | null;
+  selectedStyles?: WeddingStyle[]; 
+  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;
+  onBlendSelect?: (styles: WeddingStyle[]) => void;
+}
+
+const LazyStyleBackground = ({ src, colorClass }: { src?: string, colorClass: string }) => {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  if (!src || error) {
+    return <div className={`absolute inset-0 opacity-40 ${colorClass} transition-opacity group-hover:opacity-60`} aria-hidden="true" />;
+  }
+  return (
+    <>
+      {!loaded && (
+         <div className={`absolute inset-0 ${colorClass} flex items-center justify-center z-10`} aria-hidden="true">
+            <Loader2 className="w-5 h-5 text-gray-400/50 animate-spin" />
+         </div>
+      )}
+      <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-700 ${loaded ? 'opacity-30 group-hover:opacity-50 scale-100' : 'opacity-0 scale-110'}`}
+        aria-hidden="true"
+      />
+    </>
+  );
+};
+
+export const STYLES: WeddingStyle[] = [
+  {
+    id: 'korean',
+    name: '韩式 (Korean)',
+    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.',
+    promptKeywords: ['minimalist', 'sweet', 'soft lighting', 'mermaid gown', 'K-drama', 'clean background', 'elegant'],
+    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
+  },
+  {
+    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.',
+    promptKeywords: ['red', 'gold embroidery', 'oriental', 'traditional', 'festive', 'luxury', 'porcelain aesthetics'],
+    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
+  },
+  {
+    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.',
+    promptKeywords: ['moody', 'high contrast', 'storytelling', 'noir', 'atmospheric', 'Wong Kar-wai', 'color graded'],
+    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: '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.',
+    promptKeywords: ['royal', 'lace', 'aristocratic', 'manor', 'vintage', 'noble', 'high society'],
+    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: '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.',
+    promptKeywords: ['airy', 'soft focus', 'pure', 'fresh', 'minimalist', 'nature', 'bright'],
+    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: 'fairytale',
+    name: '童话 (Fairy Tale)',
+    prompt: 'Disney fairy tale style, magical castle, glowing lights, cinderella dress, sparkles, pumpkin carriage, dreamy blue and purple tones.',
+    promptKeywords: ['magical', 'fantasy', 'glow', 'dreamy', 'royal', 'Disney-like', 'sparkles'],
+    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: 'retro',
+    name: '复古 (Retro)',
+    prompt: '1980s or 1990s retro hong kong style, warm yellowish tint, vintage disco vibe, sequins, puffy sleeves, nostalgic romance.',
+    promptKeywords: ['vintage', 'nostalgic', '80s', '90s', 'sequins', 'HK style', 'warm tint'],
+    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: 'minimalist',
+    name: '简约 (Minimalist)',
+    prompt: 'Minimalist wedding, clean lines, plenty of negative space, monochromatic color palette, simple but high-quality silk dress, sophisticated simplicity.',
+    promptKeywords: ['clean', 'silk', 'sophisticated', 'monochrome', 'negative space', 'modern', 'understated'],
+    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: <Aperture className="w-5 h-5 text-stone-500" aria-hidden="true" />
+  },
+  {
+    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.',
+    promptKeywords: ['neon', 'futuristic', 'high-tech', 'night city', 'glow', 'synthetic', 'urban'],
+    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
+  }
+];
+
+export const StyleSelector: React.FC<StyleSelectorProps> = ({ 
+  selectedStyle, 
+  selectedStyles = [],
+  onSelect, 
+  onCustomSelect, 
+  onLuckySelect, 
+  onSlashClick, 
+  disabled, 
+  language,
+  recommendedStyleIds,
+  isVipUnlocked,
+  resolution,
+  onResolutionChange,
+  onBlendSelect
+}) => {
+  const t = TRANSLATIONS[language];
+  const customFileInputRef = useRef<HTMLInputElement>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const { currentUser, guestFavorites, toggleFavorite } = useUserStore();
+  const favorites = currentUser ? (currentUser.favorites || []) : guestFavorites;
+  
+  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]);
+
+  const handleCustomStyleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        onCustomSelect(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleLuckyDip = () => {
+    if (disabled) return;
+    const randomIndex = Math.floor(Math.random() * STYLES.length);
+    const randomStyle = STYLES[randomIndex];
+    onSelect(randomStyle);
+    onLuckySelect();
+  };
+
+  const handleStyleInteraction = (style: WeddingStyle) => {
+    if (disabled) return;
+    const isLocked = style.isLocked && !isVipUnlocked;
+    if (isLocked && currentUser?.role !== 'admin') {
+      onSlashClick(style);
+      return;
+    }
+
+    if (onBlendSelect) {
+      const existsIdx = selectedStyles.findIndex(s => s.id === style.id);
+      if (existsIdx !== -1) {
+        // Toggle off if already selected in blend
+        onBlendSelect(selectedStyles.filter(s => s.id !== style.id));
+      } else {
+        // Selection logic for blend: limit to 2
+        if (selectedStyles.length < 2) {
+          onBlendSelect([...selectedStyles, style]);
+        } else {
+          // Replace second if already have two
+          onBlendSelect([selectedStyles[0], style]);
+        }
+      }
+    } else {
+      onSelect(style);
+    }
+  };
+
+  const isBlendReady = selectedStyles.length === 2;
+
+  return (
+    <div className="space-y-6 relative">
+       {/* Toolbar */}
+       <div className="flex flex-col sm:flex-row gap-3">
+           <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+              <input 
+                 type="text" 
+                 placeholder={t.styleSearchPlace || "Search styles..."} 
+                 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 outline-none text-sm transition-all focus:bg-white focus:ring-2 focus:ring-rose-100"
+                 disabled={disabled}
+              />
+           </div>
+
+           <div className="flex bg-gray-100 p-1 rounded-xl shrink-0">
+                {['standard', 'high', 'ultra'].map((res) => (
+                    <button 
+                      key={res}
+                      onClick={() => onResolutionChange(res as Resolution)}
+                      className={`px-3 py-1.5 rounded-lg text-[10px] font-black transition-all ${resolution === res ? 'bg-white shadow text-rose-600' : 'text-gray-500'}`}
+                    >
+                      {res === 'standard' ? 'HD' : res === 'high' ? '4K' : '8K'}
+                    </button>
+                ))}
+           </div>
+       </div>
+
+       {/* Quick Actions & Blender Status */}
+       <ul className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <li>
+            <button 
+               onClick={() => customFileInputRef.current?.click()}
+               disabled={disabled}
+               className={`w-full h-full group flex flex-col items-center justify-center p-3 rounded-xl border-2 border-dashed transition-all ${selectedStyle?.id === 'custom' ? 'border-rose-500 bg-rose-50 text-rose-600' : 'border-gray-200 hover:border-rose-300 hover:bg-rose-50'}`}
+            >
+               <div className="relative">
+                  <Upload className={`w-4 h-4 mb-1 ${selectedStyle?.id === 'custom' ? 'text-rose-600' : 'text-rose-500'}`} />
+                  {selectedStyle?.id === 'custom' && (
+                    <div className="absolute -top-1 -right-1 w-2 h-2 bg-rose-600 rounded-full border border-white"></div>
+                  )}
+               </div>
+               <span className="text-[10px] font-bold text-gray-700">{t.customStyle}</span>
+               <input 
+                 type="file" 
+                 accept="image/*" 
+                 className="hidden" 
+                 ref={customFileInputRef} 
+                 onChange={handleCustomStyleUpload} 
+               />
+            </button>
+          </li>
+          <li>
+            <button 
+              onClick={handleLuckyDip} 
+              disabled={disabled} 
+              className="w-full h-full group flex flex-col items-center justify-center p-3 rounded-xl border border-gray-100 hover:border-amber-200 bg-white transition-all shadow-sm active:scale-95"
+            >
+               <Dice5 className="w-4 h-4 text-amber-500 mb-1 animate-in fade-in zoom-in" />
+               <span className="text-[10px] font-bold text-gray-700">{t.luckyStyle}</span>
+            </button>
+          </li>
+          <li className="col-span-2">
+             <div className={`w-full h-full rounded-xl border p-3 flex items-center justify-between transition-all ${isBlendReady ? 'bg-rose-600 border-rose-500 shadow-lg shadow-rose-200' : 'bg-rose-50/50 border-rose-100'}`}>
+                <div className="flex flex-col">
+                   <div className="flex items-center gap-1.5">
+                      <GitMerge className={`w-4 h-4 ${isBlendReady ? 'text-white' : 'text-rose-600'}`} />
+                      <span className={`text-[11px] font-black uppercase tracking-wider ${isBlendReady ? 'text-white' : 'text-rose-900'}`}>Style Blender</span>
+                   </div>
+                   <span className={`text-[9px] font-bold ${isBlendReady ? 'text-rose-100' : 'text-rose-400'}`}>
+                     {isBlendReady ? "Ready to synthesize" : "Pick 2 to blend aesthetics"}
+                   </span>
+                </div>
+                <div className="flex gap-1.5">
+                   {[0, 1].map(i => (
+                      <div key={i} className={`w-9 h-9 rounded-lg border-2 flex items-center justify-center text-xs font-black transition-all duration-500 ${selectedStyles[i] ? (isBlendReady ? 'border-white bg-white text-rose-600' : 'border-rose-500 bg-rose-500 text-white shadow-lg') : 'border-rose-200 border-dashed bg-white text-rose-200'}`}>
+                         {selectedStyles[i] ? (i === 0 ? 'A' : 'B') : '+'}
+                      </div>
+                   ))}
+                </div>
+             </div>
+          </li>
+       </ul>
+
+       {/* Style Grid */}
+       <section className="space-y-4">
+          <ul className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 max-h-[550px] overflow-y-auto pr-2 custom-scrollbar pb-8">
+              {filteredStyles.map(style => {
+                  const blendIdx = selectedStyles.findIndex(s => s.id === style.id);
+                  const isSelectedInBlend = blendIdx !== -1;
+                  const isDirectSelected = selectedStyle?.id === style.id;
+                  const isSelected = isDirectSelected || isSelectedInBlend;
+                  
+                  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}>
+                      <button
+                        onClick={() => handleStyleInteraction(style)}
+                        disabled={disabled}
+                        className={`
+                          w-full group relative aspect-[4/5] rounded-2xl overflow-hidden text-left transition-all duration-500
+                          ${isSelected ? 'ring-4 ring-rose-500 ring-offset-2 scale-[1.03] z-10 shadow-2xl' : 'hover:scale-[1.02] shadow-sm'}
+                          ${isLocked ? 'cursor-not-allowed grayscale-[0.5]' : 'cursor-pointer'}
+                        `}
+                      >
+                        <LazyStyleBackground src={style.previewImage} colorClass={style.coverColor} />
+                        
+                        {/* Status Overlays */}
+                        <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent p-4 flex flex-col justify-end">
+                           <div className="absolute top-3 left-3 flex flex-col gap-1.5">
+                              {style.tags?.includes('hot') && (
+                                <span className="px-2 py-1 bg-red-600 text-white text-[8px] font-black rounded-full shadow-lg flex items-center gap-1 w-fit uppercase">
+                                  <Sparkles className="w-2.5 h-2.5" /> Hot
+                                </span>
+                              )}
+                              {recommendedStyleIds?.includes(style.id) && (
+                                <span className="px-2 py-1 bg-emerald-500 text-white text-[8px] font-black rounded-full shadow-lg flex items-center gap-1 w-fit uppercase animate-pulse">
+                                  <Check className="w-2.5 h-2.5" /> Best Match
+                                </span>
+                              )}
+                           </div>
+
+                           <div className="absolute top-3 right-3 flex gap-2">
+                             <button 
+                                onClick={(e) => { e.stopPropagation(); toggleFavorite(style.id); }}
+                                className={`p-2 rounded-full backdrop-blur-md transition-all ${isFav ? 'bg-yellow-400 text-white scale-110 shadow-lg' : 'bg-black/30 text-white hover:bg-white hover:text-rose-500'}`}
+                             >
+                                <Star className={`w-3.5 h-3.5 ${isFav ? 'fill-current' : ''}`} />
+                             </button>
+                             {isLocked && <div className="p-2 bg-black/60 backdrop-blur-md rounded-full text-white"><Lock className="w-3.5 h-3.5" /></div>}
+                             
+                             {/* Selection Marker */}
+                             {isSelected && (
+                                <div className="p-2 bg-rose-600 text-white rounded-full shadow-lg animate-fade-in-down font-black text-[10px] w-8 h-8 flex items-center justify-center">
+                                   {isSelectedInBlend ? (blendIdx === 0 ? 'A' : 'B') : <Check className="w-4 h-4" />}
+                                </div>
+                             )}
+                           </div>
+
+                           <div className="space-y-0.5">
+                              <h3 className="font-black text-white text-sm tracking-tight drop-shadow-lg">{name}</h3>
+                              <p className="text-[10px] text-gray-300 font-medium line-clamp-1">{style.description}</p>
+                           </div>
+                        </div>
+                      </button>
+                    </li>
+                  );
+              })}
+          </ul>
+       </section>
+    </div>
+  );
+};

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,46 @@
+
+import { Language } from '../types';
+
+const en = {
+  title: "Romantic Life",
+  subtitle: "AI Wedding Fitting Studio",
+  heroTitle: "Preview Your Perfection",
+  heroDesc: "The founder's pick: Try 100+ premier wedding styles instantly with our professional AI photography engine.",
+  // ... rest of en translations (shortened for brevity but keeping structure)
+  bookStyle: "Book This Style",
+  watermark: "Xiamen Romantic Life Photography",
+  zipBtn: "Save All Previews",
+  aboutUsBtn: "Founder's Advice",
+  styles: {
+    korean: "Korean Minimalist",
+    chinese: "Chinese Traditional",
+    cinematic: "Cinematic Mood",
+    // ...
+  }
+} as any;
+
+const zh = {
+  title: "厦门浪漫一生",
+  subtitle: "创始级 AI 婚纱试衣间",
+  heroTitle: "在线试衣 · 遇见最美的你",
+  heroDesc: "创始人亲自精选 100+ 款热门婚纱风格，搭载影楼级 AI 引擎，让您在拍摄前精准锁定心仪造型。",
+  bookStyle: "预约拍摄此风格",
+  watermark: "浪漫一生 · 匠心摄影",
+  zipBtn: "保存电子相册",
+  aboutUsBtn: "创始人点评",
+  emptyGallery: "等待开启浪漫之旅",
+  emptyGalleryDesc: "上传照片后，我将为您精准匹配最佳的婚纱方案。",
+  step1: "上传您的影像",
+  step2: "挑选心动风格",
+  step3: "定制专属细节",
+  styles: {
+    korean: "韩式极简主义",
+    chinese: "中式传统喜嫁",
+    cinematic: "电影叙事感",
+    // ...
+  }
+} as any;
+
+export const TRANSLATIONS: Record<Language, any> = {
+  en, zh, ja: en, ko: en, es: en, fr: en
+};

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": {
+    "@vitejs/plugin-react": "https://esm.sh/@vitejs/plugin-react@^5.1.2",
+    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
+    "react/": "https://esm.sh/react@^19.2.3/",
+    "react": "https://esm.sh/react@^19.2.3",
+    "@google/genai": "https://esm.sh/@google/genai@^1.33.0",
+    "lucide-react": "https://esm.sh/lucide-react@^0.560.0",
+    "canvas-confetti": "https://esm.sh/canvas-confetti@^1.9.4",
+    "zustand/": "https://esm.sh/zustand@^5.0.9/",
+    "zustand": "https://esm.sh/zustand@^5.0.9",
+    "jszip": "https://esm.sh/jszip@^3.10.1",
+    "vite": "https://esm.sh/vite@^7.2.7"
+  }
+}
+</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,7 @@
+{
+  "name": "Romantic Life - AI Wedding Fitting Room",
+  "description": "Xiamen Romantic Life Wedding Photography AI Fitting Room (ai.xmloveai.com). Try different wedding styles instantly and book your photoshoot.",
+  "requestFramePermissions": [
+    "camera"
+  ]
+}

nginx.conf

@@ -0,0 +1 @@
+���z

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"
+  }
+}