feat: Enhanced Slides Generator with animated presentations and file attachments

Major improvements:
- MODERN ANIMATED SLIDES: CSS3 animations (fadeIn, slideIn, scaleIn, pulse)
  SVG charts and data visualizations, glassmorphism effects, gradient backgrounds
  Professional typography, staggered reveal animations

- FILE ATTACHMENT SUPPORT: Upload PowerPoint, PDFs, Docs, Images, Color Palettes
  Auto-extract colors from images for brand consistency
  Parse CSS/JSON files for color palettes
  Context-aware slide generation from attached documents

- ENHANCED THEMING: 8 premium themes (Corporate Blue, Executive Dark, Tech Neon, etc.)
  4 animation styles (Professional, Dynamic, Minimal, Impressive)
  7 audience presets with style descriptions

- IMPROVED UX: Drag-and-drop file upload zone
  Progress bar during presentation playback
  Enhanced HTML export with autoplay and keyboard navigation
  File size display and color palette preview

lib/services/zai-plan.ts

@@ -260,85 +260,149 @@ Make the prompt specific, inspiring, and comprehensive. Use professional UX term
       slideCount?: number;
       audience?: string;
       organization?: string;
+      animationStyle?: string;
+      audienceStyle?: string;
+      themeColors?: string[];
+      brandColors?: string[];
     } = {},
     model?: string
   ): Promise<APIResponse<string>> {
-    const { language = "English", theme = "modern", slideCount = 10, audience = "general", organization = "" } = options;
+    const {
+      language = "English",
+      theme = "executive-dark",
+      slideCount = 10,
+      audience = "Executives & C-Suite",
+      organization = "",
+      animationStyle = "Professional",
+      audienceStyle = "Sophisticated, data-driven, strategic focus",
+      themeColors = ["#09090b", "#6366f1", "#a855f7", "#fafafa"],
+      brandColors = []
+    } = options;
+
+    const [bgColor, primaryColor, secondaryColor, textColor] = themeColors;
+    const brandColorStr = brandColors.length > 0
+      ? `\nBRAND COLORS TO USE: ${brandColors.join(", ")}`
+      : "";
 
     const systemMessage: ChatMessage = {
       role: "system",
-      content: `You are a world-class presentation designer and content strategist specializing in creating stunning, impactful slide decks for organizations and professionals.
+      content: `You are a WORLD-CLASS presentation designer who creates STUNNING, AWARD-WINNING slide decks that rival McKinsey, Apple, and TED presentations.
 
-Your task is to generate a complete presentation with HTML5-ready slide content. Each slide should be designed with modern, visually impressive aesthetics.
+Your slides must be VISUALLY SPECTACULAR with:
+- Modern CSS3 animations (fade-in, slide-in, scale, parallax effects)
+- Sophisticated gradient backgrounds with depth
+- SVG charts and data visualizations inline
+- Glassmorphism and neumorphism effects
+- Professional typography with Inter/SF Pro fonts
+- Strategic use of whitespace
+- Micro-animations on hover/focus states
+- Progress indicators and visual hierarchy
 
-OUTPUT FORMAT:
-Return a JSON object with the following structure:
+OUTPUT FORMAT - Return ONLY valid JSON:
 \`\`\`json
 {
   "title": "Presentation Title",
-  "subtitle": "Presentation Subtitle",
+  "subtitle": "Compelling Subtitle",
   "theme": "${theme}",
   "language": "${language}",
   "slides": [
     {
       "id": "slide-1",
       "title": "Slide Title",
-      "content": "Main content text",
-      "htmlContent": "<div class='slide'>Complete HTML content for the slide</div>",
+      "content": "Plain text content summary",
+      "htmlContent": "<div>FULL HTML with inline CSS and animations</div>",
       "notes": "Speaker notes",
-      "layout": "title|content|two-column|quote|statistics|timeline|comparison",
+      "layout": "title|content|two-column|chart|statistics|timeline|quote|comparison",
       "order": 1
     }
   ]
 }
 \`\`\`
 
-DESIGN GUIDELINES:
-1. Create ${slideCount} slides maximum
-2. Use the "${theme}" design theme
-3. All content MUST be in ${language}
-4. Target audience: ${audience}
-${organization ? `5. Organization: ${organization}` : ""}
+DESIGN SYSTEM:
+- Primary: ${brandColors[0] || primaryColor}
+- Secondary: ${brandColors[1] || secondaryColor}
+- Background: ${bgColor}
+- Text: ${textColor}${brandColorStr}
 
-SLIDE TYPES TO INCLUDE:
-- Title slide with compelling headline
-- Problem/Opportunity statement
-- Key insights with data visualizations
-- Solution/Strategy overview
-- Timeline or roadmap if applicable
-- Key metrics or statistics
-- Call-to-action or next steps
-- Summary/Conclusion slide
+ANIMATION STYLE: ${animationStyle}
+- Professional: Subtle 0.3-0.5s ease transitions, fade and slide
+- Dynamic: 0.5-0.8s spring animations, emphasis effects, stagger delays
+- Impressive: Bold 0.8-1.2s animations, parallax, morphing, particle effects
 
-HTML CONTENT REQUIREMENTS:
-- Use semantic HTML5 elements
-- Include inline CSS for styling
-- Use modern gradients, shadows, and animations
-- Incorporate icons using Unicode or SVG
-- Ensure responsive design considerations
-- Use professional typography (specify font-family)
-- Include color schemes matching the theme
+CSS ANIMATIONS TO INCLUDE:
+\`\`\`css
+@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
+@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+\`\`\`
 
-CONTENT QUALITY:
-- Concise, impactful headlines (max 8 words)
-- Bullet points with 3-5 items maximum
-- Relevant statistics with compelling visuals
-- Professional, business-appropriate language
-- Clear narrative flow between slides`,
+SLIDE TYPES TO CREATE:
+1. TITLE SLIDE: Hero-style with animated gradient background, large typography, subtle floating elements
+2. AGENDA/OVERVIEW: Icon grid with staggered fade-in animations
+3. DATA/CHARTS: Inline SVG bar/line/pie charts with animated drawing effects
+4. KEY METRICS: Large animated numbers with counting effect styling, KPI cards with glassmorphism
+5. TIMELINE: Horizontal/vertical timeline with sequential reveal animations
+6. COMPARISON: Side-by-side cards with hover lift effects
+7. QUOTE: Large typography with decorative quote marks, subtle background pattern
+8. CALL-TO-ACTION: Bold CTA with pulsing button effect, clear next steps
+
+SVG CHART EXAMPLE:
+\`\`\`html
+<svg viewBox="0 0 400 200" style="width:100%;max-width:400px;">
+  <defs>
+    <linearGradient id="barGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:${primaryColor}"/>
+      <stop offset="100%" style="stop-color:${secondaryColor}"/>
+    </linearGradient>
+  </defs>
+  <rect x="50" y="50" width="60" height="130" fill="url(#barGrad)" rx="8" style="animation: scaleIn 0.8s ease-out 0.2s both; transform-origin: bottom;"/>
+  <rect x="130" y="80" width="60" height="100" fill="url(#barGrad)" rx="8" style="animation: scaleIn 0.8s ease-out 0.4s both; transform-origin: bottom;"/>
+  <rect x="210" y="30" width="60" height="150" fill="url(#barGrad)" rx="8" style="animation: scaleIn 0.8s ease-out 0.6s both; transform-origin: bottom;"/>
+</svg>
+\`\`\`
+
+TARGET AUDIENCE: ${audience}
+AUDIENCE STYLE: ${audienceStyle}
+${organization ? `ORGANIZATION BRANDING: ${organization}` : ""}
+
+REQUIREMENTS:
+- Create EXACTLY ${slideCount} slides
+- ALL content in ${language}
+- Each slide MUST have complete htmlContent with inline <style> tags
+- Use animation-delay for staggered reveal effects
+- Include decorative background elements (gradients, shapes, patterns)
+- Ensure text contrast meets WCAG AA standards
+- Add subtle shadow/glow effects for depth
+- Include progress/slide number indicator styling`,
     };
 
     const userMessage: ChatMessage = {
       role: "user",
-      content: `Create a stunning presentation about: ${topic}
+      content: `Create a STUNNING, ANIMATED presentation about:
 
-Requirements:
+${topic}
+
+SPECIFICATIONS:
 - Language: ${language}
 - Theme: ${theme}
-- Number of slides: ${slideCount}
-- Target audience: ${audience}
+- Slides: ${slideCount}
+- Audience: ${audience} (${audienceStyle})
+- Animation Style: ${animationStyle}
 ${organization ? `- Organization: ${organization}` : ""}
+${brandColors.length > 0 ? `- Brand Colors: ${brandColors.join(", ")}` : ""}
 
-Generate the complete presentation with HTML5 content for each slide. Make it visually impressive and content-rich.`,
+Generate SPECTACULAR slides with:
+✨ Animated CSS3 transitions and keyframes
+📊 SVG charts and data visualizations where relevant
+🎨 Modern gradients and glassmorphism effects
+💫 Staggered reveal animations
+🏢 Corporate-ready, executive-level design
+
+Return the complete JSON with full htmlContent for each slide. Make each slide VISUALLY IMPRESSIVE and memorable!`,
     };
 
     return this.chatCompletion([systemMessage, userMessage], model || "glm-4.7", true);
@@ -346,3 +410,4 @@ Generate the complete presentation with HTML5 content for each slide. Make it vi
 }
 
 export default ZaiPlanService;
+