Aplicativo de Previsão de Manipulação Esportiva com IA

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [games, setGames] = useState([]);
  const [filters, setFilters] = useState({ country: '', division: '', competitionType: '' });

  useEffect(() => {
    // Simulate fetching games data
    const fetchGames = async () => {
      const mockGames = [
        {
          id: 1,
          teams: 'Team A vs Team B',
          score: '4-3',
          reason: 'Unusual odds drop and betting pattern detected.',
        },
        {
          id: 2,
          teams: 'Team C vs Team D',
          score: '2-2',
          reason: 'Historical data and betting behavior analysis.',
        },
      ];
      setGames(mockGames);
    };

    fetchGames();
  }, []);

  const handleFilterChange = (e) => {
    const { name, value } = e.target;
    setFilters({ ...filters, [name]: value });
  };

  const filteredGames = games.filter((game) => {
    return (
      (!filters.country || game.country === filters.country) &&
      (!filters.division || game.division === filters.division) &&
      (!filters.competitionType || game.competitionType === filters.competitionType)
    );
  });

  return (
    <div className='App bg-gradient-to-b from-gray-900 to-gray-800 min-h-screen text-white p-8'>
      <header className='text-center mb-10'>
        <h1 className='text-4xl font-bold'>Advanced Sports Result Manipulation Detection</h1>
        <p className='text-gray-400'>Powered by AI and Machine Learning</p>
      </header>

      <div className='flex justify-center mb-8 space-x-4'>
        <select
          name='country'
          onChange={handleFilterChange}
          className='bg-gray-700 text-white p-2 rounded'
        >
          <option value=''>All Countries</option>
          <option value='Country A'>Country A</option>
          <option value='Country B'>Country B</option>
        </select>
        <select
          name='division'
          onChange={handleFilterChange}
          className='bg-gray-700 text-white p-2 rounded'
        >
          <option value=''>All Divisions</option>
          <option value='Division 1'>Division 1</option>
          <option value='Division 2'>Division 2</option>
        </select>
        <select
          name='competitionType'
          onChange={handleFilterChange}
          className='bg-gray-700 text-white p-2 rounded'
        >
          <option value=''>All Competition Types</option>
          <option value='League'>League</option>
          <option value='Cup'>Cup</option>
        </select>
      </div>

      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
        {filteredGames.map((game) => (
          <div key={game.id} className='bg-gray-800 p-6 rounded-lg shadow-lg'>
            <h2 className='text-xl font-semibold mb-2'>{game.teams}</h2>
            <p className='text-gray-400'>Predicted Score: {game.score}</p>
            <p className='text-gray-400 mt-2'>{game.reason}</p>
          </div>
        ))}
      </div>

      <footer className='text-center mt-16 text-gray-400'>
        <p>© 2025 Advanced Sports Analytics. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;