```jsx
import React, { useState, useEffect } from 'react';
import { Search, Globe, TrendingUp, Users, Code, BookOpen, MapPin, Zap, Languages } from 'lucide-react';

const App = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedRegion, setSelectedRegion] = useState('all');
  const [models, setModels] = useState([]);

  // Mock data based on the provided document
  const allModels = [
    // North America
    {
      id: 1,
      name: 'GPT-5',
      company: 'OpenAI',
      region: 'north-america',
      license: 'Proprietary',
      features: ['Advanced performance', 'Large context window', 'Multimodal'],
      description: 'One of the most powerful models ever built, with over 1.5 trillion parameters.',
      logo: 'https://placehold.co/60x60/10a37f/white?text=OAI'
    },
    {
      id: 2,
      name: 'Gemini 2.5 Pro',
      company: 'Google DeepMind',
      region: 'north-america',
      license: 'Proprietary',
      features: ['Strong logical reasoning', 'Deep Google integration', 'Long context understanding'],
      description: 'Features powerful capabilities in logical reasoning and understanding long contexts.',
      logo: 'https://placehold.co/60x60/4285f4/white?text=GM'
    },
    {
      id: 3,
      name: 'Llama 4',
      company: 'Meta AI',
      region: 'north-america',
      license: 'Open-weight',
      features: ['Competitive performance', 'Open ecosystem', 'Developer friendly'],
      description: 'Open-weight model building a complete ecosystem for developers and researchers.',
      logo: 'https://placehold.co/60x60/0052ff/white?text=META'
    },
    {
      id: 4,
      name: 'Claude 3.7 Sonnet',
      company: 'Anthropic',
      region: 'north-america',
      license: 'Proprietary',
      features: ['Safety focused', 'Ethics oriented', 'Reliable performance'],
      description: 'Focuses on safety and ethics in AI development and deployment.',
      logo: 'https://placehold.co/60x60/000000/white?text=ANT'
    },
    {
      id: 5,
      name: 'Grok 3',
      company: 'xAI',
      region: 'north-america',
      license: 'Proprietary',
      features: ['Advanced mathematical reasoning', 'Real-time X platform data', 'Current events tracking'],
      description: 'Features advanced reasoning capabilities, especially in mathematics, with unique access to X platform data.',
      logo: 'https://placehold.co/60x60/ff6b35/white?text=xAI'
    },
    {
      id: 6,
      name: 'Mistral Large 2',
      company: 'Mistral AI',
      region: 'europe',
      license: 'Open-weight',
      features: ['High efficiency', 'Excellent European languages support', 'High performance'],
      description: 'Combines high performance with computational efficiency, with special focus on European languages.',
      logo: 'https://placehold.co/60x60/ff6b6b/white?text=MST'
    },
    {
      id: 7,
      name: 'DBRX',
      company: 'Databricks',
      region: 'north-america',
      license: 'Open-source',
      features: ['Mixture-of-experts architecture', 'High efficiency', 'Excellent performance'],
      description: 'Open-source model based on mixture-of-experts architecture delivering high performance with excellent computational efficiency.',
      logo: 'https://placehold.co/60x60/e74c3c/white?text=DBX'
    },
    {
      id: 8,
      name: 'Command R+',
      company: 'Cohere',
      region: 'north-america',
      license: 'Proprietary',
      features: ['Optimized for RAG', 'Enterprise use cases', 'Scalable'],
      description: 'Specifically optimized for Retrieval-Augmented Generation (RAG) and enterprise institutional use cases.',
      logo: 'https://placehold.co/60x60/3498db/white?text=CHR'
    },
    {
      id: 9,
      name: 'Granite 3.0',
      company: 'IBM',
      region: 'north-america',
      license: 'Open-source',
      features: ['High efficiency', 'Enterprise designed', 'Business ready'],
      description: 'Open-source models designed for efficiency and performance in business environments.',
      logo: 'https://placehold.co/60x60/00b0f0/white?text=IBM'
    },
    {
      id: 10,
      name: 'Titan Text Express',
      company: 'Amazon',
      region: 'north-america',
      license: 'Proprietary',
      features: ['Available on Amazon Bedrock', 'Cloud integrated', 'Scalable'],
      description: 'Available through Amazon Bedrock platform for cloud-based AI applications.',
      logo: 'https://placehold.co/60x60/ff9900/white?text=AWS'
    },

    // China
    {
      id: 11,
      name: 'Qwen 2.5-Max',
      company: 'Alibaba',
      region: 'china',
      license: 'Open-weight',
      features: ['Chinese language optimized', 'High performance', 'Cultural understanding'],
      description: 'Claims to surpass competitor DeepSeek-V3 in performance, with strong Chinese language and cultural understanding.',
      logo: 'https://placehold.co/60x60/f39c12/white?text=ALB'
    },
    {
      id: 12,
      name: 'Ernie Bot',
      company: 'Baidu',
      region: 'china',
      license: 'Proprietary',
      features: ['Mature Chinese model', 'Local market focus', 'Established ecosystem'],
      description: 'One of the oldest and most mature Chinese LLMs in the market.',
      logo: 'https://placehold.co/60x60/27ae60/white?text=BID'
    },
    {
      id: 13,
      name: 'DeepSeek R1',
      company: 'DeepSeek',
      region: 'china',
      license: 'Open-weight',
      features: ['685B parameters', 'Transparent reasoning', 'Excellent coding performance'],
      description: '685 billion parameter model with transparent reasoning capabilities and excellent performance in programming tasks.',
      logo: 'https://placehold.co/60x60/8e44ad/white?text=DSK'
    },
    {
      id: 14,
      name: 'GLM',
      company: 'Zhipu AI',
      region: 'china',
      license: 'Open-weight',
      features: ['Chinese focused', 'Strong performance', 'Open ecosystem'],
      description: 'Leading Chinese AI startup with strong performance in Chinese language tasks.',
      logo: 'https://placehold.co/60x60/e67e22/white?text=ZHP'
    },

    // Europe & Middle East
    {
      id: 15,
      name: 'Falcon 2 11B',
      company: 'Technology Innovation Institute (TII)',
      region: 'europe-middle-east',
      license: 'Open-source',
      features: ['5.5T tokens training', 'Exceptional performance', 'Efficient architecture'],
      description: 'Trained on 5.5 trillion tokens, delivering exceptional performance for its size.',
      logo: 'https://placehold.co/60x60/2c3e50/white?text=TII'
    },
    {
      id: 16,
      name: 'Falcon-Arabic',
      company: 'Technology Innovation Institute (TII)',
      region: 'europe-middle-east',
      license: 'Open-source',
      features: ['Arabic specialized', 'Cultural understanding', 'Regional focus'],
      description: 'Specialized model for Arabic language with deep cultural and contextual understanding.',
      logo: 'https://placehold.co/60x60/c0392b/white?text=ARB'
    },
    {
      id: 17,
      name: 'Jurassic-2',
      company: 'AI21 Labs',
      region: 'europe-middle-east',
      license: 'Proprietary',
      features: ['High accuracy', 'Quality focused', 'Transparency oriented'],
      description: 'Focuses on accuracy and quality, with high transparency scores in Stanford evaluations.',
      logo: 'https://placehold.co/60x60/16a085/white?text=AI21'
    },

    // Asia-Pacific
    {
      id: 18,
      name: 'HyperCLOVA X',
      company: 'Naver',
      region: 'asia-pacific',
      license: 'Proprietary',
      features: ['Korean language optimized', '6500x more Korean data than GPT-4', 'Local market leader'],
      description: 'Trained on massive Korean dataset, 6500 times larger than GPT-4\'s Korean data, making it superior for Korean language tasks.',
      logo: 'https://placehold.co/60x60/34495e/white?text=NV'
    },
    {
      id: 19,
      name: 'EXAONE 3.0',
      company: 'LG AI Research',
      region: 'asia-pacific',
      license: 'Open-source',
      features: ['Multimodal', 'Professional applications', 'Healthcare focused'],
      description: 'Multimodal open-source model capable of applications from professional report analysis to cancer diagnosis.',
      logo: 'https://placehold.co/60x60/9b59b6/white?text=LG'
    },
    {
      id: 20,
      name: 'KoGPT 2.0',
      company: 'Kakao',
      region: 'asia-pacific',
      license: 'Proprietary',
      features: ['Korean messaging integration', 'Generative services', 'Local ecosystem'],
      description: 'Designed to enhance Kakao\'s generative AI services and messaging platform.',
      logo: 'https://placehold.co/60x60/f1c40f/white?text=KKO'
    },
    {
      id: 21,
      name: 'Krutrim-1',
      company: 'Krutrim AI Labs',
      region: 'asia-pacific',
      license: 'Proprietary',
      features: ['Multilingual Indian', '22 official languages', 'Sovereign AI'],
      description: 'India\'s first multilingual large language model designed specifically for Indian languages.',
      logo: 'https://placehold.co/60x60/e74c3c/white?text=KRT'
    },
    {
      id: 22,
      name: 'Sarvam-M',
      company: 'Sarvam AI',
      region: 'asia-pacific',
      license: 'Open-source',
      features: ['24B parameters', 'Multilingual', 'IndiaAI Mission'],
      description: '24 billion parameter multilingual model developed under India\'s sovereign AI initiative.',
      logo: 'https://placehold.co/60x60/27ae60/white?text=SVM'
    },

    // Arabic Models
    {
      id: 23,
      name: 'Jais',
      company: 'Cerebras & MBZUAI',
      region: 'europe-middle-east',
      license: 'Open-weight',
      features: ['Arabic specialized', 'Open NLP', 'Regional leadership'],
      description: 'A new pinnacle in open Arabic NLP, specifically designed for Arabic language understanding.',
      logo: 'https://placehold.co/60x60/d35400/white?text=JAS'
    }
  ];

  useEffect(() => {
    setModels(allModels);
  }, []);

  const filteredModels = models.filter(model => {
    const matchesSearch = model.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         model.company.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         model.description.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesRegion = selectedRegion === 'all' || model.region === selectedRegion;
    return matchesSearch && matchesRegion;
  });

  const regions = [
    { id: 'all', name: 'All Regions', icon: Globe },
    { id: 'north-america', name: 'North America', icon: MapPin },
    { id: 'china', name: 'China', icon: MapPin },
    { id: 'europe-middle-east', name: 'Europe & Middle East', icon: MapPin },
    { id: 'asia-pacific', name: 'Asia-Pacific', icon: MapPin }
  ];

  const getRegionColor = (region) => {
    switch (region) {
      case 'north-america': return 'bg-blue-100 text-blue-800';
      case 'china': return 'bg-red-100 text-red-800';
      case 'europe-middle-east': return 'bg-purple-100 text-purple-800';
      case 'asia-pacific': return 'bg-green-100 text-green-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getLicenseColor = (license) => {
    switch (license) {
      case 'Open-weight':
      case 'Open-source': return 'bg-green-100 text-green-800';
      case 'Proprietary': return 'bg-orange-100 text-orange-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="text-center">
            <h1 className="text-4xl font-bold text-gray-900 mb-2">
              دليل نماذج اللغات الكبيرة العالمية 2025
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              استكشف مشهد الذكاء الاصطناعي التوليدي في عصر التعددية القطبية والمنافسة الشاملة
            </p>
          </div>
        </div>
      </header>

      {/* Stats Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <div className="bg-white rounded-lg p-6 shadow-sm border">
            <div className="flex items-center">
              <div className="p-2 bg-blue-100 rounded-lg">
                <Globe className="h-6 w-6 text-blue-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">المناطق</p>
                <p className="text-2xl font-semibold text-gray-900">4+</p>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg p-6 shadow-sm border">
            <div className="flex items-center">
              <div className="p-2 bg-green-100 rounded-lg">
                <Users className="h-6 w-6 text-green-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">الشركات</p>
                <p className="text-2xl font-semibold text-gray-900">15+</p>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg p-6 shadow-sm border">
            <div className="flex items-center">
              <div className="p-2 bg-purple-100 rounded-lg">
                <Code className="h-6 w-6 text-purple-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">النماذج</p>
                <p className="text-2xl font-semibold text-gray-900">20+</p>
              </div>
            </div>
          </div>
          <div className="bg-white rounded-lg p-6 shadow-sm border">
            <div className="flex items-center">
              <div className="p-2 bg-orange-100 rounded-lg">
                <Languages className="h-6 w-6 text-orange-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">اللغات</p>
                <p className="text-2xl font-semibold text-gray-900">10+</p>
              </div>
            </div>
          </div>
        </div>

        {/* Search and Filter */}
        <div className="bg-white rounded-lg shadow-sm border p-6 mb-8">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
                <input
                  type="text"
                  placeholder="ابحث عن نموذج أو شركة..."
                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
            </div>
            <div className="flex gap-2 overflow-x-auto pb-2">
              {regions.map((region) => {
                const Icon = region.icon;
                return (
                  <button
                    key={region.id}
                    onClick={() => setSelectedRegion(region.id)}
                    className={`flex items-center gap-2 px-4 py-2 rounded-lg whitespace-nowrap transition-colors ${
                      selectedRegion === region.id
                        ? 'bg-blue-600 text-white'
                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                    }`}
                  >
                    <Icon className="h-4 w-4" />
                    {region.name}
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {/* Models Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredModels.map((model) => (
            <div key={model.id} className="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow">
              <div className="p-6">
                <div className="flex items-start gap-4">
                  <img src={model.logo} alt={model.company} className="w-12 h-12 rounded-lg" />
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="text-lg font-semibold text-gray-900">{model.name}</h3>
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${getLicenseColor(model.license)}`}>
                        {model.license}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 mb-3">{model.company}</p>
                    <div className="mb-3">
                      <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getRegionColor(model.region)}`}>
                        {regions.find(r => r.id === model.region)?.name || 'Global'}
                      </span>
                    </div>
                    <p className="text-sm text-gray-700 mb-4 line-clamp-3">{model.description}</p>
                    <div className="flex flex-wrap gap-1">
                      {model.features.slice(0, 3).map((feature, index) => (
                        <span key={index} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
                          {feature}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {filteredModels.length === 0 && (
          <div className="text-center py-12">
            <div className="bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
              <Search className="h-8 w-8 text-gray-400" />
            </div>
            <h3 className="text-lg font-medium text-gray-900 mb-2">لا توجد نتائج</h3>
            <p className="text-gray-600">لم يتم العثور على نماذج تطابق بحثك. جرب استخدام كلمات مفتاحية مختلفة.</p>
          </div>
        )}
      </div>

      {/* Footer */}
      <footer className="bg-white border-t mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="text-center">
            <p className="text-gray-600">
              دليل شامل لنماذج اللغات الكبيرة العالمية في 2025 - عصر التعددية القطبية والمنافسة الشاملة
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;
```