Update app.py

app.py

@@ -1,119 +1,634 @@
-import os
-import json
-import tempfile
-from zipfile import ZipFile
-
-import gradio as gr
-from agents import Agent, handoff, Runner
-from agents.extensions.handoff_prompt import RECOMMENDED_PROMPT_PREFIX
-from TTS.api import TTS
-
-# Initialize Coqui TTS (Tacotron2-DDC)
-tts = TTS(
-    model_name="tts_models/en/ljspeech/tacotron2-DDC",
-    progress_bar=False,
-    gpu=False
-)
-
-def generate_tts_audio(script: str) -> str:
-    """
-    Synthesize speech using Coqui TTS and save to a WAV file.
-    Returns the local file path to the audio.
-    """
-    out_path = os.path.join(tempfile.gettempdir(), "voiceover.wav")
-    tts.tts_to_file(text=script, file_path=out_path)
-    return out_path
-
-# Agents definitions
-topic_agent = Agent(
-    name="Topic Agent",
-    instructions=f"{RECOMMENDED_PROMPT_PREFIX}\n"
-                 "You are given a workshop topic and audience. Draft a structured learning path: goals, 4 modules, and a hands-on exercise for each."
-)
-content_agent = Agent(
-    name="Content Agent",
-    instructions=f"{RECOMMENDED_PROMPT_PREFIX}\n"
-                 "Convert the outline into detailed module scripts, speaker notes, and 3 quiz questions per module."
-)
-slide_agent = Agent(
-    name="Slide Agent",
-    instructions=f"{RECOMMENDED_PROMPT_PREFIX}\n"
-                 "Given module content, produce slide JSON with title, bullet points, and design hints."
-)
-code_agent = Agent(
-    name="Code Agent",
-    instructions=f"{RECOMMENDED_PROMPT_PREFIX}\n"
-                 "Generate runnable Python code snippets or a Colab notebook for hands-on labs in each module."
-)
-voice_agent = Agent(
-    name="Voiceover Agent",
-    instructions=f"{RECOMMENDED_PROMPT_PREFIX}\n"
-                 "Create a 1-2 minute voiceover script. Return JSON with key 'script'."
-)
-
-# Orchestrator with corrected handoff signature
-document_orchestrator = Agent(
-    name="Workshop Orchestrator",
-    instructions="Invoke: topic_agent, content_agent, slide_agent, code_agent, voice_agent (optional); collect outputs.",
-    handoffs=[
-        handoff(topic_agent, "outline"),
-        handoff(content_agent, "content"),
-        handoff(slide_agent, "slides"),
-        handoff(code_agent, "code_labs"),
-        handoff(voice_agent, "voiceover", optional=True),
+import React, { useState } from 'react';
+import { ChevronRight, Play, Download, Users, Clock, DollarSign, CheckCircle, Loader, Zap, BookOpen, Code, Mic, AlertCircle } from 'lucide-react';
+
+const WorkshopGenerator = () => {
+  const [currentStep, setCurrentStep] = useState('input');
+  const [workshopData, setWorkshopData] = useState({
+    topic: '',
+    audience: '',
+    duration: '90',
+    difficulty: 'intermediate'
+  });
+  const [generatedContent, setGeneratedContent] = useState(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [activeAgent, setActiveAgent] = useState('');
+  const [error, setError] = useState('');
+
+  const agents = [
+    { id: 'topic', name: 'Topic Agent', icon: BookOpen, description: 'Analyzing topic and creating learning path' },
+    { id: 'content', name: 'Content Agent', icon: Users, description: 'Writing module scripts and speaker notes' },
+    { id: 'slide', name: 'Slide Agent', icon: Play, description: 'Generating presentation slides' },
+    { id: 'code', name: 'Code Agent', icon: Code, description: 'Creating hands-on exercises' }
+  ];
+
+  // Real Claude API call function
+  const callClaudeAPI = async (prompt, maxTokens = 2000) => {
+    try {
+      const response = await fetch("https://api.anthropic.com/v1/messages", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          model: "claude-sonnet-4-20250514",
+          max_tokens: maxTokens,
+          messages: [
+            { role: "user", content: prompt }
+          ]
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`API request failed: ${response.status}`);
+      }
+
+      const data = await response.json();
+      return data.content[0].text;
+    } catch (error) {
+      console.error("Claude API Error:", error);
+      throw error;
+    }
+  };
+
+  // Topic Agent - Creates learning outline
+  const topicAgent = async (topic, audience, duration, difficulty) => {
+    const prompt = `You are an expert corporate trainer creating a workshop outline.
+
+Topic: ${topic}
+Audience: ${audience}
+Duration: ${duration} minutes
+Difficulty: ${difficulty}
+
+Create a comprehensive workshop structure. Respond ONLY with valid JSON in this exact format:
+
+{
+  "title": "Workshop title",
+  "objective": "Main learning objective",
+  "modules": [
+    {
+      "name": "Module 1 name",
+      "duration": 20,
+      "objectives": ["objective 1", "objective 2"],
+      "key_points": ["point 1", "point 2", "point 3"]
+    }
+  ],
+  "target_outcomes": ["outcome 1", "outcome 2"],
+  "prerequisites": ["prereq 1", "prereq 2"],
+  "difficulty_level": "${difficulty}"
+}
+
+DO NOT include any text outside the JSON structure.`;
+
+    return await callClaudeAPI(prompt, 1500);
+  };
+
+  // Content Agent - Creates detailed content
+  const contentAgent = async (topicStructure, topic, audience) => {
+    const prompt = `You are a corporate training content writer. Create detailed workshop content based on this structure:
+
+${topicStructure}
+
+Topic: ${topic}
+Audience: ${audience}
+
+Generate comprehensive content. Respond ONLY with valid JSON:
+
+{
+  "speaker_notes": {
+    "introduction": "Detailed intro script with talking points",
+    "modules": [
+      {
+        "module_name": "Name",
+        "opening": "Module opening script",
+        "main_content": "Detailed teaching content with examples",
+        "activities": "Instructions for hands-on activities",
+        "closing": "Module wrap-up and transition"
+      }
+    ],
+    "conclusion": "Workshop conclusion script"
+  },
+  "participant_materials": {
+    "worksheets": ["Worksheet 1 description", "Worksheet 2 description"],
+    "reference_guides": ["Guide 1 content outline", "Guide 2 content outline"]
+  },
+  "assessment": {
+    "quiz_questions": [
+      {
+        "question": "Question text",
+        "type": "multiple_choice",
+        "options": ["A", "B", "C", "D"],
+        "correct_answer": "A",
+        "explanation": "Why this is correct"
+      }
     ]
-)
-
-runner = Runner()
-
-# Bundle builder
-def build_workshop_bundle(topic: str, audience: str):
-    prompt = f"Create a {topic} workshop for {audience}."
-    results = runner.run(document_orchestrator, prompt).outputs
-
-    # Synthesize voiceover
-    voice_info = results.get("voiceover", {})
-    audio_path = None
-    if isinstance(voice_info, dict) and "script" in voice_info:
-        audio_path = generate_tts_audio(voice_info["script"])
-
-    # Render slides to HTML
-    slides_json = results.get("slides", {})
-    with open("static/slides_template.html") as f:
-        template = f.read()
-    slide_html = template.replace("{{SLIDES_JSON}}", json.dumps(slides_json))
-
-    # Bundle outputs into ZIP
-    tmpdir = tempfile.mkdtemp()
-    zip_path = os.path.join(tmpdir, "workshop_bundle.zip")
-    with ZipFile(zip_path, "w") as zipf:
-        for name, content in [
-            ("workshop_outputs.json", json.dumps(results, indent=2)),
-            ("slides.json", json.dumps(slides_json, indent=2)),
-            ("slides.html", slide_html),
-            ("code_labs.py", results.get("code_labs", "")),
-        ]:
-            p = os.path.join(tmpdir, name)
-            with open(p, "w") as file:
-                file.write(content)
-            zipf.write(p, arcname=name)
-        if audio_path and os.path.exists(audio_path):
-            zipf.write(audio_path, os.path.basename(audio_path))
-    return slide_html, audio_path, zip_path
-
-# Gradio UI setup
-def run_app(topic, audience):
-    return build_workshop_bundle(topic, audience)
-
-with gr.Blocks(title="🚀 Workshop in a Box") as demo:
-    gr.Markdown("# Workshop in a Box")
-    topic = gr.Textbox(label="Workshop Topic", placeholder="e.g., AI Agents 101")
-    audience = gr.Textbox(label="Audience", placeholder="e.g., Product Managers")
-    btn = gr.Button("Generate Workshop")
-    slide_preview = gr.HTML(label="Slide Preview")
-    audio_player = gr.Audio(label="Voiceover Preview", interactive=True)
-    download = gr.File(label="Download ZIP")
-    btn.click(fn=run_app, inputs=[topic, audience], outputs=[slide_preview, audio_player, download])
-
-if __name__ == "__main__":
-    demo.launch()
+  }
+}
+
+DO NOT include any text outside the JSON structure.`;
+
+    return await callClaudeAPI(prompt, 3000);
+  };
+
+  // Slide Agent - Creates presentation structure
+  const slideAgent = async (contentData, topic) => {
+    const prompt = `You are a presentation designer. Create a professional slide deck structure based on this workshop content:
+
+${contentData}
+
+Topic: ${topic}
+
+Generate slide-by-slide content. Respond ONLY with valid JSON:
+
+{
+  "slides": [
+    {
+      "slide_number": 1,
+      "title": "Slide title",
+      "type": "title_slide",
+      "content": {
+        "main_text": "Primary text content",
+        "bullet_points": ["Point 1", "Point 2"],
+        "notes": "Speaker notes for this slide"
+      },
+      "design_hints": {
+        "layout": "title_and_content",
+        "visual_elements": ["chart", "diagram", "icon"],
+        "color_scheme": "professional_blue"
+      }
+    }
+  ],
+  "slide_count": 24,
+  "estimated_presentation_time": "75 minutes"
+}
+
+Create exactly enough slides for the workshop duration. DO NOT include any text outside the JSON structure.`;
+
+    return await callClaudeAPI(prompt, 4000);
+  };
+
+  // Code Agent - Creates practical exercises
+  const codeAgent = async (topicStructure, topic, audience, difficulty) => {
+    const prompt = `You are a technical training specialist. Create hands-on coding exercises based on:
+
+${topicStructure}
+
+Topic: ${topic}
+Audience: ${audience}
+Difficulty: ${difficulty}
+
+Generate practical coding exercises. Respond ONLY with valid JSON:
+
+{
+  "exercises": [
+    {
+      "title": "Exercise title",
+      "duration": 15,
+      "difficulty": "beginner",
+      "description": "What participants will build",
+      "setup_instructions": "Step-by-step setup",
+      "starter_code": "// Starter code template",
+      "solution_code": "// Complete solution",
+      "learning_objectives": ["objective 1", "objective 2"],
+      "common_mistakes": ["mistake 1", "mistake 2"]
+    }
+  ],
+  "code_demos": [
+    {
+      "title": "Demo title",
+      "code": "# Complete demo code",
+      "explanation": "Step-by-step explanation"
+    }
+  ],
+  "resources": {
+    "documentation_links": ["https://example.com/docs"],
+    "additional_tools": ["Tool 1", "Tool 2"]
+  }
+}
+
+Focus on practical, business-relevant examples. DO NOT include any text outside the JSON structure.`;
+
+    return await callClaudeAPI(prompt, 3000);
+  };
+
+  const generateWorkshop = async () => {
+    setIsGenerating(true);
+    setCurrentStep('generating');
+    setError('');
+    
+    try {
+      // Step 1: Topic Agent
+      setActiveAgent('topic');
+      const topicResponse = await topicAgent(
+        workshopData.topic, 
+        workshopData.audience, 
+        workshopData.duration, 
+        workshopData.difficulty
+      );
+      
+      let topicData;
+      try {
+        // Clean the response to extract JSON
+        const cleanResponse = topicResponse.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
+        topicData = JSON.parse(cleanResponse);
+      } catch (parseError) {
+        console.error("Topic parsing error:", parseError);
+        throw new Error("Failed to parse topic structure");
+      }
+
+      // Step 2: Content Agent
+      setActiveAgent('content');
+      const contentResponse = await contentAgent(
+        JSON.stringify(topicData), 
+        workshopData.topic, 
+        workshopData.audience
+      );
+      
+      let contentData;
+      try {
+        const cleanResponse = contentResponse.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
+        contentData = JSON.parse(cleanResponse);
+      } catch (parseError) {
+        console.error("Content parsing error:", parseError);
+        throw new Error("Failed to parse content structure");
+      }
+
+      // Step 3: Slide Agent
+      setActiveAgent('slide');
+      const slideResponse = await slideAgent(
+        JSON.stringify(contentData), 
+        workshopData.topic
+      );
+      
+      let slideData;
+      try {
+        const cleanResponse = slideResponse.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
+        slideData = JSON.parse(cleanResponse);
+      } catch (parseError) {
+        console.error("Slide parsing error:", parseError);
+        throw new Error("Failed to parse slide structure");
+      }
+
+      // Step 4: Code Agent
+      setActiveAgent('code');
+      const codeResponse = await codeAgent(
+        JSON.stringify(topicData), 
+        workshopData.topic, 
+        workshopData.audience, 
+        workshopData.difficulty
+      );
+      
+      let codeData;
+      try {
+        const cleanResponse = codeResponse.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
+        codeData = JSON.parse(cleanResponse);
+      } catch (parseError) {
+        console.error("Code parsing error:", parseError);
+        throw new Error("Failed to parse code structure");
+      }
+
+      // Combine all generated content
+      setGeneratedContent({
+        topic: topicData,
+        content: contentData,
+        slides: slideData,
+        code: codeData,
+        metadata: {
+          title: topicData.title,
+          modules: topicData.modules?.length || 4,
+          slideCount: slideData.slide_count || slideData.slides?.length || 0,
+          exercises: codeData.exercises?.length || 0,
+          estimatedValue: calculateWorkshopValue(workshopData.duration, workshopData.audience),
+          generatedAt: new Date().toISOString()
+        }
+      });
+      
+      setCurrentStep('preview');
+    } catch (error) {
+      console.error("Workshop generation error:", error);
+      setError(`Generation failed: ${error.message}`);
+      setCurrentStep('input');
+    } finally {
+      setIsGenerating(false);
+      setActiveAgent('');
+    }
+  };
+
+  const calculateWorkshopValue = (duration, audience) => {
+    const basePrices = {
+      'executives': 200,
+      'managers': 150,
+      'developers': 120,
+      'analysts': 100,
+      'mixed': 140
+    };
+    
+    const basePrice = basePrices[audience] || 120;
+    const durationMultiplier = parseInt(duration) / 60;
+    const estimatedValue = Math.round(basePrice * durationMultiplier) * 100;
+    
+    return `$${estimatedValue.toLocaleString()}`;
+  };
+
+  const downloadWorkshop = () => {
+    if (!generatedContent) return;
+    
+    const workshopPackage = {
+      ...generatedContent,
+      generated_by: "AI Workshop in a Box",
+      export_date: new Date().toISOString(),
+      workshop_config: workshopData
+    };
+    
+    const dataStr = JSON.stringify(workshopPackage, null, 2);
+    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+    
+    const exportFileDefaultName = `workshop-${workshopData.topic.replace(/\s+/g, '-').toLowerCase()}.json`;
+    
+    const linkElement = document.createElement('a');
+    linkElement.setAttribute('href', dataUri);
+    linkElement.setAttribute('download', exportFileDefaultName);
+    linkElement.click();
+  };
+
+  const handleInputChange = (field, value) => {
+    setWorkshopData(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 text-white">
+      {/* Header */}
+      <div className="bg-black/20 backdrop-blur-lg border-b border-white/10">
+        <div className="max-w-7xl mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center">
+                <Zap className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold">AI Workshop in a Box</h1>
+                <p className="text-blue-200 text-sm">Functional Multi-Agent Generator</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-4">
+              <div className="text-right">
+                <div className="text-2xl font-bold text-green-400">$10K+</div>
+                <div className="text-sm text-gray-300">per workshop</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        {/* Error Display */}
+        {error && (
+          <div className="max-w-2xl mx-auto mb-6">
+            <div className="bg-red-500/20 border border-red-400 rounded-lg p-4 flex items-center space-x-3">
+              <AlertCircle className="w-5 h-5 text-red-400" />
+              <span className="text-red-200">{error}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Step 1: Input */}
+        {currentStep === 'input' && (
+          <div className="max-w-2xl mx-auto">
+            <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
+              <h2 className="text-3xl font-bold mb-6 text-center">Create Your Workshop</h2>
+              
+              <div className="space-y-6">
+                <div>
+                  <label className="block text-sm font-medium mb-2">Workshop Topic</label>
+                  <input
+                    type="text"
+                    placeholder="e.g., Advanced Prompt Engineering, AI Agents for Business"
+                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-transparent text-white placeholder-gray-300"
+                    value={workshopData.topic}
+                    onChange={(e) => handleInputChange('topic', e.target.value)}
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium mb-2">Target Audience</label>
+                  <select
+                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-cyan-400 text-white"
+                    value={workshopData.audience}
+                    onChange={(e) => handleInputChange('audience', e.target.value)}
+                  >
+                    <option value="">Select audience</option>
+                    <option value="executives">C-Suite Executives</option>
+                    <option value="managers">Product Managers</option>
+                    <option value="developers">Developers & Engineers</option>
+                    <option value="analysts">Data Analysts</option>
+                    <option value="mixed">Mixed Technical Team</option>
+                  </select>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Duration (minutes)</label>
+                    <select
+                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-cyan-400 text-white"
+                      value={workshopData.duration}
+                      onChange={(e) => handleInputChange('duration', e.target.value)}
+                    >
+                      <option value="60">60 minutes</option>
+                      <option value="90">90 minutes</option>
+                      <option value="120">2 hours</option>
+                      <option value="240">Half day</option>
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Difficulty Level</label>
+                    <select
+                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-cyan-400 text-white"
+                      value={workshopData.difficulty}
+                      onChange={(e) => handleInputChange('difficulty', e.target.value)}
+                    >
+                      <option value="beginner">Beginner</option>
+                      <option value="intermediate">Intermediate</option>
+                      <option value="advanced">Advanced</option>
+                    </select>
+                  </div>
+                </div>
+
+                <button
+                  onClick={generateWorkshop}
+                  disabled={!workshopData.topic || !workshopData.audience || isGenerating}
+                  className="w-full py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-semibold text-lg hover:from-cyan-600 hover:to-blue-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
+                >
+                  <Zap className="w-5 h-5" />
+                  <span>Generate Workshop</span>
+                  <ChevronRight className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Step 2: Generation Process */}
+        {currentStep === 'generating' && (
+          <div className="max-w-4xl mx-auto">
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold mb-4">Generating Your Workshop</h2>
+              <p className="text-blue-200">Multi-agent system creating your complete training package...</p>
+            </div>
+
+            <div className="grid gap-6">
+              {agents.map((agent, index) => {
+                const isActive = activeAgent === agent.id;
+                const isComplete = agents.findIndex(a => a.id === activeAgent) > index;
+                const Icon = agent.icon;
+
+                return (
+                  <div
+                    key={agent.id}
+                    className={`p-6 rounded-xl border transition-all duration-500 ${
+                      isActive
+                        ? 'bg-cyan-500/20 border-cyan-400 shadow-lg shadow-cyan-500/25'
+                        : isComplete
+                        ? 'bg-green-500/20 border-green-400'
+                        : 'bg-white/5 border-white/10'
+                    }`}
+                  >
+                    <div className="flex items-center space-x-4">
+                      <div className={`p-3 rounded-lg ${
+                        isActive ? 'bg-cyan-500' : isComplete ? 'bg-green-500' : 'bg-white/10'
+                      }`}>
+                        {isActive ? (
+                          <Loader className="w-6 h-6 animate-spin" />
+                        ) : isComplete ? (
+                          <CheckCircle className="w-6 h-6" />
+                        ) : (
+                          <Icon className="w-6 h-6" />
+                        )}
+                      </div>
+                      <div className="flex-1">
+                        <h3 className="font-semibold text-lg">{agent.name}</h3>
+                        <p className="text-gray-300">{agent.description}</p>
+                      </div>
+                      {isActive && (
+                        <div className="flex space-x-1">
+                          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-bounce"></div>
+                          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
+                          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Step 3: Preview & Download */}
+        {currentStep === 'preview' && generatedContent && (
+          <div className="max-w-6xl mx-auto">
+            <div className="text-center mb-8">
+              <h2 className="text-3xl font-bold mb-4">Workshop Generated Successfully! 🎉</h2>
+              <p className="text-blue-200 text-lg">Your complete training package is ready for delivery</p>
+            </div>
+
+            <div className="grid lg:grid-cols-3 gap-8">
+              {/* Workshop Overview */}
+              <div className="lg:col-span-2">
+                <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
+                  <h3 className="text-2xl font-bold mb-6">{generatedContent.metadata.title}</h3>
+                  
+                  <div className="grid md:grid-cols-3 gap-6 mb-8">
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-cyan-400">{generatedContent.metadata.slideCount}</div>
+                      <div className="text-sm text-gray-300">Slides</div>
+                    </div>
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-green-400">{generatedContent.metadata.exercises}</div>
+                      <div className="text-sm text-gray-300">Exercises</div>
+                    </div>
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-purple-400">{workshopData.duration}m</div>
+                      <div className="text-sm text-gray-300">Duration</div>
+                    </div>
+                  </div>
+
+                  <div className="space-y-3">
+                    <h4 className="font-semibold text-lg mb-3">Workshop Modules:</h4>
+                    {generatedContent.topic.modules?.map((module, index) => (
+                      <div key={index} className="flex items-center space-x-3 p-3 bg-white/5 rounded-lg">
+                        <div className="w-8 h-8 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full flex items-center justify-center text-sm font-bold">
+                          {index + 1}
+                        </div>
+                        <div>
+                          <div className="font-medium">{module.name}</div>
+                          <div className="text-sm text-gray-300">{module.duration} minutes</div>
+                        </div>
+                      </div>
+                    )) || <div className="text-gray-400">Modules loaded successfully</div>}
+                  </div>
+                </div>
+              </div>
+
+              {/* Actions & Pricing */}
+              <div className="space-y-6">
+                <div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-400/30 rounded-2xl p-6 text-center">
+                  <DollarSign className="w-12 h-12 text-green-400 mx-auto mb-4" />
+                  <div className="text-3xl font-bold text-green-400 mb-2">{generatedContent.metadata.estimatedValue}</div>
+                  <div className="text-sm text-green-200">Estimated Workshop Value</div>
+                </div>
+
+                <div className="space-y-4">
+                  <button 
+                    onClick={downloadWorkshop}
+                    className="w-full py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-semibold hover:from-cyan-600 hover:to-blue-700 transition-all duration-200 flex items-center justify-center space-x-2"
+                  >
+                    <Download className="w-5 h-5" />
+                    <span>Download Package</span>
+                  </button>
+
+                  <button className="w-full py-3 bg-white/10 border border-white/20 rounded-lg font-semibold hover:bg-white/20 transition-all duration-200 flex items-center justify-center space-x-2">
+                    <Play className="w-5 h-5" />
+                    <span>Preview Content</span>
+                  </button>
+
+                  <button className="w-full py-3 bg-purple-600/20 border border-purple-400/30 rounded-lg font-semibold hover:bg-purple-600/30 transition-all duration-200 flex items-center justify-center space-x-2">
+                    <Users className="w-5 h-5" />
+                    <span>Book Client Demo</span>
+                  </button>
+                </div>
+
+                <div className="bg-white/5 rounded-xl p-4">
+                  <h4 className="font-semibold mb-2">Package Includes:</h4>
+                  <ul className="text-sm space-y-1 text-gray-300">
+                    <li>• Complete slide deck</li>
+                    <li>• Speaker notes & scripts</li>
+                    <li>• Hands-on exercises</li>
+                    <li>• Code examples</li>
+                    <li>• Assessment materials</li>
+                    <li>• JSON export for customization</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-8 text-center">
+              <button
+                onClick={() => {
+                  setCurrentStep('input');
+                  setGeneratedContent(null);
+                  setWorkshopData({ topic: '', audience: '', duration: '90', difficulty: 'intermediate' });
+                  setError('');
+                }}
+                className="px-6 py-3 bg-white/10 border border-white/20 rounded-lg hover:bg-white/20 transition-all duration-200"
+              >
+                Generate Another Workshop
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WorkshopGenerator;