import React, { useState, useEffect, useRef } from 'react';
import { 
  Terminal, Code, Layout, Cpu, Layers, Moon, Sun, ChevronRight, ChevronLeft, 
  Send, Play, Save, Download, Copy, X, Settings, User, LogOut, History,
  FileUp, Mic, MicOff, Volume2, VolumeX, Image, BarChart3, Sparkles,
  Loader, AlertCircle, CheckCircle, Info, HelpCircle, Plus, Trash2, Folder
} from 'lucide-react';

// Mock API keys - in a real application, these would be securely stored
const API_KEYS = {
  openai: "sk-...", // OpenAI API key placeholder
  deepseek: "dsk-...", // DeepSeek API key placeholder
  minimax: "mm-...", // MiniMax API key placeholder
};

export default function M1AIWebsite() {
  // Core state
  const [darkMode, setDarkMode] = useState(false);
  const [activeService, setActiveService] = useState('chatgpt');
  const [activeTool, setActiveTool] = useState('chat');
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [notification, setNotification] = useState(null);
  const [isAuthenticated, setIsAuthenticated] = useState(true); // For demo purposes
  const [showSettings, setShowSettings] = useState(false);
  const [showUserMenu, setShowUserMenu] = useState(false);
  
  // Chat state
  const [prompt, setPrompt] = useState('');
  const [conversations, setConversations] = useState({
    chatgpt: [{ role: 'system', content: 'مرحبًا بك في ChatGPT. كيف يمكنني مساعدتك اليوم؟' }],
    deepseek: [{ role: 'system', content: 'مرحبًا بك في DeepSeek. كيف يمكنني مساعدتك اليوم؟' }],
    minimax: [{ role: 'system', content: 'مرحبًا بك في MiniMax. كيف يمكنني مساعدتك اليوم؟' }]
  });
  const [isRecording, setIsRecording] = useState(false);
  const [isMuted, setIsMuted] = useState(false);
  const [savedConversations, setSavedConversations] = useState([
    { id: 1, title: 'محادثة عن تطوير الويب', service: 'chatgpt', date: '2023-06-15' },
    { id: 2, title: 'تحليل البيانات', service: 'deepseek', date: '2023-06-18' },
    { id: 3, title: 'إنشاء تطبيق موبايل', service: 'minimax', date: '2023-06-20' }
  ]);
  const [showConversationHistory, setShowConversationHistory] = useState(false);
  
  // Code editor state
  const [code, setCode] = useState('// اكتب الكود الخاص بك هنا\nconsole.log("مرحبًا بالعالم!");');
  const [codeOutput, setCodeOutput] = useState('');
  const [codeLanguage, setCodeLanguage] = useState('javascript');
  const [savedSnippets, setSavedSnippets] = useState([
    { id: 1, title: 'مثال Hello World', language: 'javascript', code: 'console.log("مرحبًا بالعالم!");' },
    { id: 2, title: 'دالة فيبوناتشي', language: 'python', code: 'def fibonacci(n):\n    a, b = 0, 1\n    for _ in range(n):\n        yield a\n        a, b = b, a + b\n\nprint(list(fibonacci(10)))' }
  ]);
  
  // Website builder state
  const [websiteDescription, setWebsiteDescription] = useState('');
  const [generatedWebsite, setGeneratedWebsite] = useState(null);
  const [websiteTemplates, setWebsiteTemplates] = useState([
    { id: 1, name: 'متجر إلكتروني', category: 'تجارة' },
    { id: 2, name: 'مدونة شخصية', category: 'محتوى' },
    { id: 3, name: 'موقع شركة', category: 'أعمال' },
    { id: 4, name: 'منصة تعليمية', category: 'تعليم' }
  ]);
  const [selectedTemplate, setSelectedTemplate] = useState(null);
  const [savedWebsites, setSavedWebsites] = useState([
    { id: 1, title: 'متجر الإلكترونيات', template: 'متجر إلكتروني', date: '2023-06-22' },
    { id: 2, title: 'مدونتي الشخصية', template: 'مدونة شخصية', date: '2023-06-25' }
  ]);
  
  // Dashboard state
  const [usageStats, setUsageStats] = useState({
    apiCalls: { chatgpt: 45, deepseek: 23, minimax: 12 },
    tokensUsed: { chatgpt: 12500, deepseek: 8700, minimax: 3200 },
    websitesGenerated: 8,
    codeExecutions: 34
  });
  
  // Settings state
  const [settings, setSettings] = useState({
    apiKeys: { ...API_KEYS },
    theme: 'auto',
    language: 'ar',
    fontSize: 'medium',
    autoSave: true,
    voiceEnabled: true
  });

  // Refs
  const chatContainerRef = useRef(null);
  const fileInputRef = useRef(null);
  
  useEffect(() => {
    // Check system preference for dark mode
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      setDarkMode(true);
    }
    
    // Scroll chat to bottom when messages change
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }
  }, [conversations]);

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };

  const showNotification = (message, type = 'info', duration = 3000) => {
    setNotification({ message, type });
    setTimeout(() => setNotification(null), duration);
  };

  // API call to OpenAI
  const callOpenAI = async (messages) => {
    try {
      setLoading(true);
      setError(null);
      
      // In a real application, this would be an actual API call
      // const response = await fetch('https://api.openai.com/v1/chat/completions', {
      //   method: 'POST',
      //   headers: {
      //     'Content-Type': 'application/json',
      //     'Authorization': `Bearer ${settings.apiKeys.openai}`
      //   },
      //   body: JSON.stringify({
      //     model: 'gpt-4',
      //     messages: messages,
      //     temperature: 0.7
      //   })
      // });
      
      // if (!response.ok) throw new Error('فشل الاتصال بـ OpenAI API');
      // const data = await response.json();
      // return data.choices[0].message.content;
      
      // Simulating API response for demo
      await new Promise(resolve => setTimeout(resolve, 1000));
      return "هذه استجابة من نموذج ChatGPT. في التطبيق الحقيقي، سيتم استدعاء OpenAI API باستخدام المفتاح المخزن في إعدادات التطبيق. يمكنك تخصيص سلوك النموذج وإعداداته من خلال لوحة الإعدادات.";
    } catch (err) {
      setError(err.message || 'حدث خطأ أثناء الاتصال بـ OpenAI API');
      throw err;
    } finally {
      setLoading(false);
    }
  };

  // API call to DeepSeek
  const callDeepSeek = async (messages) => {
    try {
      setLoading(true);
      setError(null);
      
      // In a real application, this would be an actual API call
      // const response = await fetch('https://api.deepseek.com/v1/chat', {
      //   method: 'POST',
      //   headers: {
      //     'Content-Type': 'application/json',
      //     'Authorization': `Bearer ${settings.apiKeys.deepseek}`
      //   },
      //   body: JSON.stringify({
      //     messages: messages,
      //     model: 'deepseek-chat',
      //     temperature: 0.7
      //   })
      // });
      
      // if (!response.ok) throw new Error('فشل الاتصال بـ DeepSeek API');
      // const data = await response.json();
      // return data.response;
      
      // Simulating API response for demo
      await new Promise(resolve => setTimeout(resolve, 1200));
      return "هذه استجابة من نموذج DeepSeek. في التطبيق الحقيقي، سيتم استدعاء DeepSeek API باستخدام المفتاح المخزن في إعدادات التطبيق. نموذج DeepSeek يتميز بقدرات متقدمة في فهم اللغة الطبيعية والتعلم العميق.";
    } catch (err) {
      setError(err.message || 'حدث خطأ أثناء الاتصال بـ DeepSeek API');
      throw err;
    } finally {
      setLoading(false);
    }
  };

  // API call to MiniMax
  const callMiniMax = async (messages) => {
    try {
      setLoading(true);
      setError(null);
      
      // In a real application, this would be an actual API call
      // const response = await fetch('https://api.minimax.chat/v1/text/generation', {
      //   method: 'POST',
      //   headers: {
      //     'Content-Type': 'application/json',
      //     'Authorization': `Bearer ${settings.apiKeys.minimax}`
      //   },
      //   body: JSON.stringify({
      //     messages: messages,
      //     model: 'minimax-pro',
      //     temperature: 0.7
      //   })
      // });
      
      // if (!response.ok) throw new Error('فشل الاتصال بـ MiniMax API');
      // const data = await response.json();
      // return data.reply;
      
      // Simulating API response for demo
      await new Promise(resolve => setTimeout(resolve, 800));
      return "هذه استجابة من نموذج MiniMax. في التطبيق الحقيقي، سيتم استدعاء MiniMax API باستخدام المفتاح المخزن في إعدادات التطبيق. نموذج MiniMax يتميز بسرعة الاستجابة وكفاءة استخدام الموارد.";
    } catch (err) {
      setError(err.message || 'حدث خطأ أثناء الاتصال بـ MiniMax API');
      throw err;
    } finally {
      setLoading(false);
    }
  };

  const handleSendMessage = async () => {
    if (!prompt.trim()) return;
    
    const newMessage = { role: 'user', content: prompt };
    const updatedConversations = { ...conversations };
    updatedConversations[activeService] = [...updatedConversations[activeService], newMessage];
    setConversations(updatedConversations);
    setPrompt('');
    
    try {
      let response;
      if (activeService === 'chatgpt') {
        response = await callOpenAI(updatedConversations.chatgpt);
      } else if (activeService === 'deepseek') {
        response = await callDeepSeek(updatedConversations.deepseek);
      } else {
        response = await callMiniMax(updatedConversations.minimax);
      }
      
      const aiResponse = { role: 'system', content: response };
      updatedConversations[activeService] = [...updatedConversations[activeService], aiResponse];
      setConversations(updatedConversations);
      
      // Update usage stats
      const updatedStats = { ...usageStats };
      updatedStats.apiCalls[activeService] += 1;
      updatedStats.tokensUsed[activeService] += Math.floor(prompt.length * 1.3) + Math.floor(response.length * 1.3);
      setUsageStats(updatedStats);
      
      // Auto-save conversation if enabled
      if (settings.autoSave && updatedConversations[activeService].length > 3) {
        const title = updatedConversations[activeService][1].content.slice(0, 30) + '...';
        const newSavedConversation = {
          id: savedConversations.length + 1,
          title,
          service: activeService,
          date: new Date().toISOString().split('T')[0]
        };
        setSavedConversations([...savedConversations, newSavedConversation]);
        showNotification('تم حفظ المحادثة تلقائيًا', 'success');
      }
    } catch (err) {
      showNotification(`خطأ: ${err.message}`, 'error');
    }
  };

  const handleStartVoiceRecording = () => {
    if (!settings.voiceEnabled) {
      showNotification('الرجاء تمكين ميزة الصوت في الإعدادات أولاً', 'warning');
      return;
    }
    
    setIsRecording(true);
    // In a real application, this would use the Web Speech API
    showNotification('جاري الاستماع...', 'info');
    
    // Simulate voice recognition after 3 seconds
    setTimeout(() => {
      setPrompt(prompt + 'هذا نص تم التعرف عليه من الصوت ');
      setIsRecording(false);
      showNotification('تم التعرف على الصوت بنجاح', 'success');
    }, 3000);
  };

  const handleStopVoiceRecording = () => {
    setIsRecording(false);
    showNotification('تم إيقاف التسجيل الصوتي', 'info');
  };

  const handleToggleMute = () => {
    setIsMuted(!isMuted);
    showNotification(isMuted ? 'تم تشغيل الصوت' : 'تم كتم الصوت', 'info');
  };

  const handleRunCode = async () => {
    setLoading(true);
    setError(null);
    
    try {
      // In a real application, this would send the code to a secure execution environment
      // const response = await fetch('https://api.m1ai.com/execute-code', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({ code, language: codeLanguage })
      // });
      
      // if (!response.ok) throw new Error('فشل تنفيذ الكود');
      // const data = await response.json();
      // setCodeOutput(data.output);
      
      // Simulate code execution
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      // Update usage stats
      const updatedStats = { ...usageStats };
      updatedStats.codeExecutions += 1;
      setUsageStats(updatedStats);
      
      if (codeLanguage === 'javascript') {
        try {
          // Safely evaluate JavaScript in a controlled environment
          // This is just for demo purposes - in a real app, never eval user code directly
          const output = [];
          const mockConsole = {
            log: (...args) => output.push(args.join(' ')),
            error: (...args) => output.push(`Error: ${args.join(' ')}`),
            warn: (...args) => output.push(`Warning: ${args.join(' ')}`)
          };
          
          // Create a safe evaluation context
          const safeEval = new Function('console', `
            try {
              ${code}
              return { success: true, output: [] };
            } catch (error) {
              return { success: false, error: error.message };
            }
          `);
          
          const result = safeEval(mockConsole);
          
          if (result.success) {
            setCodeOutput(output.join('\n') || 'تم تنفيذ الكود بنجاح (بدون مخرجات)');
            showNotification('تم تنفيذ الكود بنجاح', 'success');
          } else {
            setCodeOutput(`خطأ: ${result.error}`);
            showNotification('حدث خطأ أثناء تنفيذ الكود', 'error');
          }
        } catch (err) {
          setCodeOutput(`خطأ في تنفيذ الكود: ${err.message}`);
          showNotification('حدث خطأ أثناء تنفيذ الكود', 'error');
        }
      } else if (codeLanguage === 'python') {
        setCodeOutput('مخرجات تنفيذ كود Python (محاكاة):\n>>> ' + code.split('\n')[0] + '\n' + (code.includes('print') ? 'مرحبًا بالعالم!' : 'تم تنفيذ الكود بنجاح'));
        showNotification('تم تنفيذ كود Python بنجاح', 'success');
      } else {
        setCodeOutput(`تم تنفيذ كود ${codeLanguage} بنجاح (محاكاة)`);
        showNotification(`تم تنفيذ كود ${codeLanguage} بنجاح`, 'success');
      }
    } catch (err) {
      setError(err.message || 'حدث خطأ أثناء تنفيذ الكود');
      setCodeOutput(`خطأ: ${err.message}`);
      showNotification('حدث خطأ أثناء تنفيذ الكود', 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleSaveCodeSnippet = () => {
    if (!code.trim()) {
      showNotification('لا يمكن حفظ مقتطف كود فارغ', 'warning');
      return;
    }
    
    const title = prompt('أدخل عنوانًا لمقتطف الكود:') || 'مقتطف كود بدون عنوان';
    const newSnippet = {
      id: savedSnippets.length + 1,
      title,
      language: codeLanguage,
      code
    };
    
    setSavedSnippets([...savedSnippets, newSnippet]);
    showNotification('تم حفظ مقتطف الكود بنجاح', 'success');
  };

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        setCode(e.target.result);
        showNotification(`تم تحميل الملف ${file.name} بنجاح`, 'success');
        
        // Try to detect language from file extension
        const extension = file.name.split('.').pop().toLowerCase();
        const languageMap = {
          'js': 'javascript',
          'py': 'python',
          'html': 'html',
          'css': 'css',
          'java': 'java',
          'cpp': 'cpp',
          'c': 'c',
          'php': 'php',
          'rb': 'ruby',
          'go': 'go',
          'rs': 'rust',
          'ts': 'typescript'
        };
        
        if (languageMap[extension]) {
          setCodeLanguage(languageMap[extension]);
        }
      } catch (err) {
        showNotification('فشل قراءة الملف', 'error');
      }
    };
    reader.readAsText(file);
  };

  const handleGenerateWebsite = async () => {
    if (!websiteDescription.trim() && !selectedTemplate) {
      showNotification('الرجاء إدخال وصف للموقع أو اختيار قالب', 'warning');
      return;
    }
    
    setLoading(true);
    setError(null);
    
    try {
      // In a real application, this would call an API to generate the website
      // const response = await fetch('https://api.m1ai.com/generate-website', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({ 
      //     description: websiteDescription,
      //     template: selectedTemplate ? selectedTemplate.id : null
      //   })
      // });
      
      // if (!response.ok) throw new Error('فشل إنشاء الموقع');
      // const data = await response.json();
      // setGeneratedWebsite(data.website);
      
      // Simulate website generation
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      // Update usage stats
      const updatedStats = { ...usageStats };
      updatedStats.websitesGenerated += 1;
      setUsageStats(updatedStats);
      
      // Generate HTML based on description or template
      let templateHTML = '';
      let templateCSS = '';
      
      if (selectedTemplate) {
        if (selectedTemplate.id === 1) { // E-commerce template
          templateHTML = generateEcommerceTemplate();
        } else if (selectedTemplate.id === 2) { // Blog template
          templateHTML = generateBlogTemplate();
        } else if (selectedTemplate.id === 3) { // Business template
          templateHTML = generateBusinessTemplate();
        } else if (selectedTemplate.id === 4) { // Education template
          templateHTML = generateEducationTemplate();
        }
      } else {
        // Generate based on description
        templateHTML = generateWebsiteFromDescription(websiteDescription);
      }
      
      setGeneratedWebsite({
        html: templateHTML,
        css: templateCSS,
        js: ''
      });
      
      showNotification('تم إنشاء الموقع بنجاح', 'success');
    } catch (err) {
      setError(err.message || 'حدث خطأ أثناء إنشاء الموقع');
      showNotification('حدث خطأ أثناء إنشاء الموقع', 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleSaveWebsite = () => {
    if (!generatedWebsite) {
      showNotification('لا يوجد موقع لحفظه', 'warning');
      return;
    }
    
    const title = prompt('أدخل عنوانًا للموقع:') || 'موقع بدون عنوان';
    const newWebsite = {
      id: savedWebsites.length + 1,
      title,
      template: selectedTemplate ? selectedTemplate.name : 'مخصص',
      date: new Date().toISOString().split('T')[0]
    };
    
    setSavedWebsites([...savedWebsites, newWebsite]);
    showNotification('تم حفظ الموقع بنجاح', 'success');
  };

  const handleDownloadWebsite = () => {
    if (!generatedWebsite) {
      showNotification('لا يوجد موقع لتنزيله', 'warning');
      return;
    }
    
    // In a real application, this would create a zip file with HTML, CSS, and JS files
    const blob = new Blob([generatedWebsite.html], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'website.html';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    
    showNotification('تم تنزيل الموقع بنجاح', 'success');
  };

  const handleUpdateSettings = (newSettings) => {
    setSettings({ ...settings, ...newSettings });
    showNotification('تم تحديث الإعدادات بنجاح', 'success');
    setShowSettings(false);
  };

  const handleLogout = () => {
    // In a real application, this would handle the logout process
    setIsAuthenticated(false);
    showNotification('تم تسجيل الخروج بنجاح', 'info');
  };

  // Website template generators
  const generateEcommerceTemplate = () => {
    return `<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>متجر إلكتروني</title>
  <style>
    :root {
      --primary-color: #5B21B6;
      --secondary-color: #0D9488;
      --accent-color: #F59E0B;
      --text-color: #1F2937;
      --light-bg: #F9FAFB;
      --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    body {
      font-family: 'Tajawal', sans-serif;
      margin: 0;
      padding: 0;
      color: var(--text-color);
      background-color: var(--light-bg);
    }
    
    header {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }
    
    nav ul {
      display: flex;
      list-style: none;
      gap: 1.5rem;
      margin: 0;
      padding: 0;
    }
    
    nav a {
      color: white;
      text-decoration: none;
      font-weight: 500;
      transition: opacity 0.3s;
    }
    
    nav a:hover {
      opacity: 0.8;
    }
    
    .hero {
      background-image: url('https://images.unsplash.com/photo-1607082350899-7e105aa886ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
      background-size: cover;
      background-position: center;
      height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      position: relative;
    }
    
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
    }
    
    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      padding: 2rem;
    }
    
    .hero h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    
    .hero p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }
    
    .btn {
      display: inline-block;
      padding: 0.8rem 1.5rem;
      background-color: var(--accent-color);
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 3rem 1rem;
    }
    
    .section-title {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 3rem;
      position: relative;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 3px;
      background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    }
    
    .products {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 2rem;
    }
    
    .product-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s;
    }
    
    .product-card:hover {
      transform: translateY(-5px);
    }
    
    .product-image {
      height: 200px;
      background-color: #f0f0f0;
      background-size: cover;
      background-position: center;
    }
    
    .product-info {
      padding: 1.5rem;
    }
    
    .product-title {
      font-size: 1.2rem;
      margin: 0 0 0.5rem;
    }
    
    .product-price {
      font-weight: bold;
      color: var(--primary-color);
      margin: 0 0 1rem;
    }
    
    .product-card .btn {
      width: 100%;
      text-align: center;
    }
    
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 4rem 0;
    }
    
    .feature-card {
      text-align: center;
      padding: 2rem;
    }
    
    .feature-icon {
      font-size: 2.5rem;
      color: var(--primary-color);
      margin-bottom: 1rem;
    }
    
    footer {
      background-color: #1F2937;
      color: white;
      padding: 3rem 2rem;
    }
    
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
    }
    
    .footer-column h3 {
      margin-top: 0;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
    }
    
    .footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .footer-column li {
      margin-bottom: 0.5rem;
    }
    
    .footer-column a {
      color: #D1D5DB;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .footer-column a:hover {
      color: white;
    }
    
    .copyright {
      text-align: center;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid #374151;
      font-size: 0.9rem;
      color: #D1D5DB;
    }
    
    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2rem;
      }
      
      nav {
        display: none;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">متجرنا</div>
    <nav>
      <ul>
        <li><a href="#">الرئيسية</a></li>
        <li><a href="#">المنتجات</a></li>
        <li><a href="#">العروض</a></li>
        <li><a href="#">من نحن</a></li>
        <li><a href="#">اتصل بنا</a></li>
      </ul>
    </nav>
  </header>
  
  <section class="hero">
    <div class="hero-content">
      <h1>تسوق بثقة مع أفضل المنتجات</h1>
      <p>اكتشف تشكيلة واسعة من المنتجات عالية الجودة بأسعار تنافسية</p>
      <a href="#" class="btn">تسوق الآن</a>
    </div>
  </section>
  
  <main>
    <h2 class="section-title">منتجات مميزة</h2>
    
    <div class="products">
      <div class="product-card">
        <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div>
        <div class="product-info">
          <h3 class="product-title">سماعات لاسلكية</h3>
          <p class="product-price">199 ريال</p>
          <a href="#" class="btn">أضف إلى السلة</a>
        </div>
      </div>
      
      <div class="product-card">
        <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1099&q=80');"></div>
        <div class="product-info">
          <h3 class="product-title">ساعة ذكية</h3>
          <p class="product-price">299 ريال</p>
          <a href="#" class="btn">أضف إلى السلة</a>
        </div>
      </div>
      
      <div class="product-card">
        <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80');"></div>
        <div class="product-info">
          <h3 class="product-title">حقيبة ظهر</h3>
          <p class="product-price">149 ريال</p>
          <a href="#" class="btn">أضف إلى السلة</a>
        </div>
      </div>
      
      <div class="product-card">
        <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80');"></div>
        <div class="product-info">
          <h3 class="product-title">كاميرا رقمية</h3>
          <p class="product-price">599 ريال</p>
          <a href="#" class="btn">أضف إلى السلة</a>
        </div>
      </div>
    </div>
    
    <div class="features">
      <div class="feature-card">
        <div class="feature-icon">🚚</div>
        <h3>شحن سريع</h3>
        <p>توصيل لجميع أنحاء المملكة خلال 2-3 أيام عمل</p>
      </div>
      
      <div class="feature-card">
        <div class="feature-icon">🔒</div>
        <h3>دفع آمن</h3>
        <p>طرق دفع متعددة وآمنة لراحتك</p>
      </div>
      
      <div class="feature-card">
        <div class="feature-icon">↩️</div>
        <h3>استرجاع سهل</h3>
        <p>استرجاع المنتجات خلال 14 يوم من الشراء</p>
      </div>
    </div>
  </main>
  
  <footer>
    <div class="footer-content">
      <div class="footer-column">
        <h3>متجرنا</h3>
        <ul>
          <li><a href="#">من نحن</a></li>
          <li><a href="#">فريق العمل</a></li>
          <li><a href="#">الوظائف</a></li>
          <li><a href="#">الشروط والأحكام</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>تسوق</h3>
        <ul>
          <li><a href="#">المنتجات الجديدة</a></li>
          <li><a href="#">العروض</a></li>
          <li><a href="#">الأكثر مبيعًا</a></li>
          <li><a href="#">تخفيضات</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>خدمة العملاء</h3>
        <ul>
          <li><a href="#">اتصل بنا</a></li>
          <li><a href="#">طرق الدفع</a></li>
          <li><a href="#">الشحن والتوصيل</a></li>
          <li><a href="#">سياسة الاسترجاع</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>تواصل معنا</h3>
        <ul>
          <li><a href="#">البريد الإلكتروني</a></li>
          <li><a href="#">واتساب</a></li>
          <li><a href="#">انستغرام</a></li>
          <li><a href="#">تويتر</a></li>
        </ul>
      </div>
    </div>
    
    <div class="copyright">
      © 2023 متجرنا. جميع الحقوق محفوظة.
    </div>
  </footer>
</body>
</html>`;
  };

  const generateBlogTemplate = () => {
    return `<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدونتي الشخصية</title>
  <style>
    :root {
      --primary-color: #5B21B6;
      --secondary-color: #0D9488;
      --accent-color: #F59E0B;
      --text-color: #1F2937;
      --light-bg: #F9FAFB;
      --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    body {
      font-family: 'Tajawal', sans-serif;
      margin: 0;
      padding: 0;
      color: var(--text-color);
      background-color: var(--light-bg);
      line-height: 1.6;
    }
    
    header {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }
    
    nav ul {
      display: flex;
      list-style: none;
      gap: 1.5rem;
      margin: 0;
      padding: 0;
    }
    
    nav a {
      color: white;
      text-decoration: none;
      font-weight: 500;
      transition: opacity 0.3s;
    }
    
    nav a:hover {
      opacity: 0.8;
    }
    
    .hero {
      background-image: url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');
      background-size: cover;
      background-position: center;
      height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      position: relative;
    }
    
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.6);
    }
    
    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      padding: 2rem;
    }
    
    .hero h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    
    .hero p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }
    
    .btn {
      display: inline-block;
      padding: 0.8rem 1.5rem;
      background-color: var(--accent-color);
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 3rem 1rem;
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 2rem;
    }
    
    .section-title {
      font-size: 2rem;
      margin-bottom: 2rem;
      position: relative;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      right: 0;
      width: 50px;
      height: 3px;
      background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    }
    
    .posts {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    
    .post-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s;
    }
    
    .post-card:hover {
      transform: translateY(-5px);
    }
    
    .post-image {
      height: 250px;
      background-color: #f0f0f0;
      background-size: cover;
      background-position: center;
    }
    
    .post-info {
      padding: 1.5rem;
    }
    
    .post-meta {
      display: flex;
      justify-content: space-between;
      color: #6B7280;
      font-size: 0.9rem;
      margin-bottom: 1rem;
    }
    
    .post-title {
      font-size: 1.5rem;
      margin: 0 0 1rem;
    }
    
    .post-excerpt {
      margin: 0 0 1.5rem;
      color: #4B5563;
    }
    
    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    
    .sidebar-section {
      background: white;
      border-radius: 8px;
      padding: 1.5rem;
      box-shadow: var(--card-shadow);
    }
    
    .sidebar-title {
      font-size: 1.2rem;
      margin-top: 0;
      margin-bottom: 1rem;
      position: relative;
    }
    
    .sidebar-title::after {
      content: '';
      position: absolute;
      bottom: -5px;
      right: 0;
      width: 30px;
      height: 2px;
      background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    }
    
    .categories {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .categories li {
      margin-bottom: 0.5rem;
    }
    
    .categories a {
      display: flex;
      justify-content: space-between;
      text-decoration: none;
      color: var(--text-color);
      transition: color 0.3s;
    }
    
    .categories a:hover {
      color: var(--primary-color);
    }
    
    .category-count {
      background-color: #E5E7EB;
      border-radius: 9999px;
      padding: 0.1rem 0.5rem;
      font-size: 0.8rem;
    }
    
    .popular-posts {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .popular-post {
      display: flex;
      margin-bottom: 1rem;
    }
    
    .popular-post-image {
      width: 60px;
      height: 60px;
      border-radius: 4px;
      background-color: #f0f0f0;
      background-size: cover;
      background-position: center;
      margin-left: 0.75rem;
    }
    
    .popular-post-info {
      flex: 1;
    }
    
    .popular-post-title {
      margin: 0 0 0.25rem;
      font-size: 0.95rem;
    }
    
    .popular-post-title a {
      text-decoration: none;
      color: var(--text-color);
      transition: color 0.3s;
    }
    
    .popular-post-title a:hover {
      color: var(--primary-color);
    }
    
    .popular-post-date {
      font-size: 0.8rem;
      color: #6B7280;
    }
    
    .search-form {
      display: flex;
    }
    
    .search-input {
      flex: 1;
      padding: 0.5rem 1rem;
      border: 1px solid #D1D5DB;
      border-radius: 5px 0 0 5px;
      font-family: inherit;
    }
    
    .search-button {
      padding: 0.5rem 1rem;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 0 5px 5px 0;
      cursor: pointer;
    }
    
    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    
    .tag {
      background-color: #E5E7EB;
      padding: 0.3rem 0.8rem;
      border-radius: 9999px;
      font-size: 0.8rem;
      text-decoration: none;
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
    }
    
    .tag:hover {
      background-color: var(--primary-color);
      color: white;
    }
    
    footer {
      background-color: #1F2937;
      color: white;
      padding: 3rem 2rem;
    }
    
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
    }
    
    .footer-column h3 {
      margin-top: 0;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
    }
    
    .footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .footer-column li {
      margin-bottom: 0.5rem;
    }
    
    .footer-column a {
      color: #D1D5DB;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .footer-column a:hover {
      color: white;
    }
    
    .copyright {
      text-align: center;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid #374151;
      font-size: 0.9rem;
      color: #D1D5DB;
    }
    
    @media (max-width: 768px) {
      main {
        grid-template-columns: 1fr;
      }
      
      .hero h1 {
        font-size: 2rem;
      }
      
      nav {
        display: none;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">مدونتي</div>
    <nav>
      <ul>
        <li><a href="#">الرئيسية</a></li>
        <li><a href="#">المقالات</a></li>
        <li><a href="#">التصنيفات</a></li>
        <li><a href="#">من أنا</a></li>
        <li><a href="#">اتصل بي</a></li>
      </ul>
    </nav>
  </header>
  
  <section class="hero">
    <div class="hero-content">
      <h1>مدونتي الشخصية</h1>
      <p>مساحة لمشاركة أفكاري وتجاربي في مجال التكنولوجيا والتطوير</p>
      <a href="#" class="btn">استكشف المقالات</a>
    </div>
  </section>
  
  <main>
    <div class="content">
      <h2 class="section-title">أحدث المقالات</h2>
      
      <div class="posts">
        <article class="post-card">
          <div class="post-image" style="background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1172&q=80');"></div>
          <div class="post-info">
            <div class="post-meta">
              <span>نُشر في 15 يونيو 2023</span>
              <span>تصنيف: تطوير الويب</span>
            </div>
            <h3 class="post-title">كيفية بناء موقع ويب متكامل باستخدام React</h3>
            <p class="post-excerpt">في هذا المقال، سنتعرف على كيفية بناء موقع ويب متكامل باستخدام مكتبة React.js، وسنتعلم كيفية إنشاء مكونات قابلة لإعادة الاستخدام وإدارة حالة التطبيق بشكل فعال.</p>
            <a href="#" class="btn">اقرأ المزيد</a>
          </div>
        </article>
        
        <article class="post-card">
          <div class="post-image" style="background-image: url('https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div>
          <div class="post-info">
            <div class="post-meta">
              <span>نُشر في 10 يونيو 2023</span>
              <span>تصنيف: الذكاء الاصطناعي</span>
            </div>
            <h3 class="post-title">مقدمة في تعلم الآلة: المفاهيم الأساسية والتطبيقات</h3>
            <p class="post-excerpt">يعد تعلم الآلة أحد أهم فروع الذكاء الاصطناعي، وفي هذا المقال سنستعرض المفاهيم الأساسية لتعلم الآلة وكيفية تطبيقها في مشاريع حقيقية.</p>
            <a href="#" class="btn">اقرأ المزيد</a>
          </div>
        </article>
        
        <article class="post-card">
          <div class="post-image" style="background-image: url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div>
          <div class="post-info">
            <div class="post-meta">
              <span>نُشر في 5 يونيو 2023</span>
              <span>تصنيف: البرمجة</span>
            </div>
            <h3 class="post-title">10 نصائح لتحسين مهاراتك البرمجية</h3>
            <p class="post-excerpt">تطوير مهاراتك البرمجية يتطلب الممارسة المستمرة والتعلم الدائم. في هذا المقال، سأشارك معك 10 نصائح فعالة ساعدتني في تحسين مهاراتي البرمجية.</p>
            <a href="#" class="btn">اقرأ المزيد</a>
          </div>
        </article>
      </div>
    </div>
    
    <aside class="sidebar">
      <div class="sidebar-section">
        <h3 class="sidebar-title">بحث</h3>
        <form class="search-form">
          <input type="text" class="search-input" placeholder="ابحث في المدونة...">
          <button type="submit" class="search-button">بحث</button>
        </form>
      </div>
      
      <div class="sidebar-section">
        <h3 class="sidebar-title">التصنيفات</h3>
        <ul class="categories">
          <li><a href="#">تطوير الويب <span class="category-count">12</span></a></li>
          <li><a href="#">الذكاء الاصطناعي <span class="category-count">8</span></a></li>
          <li><a href="#">البرمجة <span class="category-count">15</span></a></li>
          <li><a href="#">تطوير التطبيقات <span class="category-count">6</span></a></li>
          <li><a href="#">قواعد البيانات <span class="category-count">4</span></a></li>
        </ul>
      </div>
      
      <div class="sidebar-section">
        <h3 class="sidebar-title">المقالات الشائعة</h3>
        <ul class="popular-posts">
          <li class="popular-post">
            <div class="popular-post-image" style="background-image: url('https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div>
            <div class="popular-post-info">
              <h4 class="popular-post-title"><a href="#">مقدمة في تعلم الآلة</a></h4>
              <span class="popular-post-date">10 يونيو 2023</span>
            </div>
          </li>
          <li class="popular-post">
            <div class="popular-post-image" style="background-image: url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div>
            <div class="popular-post-info">
              <h4 class="popular-post-title"><a href="#">10 نصائح لتحسين مهاراتك البرمجية</a></h4>
              <span class="popular-post-date">5 يونيو 2023</span>
            </div>
          </li>
          <li class="popular-post">
            <div class="popular-post-image" style="background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1172&q=80');"></div>
            <div class="popular-post-info">
              <h4 class="popular-post-title"><a href="#">كيفية بناء موقع ويب متكامل</a></h4>
              <span class="popular-post-date">15 يونيو 2023</span>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="sidebar-section">
        <h3 class="sidebar-title">الوسوم</h3>
        <div class="tags">
          <a href="#" class="tag">JavaScript</a>
          <a href="#" class="tag">React</a>
          <a href="#" class="tag">Python</a>
          <a href="#" class="tag">تعلم الآلة</a>
          <a href="#" class="tag">تطوير الويب</a>
          <a href="#" class="tag">Node.js</a>
          <a href="#" class="tag">قواعد البيانات</a>
          <a href="#" class="tag">تجربة المستخدم</a>
          <a href="#" class="tag">تصميم المواقع</a>
        </div>
      </div>
    </aside>
  </main>
  
  <footer>
    <div class="footer-content">
      <div class="footer-column">
        <h3>عن المدونة</h3>
        <ul>
          <li><a href="#">من أنا</a></li>
          <li><a href="#">سياسة الخصوصية</a></li>
          <li><a href="#">شروط الاستخدام</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>التصنيفات</h3>
        <ul>
          <li><a href="#">تطوير الويب</a></li>
          <li><a href="#">الذكاء الاصطناعي</a></li>
          <li><a href="#">البرمجة</a></li>
          <li><a href="#">تطوير التطبيقات</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>روابط مفيدة</h3>
        <ul>
          <li><a href="#">المقالات الشائعة</a></li>
          <li><a href="#">أرشيف المدونة</a></li>
          <li><a href="#">خريطة الموقع</a></li>
          <li><a href="#">اتصل بي</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>تواصل معي</h3>
        <ul>
          <li><a href="#">البريد الإلكتروني</a></li>
          <li><a href="#">تويتر</a></li>
          <li><a href="#">لينكد إن</a></li>
          <li><a href="#">جيت هاب</a></li>
        </ul>
      </div>
    </div>
    
    <div class="copyright">
      © 2023 مدونتي. جميع الحقوق محفوظة.
    </div>
  </footer>
</body>
</html>`;
  };

  const generateBusinessTemplate = () => {
    return `<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>شركة التقنية المتطورة</title>
  <style>
    :root {
      --primary-color: #5B21B6;
      --secondary-color: #0D9488;
      --accent-color: #F59E0B;
      --text-color: #1F2937;
      --light-bg: #F9FAFB;
      --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    body {
      font-family: 'Tajawal', sans-serif;
      margin: 0;
      padding: 0;
      color: var(--text-color);
      background-color: var(--light-bg);
      line-height: 1.6;
    }
    
    header {
      background-color: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
    }
    
    .header-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      color: var(--primary-color);
    }
    
    nav ul {
      display: flex;
      list-style: none;
      gap: 1.5rem;
      margin: 0;
      padding: 0;
    }
    
    nav a {
      color: var(--text-color);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;
    }
    
    nav a:hover {
      color: var(--primary-color);
    }
    
    .btn {
      display: inline-block;
      padding: 0.8rem 1.5rem;
      background-color: var(--primary-color);
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    .btn-secondary {
      background-color: white;
      color: var(--primary-color);
      border: 2px solid var(--primary-color);
    }
    
    .hero {
      padding-top: 6rem;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding-bottom: 4rem;
    }
    
    .hero-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: center;
    }
    
    .hero-content h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      line-height: 1.2;
    }
    
    .hero-content p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.9;
    }
    
    .hero-image {
      text-align: center;
    }
    
    .hero-image img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
    
    .section {
      padding: 5rem 2rem;
    }
    
    .section-container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .section-title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    
    .section-subtitle {
      text-align: center;
      font-size: 1.2rem;
      color: #6B7280;
      margin-bottom: 3rem;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }
    
    .service-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s;
      padding: 2rem;
      text-align: center;
    }
    
    .service-card:hover {
      transform: translateY(-5px);
    }
    
    .service-icon {
      font-size: 3rem;
      color: var(--primary-color);
      margin-bottom: 1.5rem;
    }
    
    .service-title {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    
    .about-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    
    .about-image img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
    }
    
    .about-content h2 {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
    }
    
    .stats {
      background-color: var(--primary-color);
      color: white;
    }
    
    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-number {
      font-size: 3rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }
    
    .stat-label {
      font-size: 1.2rem;
      opacity: 0.9;
    }
    
    .testimonials-container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .testimonial {
      background: white;
      border-radius: 8px;
      padding: 2rem;
      box-shadow: var(--card-shadow);
      margin-bottom: 2rem;
    }
    
    .testimonial-content {
      font-size: 1.1rem;
      font-style: italic;
      margin-bottom: 1.5rem;
    }
    
    .testimonial-author {
      display: flex;
      align-items: center;
    }
    
    .author-image {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #f0f0f0;
      background-size: cover;
      background-position: center;
      margin-left: 1rem;
    }
    
    .author-info h4 {
      margin: 0 0 0.25rem;
    }
    
    .author-info p {
      margin: 0;
      color: #6B7280;
    }
    
    .cta {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      text-align: center;
    }
    
    .cta-container {
      max-width: 700px;
      margin: 0 auto;
    }
    
    .cta h2 {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
    }
    
    .cta p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.9;
    }
    
    .contact-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    
    .form-group {
      margin-bottom: 1.5rem;
    }
    
    .form-group.full-width {
      grid-column: span 2;
    }
    
    .form-label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
    }
    
    .form-input,
    .form-textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #D1D5DB;
      border-radius: 5px;
      font-family: inherit;
      font-size: 1rem;
    }
    
    .form-textarea {
      min-height: 150px;
      resize: vertical;
    }
    
    footer {
      background-color: #1F2937;
      color: white;
      padding: 3rem 2rem;
    }
    
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
    }
    
    .footer-column h3 {
      margin-top: 0;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
    }
    
    .footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .footer-column li {
      margin-bottom: 0.5rem;
    }
    
    .footer-column a {
      color: #D1D5DB;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .footer-column a:hover {
      color: white;
    }
    
    .social-links {
      display: flex;
      gap: 1rem;
    }
    
    .social-link {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: #374151;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s;
    }
    
    .social-link:hover {
      background-color: var(--primary-color);
    }
    
    .copyright {
      text-align: center;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid #374151;
      font-size: 0.9rem;
      color: #D1D5DB;
    }
    
    @media (max-width: 768px) {
      .hero-container,
      .about-container {
        grid-template-columns: 1fr;
      }
      
      .hero-image {
        order: -1;
      }
      
      .hero-content h1 {
        font-size: 2rem;
      }
      
      .section-title {
        font-size: 2rem;
      }
      
      .contact-form {
        grid-template-columns: 1fr;
      }
      
      .form-group.full-width {
        grid-column: span 1;
      }
      
      nav {
        display: none;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="header-container">
      <div class="logo">شركة التقنية</div>
      <nav>
        <ul>
          <li><a href="#home">الرئيسية</a></li>
          <li><a href="#services">خدماتنا</a></li>
          <li><a href="#about">من نحن</a></li>
          <li><a href="#testimonials">آراء العملاء</a></li>
          <li><a href="#contact">اتصل بنا</a></li>
        </ul>
      </nav>
    </div>
  </header>
  
  <section id="home" class="hero">
    <div class="hero-container">
      <div class="hero-content">
        <h1>حلول تقنية مبتكرة لنمو أعمالك</h1>
        <p>نقدم خدمات تكنولوجية متكاملة تساعد الشركات على النمو والتطور في العصر الرقمي</p>
        <div class="hero-buttons">
          <a href="#contact" class="btn">تواصل معنا</a>
          <a href="#services" class="btn btn-secondary">استكشف خدماتنا</a>
        </div>
      </div>
      <div class="hero-image">
        <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="فريق العمل">
      </div>
    </div>
  </section>
  
  <section id="services" class="section">
    <div class="section-container">
      <h2 class="section-title">خدماتنا</h2>
      <p class="section-subtitle">نقدم مجموعة متنوعة من الخدمات التقنية المتكاملة لتلبية احتياجات عملائنا</p>
      
      <div class="services">
        <div class="service-card">
          <div class="service-icon">💻</div>
          <h3 class="service-title">تطوير المواقع والتطبيقات</h3>
          <p>نقوم بتصميم وتطوير مواقع الويب وتطبيقات الجوال بأحدث التقنيات لتوفير تجربة مستخدم مميزة.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">🔍</div>
          <h3 class="service-title">تحسين محركات البحث</h3>
          <p>نساعدك على تحسين ظهور موقعك في نتائج محركات البحث وزيادة الزيارات المستهدفة.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">📊</div>
          <h3 class="service-title">التسويق الرقمي</h3>
          <p>نقدم استراتيجيات تسويقية متكاملة عبر مختلف المنصات الرقمية لزيادة الوعي بعلامتك التجارية.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">🛡️</div>
          <h3 class="service-title">أمن المعلومات</h3>
          <p>نوفر حلول أمنية متطورة لحماية بياناتك ومعلوماتك من التهديدات الإلكترونية.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">☁️</div>
          <h3 class="service-title">خدمات الحوسبة السحابية</h3>
          <p>نساعدك على الانتقال إلى السحابة وإدارة بنيتك التحتية بكفاءة وأمان.</p>
        </div>
        
        <div class="service-card">
          <div class="service-icon">📱</div>
          <h3 class="service-title">استشارات تقنية</h3>
          <p>نقدم استشارات متخصصة لمساعدتك على اتخاذ القرارات التقنية الصحيحة لنمو أعمالك.</p>
        </div>
      </div>
    </div>
  </section>
  
  <section id="about" class="section">
    <div class="section-container about-container">
      <div class="about-image">
        <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="فريق العمل">
      </div>
      <div class="about-content">
        <h2>من نحن</h2>
        <p>شركة التقنية المتطورة هي شركة رائدة في مجال تقديم الحلول التقنية المتكاملة للشركات والمؤسسات. تأسست الشركة عام 2010 على يد مجموعة من الخبراء في مجال تكنولوجيا المعلومات.</p>
        <p>نؤمن بأن التكنولوجيا هي المحرك الأساسي للتطور والنمو في عصرنا الحالي، ولذلك نسعى دائمًا لتقديم أحدث الحلول التقنية التي تساعد عملائنا على تحقيق أهدافهم وتطوير أعمالهم.</p>
        <p>يتكون فريقنا من نخبة من المتخصصين في مختلف المجالات التقنية، ونحرص على التطوير المستمر لمهاراتنا ومعارفنا لمواكبة أحدث التطورات في عالم التكنولوجيا.</p>
      </div>
    </div>
  </section>
  
  <section class="section stats">
    <div class="section-container">
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-number">500+</div>
          <div class="stat-label">عميل راضٍ</div>
        </div>
        
        <div class="stat-item">
          <div class="stat-number">1000+</div>
          <div class="stat-label">مشروع مكتمل</div>
        </div>
        
        <div class="stat-item">
          <div class="stat-number">50+</div>
          <div class="stat-label">خبير تقني</div>
        </div>
        
        <div class="stat-item">
          <div class="stat-number">10+</div>
          <div class="stat-label">سنوات خبرة</div>
        </div>
      </div>
    </div>
  </section>
  
  <section id="testimonials" class="section">
    <div class="section-container">
      <h2 class="section-title">آراء العملاء</h2>
      <p class="section-subtitle">نفخر بثقة عملائنا وشهاداتهم حول خدماتنا</p>
      
      <div class="testimonials-container">
        <div class="testimonial">
          <p class="testimonial-content">"تعاملنا مع شركة التقنية المتطورة كان تجربة رائعة. قاموا بتطوير موقعنا الإلكتروني بشكل احترافي وبجودة عالية، مما ساهم في زيادة مبيعاتنا بنسبة 40% خلال الأشهر الستة الأولى."</p>
          <div class="testimonial-author">
            <div class="author-image" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg');"></div>
            <div class="author-info">
              <h4>أحمد محمد</h4>
              <p>المدير التنفيذي، شركة الأفق للتجارة</p>
            </div>
          </div>
        </div>
        
        <div class="testimonial">
          <p class="testimonial-content">"استفدنا كثيرًا من خدمات التسويق الرقمي التي قدمتها شركة التقنية المتطورة. فريق العمل محترف ومتعاون، والنتائج كانت أفضل مما توقعنا."</p>
          <div class="testimonial-author">
            <div class="author-image" style="background-image: url('https://randomuser.me/api/portraits/women/44.jpg');"></div>
            <div class="author-info">
              <h4>سارة عبدالله</h4>
              <p>مديرة التسويق، مؤسسة النور التعليمية</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section id="contact" class="section cta">
    <div class="section-container cta-container">
      <h2>هل أنت مستعد لتطوير أعمالك؟</h2>
      <p>تواصل معنا اليوم للحصول على استشارة مجانية ومعرفة كيف يمكننا مساعدتك</p>
      
      <form class="contact-form">
        <div class="form-group">
          <label for="name" class="form-label">الاسم</label>
          <input type="text" id="name" class="form-input" required>
        </div>
        
        <div class="form-group">
          <label for="email" class="form-label">البريد الإلكتروني</label>
          <input type="email" id="email" class="form-input" required>
        </div>
        
        <div class="form-group">
          <label for="phone" class="form-label">رقم الهاتف</label>
          <input type="tel" id="phone" class="form-input">
        </div>
        
        <div class="form-group">
          <label for="company" class="form-label">الشركة</label>
          <input type="text" id="company" class="form-input">
        </div>
        
        <div class="form-group full-width">
          <label for="message" class="form-label">الرسالة</label>
          <textarea id="message" class="form-textarea" required></textarea>
        </div>
        
        <div class="form-group full-width">
          <button type="submit" class="btn">إرسال الرسالة</button>
        </div>
      </form>
    </div>
  </section>
  
  <footer>
    <div class="footer-content">
      <div class="footer-column">
        <h3>شركة التقنية</h3>
        <p>نقدم حلول تقنية مبتكرة لمساعدة الشركات على النمو والتطور في العصر الرقمي.</p>
        <div class="social-links">
          <a href="#" class="social-link">F</a>
          <a href="#" class="social-link">T</a>
          <a href="#" class="social-link">L</a>
          <a href="#" class="social-link">I</a>
        </div>
      </div>
      
      <div class="footer-column">
        <h3>خدماتنا</h3>
        <ul>
          <li><a href="#">تطوير المواقع والتطبيقات</a></li>
          <li><a href="#">تحسين محركات البحث</a></li>
          <li><a href="#">التسويق الرقمي</a></li>
          <li><a href="#">أمن المعلومات</a></li>
          <li><a href="#">خدمات الحوسبة السحابية</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>روابط سريعة</h3>
        <ul>
          <li><a href="#home">الرئيسية</a></li>
          <li><a href="#services">خدماتنا</a></li>
          <li><a href="#about">من نحن</a></li>
          <li><a href="#testimonials">آراء العملاء</a></li>
          <li><a href="#contact">اتصل بنا</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>تواصل معنا</h3>
        <ul>
          <li>العنوان: شارع الملك فهد، الرياض، المملكة العربية السعودية</li>
          <li>الهاتف: +966 12 345 6789</li>
          <li>البريد الإلكتروني: info@techcompany.com</li>
        </ul>
      </div>
    </div>
    
    <div class="copyright">
      © 2023 شركة التقنية المتطورة. جميع الحقوق محفوظة.
    </div>
  </footer>
</body>
</html>`;
  };

  const generateEducationTemplate = () => {
    return `<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>أكاديمية التعلم الذكي</title>
  <style>
    :root {
      --primary-color: #5B21B6;
      --secondary-color: #0D9488;
      --accent-color: #F59E0B;
      --text-color: #1F2937;
      --light-bg: #F9FAFB;
      --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    body {
      font-family: 'Tajawal', sans-serif;
      margin: 0;
      padding: 0;
      color: var(--text-color);
      background-color: var(--light-bg);
      line-height: 1.6;
    }
    
    header {
      background-color: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
    }
    
    .header-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      color: var(--primary-color);
    }
    
    nav ul {
      display: flex;
      list-style: none;
      gap: 1.5rem;
      margin: 0;
      padding: 0;
    }
    
    nav a {
      color: var(--text-color);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;
    }
    
    nav a:hover {
      color: var(--primary-color);
    }
    
    .btn {
      display: inline-block;
      padding: 0.8rem 1.5rem;
      background-color: var(--primary-color);
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: transform 0.3s, box-shadow 0.3s;
      text-align: center;
    }
    
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    .btn-secondary {
      background-color: white;
      color: var(--primary-color);
      border: 2px solid var(--primary-color);
    }
    
    .hero {
      padding-top: 6rem;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding-bottom: 4rem;
    }
    
    .hero-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: center;
    }
    
    .hero-content h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      line-height: 1.2;
    }
    
    .hero-content p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.9;
    }
    
    .hero-image {
      text-align: center;
    }
    
    .hero-image img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
    
    .section {
      padding: 5rem 2rem;
    }
    
    .section-container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .section-title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    
    .section-subtitle {
      text-align: center;
      font-size: 1.2rem;
      color: #6B7280;
      margin-bottom: 3rem;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .courses {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }
    
    .course-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s;
    }
    
    .course-card:hover {
      transform: translateY(-5px);
    }
    
    .course-image {
      height: 200px;
      background-color: #f0f0f0;
      background-size: cover;
      background-position: center;
    }
    
    .course-info {
      padding: 1.5rem;
    }
    
    .course-category {
      display: inline-block;
      background-color: #E5E7EB;
      color: var(--text-color);
      padding: 0.3rem 0.8rem;
      border-radius: 9999px;
      font-size: 0.8rem;
      margin-bottom: 1rem;
    }
    
    .course-title {
      font-size: 1.5rem;
      margin: 0 0 1rem;
    }
    
    .course-details {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      color: #6B7280;
      font-size: 0.9rem;
    }
    
    .course-price {
      font-weight: bold;
      color: var(--primary-color);
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
    }
    
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 4rem 0;
    }
    
    .feature-card {
      text-align: center;
      padding: 2rem;
      background: white;
      border-radius: 8px;
      box-shadow: var(--card-shadow);
    }
    
    .feature-icon {
      font-size: 2.5rem;
      color: var(--primary-color);
      margin-bottom: 1rem;
    }
    
    .instructors {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }
    
    .instructor-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      text-align: center;
    }
    
    .instructor-image {
      height: 250px;
      background-color: #f0f0f0;
      background-size: cover;
      background-position: center;
    }
    
    .instructor-info {
      padding: 1.5rem;
    }
    
    .instructor-name {
      font-size: 1.5rem;
      margin: 0 0 0.5rem;
    }
    
    .instructor-title {
      color: #6B7280;
      margin-bottom: 1rem;
    }
    
    .social-links {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 1rem;
    }
    
    .social-link {
      display: inline-block;
      width: 36px;
      height: 36px;
      background-color: #E5E7EB;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s;
      text-decoration: none;
      color: var(--text-color);
    }
    
    .social-link:hover {
      background-color: var(--primary-color);
      color: white;
    }
    
    .testimonials {
      background-color: white;
    }
    
    .testimonials-container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .testimonial {
      background: var(--light-bg);
      border-radius: 8px;
      padding: 2rem;
      box-shadow: var(--card-shadow);
      margin-bottom: 2rem;
    }
    
    .testimonial-content {
      font-size: 1.1rem;
      font-style: italic;
      margin-bottom: 1.5rem;
    }
    
    .testimonial-author {
      display: flex;
      align-items: center;
    }
    
    .author-image {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #f0f0f0;
      background-size: cover;
      background-position: center;
      margin-left: 1rem;
    }
    
    .author-info h4 {
      margin: 0 0 0.25rem;
    }
    
    .author-info p {
      margin: 0;
      color: #6B7280;
    }
    
    .stats {
      background-color: var(--primary-color);
      color: white;
    }
    
    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-number {
      font-size: 3rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }
    
    .stat-label {
      font-size: 1.2rem;
      opacity: 0.9;
    }
    
    .cta {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      text-align: center;
    }
    
    .cta-container {
      max-width: 700px;
      margin: 0 auto;
    }
    
    .cta h2 {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
    }
    
    .cta p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.9;
    }
    
    .newsletter-form {
      display: flex;
      max-width: 500px;
      margin: 0 auto;
    }
    
    .newsletter-input {
      flex: 1;
      padding: 0.75rem 1rem;
      border: none;
      border-radius: 5px 0 0 5px;
      font-family: inherit;
      font-size: 1rem;
    }
    
    .newsletter-button {
      padding: 0 1.5rem;
      background-color: var(--accent-color);
      color: white;
      border: none;
      border-radius: 0 5px 5px 0;
      font-weight: bold;
      cursor: pointer;
    }
    
    footer {
      background-color: #1F2937;
      color: white;
      padding: 3rem 2rem;
    }
    
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
    }
    
    .footer-column h3 {
      margin-top: 0;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
    }
    
    .footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .footer-column li {
      margin-bottom: 0.5rem;
    }
    
    .footer-column a {
      color: #D1D5DB;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .footer-column a:hover {
      color: white;
    }
    
    .copyright {
      text-align: center;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid #374151;
      font-size: 0.9rem;
      color: #D1D5DB;
    }
    
    @media (max-width: 768px) {
      .hero-container {
        grid-template-columns: 1fr;
      }
      
      .hero-image {
        order: -1;
      }
      
      .hero-content h1 {
        font-size: 2rem;
      }
      
      .section-title {
        font-size: 2rem;
      }
      
      .newsletter-form {
        flex-direction: column;
      }
      
      .newsletter-input {
        border-radius: 5px;
        margin-bottom: 1rem;
      }
      
      .newsletter-button {
        border-radius: 5px;
        padding: 0.75rem 1rem;
      }
      
      nav {
        display: none;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="header-container">
      <div class="logo">أكاديمية التعلم</div>
      <nav>
        <ul>
          <li><a href="#home">الرئيسية</a></li>
          <li><a href="#courses">الدورات</a></li>
          <li><a href="#instructors">المدربون</a></li>
          <li><a href="#testimonials">آراء الطلاب</a></li>
          <li><a href="#contact">اتصل بنا</a></li>
        </ul>
      </nav>
    </div>
  </header>
  
  <section id="home" class="hero">
    <div class="hero-container">
      <div class="hero-content">
        <h1>تعلم مهارات المستقبل مع خبراء متميزين</h1>
        <p>منصة تعليمية متكاملة تقدم دورات احترافية في مختلف المجالات التقنية والإدارية</p>
        <div class="hero-buttons">
          <a href="#courses" class="btn">استكشف الدورات</a>
          <a href="#about" class="btn btn-secondary">تعرف علينا</a>
        </div>
      </div>
      <div class="hero-image">
        <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="طلاب يتعلمون">
      </div>
    </div>
  </section>
  
  <section id="courses" class="section">
    <div class="section-container">
      <h2 class="section-title">دوراتنا المميزة</h2>
      <p class="section-subtitle">اختر من بين مجموعة متنوعة من الدورات التعليمية عالية الجودة</p>
      
      <div class="courses">
        <div class="course-card">
          <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1172&q=80');"></div>
          <div class="course-info">
            <span class="course-category">تطوير الويب</span>
            <h3 class="course-title">تطوير الويب الشامل من الصفر إلى الاحتراف</h3>
            <div class="course-details">
              <span>12 أسبوع</span>
              <span>36 درس</span>
              <span>مبتدئ</span>
            </div>
            <div class="course-price">499 ريال</div>
            <a href="#" class="btn" style="width: 100%;">التسجيل الآن</a>
          </div>
        </div>
        
        <div class="course-card">
          <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div>
          <div class="course-info">
            <span class="course-category">الذكاء الاصطناعي</span>
            <h3 class="course-title">أساسيات الذكاء الاصطناعي وتعلم الآلة</h3>
            <div class="course-details">
              <span>8 أسابيع</span>
              <span>24 درس</span>
              <span>متوسط</span>
            </div>
            <div class="course-price">699 ريال</div>
            <a href="#" class="btn" style="width: 100%;">التسجيل الآن</a>
          </div>
        </div>
        
        <div class="course-card">
          <div class="course-image" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div>
          <div class="course-info">
            <span class="course-category">إدارة الأعمال</span>
            <h3 class="course-title">إدارة المشاريع الاحترافية PMP</h3>
            <div class="course-details">
              <span>10 أسابيع</span>
              <span>30 درس</span>
              <span>متقدم</span>
            </div>
            <div class="course-price">899 ريال</div>
            <a href="#" class="btn" style="width: 100%;">التسجيل الآن</a>
          </div>
        </div>
      </div>
      
      <div style="text-align: center; margin-top: 3rem;">
        <a href="#" class="btn btn-secondary">عرض جميع الدورات</a>
      </div>
    </div>
  </section>
  
  <section id="features" class="section">
    <div class="section-container">
      <h2 class="section-title">لماذا تختار أكاديميتنا؟</h2>
      <p class="section-subtitle">نقدم تجربة تعليمية فريدة ومميزة لطلابنا</p>
      
      <div class="features">
        <div class="feature-card">
          <div class="feature-icon">👨‍🏫</div>
          <h3>مدربون خبراء</h3>
          <p>يقدم الدورات نخبة من المدربين المتخصصين ذوي الخبرة العملية الواسعة في مجالاتهم.</p>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">🎓</div>
          <h3>شهادات معتمدة</h3>
          <p>احصل على شهادات معتمدة تعزز من سيرتك الذاتية وتزيد من فرصك الوظيفية.</p>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">💻</div>
          <h3>تعلم تفاعلي</h3>
          <p>منصة تعليمية تفاعلية تتيح لك التعلم بأسلوب عملي من خلال المشاريع والتطبيقات.</p>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">🔄</div>
          <h3>محتوى متجدد</h3>
          <p>نحرص على تحديث محتوى الدورات باستمرار لمواكبة أحدث التطورات في المجالات المختلفة.</p>
        </div>
      </div>
    </div>
  </section>
  
  <section id="instructors" class="section">
    <div class="section-container">
      <h2 class="section-title">فريق التدريب</h2>
      <p class="section-subtitle">تعرف على نخبة المدربين المتميزين في أكاديميتنا</p>
      
      <div class="instructors">
        <div class="instructor-card">
          <div class="instructor-image" style="background-image: url('https://randomuser.me/api/portraits/men/32.jpg');"></div>
          <div class="instructor-info">
            <h3 class="instructor-name">د. أحمد محمد</h3>
            <p class="instructor-title">خبير تطوير الويب</p>
            <p>مطور ويب محترف مع خبرة أكثر من 10 سنوات في تطوير تطبيقات الويب وتدريس البرمجة.</p>
            <div class="social-links">
              <a href="#" class="social-link">F</a>
              <a href="#" class="social-link">T</a>
              <a href="#" class="social-link">L</a>
            </div>
          </div>
        </div>
        
        <div class="instructor-card">
          <div class="instructor-image" style="background-image: url('https://randomuser.me/api/portraits/women/44.jpg');"></div>
          <div class="instructor-info">
            <h3 class="instructor-name">م. سارة عبدالله</h3>
            <p class="instructor-title">متخصصة في الذكاء الاصطناعي</p>
            <p>باحثة ومتخصصة في مجال الذكاء الاصطناعي وتعلم الآلة مع خبرة في العديد من المشاريع البحثية.</p>
            <div class="social-links">
              <a href="#" class="social-link">F</a>
              <a href="#" class="social-link">T</a>
              <a href="#" class="social-link">L</a>
            </div>
          </div>
        </div>
        
        <div class="instructor-card">
          <div class="instructor-image" style="background-image: url('https://randomuser.me/api/portraits/men/67.jpg');"></div>
          <div class="instructor-info">
            <h3 class="instructor-name">أ. خالد العمري</h3>
            <p class="instructor-title">خبير إدارة المشاريع</p>
            <p>مستشار ومدرب معتمد في إدارة المشاريع مع خبرة أكثر من 15 عامًا في قيادة المشاريع الكبرى.</p>
            <div class="social-links">
              <a href="#" class="social-link">F</a>
              <a href="#" class="social-link">T</a>
              <a href="#" class="social-link">L</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section id="testimonials" class="section testimonials">
    <div class="section-container">
      <h2 class="section-title">آراء طلابنا</h2>
      <p class="section-subtitle">اطلع على تجارب طلابنا السابقين مع دوراتنا التعليمية</p>
      
      <div class="testimonials-container">
        <div class="testimonial">
          <p class="testimonial-content">"استفدت كثيرًا من دورة تطوير الويب الشامل. المحتوى كان منظم بشكل رائع والمدرب كان متمكن جدًا من المادة العلمية. أنصح بشدة بهذه الدورة لكل من يرغب في تعلم تطوير الويب."</p>
          <div class="testimonial-author">
            <div class="author-image" style="background-image: url('https://randomuser.me/api/portraits/men/92.jpg');"></div>
            <div class="author-info">
              <h4>محمد السالم</h4>
              <p>مطور ويب</p>
            </div>
          </div>
        </div>
        
        <div class="testimonial">
          <p class="testimonial-content">"دورة الذكاء الاصطناعي كانت تجربة تعليمية مميزة. المفاهيم المعقدة تم شرحها بطريقة مبسطة وسهلة الفهم، والتطبيقات العملية ساعدتني على ترسيخ المعلومات."</p>
          <div class="testimonial-author">
            <div class="author-image" style="background-image: url('https://randomuser.me/api/portraits/women/65.jpg');"></div>
            <div class="author-info">
              <h4>نورة الأحمد</h4>
              <p>مهندسة برمجيات</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section class="section stats">
    <div class="section-container">
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-number">10,000+</div>
          <div class="stat-label">طالب</div>
        </div>
        
        <div class="stat-item">
          <div class="stat-number">50+</div>
          <div class="stat-label">دورة تدريبية</div>
        </div>
        
        <div class="stat-item">
          <div class="stat-number">25+</div>
          <div class="stat-label">مدرب خبير</div>
        </div>
        
        <div class="stat-item">
          <div class="stat-number">95%</div>
          <div class="stat-label">نسبة رضا الطلاب</div>
        </div>
      </div>
    </div>
  </section>
  
  <section id="contact" class="section cta">
    <div class="section-container cta-container">
      <h2>ابدأ رحلة التعلم اليوم</h2>
      <p>اشترك في نشرتنا البريدية للحصول على آخر الأخبار والعروض الخاصة</p>
      
      <form class="newsletter-form">
        <input type="email" class="newsletter-input" placeholder="أدخل بريدك الإلكتروني" required>
        <button type="submit" class="newsletter-button">اشترك الآن</button>
      </form>
    </div>
  </section>
  
  <footer>
    <div class="footer-content">
      <div class="footer-column">
        <h3>أكاديمية التعلم</h3>
        <p>منصة تعليمية متكاملة تقدم دورات احترافية في مختلف المجالات التقنية والإدارية.</p>
        <div class="social-links">
          <a href="#" class="social-link">F</a>
          <a href="#" class="social-link">T</a>
          <a href="#" class="social-link">L</a>
          <a href="#" class="social-link">I</a>
        </div>
      </div>
      
      <div class="footer-column">
        <h3>الدورات</h3>
        <ul>
          <li><a href="#">تطوير الويب</a></li>
          <li><a href="#">الذكاء الاصطناعي</a></li>
          <li><a href="#">إدارة المشاريع</a></li>
          <li><a href="#">التسويق الرقمي</a></li>
          <li><a href="#">تطوير التطبيقات</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>روابط سريعة</h3>
        <ul>
          <li><a href="#home">الرئيسية</a></li>
          <li><a href="#courses">الدورات</a></li>
          <li><a href="#instructors">المدربون</a></li>
          <li><a href="#testimonials">آراء الطلاب</a></li>
          <li><a href="#contact">اتصل بنا</a></li>
        </ul>
      </div>
      
      <div class="footer-column">
        <h3>تواصل معنا</h3>
        <ul>
          <li```html
<ant_artifact identifier="M1AIWebsiteModule" title="M1 AI Website React Component">
import React, { useState, useEffect } from 'react';
import { Terminal, Code, Layout, Cpu, Layers, Moon, Sun, ChevronRight, ChevronLeft, Send, Play, Save, Download, Copy, X } from 'lucide-react';

export default function M1AIWebsite() {
  const [darkMode, setDarkMode] = useState(false);
  const [activeService, setActiveService] = useState('chatgpt');
  const [activeTool, setActiveTool] = useState('chat');
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [prompt, setPrompt] = useState('');
  const [conversation, setConversation] = useState([
    { role: 'system', content: 'مرحبًا بك في M1 AI. كيف يمكنني مساعدتك اليوم؟' }
  ]);
  const [code, setCode] = useState('// اكتب الكود الخاص بك هنا');
  const [codeOutput, setCodeOutput] = useState('');
  const [websiteDescription, setWebsiteDescription] = useState('');
  const [generatedWebsite, setGeneratedWebsite] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // Check system preference for dark mode
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      setDarkMode(true);
    }
  }, []);

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };

  const handleSendMessage = async () => {
    if (!prompt.trim()) return;
    
    const newMessage = { role: 'user', content: prompt };
    setConversation([...conversation, newMessage]);
    setPrompt('');
    setLoading(true);
    
    // Simulate AI response
    setTimeout(() => {
      let response;
      if (activeService === 'chatgpt') {
        response = { role: 'system', content: 'هذه محاكاة لاستجابة ChatGPT. في التطبيق الحقيقي، سيتم استدعاء واجهة برمجة التطبيقات الفعلية.' };
      } else if (activeService === 'deepseek') {
        response = { role: 'system', content: 'هذه محاكاة لاستجابة DeepSeek. في التطبيق الحقيقي، سيتم استدعاء واجهة برمجة التطبيقات الفعلية.' };
      } else {
        response = { role: 'system', content: 'هذه محاكاة لاستجابة MiniMax. في التطبيق الحقيقي، سيتم استدعاء واجهة برمجة التطبيقات الفعلية.' };
      }
      setConversation(prev => [...prev, response]);
      setLoading(false);
    }, 1000);
  };

  const handleRunCode = () => {
    setLoading(true);
    // Simulate code execution
    setTimeout(() => {
      setCodeOutput('تم تنفيذ الكود بنجاح!\n\nملاحظة: هذه محاكاة لتنفيذ الكود. في التطبيق الحقيقي، سيتم تنفيذ الكود فعليًا.');
      setLoading(false);
    }, 1500);
  };

  const handleGenerateWebsite = () => {
    if (!websiteDescription.trim()) return;
    
    setLoading(true);
    // Simulate website generation
    setTimeout(() => {
      setGeneratedWebsite({
        html: `<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>موقع تم إنشاؤه بواسطة M1 AI</title>
  <style>
    body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; }
    header { background: linear-gradient(135deg, #5B21B6, #0D9488); color: white; padding: 2rem; text-align: center; }
    main { max-width: 1200px; margin: 0 auto; padding: 2rem; }
    .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
    .feature-card { border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 1.5rem; transition: transform 0.3s; }
    .feature-card:hover { transform: translateY(-5px); }
    footer { background: #1F2937; color: white; padding: 2rem; text-align: center; margin-top: 3rem; }
    @media (max-width: 768px) { .features { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <header>
    <h1>عنوان الموقع</h1>
    <p>وصف موجز للموقع الذي تم إنشاؤه بناءً على وصفك</p>
  </header>
  <main>
    <section>
      <h2>حول الموقع</h2>
      <p>هذا موقع تم إنشاؤه تلقائيًا بواسطة M1 AI بناءً على وصفك. يمكنك تخصيص هذا المحتوى حسب احتياجاتك.</p>
    </section>
    <section class="features">
      <div class="feature-card">
        <h3>ميزة 1</h3>
        <p>وصف للميزة الأولى في موقعك.</p>
      </div>
      <div class="feature-card">
        <h3>ميزة 2</h3>
        <p>وصف للميزة الثانية في موقعك.</p>
      </div>
      <div class="feature-card">
        <h3>ميزة 3</h3>
        <p>وصف للميزة الثالثة في موقعك.</p>
      </div>
    </section>
  </main>
  <footer>
    <p>© 2023 اسم موقعك. جميع الحقوق محفوظة.</p>
  </footer>
</body>
</html>`,
        css: '',
        js: ''
      });
      setLoading(false);
    }, 2000);
  };

  const renderTool = () => {
    switch (activeTool) {
      case 'chat':
        return (
          <div className="flex flex-col h-full">
            <div className="flex-1 overflow-y-auto p-4 space-y-4">
              {conversation.map((message, index) => (
                <div 
                  key={index} 
                  className={`p-3 rounded-lg max-w-[80%] ${
                    message.role === 'user' 
                      ? 'mr-auto bg-purple-600 text-white' 
                      : 'ml-auto bg-gray-200 dark:bg-gray-700 dark:text-white'
                  }`}
                >
                  {message.content}
                </div>
              ))}
              {loading && (
                <div className="ml-auto p-3 rounded-lg bg-gray-200 dark:bg-gray-700 dark:text-white">
                  <div className="flex space-x-2">
                    <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce"></div>
                    <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                    <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></div>
                  </div>
                </div>
              )}
            </div>
            <div className="border-t dark:border-gray-700 p-4">
              <div className="flex items-center space-x-2 rtl:space-x-reverse">
                <input
                  type="text"
                  value={prompt}
                  onChange={(e) => setPrompt(e.target.value)}
                  onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
                  placeholder="اكتب رسالتك هنا..."
                  className="flex-1 p-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
                <button
                  onClick={handleSendMessage}
                  disabled={loading}
                  className="p-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
                >
                  <Send size={20} />
                </button>
              </div>
            </div>
          </div>
        );
      
      case 'code':
        return (
          <div className="flex flex-col h-full">
            <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
              <div className="flex flex-col h-full">
                <div className="flex justify-between items-center mb-2">
                  <h3 className="font-medium dark:text-white">محرر الكود</h3>
                  <div className="flex space-x-2 rtl:space-x-reverse">
                    <button className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                      <Copy size={16} />
                    </button>
                    <button className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                      <Save size={16} />
                    </button>
                  </div>
                </div>
                <textarea
                  value={code}
                  onChange={(e) => setCode(e.target.value)}
                  className="flex-1 p-4 font-mono text-sm border rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
              </div>
              <div className="flex flex-col h-full">
                <div className="flex justify-between items-center mb-2">
                  <h3 className="font-medium dark:text-white">نتيجة التنفيذ</h3>
                  <button className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                    <Copy size={16} />
                  </button>
                </div>
                <div className="flex-1 p-4 font-mono text-sm bg-gray-100 dark:bg-gray-900 border rounded-lg dark:border-gray-700 dark:text-white overflow-auto">
                  {loading ? (
                    <div className="flex items-center justify-center h-full">
                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
                    </div>
                  ) : (
                    <pre>{codeOutput || 'النتيجة ستظهر هنا بعد تنفيذ الكود...'}</pre>
                  )}
                </div>
              </div>
            </div>
            <div className="border-t dark:border-gray-700 p-4">
              <button
                onClick={handleRunCode}
                disabled={loading}
                className="flex items-center space-x-2 rtl:space-x-reverse px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
              >
                <Play size={16} />
                <span>تنفيذ الكود</span>
              </button>
            </div>
          </div>
        );
      
      case 'website':
        return (
          <div className="flex flex-col h-full">
            <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
              <div className="flex flex-col h-full">
                <h3 className="font-medium mb-2 dark:text-white">وصف الموقع</h3>
                <textarea
                  value={websiteDescription}
                  onChange={(e) => setWebsiteDescription(e.target.value)}
                  placeholder="صف الموقع الذي تريد إنشاءه بالتفصيل..."
                  className="flex-1 p-4 border rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
                />
                <button
                  onClick={handleGenerateWebsite}
                  disabled={loading || !websiteDescription.trim()}
                  className="mt-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:opacity-50"
                >
                  {loading ? 'جاري الإنشاء...' : 'إنشاء الموقع'}
                </button>
              </div>
              <div className="flex flex-col h-full">
                <h3 className="font-medium mb-2 dark:text-white">معاينة الموقع</h3>
                <div className="flex-1 border rounded-lg dark:border-gray-700 overflow-hidden bg-white">
                  {loading ? (
                    <div className="flex items-center justify-center h-full">
                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
                    </div>
                  ) : generatedWebsite ? (
                    <iframe
                      srcDoc={generatedWebsite.html}
                      title="معاينة الموقع"
                      className="w-full h-full border-none"
                    />
                  ) : (
                    <div className="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">
                      <p>أدخل وصفًا وانقر على "إنشاء الموقع" لمعاينة الموقع المُنشأ</p>
                    </div>
                  )}
                </div>
                {generatedWebsite && (
                  <div className="mt-4 flex space-x-2 rtl:space-x-reverse">
                    <button className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">
                      <Download size={16} className="inline mr-2" />
                      تنزيل الكود
                    </button>
                    <button className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">
                      <Copy size={16} className="inline mr-2" />
                      نسخ HTML
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        );
      
      default:
        return <div>أداة غير معروفة</div>;
    }
  };

  return (
    <div className={`flex flex-col min-h-screen ${darkMode ? 'dark bg-gray-900' : 'bg-gray-50'}`}>
      {/* Header */}
      <header className="bg-white dark:bg-gray-800 border-b dark:border-gray-700 shadow-sm">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4 rtl:space-x-reverse">
              <div className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-teal-500 text-transparent bg-clip-text">M1</div>
              <div className="hidden md:flex space-x-4 rtl:space-x-reverse">
                <button 
                  className={`px-3 py-2 rounded-md ${activeTool === 'chat' ? 'bg-purple-100 dark:bg-gray-700 text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-300'}`}
                  onClick={() => setActiveTool('chat')}
                >
                  الدردشة
                </button>
                <button 
                  className={`px-3 py-2 rounded-md ${activeTool === 'code' ? 'bg-purple-100 dark:bg-gray-700 text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-300'}`}
                  onClick={() => setActiveTool('code')}
                >
                  محرر الكود
                </button>
                <button 
                  className={`px-3 py-2 rounded-md ${activeTool === 'website' ? 'bg-purple-100 dark:bg-gray-700 text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-300'}`}
                  onClick={() => setActiveTool('website')}
                >
                  إنشاء المواقع
                </button>
              </div>
            </div>
            <div className="flex items-center space-x-2 rtl:space-x-reverse">
              <button
                onClick={toggleDarkMode}
                className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none"
              >
                {darkMode ? <Sun size={20} className="text-yellow-400" /> : <Moon size={20} className="text-gray-600" />}
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 flex">
        {/* Sidebar */}
        <aside className={`${sidebarOpen ? 'w-64' : 'w-16'} bg-white dark:bg-gray-800 border-r dark:border-gray-700 transition-all duration-300 flex flex-col`}>
          <div className="p-4 border-b dark:border-gray-700 flex items-center justify-between">
            <h2 className={`font-medium dark:text-white ${!sidebarOpen && 'hidden'}`}>خدمات الذكاء الاصطناعي</h2>
            <button
              onClick={() => setSidebarOpen(!sidebarOpen)}
              className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none"
            >
              {sidebarOpen ? <ChevronLeft size={20} className="text-gray-500" /> : <ChevronRight size={20} className="text-gray-500" />}
            </button>
          </div>
          <div className="flex-1 overflow-y-auto py-4">
            <div className="space-y-1 px-2">
              <button
                className={`flex items-center ${sidebarOpen ? 'justify-start' : 'justify-center'} w-full px-3 py-2 rounded-md ${activeService === 'chatgpt' ? 'bg-purple-100 dark:bg-gray-700 text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}`}
                onClick={() => setActiveService('chatgpt')}
              >
                <Cpu size={20} />
                {sidebarOpen && <span className="mr-3">ChatGPT</span>}
              </button>
              <button
                className={`flex items-center ${sidebarOpen ? 'justify-start' : 'justify-center'} w-full px-3 py-2 rounded-md ${activeService === 'deepseek' ? 'bg-purple-100 dark:bg-gray-700 text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}`}
                onClick={() => setActiveService('deepseek')}
              >
                <Layers size={20} />
                {sidebarOpen && <span className="mr-3">DeepSeek</span>}
              </button>
              <button
                className={`flex items-center ${sidebarOpen ? 'justify-start' : 'justify-center'} w-full px-3 py-2 rounded-md ${activeService === 'minimax' ? 'bg-purple-100 dark:bg-gray-700 text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}`}
                onClick={() => setActiveService('minimax')}
              >
                <Terminal size={20} />
                {sidebarOpen && <span className="mr-3">MiniMax</span>}
              </button>
            </div>
          </div>
          <div className="p-4 border-t dark:border-gray-700">
            <div className="flex items-center">
              <div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-teal-500 flex items-center justify-center text-white font-bold">
                M
              </div>
              {sidebarOpen && (
                <div className="mr-3">
                  <div className="text-sm font-medium dark:text-white">M1 AI</div>
                  <div className="text-xs text-gray-500 dark:text-gray-400">v1.0.0</div>
                </div>
              )}
            </div>
          </div>
        </aside>

        {/* Content Area */}
        <div className="flex-1 flex flex-col">
          {/* Mobile Navigation */}
          <div className="md:hidden border-b dark:border-gray-700 bg-white dark:bg-gray-800">
            <div className="flex overflow-x-auto py-2 px-4 space-x-4 rtl:space-x-reverse">
              <button 
                className={`px-3 py-2 rounded-md whitespace-nowrap ${activeTool === 'chat' ? 'bg-purple-100 dark:bg-gray-700 text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-300'}`}
                onClick={() => setActiveTool('chat')}
              >
                الدردشة
              </button>
              <button 
                className={`px-3 py-2 rounded-md whitespace-nowrap ${activeTool === 'code' ? 'bg-purple-100 dark:bg-gray-700 text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-300'}`}
                onClick={() => setActiveTool('code')}
              >
                محرر الكود
              </button>
              <button 
                className={`px-3 py-2 rounded-md whitespace-nowrap ${activeTool === 'website' ? 'bg-purple-100 dark:bg-gray-700 text-purple-600 dark:text-purple-400' : 'text-gray-600 dark:text-gray-300'}`}
                onClick={() => setActiveTool('website')}
              >
                إنشاء المواقع
              </button>
            </div>
          </div>

          {/* Tool Content */}
          <div className="flex-1 overflow-hidden">
            {renderTool()}
          </div>
        </div>
      </main>
    </div>
  );
}