Delete app.py

app.py

@@ -1,726 +0,0 @@
-import React, { useState } from 'react';
-import { ChevronRight, Play, Download, Users, Clock, DollarSign, CheckCircle, Loader, Zap, BookOpen, Code, Mic, AlertCircle, Settings } from 'lucide-react';
-
-const WorkshopGenerator = () => {
-  const [currentStep, setCurrentStep] = useState('setup');
-  const [apiKey, setApiKey] = useState('');
-  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 with proper authentication
-  const callClaudeAPI = async (prompt, maxTokens = 2000) => {
-    try {
-      const headers = {
-        "Content-Type": "application/json",
-      };
-
-      // Add API key for external deployment, or use built-in access for Claude.ai
-      if (apiKey && apiKey.startsWith('sk-ant-')) {
-        headers["x-api-key"] = apiKey;
-      }
-
-      const response = await fetch("https://api.anthropic.com/v1/messages", {
-        method: "POST",
-        headers: headers,
-        body: JSON.stringify({
-          model: "claude-sonnet-4-20250514",
-          max_tokens: maxTokens,
-          messages: [
-            { role: "user", content: prompt }
-          ]
-        })
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`API request failed: ${response.status} - ${errorText}`);
-      }
-
-      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"
-      }
-    ]
-  }
-}
-
-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 testAPIConnection = async () => {
-    try {
-      const testPrompt = "Respond with exactly: API_TEST_SUCCESS";
-      const response = await callClaudeAPI(testPrompt, 50);
-      return response.includes("API_TEST_SUCCESS");
-    } catch (error) {
-      console.error("API test failed:", error);
-      return false;
-    }
-  };
-
-  const handleAPISetup = async () => {
-    setError('');
-    
-    // Test API connection
-    const isConnected = await testAPIConnection();
-    if (isConnected) {
-      setCurrentStep('input');
-    } else {
-      setError('API connection failed. Please check your API key or try again.');
-    }
-  };
-
-  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 {
-        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,
-      api_version: "claude-sonnet-4-20250514"
-    };
-    
-    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">Production 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 0: API Setup */}
-        {currentStep === 'setup' && (
-          <div className="max-w-2xl mx-auto">
-            <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
-              <div className="text-center mb-6">
-                <Settings className="w-16 h-16 text-cyan-400 mx-auto mb-4" />
-                <h2 className="text-3xl font-bold mb-2">API Configuration</h2>
-                <p className="text-blue-200">Set up your Claude API access to start generating workshops</p>
-              </div>
-              
-              <div className="space-y-6">
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Claude API Key (Optional for Claude.ai)
-                  </label>
-                  <input
-                    type="password"
-                    placeholder="sk-ant-api03-... (leave blank if running in Claude.ai)"
-                    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={apiKey}
-                    onChange={(e) => setApiKey(e.target.value)}
-                  />
-                  <p className="text-xs text-gray-400 mt-2">
-                    • Leave blank when running in Claude.ai (uses built-in access)<br/>
-                    • Required when deploying to your own domain<br/>
-                    • Get your API key from: <span className="text-cyan-400">console.anthropic.com</span>
-                  </p>
-                </div>
-
-                <div className="bg-blue-500/20 border border-blue-400/30 rounded-lg p-4">
-                  <h4 className="font-semibold text-blue-200 mb-2">Deployment Options:</h4>
-                  <div className="text-sm text-blue-100 space-y-1">
-                    <div>• <strong>Claude.ai:</strong> No API key needed (current environment)</div>
-                    <div>• <strong>Your Domain:</strong> Add API key to environment variables</div>
-                    <div>• <strong>GitHub:</strong> Store API key in repository secrets</div>
-                  </div>
-                </div>
-
-                <button
-                  onClick={handleAPISetup}
-                  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 flex items-center justify-center space-x-2"
-                >
-                  <CheckCircle className="w-5 h-5" />
-                  <span>Test Connection & Continue</span>
-                </button>
-              </div>
-            </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 className="mt-6 pt-6 border-t border-white/10">
-                <button
-                  onClick={() => setCurrentStep('setup')}
-                  className="text-gray-300 hover:text-white text-sm flex items-center space-x-2"
-                >
-                  <Settings className="w-4 h-4" />
-                  <span>Change API Settings</span>
-                </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;