app.py

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;