<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GDELT News Explorer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: #f8fafc;
            min-height: 100vh;
            padding: 20px;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 30px;
        }
        
        h1 {
            font-size: 2.8rem;
            font-weight: 700;
            background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #94a3b8;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .search-container {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 30px;
            margin: 30px auto;
            max-width: 800px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(148, 163, 184, 0.1);
        }
        
        .search-box {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .search-input {
            flex: 1;
            padding: 16px 20px;
            border-radius: 12px;
            border: none;
            background: rgba(30, 41, 59, 0.7);
            color: #f1f5f9;
            font-size: 1rem;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .search-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .search-button {
            background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 0 30px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
        }
        
        .search-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(37, 99, 235, 0.5);
        }
        
        .search-button:active {
            transform: translateY(0);
        }
        
        .filters {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }
        
        .filter-group {
            flex: 1;
            min-width: 200px;
        }
        
        .filter-label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: #94a3b8;
        }
        
        .filter-select {
            width: 100%;
            padding: 12px 15px;
            border-radius: 10px;
            border: none;
            background: rgba(30, 41, 59, 0.7);
            color: #f1f5f9;
            font-size: 1rem;
        }
        
        .results-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }
        
        .article-card {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(148, 163, 184, 0.1);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }
        
        .article-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .image-placeholder {
            width: 100%;
            height: 200px;
            background: linear-gradient(45deg, #1e293b 0%, #334155 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
        }
        
        .article-content {
            padding: 25px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .article-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 15px;
            line-height: 1.4;
        }
        
        .article-description {
            color: #cbd5e1;
            margin-bottom: 20px;
            flex: 1;
            line-height: 1.6;
        }
        
        .article-meta {
            display: flex;
            justify-content: space-between;
            color: #94a3b8;
            font-size: 0.85rem;
            margin-top: 15px;
        }
        
        .article-link {
            display: inline-block;
            background: rgba(30, 41, 59, 0.7);
            color: #60a5fa;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .article-link:hover {
            background: rgba(56, 189, 248, 0.1);
        }
        
        .stats-container {
            display: flex;
            justify-content: space-between;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: rgba(15, 23, 42, 0.5);
            border-radius: 16px;
            margin-bottom: 30px;
        }
        
        .stat-box {
            text-align: center;
            padding: 15px;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: #60a5fa;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #94a3b8;
        }
        
        .loading {
            text-align: center;
            padding: 50px;
            font-size: 1.2rem;
            color: #94a3b8;
        }
        
        .loading-spinner {
            border: 4px solid rgba(56, 189, 248, 0.2);
            border-top: 4px solid #38bdf8;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .empty-state {
            text-align: center;
            padding: 50px;
            color: #94a3b8;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: #475569;
        }
        
        .error-message {
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 10px;
            padding: 15px;
            margin: 20px auto;
            max-width: 800px;
            text-align: center;
            color: #fecaca;
        }
        
        .error-message i {
            margin-right: 10px;
        }
        
        footer {
            text-align: center;
            padding: 40px 0 20px;
            color: #64748b;
            font-size: 0.9rem;
        }
        
        .trending-topics {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-top: 20px;
            margin-bottom: 30px;
        }
        
        .trending-topic {
            background: rgba(56, 189, 248, 0.1);
            color: #60a5fa;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .trending-topic:hover {
            background: rgba(56, 189, 248, 0.2);
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .search-box {
                flex-direction: column;
            }
            
            .search-button {
                padding: 16px;
            }
            
            .results-container {
                grid-template-columns: 1fr;
            }
            
            .stats-container {
                flex-direction: column;
                gap: 15px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <!-- Load React and Babel -->
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        // App component
        const App = () => {
            const [query, setQuery] = React.useState('');
            const [articles, setArticles] = React.useState([]);
            const [loading, setLoading] = React.useState(false);
            const [sortBy, setSortBy] = React.useState('date');
            const [timeframe, setTimeframe] = React.useState('24h');
            const [stats, setStats] = React.useState({ totalResults: 0, sources: 0, languages: 0 });
            const [error, setError] = React.useState(null);
            const [showSampleData, setShowSampleData] = React.useState(false);
            
            // Using a reliable CORS proxy
            const fetchWithProxy = async (url) => {
                // Using cors.bridged.cc proxy which is more reliable
                const proxyUrl = `https://cors.bridged.cc/${url}`;
                
                try {
                    const response = await fetch(proxyUrl);
                    if (!response.ok) {
                        throw new Error(`API request failed with status ${response.status}`);
                    }
                    return await response.json();
                } catch (err) {
                    console.error('Proxy error:', err);
                    throw new Error('Failed to fetch data. Please try again later.');
                }
            };
            
            const searchArticles = async () => {
                if (!query.trim()) return;
                
                setLoading(true);
                setArticles([]);
                setError(null);
                setStats({ totalResults: 0, sources: 0, languages: 0 });
                
                try {
                    const apiUrl = `https://api.gdeltproject.org/api/v2/doc/doc?query=${encodeURIComponent(query)}&format=json&sort=${sortBy}&timelinescale=${timeframe}&maxrecords=50`;
                    
                    const data = await fetchWithProxy(apiUrl);
                    
                    if (data.articles && data.articles.length > 0) {
                        setArticles(data.articles.slice(0, 12));
                        
                        // Calculate stats
                        const sources = new Set(data.articles.map(article => article.source));
                        const languages = new Set(data.articles.map(article => article.language));
                        
                        setStats({
                            totalResults: data.articles.length,
                            sources: sources.size,
                            languages: languages.size
                        });
                    } else {
                        setArticles([]);
                        setShowSampleData(true);
                    }
                } catch (err) {
                    console.error('Error fetching data:', err);
                    setError(err.message);
                    setShowSampleData(true);
                } finally {
                    setLoading(false);
                }
            };
            
            const handleSubmit = (e) => {
                e.preventDefault();
                searchArticles();
            };
            
            const loadSampleData = () => {
                setArticles([
                    {
                        title: "Global Summit Addresses Climate Change Challenges",
                        url: "#",
                        image: "https://images.unsplash.com/photo-1617791160505-6f00504e3519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
                        description: "World leaders gathered to discuss urgent climate action and new sustainability initiatives.",
                        source: "Global News Network",
                        language: "eng",
                        date: "2023-08-15T10:30:00Z"
                    },
                    {
                        title: "Breakthrough in Renewable Energy Technology",
                        url: "#",
                        image: "https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
                        description: "Scientists announce a major advancement in solar panel efficiency that could revolutionize the industry.",
                        source: "Science Daily",
                        language: "eng",
                        date: "2023-08-14T14:45:00Z"
                    },
                    {
                        title: "Economic Forum Highlights Global Recovery Trends",
                        url: "#",
                        image: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
                        description: "Experts analyze post-pandemic economic indicators showing promising signs of recovery.",
                        source: "Financial Times",
                        language: "eng",
                        date: "2023-08-13T09:15:00Z"
                    },
                    {
                        title: "New AI Model Shows Promise in Medical Diagnostics",
                        url: "#",
                        image: "https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80",
                        description: "Researchers develop an AI system that can detect early signs of disease with 95% accuracy.",
                        source: "Tech Innovations",
                        language: "eng",
                        date: "2023-08-12T16:20:00Z"
                    }
                ]);
                setStats({
                    totalResults: 127,
                    sources: 24,
                    languages: 8
                });
                setShowSampleData(false);
            };
            
            const trendingTopics = [
                "Climate Change", 
                "Artificial Intelligence", 
                "Global Economy", 
                "Renewable Energy", 
                "Space Exploration"
            ];
            
            return React.createElement('div', { className: 'container' },
                React.createElement('header', null,
                    React.createElement('h1', null, 'GDELT News Explorer'),
                    React.createElement('p', { className: 'subtitle' }, 'Search the world\'s largest repository of global news content across 100+ languages in near real-time')
                ),
                
                React.createElement('div', { className: 'search-container' },
                    React.createElement('form', { onSubmit: handleSubmit },
                        React.createElement('div', { className: 'search-box' },
                            React.createElement('input', {
                                type: 'text',
                                className: 'search-input',
                                placeholder: 'Search global news... (e.g. "climate change", "technology trends")',
                                value: query,
                                onChange: (e) => setQuery(e.target.value)
                            }),
                            React.createElement('button', { type: 'submit', className: 'search-button' }, 'Search')
                        ),
                        
                        React.createElement('div', { className: 'filters' },
                            React.createElement('div', { className: 'filter-group' },
                                React.createElement('label', { className: 'filter-label' }, 'Sort By'),
                                React.createElement('select', {
                                    className: 'filter-select',
                                    value: sortBy,
                                    onChange: (e) => setSortBy(e.target.value)
                                },
                                    React.createElement('option', { value: 'date' }, 'Most Recent'),
                                    React.createElement('option', { value: 'relevance' }, 'Relevance'),
                                    React.createElement('option', { value: 'tone' }, 'Sentiment')
                                )
                            ),
                            
                            React.createElement('div', { className: 'filter-group' },
                                React.createElement('label', { className: 'filter-label' }, 'Timeframe'),
                                React.createElement('select', {
                                    className: 'filter-select',
                                    value: timeframe,
                                    onChange: (e) => setTimeframe(e.target.value)
                                },
                                    React.createElement('option', { value: '24h' }, 'Last 24 Hours'),
                                    React.createElement('option', { value: '7d' }, 'Last 7 Days'),
                                    React.createElement('option', { value: '30d' }, 'Last 30 Days')
                                )
                            )
                        )
                    ),
                    
                    React.createElement('div', { className: 'trending-topics' },
                        React.createElement('span', null, 'Trending:'),
                        trendingTopics.map((topic, index) => 
                            React.createElement('div', {
                                key: index,
                                className: 'trending-topic',
                                onClick: () => {
                                    setQuery(topic);
                                    setTimeout(searchArticles, 100);
                                }
                            }, topic)
                        )
                    )
                ),
                
                error && React.createElement('div', { className: 'error-message' },
                    React.createElement('i', { className: 'fas fa-exclamation-triangle' }),
                    error
                ),
                
                stats.totalResults > 0 && React.createElement('div', { className: 'stats-container' },
                    React.createElement('div', { className: 'stat-box' },
                        React.createElement('div', { className: 'stat-value' }, stats.totalResults),
                        React.createElement('div', { className: 'stat-label' }, 'Articles Found')
                    ),
                    React.createElement('div', { className: 'stat-box' },
                        React.createElement('div', { className: 'stat-value' }, stats.sources),
                        React.createElement('div', { className: 'stat-label' }, 'News Sources')
                    ),
                    React.createElement('div', { className: 'stat-box' },
                        React.createElement('div', { className: 'stat-value' }, stats.languages),
                        React.createElement('div', { className: 'stat-label' }, 'Languages')
                    )
                ),
                
                loading ? React.createElement('div', { className: 'loading' },
                    React.createElement('div', { className: 'loading-spinner' }),
                    'Searching global news sources...'
                ) : articles.length > 0 ? React.createElement('div', { className: 'results-container' },
                    articles.map(article => React.createElement(Article, { key: article.url || Math.random(), article: article }))
                ) : React.createElement('div', { className: 'empty-state' },
                    React.createElement('i', { className: 'fas fa-globe-americas' }),
                    React.createElement('h3', null, 'Explore Global News'),
                    React.createElement('p', null, 'Enter a search term to discover news from around the world. The GDELT Project monitors news in 100+ languages across every country.'),
                    showSampleData && React.createElement('button', {
                        className: 'search-button',
                        style: { marginTop: '20px', width: 'auto' },
                        onClick: loadSampleData
                    }, 'View Sample News')
                ),
                
                React.createElement('footer', null,
                    React.createElement('p', null, 'Powered by GDELT Project 2.0 API'),
                    React.createElement('p', null, '© 2023 Global News Explorer | Real-time news monitoring')
                )
            );
        };
        
        // Article component
        const Article = ({ article }) => {
            // Format date for display
            const formatDate = (dateString) => {
                const date = new Date(dateString);
                return date.toLocaleDateString('en-US', { 
                    year: 'numeric', 
                    month: 'short', 
                    day: 'numeric' 
                });
            };
            
            // Determine icon based on language
            const getLanguageIcon = (language) => {
                const languageIcons = {
                    eng: 'fa-earth-americas',
                    spa: 'fa-language',
                    fra: 'fa-language',
                    deu: 'fa-language',
                    zho: 'fa-language',
                    rus: 'fa-language',
                    ara: 'fa-language'
                };
                return languageIcons[language] || 'fa-language';
            };
            
            return React.createElement('div', { className: 'article-card' },
                article.image ? 
                    React.createElement('img', { 
                        src: article.image, 
                        className: 'article-image',
                        alt: article.title 
                    }) : 
                    React.createElement('div', { className: 'image-placeholder' },
                        React.createElement('i', { className: 'far fa-newspaper' })
                    ),
                
                React.createElement('div', { className: 'article-content' },
                    React.createElement('h3', { className: 'article-title' }, article.title),
                    React.createElement('p', { className: 'article-description' }, 
                        article.description || 'No description available'
                    ),
                    React.createElement('a', { 
                        href: article.url, 
                        className: 'article-link',
                        target: '_blank',
                        rel: 'noopener noreferrer'
                    }, 'Read Full Article'),
                    
                    React.createElement('div', { className: 'article-meta' },
                        React.createElement('span', null,
                            React.createElement('i', { className: 'fas fa-source' }), ' ',
                            article.source || 'Unknown Source'
                        ),
                        React.createElement('span', null,
                            React.createElement('i', { className: 'fas ' + getLanguageIcon(article.language) }), ' ',
                            formatDate(article.date)
                        )
                    )
                )
            );
        };
        
        // Render the app
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(React.createElement(App));
    </script>
</body>
</html>