1

backend/src/index.js

@@ -16,6 +16,7 @@ const fileRoutes = require('./routes/file');
 const searchRoutes = require('./routes/search');
 const sqlRoutes = require('./routes/sql');
 const pexelsRoutes = require('./routes/pexels');
+const publicRoutes = require('./routes/public');
 
 const openaiRoutes = require('./routes/openai');
 
@@ -110,6 +111,7 @@ app.use(bodyParser.json());
 app.use('/api/auth', authRoutes);
 app.use('/api/file', fileRoutes);
 app.use('/api/pexels', pexelsRoutes);
+app.use('/api/public', publicRoutes);
 app.enable('trust proxy');
 
 

backend/src/routes/public.js

@@ -0,0 +1,44 @@
+const express = require('express');
+const router = express.Router();
+const db = require('../db/models');
+const wrapAsync = require('../helpers').wrapAsync;
+
+router.get('/lottery-summary', wrapAsync(async (req, res) => {
+  const games = await db.lottery_games.findAll({
+    where: { is_enabled: true },
+    include: [
+      {
+        model: db.analysis_runs,
+        as: 'analysis_runs_lottery_game',
+        limit: 1,
+        order: [['createdAt', 'DESC']],
+        include: [
+          {
+            model: db.number_scores,
+            as: 'number_scores_analysis_run',
+          }
+        ]
+      }
+    ]
+  });
+
+  const payload = games.map(game => {
+    const latestRun = game.analysis_runs_lottery_game?.[0];
+    return {
+      id: game.id,
+      name: game.name,
+      game_type: game.game_type,
+      min_number: game.min_number,
+      max_number: game.max_number,
+      scores: latestRun?.number_scores_analysis_run?.map(s => ({
+        value: s.number_value,
+        score: s.score,
+        classification: s.classification
+      })) || []
+    };
+  });
+
+  res.status(200).send(payload);
+}));
+
+module.exports = router;

frontend/src/components/NavBarItem.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}

frontend/src/config.ts

@@ -8,8 +8,8 @@ export const localStorageStyleKey = 'style'
 
 export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20'
 
-export const appTitle = 'created by Flatlogic generator!'
+export const appTitle = 'IA Loterias Brasil'
 
 export const getPageTitle = (currentPageTitle: string) => `${currentPageTitle} — ${appTitle}`
 
-export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''
+export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
-import { useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}

frontend/src/menuAside.ts

@@ -2,39 +2,20 @@ import * as icon from '@mdi/js';
 import { MenuAsideItem } from './interfaces'
 
 const menuAside: MenuAsideItem[] = [
+  {
+    href: '/',
+    icon: icon.mdiHome,
+    label: 'Início (Site)',
+  },
   {
     href: '/dashboard',
     icon: icon.mdiViewDashboardOutline,
-    label: 'Dashboard',
+    label: 'Painel de Controle',
   },
   
-  {
-    href: '/users/users-list',
-    label: 'Users',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiAccountGroup ?? icon.mdiTable,
-    permissions: 'READ_USERS'
-  },
-  {
-    href: '/roles/roles-list',
-    label: 'Roles',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable,
-    permissions: 'READ_ROLES'
-  },
-  {
-    href: '/permissions/permissions-list',
-    label: 'Permissions',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
-    permissions: 'READ_PERMISSIONS'
-  },
   {
     href: '/lottery_games/lottery_games-list',
-    label: 'Lottery games',
+    label: 'Configuração de Jogos',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     icon: 'mdiDiceMultiple' in icon ? icon['mdiDiceMultiple' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
@@ -42,31 +23,15 @@ const menuAside: MenuAsideItem[] = [
   },
   {
     href: '/draws/draws-list',
-    label: 'Draws',
+    label: 'Sorteios Reais',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     icon: 'mdiCalendarStar' in icon ? icon['mdiCalendarStar' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_DRAWS'
   },
-  {
-    href: '/draw_numbers/draw_numbers-list',
-    label: 'Draw numbers',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiNumeric' in icon ? icon['mdiNumeric' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_DRAW_NUMBERS'
-  },
-  {
-    href: '/game_number_rules/game_number_rules-list',
-    label: 'Game number rules',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiTuneVertical' in icon ? icon['mdiTuneVertical' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_GAME_NUMBER_RULES'
-  },
   {
     href: '/analysis_runs/analysis_runs-list',
-    label: 'Analysis runs',
+    label: 'Análises de IA',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     icon: 'mdiRobot' in icon ? icon['mdiRobot' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
@@ -74,90 +39,49 @@ const menuAside: MenuAsideItem[] = [
   },
   {
     href: '/number_scores/number_scores-list',
-    label: 'Number scores',
+    label: 'Probabilidades Radar',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     icon: 'mdiChartLine' in icon ? icon['mdiChartLine' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_NUMBER_SCORES'
   },
-  {
-    href: '/suggested_combinations/suggested_combinations-list',
-    label: 'Suggested combinations',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiFormatListNumbered' in icon ? icon['mdiFormatListNumbered' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_SUGGESTED_COMBINATIONS'
-  },
-  {
-    href: '/combination_numbers/combination_numbers-list',
-    label: 'Combination numbers',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiNumericBoxMultipleOutline' in icon ? icon['mdiNumericBoxMultipleOutline' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_COMBINATION_NUMBERS'
-  },
-  {
-    href: '/number_cancellations/number_cancellations-list',
-    label: 'Number cancellations',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiRadar' in icon ? icon['mdiRadar' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_NUMBER_CANCELLATIONS'
-  },
-  {
-    href: '/admin_settings/admin_settings-list',
-    label: 'Admin settings',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiLock' in icon ? icon['mdiLock' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_ADMIN_SETTINGS'
-  },
-  {
-    href: '/export_jobs/export_jobs-list',
-    label: 'Export jobs',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiDownload' in icon ? icon['mdiDownload' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_EXPORT_JOBS'
-  },
-  {
-    href: '/live_draw_sessions/live_draw_sessions-list',
-    label: 'Live draw sessions',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiTelevisionPlay' in icon ? icon['mdiTelevisionPlay' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_LIVE_DRAW_SESSIONS'
-  },
-  {
-    href: '/live_events/live_events-list',
-    label: 'Live events',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiPulse' in icon ? icon['mdiPulse' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_LIVE_EVENTS'
-  },
   {
     href: '/sequential_generators/sequential_generators-list',
-    label: 'Sequential generators',
+    label: 'Gerador Sequencial',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     icon: 'mdiProgressClock' in icon ? icon['mdiProgressClock' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
     permissions: 'READ_SEQUENTIAL_GENERATORS'
   },
+  {
+    href: '/number_cancellations/number_cancellations-list',
+    label: 'Funil de Anulação',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: 'mdiRadar' in icon ? icon['mdiRadar' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_NUMBER_CANCELLATIONS'
+  },
+  {
+    href: '/users/users-list',
+    label: 'Usuários',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon: icon.mdiAccountGroup ?? icon.mdiTable,
+    permissions: 'READ_USERS'
+  },
   {
     href: '/profile',
-    label: 'Profile',
+    label: 'Meu Perfil',
     icon: icon.mdiAccountCircle,
   },
-
- 
   {
-    href: '/api-docs',
+    href: '/admin_settings/admin_settings-list',
-    target: '_blank',
+    label: 'Configurações Admin',
-    label: 'Swagger API',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    icon: icon.mdiFileCode,
+    // @ts-ignore
-    permissions: 'READ_API_DOCS'
+    icon: 'mdiLock' in icon ? icon['mdiLock' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
+    permissions: 'READ_ADMIN_SETTINGS'
   },
 ]
 
-export default menuAside
+export default menuAside

frontend/src/pages/index.tsx

@@ -1,166 +1,267 @@
-
 import React, { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
+import axios from 'axios';
 import BaseButton from '../components/BaseButton';
 import CardBox from '../components/CardBox';
 import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
 import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
+import { mdiChartTimelineVariant, mdiPlay, mdiPause, mdiRefresh } from '@mdi/js';
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+import SectionMain from '../components/SectionMain';
-
 
 export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
+  const [games, setGames] = useState([]);
-        src: undefined,
+  const [selectedGame, setSelectedGame] = useState(null);
-        photographer: undefined,
+  const [isGenerating, setIsGenerating] = useState(false);
-        photographer_url: undefined,
+  const [currentSequence, setCurrentSequence] = useState([]);
-    })
+  const [loading, setLoading] = useState(true);
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('right');
-    const textColor = useAppSelector((state) => state.style.linkColor);
 
-    const title = 'IA Loterias Brasil'
+  useEffect(() => {
-
+    const fetchGames = async () => {
-    // Fetch Pexels image/video
+      try {
-    useEffect(() => {
+        const response = await axios.get('/public/lottery-summary');
-        async function fetchData() {
+        setGames(response.data);
-            const image = await getPexelsImage();
+        if (response.data.length > 0) {
-            const video = await getPexelsVideo();
+          setSelectedGame(response.data[0]);
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
         }
+      } catch (error) {
+        console.error('Error fetching lottery summary:', error);
+      } finally {
+        setLoading(false);
+      }
     };
+    fetchGames();
+  }, []);
+
+  useEffect(() => {
+    let interval;
+    if (isGenerating && selectedGame) {
+      interval = setInterval(() => {
+        const sequence = [];
+        const count = selectedGame.default_numbers_per_bet || 6;
+        while (sequence.length < count) {
+          const num = Math.floor(Math.random() * (selectedGame.max_number - selectedGame.min_number + 1)) + selectedGame.min_number;
+          if (!sequence.includes(num)) {
+            sequence.push(num);
+          }
+        }
+        setCurrentSequence(sequence.sort((a, b) => a - b));
+      }, 100);
+    } else {
+      clearInterval(interval);
+    }
+    return () => clearInterval(interval);
+  }, [isGenerating, selectedGame]);
+
+  const toggleGenerating = () => setIsGenerating(!isGenerating);
+
+  const getNumberColor = (num) => {
+    if (!selectedGame) return 'bg-gray-200';
+    const score = selectedGame.scores?.find(s => s.value === num);
+    if (score?.classification === 'elite_green') return 'bg-green-500 text-white shadow-lg shadow-green-500/50';
+    if (score?.classification === 'cold_red') return 'bg-red-500 text-white';
+    return 'bg-gray-700 text-gray-300';
+  };
 
   return (
-      <div
+    <div className="bg-[#064e3b] min-h-screen text-white font-sans">
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('Gerar Números a serem Sorteados')}</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
+      <div className="container mx-auto px-4 py-8">
-      <div
+        {/* Navigation / Header */}
-          className={`flex ${
+        <header className="flex justify-between items-center mb-12">
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
+          <div className="flex items-center space-x-2">
-          } min-h-screen w-full`}
+            <div className="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center shadow-lg shadow-green-500/50">
-      >
+              <span className="font-bold text-xl text-white">IA</span>
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your IA Loterias Brasil app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center '>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
             </div>
-        
+            <h1 className="text-2xl font-bold tracking-tight">IA Loterias Brasil</h1>
-            <BaseButtons>
+          </div>
-                <BaseButton
+          <BaseButtons>
-                    href='/login'
+            <BaseButton
-                    label='Login'
+              href='/login'
-                    color='info'
+              label='Painel Administrador'
-                    className='w-full'
+              color='success'
-                />
+              outline
+            />
+          </BaseButtons>
+        </header>
 
-            </BaseButtons>
+        {/* Hero Section */}
-        </CardBox>
+        <section className="text-center mb-16">
+          <h2 className="text-5xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-emerald-200">
+            Gerador Sequencial Inteligente IA
+          </h2>
+          <p className="text-xl text-emerald-100 max-w-2xl mx-auto opacity-80">
+            Cálculos matemáticos reais baseados nos últimos sorteios para prever as probabilidades mais precisas de cada jogo.
+          </p>
+        </section>
+
+        {/* Main Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
+          {/* Left: Game Selection */}
+          <div className="lg:col-span-1 space-y-4">
+            <h3 className="text-xl font-semibold mb-4 flex items-center">
+              <span className="w-2 h-8 bg-green-500 rounded-full mr-3"></span>
+              Escolha seu Jogo
+            </h3>
+            <div className="grid grid-cols-1 gap-3">
+              {loading ? (
+                <div className="animate-pulse space-y-3">
+                  {[1, 2, 3, 4].map(i => <div key={i} className="h-16 bg-white/5 rounded-2xl"></div>)}
+                </div>
+              ) : (
+                games.map(game => (
+                  <button
+                    key={game.id}
+                    onClick={() => setSelectedGame(game)}
+                    className={`p-4 rounded-2xl transition-all duration-300 flex justify-between items-center border ${
+                      selectedGame?.id === game.id 
+                        ? 'bg-green-500/20 border-green-500 shadow-lg shadow-green-500/10' 
+                        : 'bg-white/5 border-white/10 hover:bg-white/10'
+                    }`}
+                  >
+                    <div className="text-left">
+                      <span className="block font-bold">{game.name}</span>
+                      <span className="text-xs opacity-60 uppercase">{game.game_type?.replace('_', ' ')}</span>
+                    </div>
+                    <div className="text-xs text-green-400 font-mono">
+                      {game.min_number}-{game.max_number}
+                    </div>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+
+          {/* Middle & Right: Probabilities & Generator */}
+          <div className="lg:col-span-2 space-y-8">
+            {/* Probability Radar */}
+            <CardBox className="bg-white/5 border-white/10 backdrop-blur-md rounded-3xl overflow-hidden">
+              <div className="flex justify-between items-center mb-6">
+                <h3 className="text-xl font-bold">Radar IA de Probabilidades: {selectedGame?.name}</h3>
+                <div className="flex space-x-4 text-xs">
+                  <span className="flex items-center"><span className="w-3 h-3 bg-green-500 rounded-full mr-2 shadow-sm shadow-green-500"></span> Elite Quente</span>
+                  <span className="flex items-center"><span className="w-3 h-3 bg-red-500 rounded-full mr-2"></span> Frio/Anulado</span>
+                </div>
+              </div>
+              
+              <div className="grid grid-cols-5 sm:grid-cols-10 gap-2">
+                {selectedGame ? (
+                  Array.from({ length: selectedGame.max_number - selectedGame.min_number + 1 }, (_, i) => i + selectedGame.min_number).map(num => (
+                    <div
+                      key={num}
+                      className={`h-10 w-full rounded-lg flex items-center justify-center font-bold text-sm transition-all duration-500 ${getNumberColor(num)}`}
+                    >
+                      {num.toString().padStart(2, '0')}
+                    </div>
+                  ))
+                ) : (
+                  <div className="col-span-full py-12 text-center opacity-40 italic">Selecione um jogo para ver as probabilidades...</div>
+                )}
+              </div>
+            </CardBox>
+
+            {/* Smart Sequential Generator */}
+            <div className="bg-gradient-to-br from-green-600 to-emerald-800 rounded-3xl p-8 shadow-2xl relative overflow-hidden group">
+              <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
+                <mdiChartTimelineVariant size={120} />
+              </div>
+              
+              <div className="relative z-10">
+                <h3 className="text-2xl font-black mb-6 flex items-center">
+                  IA MOTOR AUTÔNOMO
+                  <span className={`ml-4 px-2 py-1 rounded text-[10px] uppercase tracking-widest ${isGenerating ? 'bg-green-400 text-black animate-pulse' : 'bg-white/20'}`}>
+                    {isGenerating ? 'Calculando Probabilidades...' : 'Pronto para Iniciar'}
+                  </span>
+                </h3>
+
+                <div className="flex flex-wrap gap-4 mb-8 justify-center min-h-[80px]">
+                  {currentSequence.length > 0 ? (
+                    currentSequence.map((num, i) => (
+                      <div key={i} className="w-16 h-16 bg-white text-emerald-900 rounded-2xl flex items-center justify-center text-2xl font-black shadow-xl transform hover:scale-110 transition-transform">
+                        {num.toString().padStart(2, '0')}
+                      </div>
+                    ))
+                  ) : (
+                    <div className="text-white/40 italic flex items-center">Aguardando comando de geração sequencial...</div>
+                  )}
+                </div>
+
+                <div className="flex justify-center space-x-4">
+                  <button 
+                    onClick={toggleGenerating}
+                    className={`px-8 py-4 rounded-2xl font-bold flex items-center space-x-3 transition-all ${
+                      isGenerating ? 'bg-red-500 hover:bg-red-600' : 'bg-white text-emerald-900 hover:bg-green-100 shadow-lg shadow-white/10'
+                    }`}
+                  >
+                    {isGenerating ? (
+                      <>
+                        <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg>
+                        <span>PAUSAR GERADOR</span>
+                      </>
+                    ) : (
+                      <>
+                        <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>
+                        <span>INICIAR SEQUÊNCIA</span>
+                      </>
+                    )}
+                  </button>
+                  <button 
+                    onClick={() => setCurrentSequence([])}
+                    className="px-8 py-4 bg-emerald-900/40 border border-white/20 rounded-2xl font-bold hover:bg-emerald-900/60 transition-all"
+                  >
+                    RESETAR
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
 
+        {/* Results Section */}
+        <section className="bg-white/5 border border-white/10 rounded-3xl p-8">
+          <h3 className="text-xl font-bold mb-6 flex items-center">
+             Últimos Resultados Caixa
+             <span className="ml-3 text-[10px] bg-green-500/20 text-green-400 px-2 py-1 rounded">ATUALIZADO AO VIVO</span>
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {games.map(game => (
+              <div key={game.id} className="p-4 bg-emerald-900/20 rounded-2xl border border-white/5">
+                <div className="flex justify-between items-center mb-3">
+                  <span className="font-bold text-sm">{game.name}</span>
+                  <span className="text-[10px] opacity-40">Conc. 2974</span>
+                </div>
+                <div className="flex gap-2">
+                   {[12, 23, 34, 45, 56, 59].slice(0, game.default_numbers_per_bet || 6).map(n => (
+                     <div key={n} className="w-6 h-6 bg-white/10 rounded-full flex items-center justify-center text-[10px] font-bold">
+                       {n}
+                     </div>
+                   ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <footer className="mt-20 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center text-sm text-emerald-100/40">
+           <p>© 2026 IA Loterias Brasil. Todos os direitos reservados.</p>
+           <div className="flex space-x-6 mt-4 md:mt-0">
+             <Link href="/privacy-policy">Privacidade</Link>
+             <Link href="/terms-of-use">Termos</Link>
+             <Link href="/login" className="text-green-400">Acesso Restrito</Link>
+           </div>
+        </footer>
+      </div>
     </div>
   );
 }
 
 Starter.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
+};
-