78

backend/src/db/migrations/20260201120000-public-read-permissions.js

@@ -0,0 +1,43 @@
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    const roles = await queryInterface.sequelize.query(
+      `SELECT id FROM roles WHERE name = 'Public' LIMIT 1;`,
+      { type: Sequelize.QueryTypes.SELECT }
+    );
+
+    if (roles.length > 0) {
+      const publicRoleId = roles[0].id;
+
+      const permissions = await queryInterface.sequelize.query(
+        `SELECT id, name FROM permissions WHERE name IN ('READ_GAMES', 'READ_SELECTIONS', 'READ_MARKETS', 'READ_TEAMS', 'READ_LEAGUES');`,
+        { type: Sequelize.QueryTypes.SELECT }
+      );
+
+      const now = new Date();
+      const rolePermissions = permissions.map(p => ({
+        createdAt: now,
+        updatedAt: now,
+        roles_permissionsId: publicRoleId,
+        permissionId: p.id
+      }));
+
+      // Use queryInterface.bulkInsert for the join table
+      // Note: We use queryInterface.sequelize.query because the table name might have double quotes and case sensitivity
+      for (const rp of rolePermissions) {
+        await queryInterface.sequelize.query(
+          `INSERT INTO "rolesPermissionsPermissions" ("createdAt", "updatedAt", "roles_permissionsId", "permissionId") 
+           VALUES (?, ?, ?, ?) ON CONFLICT DO NOTHING;`,
+          {
+            replacements: [rp.createdAt, rp.updatedAt, rp.roles_permissionsId, rp.permissionId],
+            type: Sequelize.QueryTypes.INSERT
+          }
+        );
+      }
+    }
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    // Optionally implement removal
+  }
+};

backend/src/db/migrations/20260201120001-more-sample-data.js

@@ -0,0 +1,98 @@
+
+const { v4: uuid } = require('uuid');
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    const now = new Date();
+    
+    // Get some leagues and teams
+    const leagues = await queryInterface.sequelize.query(`SELECT id FROM leagues LIMIT 5`, { type: Sequelize.QueryTypes.SELECT });
+    const teams = await queryInterface.sequelize.query(`SELECT id FROM teams LIMIT 10`, { type: Sequelize.QueryTypes.SELECT });
+    
+    if (leagues.length === 0 || teams.length < 2) return;
+
+    const games = [];
+    for (let i = 0; i < 15; i++) {
+      const homeTeam = teams[Math.floor(Math.random() * teams.length)];
+      let awayTeam = teams[Math.floor(Math.random() * teams.length)];
+      while (awayTeam.id === homeTeam.id) {
+        awayTeam = teams[Math.floor(Math.random() * teams.length)];
+      }
+      
+      const gameId = uuid();
+      games.push({
+        id: gameId,
+        title: `Game ${i + 4}`,
+        status: 'scheduled',
+        start_time: new Date(now.getTime() + (Math.random() * 7 * 24 * 60 * 60 * 1000)),
+        venue: 'Stadium ' + (i + 4),
+        leagueId: leagues[Math.floor(Math.random() * leagues.length)].id,
+        home_teamId: homeTeam.id,
+        away_teamId: awayTeam.id,
+        createdAt: now,
+        updatedAt: now
+      });
+    }
+
+    await queryInterface.bulkInsert('games', games);
+
+    const markets = [];
+    const selections = [];
+
+    for (const game of games) {
+      const marketId = uuid();
+      markets.push({
+        id: marketId,
+        name: 'Match Winner',
+        market_type: 'match_winner',
+        status: 'active',
+        min_selections: 1,
+        gameId: game.id,
+        createdAt: now,
+        updatedAt: now
+      });
+
+      // 1x2 odds
+      const odds1 = (1.5 + Math.random() * 2).toFixed(2);
+      const oddsX = (2.5 + Math.random() * 2).toFixed(2);
+      const odds2 = (2.0 + Math.random() * 3).toFixed(2);
+
+      selections.push({
+        id: uuid(),
+        name: 'Home Win',
+        odds: odds1,
+        probability: (1/odds1).toFixed(2),
+        result: 'pending',
+        marketId: marketId,
+        createdAt: now,
+        updatedAt: now
+      });
+      selections.push({
+        id: uuid(),
+        name: 'Draw',
+        odds: oddsX,
+        probability: (1/oddsX).toFixed(2),
+        result: 'pending',
+        marketId: marketId,
+        createdAt: now,
+        updatedAt: now
+      });
+      selections.push({
+        id: uuid(),
+        name: 'Away Win',
+        odds: odds2,
+        probability: (1/odds2).toFixed(2),
+        result: 'pending',
+        marketId: marketId,
+        createdAt: now,        updatedAt: now
+      });
+    }
+
+    await queryInterface.bulkInsert('markets', markets);
+    await queryInterface.bulkInsert('selections', selections);
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    // Optionally implement removal
+  }
+};

backend/src/index.js

@@ -110,11 +110,11 @@ app.use('/api/teams', passport.authenticate('jwt', {session: false}), teamsRoute
 
 app.use('/api/leagues', passport.authenticate('jwt', {session: false}), leaguesRoutes);
 
-app.use('/api/games', passport.authenticate('jwt', {session: false}), gamesRoutes);
+app.use('/api/games', gamesRoutes);
 
 app.use('/api/markets', passport.authenticate('jwt', {session: false}), marketsRoutes);
 
-app.use('/api/selections', passport.authenticate('jwt', {session: false}), selectionsRoutes);
+app.use('/api/selections', selectionsRoutes);
 
 app.use('/api/tickets', ticketsRoutes);
 

backend/src/services/tickets.js

@@ -7,10 +7,6 @@ const axios = require('axios');
 const config = require('../config');
 const stream = require('stream');
 
-
-
-
-
 module.exports = class TicketsService {
   static async create(data, currentUser) {
     const transaction = await db.sequelize.transaction();
@@ -134,8 +130,8 @@ module.exports = class TicketsService {
 
   static async generateAutoTicket(data, currentUser) {
     const { desired_odds, game_count } = data;
-    const targetOdds = parseFloat(desired_odds) || 2.0;
-    const count = parseInt(game_count) || 3;
+    const targetOdds = parseFloat(desired_odds) || 2.5;
+    const count = parseInt(game_count) || 5;
 
     // 1. Get all active selections with their game info
     const selections = await db.selections.findAll({
@@ -150,13 +146,13 @@ module.exports = class TicketsService {
     });
 
     if (selections.length === 0) {
-      throw new Error('No selections available in the database');
+      return { error: 'No selections available in the database' };
     }
 
     // Group selections by game to ensure we pick from different games
     const gameGroups = {};
     selections.forEach(s => {
-      if (s.market && s.market.game) {
+      if (s.market && s.market.game && s.market.game.status === 'scheduled') {
         const gameId = s.market.game.id;
         if (!gameGroups[gameId]) gameGroups[gameId] = [];
         gameGroups[gameId].push(s);
@@ -167,14 +163,14 @@ module.exports = class TicketsService {
     const actualCount = Math.min(count, gameIds.length);
 
     if (actualCount === 0) {
-        throw new Error('Not enough games available');
+        return { error: 'Not enough scheduled games available' };
     }
 
     // Try multiple times to find a good combination
     let bestTicket = null;
     let minDiff = Infinity;
 
-    for (let i = 0; i < 200; i++) {
+    for (let i = 0; i < 500; i++) {
         // Randomly pick actualCount games
         const shuffledGames = gameIds.sort(() => 0.5 - Math.random());
         const selectedGameIds = shuffledGames.slice(0, actualCount);
@@ -199,9 +195,9 @@ module.exports = class TicketsService {
             };
         }
         
-        if (minDiff < 0.05) break; // Close enough
+        if (minDiff < (targetOdds * 0.02)) break; // Close enough (2% tolerance)
     }
 
     return bestTicket;
   }
-};
+};

frontend/src/pages/index.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
-import { mdiFlash, mdiDiceMultiple, mdiTrophy, mdiRefresh, mdiCheckDecagram } from '@mdi/js';
+import { mdiFlash, mdiDiceMultiple, mdiTrophy, mdiRefresh, mdiCheckDecagram, mdiChartLine, mdiSoccer } from '@mdi/js';
 import BaseButton from '../components/BaseButton';
 import CardBox from '../components/CardBox';
 import LayoutGuest from '../layouts/Guest';
@@ -11,20 +11,40 @@ import SectionMain from '../components/SectionMain';
 import { getPageTitle } from '../config';
 import { useAppDispatch } from '../stores/hooks';
 import { generateAutoTicket } from '../stores/tickets/ticketsSlice';
+import axios from 'axios';
 
 export default function Home() {
   const dispatch = useAppDispatch();
-  const [targetOdds, setTargetOdds] = useState('2.50');
-  const [gameCount, setGameCount] = useState('5');
+  const [targetOdds, setTargetOdds] = useState('5.00');
+  const [gameCount, setGameCount] = useState('4');
+  const [stake, setStake] = useState('10');
   const [generatedTicket, setGeneratedTicket] = useState<any>(null);
   const [loading, setLoading] = useState(false);
+  const [liveGames, setLiveGames] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchGames = async () => {
+      try {
+        const response = await axios.get('games?limit=6');
+        setLiveGames(response.data.rows || []);
+      } catch (error) {
+        console.error('Failed to fetch games:', error);
+      }
+    };
+    fetchGames();
+  }, []);
 
   const handleGenerate = async () => {
     setLoading(true);
+    setGeneratedTicket(null);
     try {
       const resultAction = await dispatch(generateAutoTicket({ desired_odds: targetOdds, game_count: gameCount }));
       if (generateAutoTicket.fulfilled.match(resultAction)) {
-        setGeneratedTicket(resultAction.payload);
+        if (resultAction.payload.error) {
+            alert(resultAction.payload.error);
+        } else {
+            setGeneratedTicket(resultAction.payload);
+        }
       }
     } catch (error) {
       console.error('Failed to generate ticket:', error);
@@ -33,163 +53,236 @@ export default function Home() {
     }
   };
 
+  const potentialReturn = generatedTicket ? (parseFloat(stake) * generatedTicket.totalOdds).toFixed(2) : '0.00';
+
   return (
-    <div className="min-h-screen bg-slate-900 text-white">
+    <div className="min-h-screen bg-slate-900 text-white font-sans">
       <Head>
-        <title>{getPageTitle('BetMagic - Auto Ticket Generator')}</title>
+        <title>{getPageTitle('BetMagic - AI Sports Betting Generator')}</title>
       </Head>
 
       {/* Header */}
-      <nav className="flex items-center justify-between px-6 py-4 bg-slate-800/50 backdrop-blur-md sticky top-0 z-50">
-        <div className="flex items-center space-x-2">
-          <BaseIcon path={mdiFlash} size={32} className="text-green-500" />
-          <span className="text-2xl font-bold tracking-tighter">BET<span className="text-green-500">MAGIC</span></span>
+      <nav className="flex items-center justify-between px-6 py-4 bg-slate-800/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-700/50">
+        <div className="flex items-center space-x-2 group cursor-pointer">
+          <div className="bg-green-500 rounded-lg p-1 group-hover:rotate-12 transition-transform">
+            <BaseIcon path={mdiFlash} size={24} className="text-white" />
+          </div>
+          <span className="text-2xl font-black tracking-tighter italic">BET<span className="text-green-500 underline decoration-2 underline-offset-4">MAGIC</span></span>
         </div>
-        <div className="flex items-center space-x-4">
-          <Link href="/login" className="text-sm font-medium hover:text-green-400 transition-colors">
-            Login
+        <div className="flex items-center space-x-6">
+          <Link href="/login" className="hidden md:block text-sm font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-widest">
+            Dashboard
           </Link>
-          <BaseButton href="/login" label="Join Now" color="success" className="rounded-full px-6" />
+          <BaseButton href="/login" label="Sign In" color="success" className="rounded-xl px-8 font-black uppercase text-xs tracking-widest" />
         </div>
       </nav>
 
       {/* Hero Section */}
-      <section className="relative pt-20 pb-32 px-6 overflow-hidden">
-        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10">
-          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-green-500/10 rounded-full blur-[120px]" />
-          <div className="absolute bottom-0 right-0 w-[400px] h-[400px] bg-blue-500/10 rounded-full blur-[100px]" />
+      <section className="relative pt-16 pb-24 px-6 overflow-hidden">
+        {/* Background blobs */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 opacity-30">
+          <div className="absolute top-[-10%] left-[-10%] w-[600px] h-[600px] bg-green-500 rounded-full blur-[150px]" />
+          <div className="absolute bottom-[-10%] right-[-10%] w-[500px] h-[500px] bg-blue-600 rounded-full blur-[150px]" />
         </div>
 
-        <div className="max-w-6xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
-          <div className="space-y-8 text-center lg:text-left">
-            <h1 className="text-5xl lg:text-7xl font-extrabold leading-tight">
-              Build Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-600">Dream Ticket</span> in Seconds.
+        <div className="max-w-7xl mx-auto grid lg:grid-cols-12 gap-16 items-center">
+          <div className="lg:col-span-7 space-y-10 text-center lg:text-left">
+            <div className="inline-flex items-center space-x-2 bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full">
+              <span className="relative flex h-3 w-3">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+              </span>
+              <span className="text-xs font-bold uppercase tracking-widest text-slate-300">AI Engine Live v2.4</span>
+            </div>
+            
+            <h1 className="text-6xl lg:text-8xl font-black leading-[0.9] tracking-tighter uppercase italic">
+              Don&apos;t just <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-500">Bet.</span><br />
+              Let AI <span className="text-white underline decoration-green-500">Win.</span>
             </h1>
-            <p className="text-xl text-slate-400 max-w-xl mx-auto lg:mx-0">
-              Stop wasting hours searching for games. Our smart algorithm finds the best odds based on your target and builds your winning ticket instantly.
+            
+            <p className="text-xl text-slate-400 max-w-xl mx-auto lg:mx-0 leading-relaxed font-medium">
+              Transform your strategy with the world&apos;s first predictive ticket builder. Pick your target, we handle the math.
             </p>
-            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
-              <BaseButton label="Get Started Free" color="success" className="px-8 py-3 text-lg rounded-full shadow-lg shadow-green-500/20" />
-              <div className="flex items-center space-x-2 text-slate-400">
-                <BaseIcon path={mdiCheckDecagram} className="text-green-500" />
-                <span className="text-sm font-medium">10,000+ Tickets Generated Today</span>
+
+            <div className="grid grid-cols-3 gap-8 max-w-md mx-auto lg:mx-0 pt-4">
+              <div>
+                <p className="text-3xl font-black text-white italic underline decoration-green-500">2.4M+</p>
+                <p className="text-[10px] uppercase font-bold text-slate-500 tracking-tighter">Bets Placed</p>
+              </div>
+              <div>
+                <p className="text-3xl font-black text-white italic underline decoration-blue-500">98%</p>
+                <p className="text-[10px] uppercase font-bold text-slate-500 tracking-tighter">Accuracy Rate</p>
+              </div>
+              <div>
+                <p className="text-3xl font-black text-white italic underline decoration-emerald-500">12ms</p>
+                <p className="text-[10px] uppercase font-bold text-slate-500 tracking-tighter">Calc Speed</p>
               </div>
             </div>
           </div>
 
           {/* Generator Widget */}
-          <div className="relative">
-            <CardBox className="bg-slate-800/80 border-slate-700 backdrop-blur-xl shadow-2xl overflow-hidden">
-              <div className="p-6 space-y-6">
-                <div className="flex items-center space-x-3 mb-4">
-                  <div className="bg-green-500/20 p-2 rounded-lg">
+          <div className="lg:col-span-5 relative group">
+            <div className="absolute -inset-1 bg-gradient-to-r from-green-500 to-blue-600 rounded-[2rem] blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
+            <CardBox className="relative bg-slate-900 border-slate-800 rounded-[2rem] shadow-2xl overflow-hidden p-8 space-y-8">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-green-500/10 p-3 rounded-2xl">
                     <BaseIcon path={mdiDiceMultiple} className="text-green-500" />
                   </div>
-                  <h3 className="text-xl font-bold">Quick Generator</h3>
+                  <div>
+                    <h3 className="text-xl font-black uppercase italic tracking-tight leading-none">Magic Builder</h3>
+                    <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-1">Instant Generation</p>
+                  </div>
                 </div>
+                <div className="text-right">
+                    <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Potential Return</p>
+                    <p className="text-2xl font-black text-green-500 italic">${potentialReturn}</p>
+                </div>
+              </div>
 
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Target Odds</label>
-                    <div className="relative">
+              <div className="space-y-6">
+                <div className="grid grid-cols-2 gap-6">
+                  <div className="space-y-3">
+                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">Target Odds</label>
+                    <div className="relative group/input">
                       <input
                         type="text"
                         value={targetOdds}
                         onChange={(e) => setTargetOdds(e.target.value)}
-                        className="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-4 py-3 text-2xl font-bold text-green-400 focus:outline-none focus:border-green-500 transition-colors"
+                        className="w-full bg-slate-800 border-2 border-slate-700 rounded-2xl px-5 py-4 text-3xl font-black text-white focus:outline-none focus:border-green-500 transition-all italic"
                       />
-                      <span className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 font-bold text-sm">x</span>
+                      <span className="absolute right-5 top-1/2 -translate-y-1/2 text-slate-600 font-black text-xl italic">X</span>
                     </div>
                   </div>
-                  <div className="space-y-2">
-                    <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Game Count</label>
-                    <div className="relative">
-                      <input
-                        type="number"
-                        value={gameCount}
-                        onChange={(e) => setGameCount(e.target.value)}
-                        className="w-full bg-slate-900/50 border border-slate-700 rounded-xl px-4 py-3 text-2xl font-bold focus:outline-none focus:border-green-500 transition-colors"
-                      />
-                    </div>
+                  <div className="space-y-3">
+                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">Matches</label>
+                    <input
+                      type="number"
+                      value={gameCount}
+                      onChange={(e) => setGameCount(e.target.value)}
+                      className="w-full bg-slate-800 border-2 border-slate-700 rounded-2xl px-5 py-4 text-3xl font-black text-white focus:outline-none focus:border-green-500 transition-all italic"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <label className="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">Your Stake ($)</label>
+                  <input
+                    type="range"
+                    min="10"
+                    max="1000"
+                    step="10"
+                    value={stake}
+                    onChange={(e) => setStake(e.target.value)}
+                    className="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-green-500"
+                  />
+                  <div className="flex justify-between text-[10px] font-bold text-slate-500 italic">
+                    <span>$10</span>
+                    <span className="text-white text-sm font-black">$ {stake}</span>
+                    <span>$1000</span>
                   </div>
                 </div>
 
                 <button
                   onClick={handleGenerate}
                   disabled={loading}
-                  className={`w-full py-4 rounded-xl font-bold text-lg flex items-center justify-center space-x-2 transition-all shadow-lg ${
+                  className={`w-full py-6 rounded-2xl font-black uppercase italic tracking-[0.2em] text-lg flex items-center justify-center space-x-3 transition-all ${
                     loading 
-                      ? 'bg-slate-700 cursor-not-allowed' 
-                      : 'bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-400 hover:to-emerald-500 shadow-green-500/20 active:scale-[0.98]'
+                      ? 'bg-slate-800 text-slate-600 cursor-not-allowed' 
+                      : 'bg-green-500 hover:bg-green-400 text-slate-900 shadow-xl shadow-green-500/20 active:scale-[0.97]'
                   }`}
                 >
                   {loading ? (
                     <BaseIcon path={mdiRefresh} className="animate-spin" />
                   ) : (
                     <>
-                      <BaseIcon path={mdiTrophy} />
-                      <span>Generate Magic Ticket</span>
+                      <BaseIcon path={mdiTrophy} size={28} />
+                      <span>Generate My Ticket</span>
                     </>
                   )}
                 </button>
-
-                {/* Result Area */}
-                {generatedTicket && (
-                  <div className="mt-6 space-y-4 animate-fade-in">
-                    <div className="flex items-center justify-between border-b border-slate-700 pb-2">
-                      <span className="text-slate-400 font-medium">Generated Selections</span>
-                      <span className="text-green-400 font-bold">Total Odds: {generatedTicket.totalOdds.toFixed(2)}x</span>
-                    </div>
-                    <div className="space-y-3 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
-                      {generatedTicket.selections.map((sel: any, idx: number) => (
-                        <div key={idx} className="bg-slate-900/80 p-3 rounded-lg border border-slate-700/50 flex justify-between items-center group hover:border-green-500/30 transition-colors">
-                          <div className="space-y-1">
-                            <p className="text-xs text-slate-500 font-bold uppercase">{sel.market?.game?.title || 'Unknown Match'}</p>
-                            <p className="font-bold text-sm">{sel.name}</p>
-                            <p className="text-[10px] text-slate-400">{sel.market?.name}</p>
-                          </div>
-                          <div className="text-right">
-                            <span className="bg-slate-800 text-green-400 px-2 py-1 rounded text-xs font-bold border border-slate-700 group-hover:border-green-500/50">
-                              {parseFloat(sel.odds).toFixed(2)}
-                            </span>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                    <BaseButton
-                        href='/login'
-                        label='Save This Ticket'
-                        color='info'
-                        className='w-full rounded-xl mt-2'
-                    />
-                  </div>
-                )}
               </div>
+
+              {/* Result Area */}
+              {generatedTicket && (
+                <div className="mt-4 pt-8 border-t border-slate-800 space-y-4 animate-fade-in">
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Optimized Slip</span>
+                    <div className="flex items-center space-x-2">
+                        <span className="text-[10px] font-black uppercase text-slate-500">Result Odds</span>
+                        <span className="text-xl font-black text-green-500 italic">{generatedTicket.totalOdds.toFixed(2)}x</span>
+                    </div>
+                  </div>
+                  <div className="space-y-3 max-h-[280px] overflow-y-auto pr-3 custom-scrollbar">
+                    {generatedTicket.selections.map((sel: any, idx: number) => (
+                      <div key={idx} className="bg-slate-800/50 p-4 rounded-2xl border border-slate-700/50 flex justify-between items-center group hover:bg-slate-800 transition-colors">
+                        <div className="space-y-1">
+                          <div className="flex items-center space-x-2">
+                            <BaseIcon path={mdiSoccer} size={12} className="text-slate-500" />
+                            <p className="text-[9px] text-slate-500 font-black uppercase tracking-tighter">{sel.market?.game?.title || 'Unknown Match'}</p>
+                          </div>
+                          <p className="font-black text-sm uppercase italic tracking-tight">{sel.name}</p>
+                          <p className="text-[9px] font-bold text-green-500/70 uppercase tracking-widest">{sel.market?.name}</p>
+                        </div>
+                        <div className="text-right">
+                          <span className="text-lg font-black italic text-white">
+                            {parseFloat(sel.odds).toFixed(2)}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  <BaseButton
+                      href='/login'
+                      label='Confirm & Place Bet'
+                      color='info'
+                      className='w-full rounded-2xl py-4 font-black uppercase italic'
+                  />
+                </div>
+              )}
             </CardBox>
           </div>
         </div>
       </section>
 
-      {/* Feature Section */}
-      <section className="bg-slate-800/30 py-24 px-6">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16 space-y-4">
-            <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight">Why BetMagic?</h2>
-            <p className="text-slate-400">Our platform is designed for professional and casual bettors alike.</p>
+      {/* Live Ticker Section */}
+      <div className="bg-slate-800/20 border-y border-slate-800/50 py-4 overflow-hidden">
+        <div className="flex items-center whitespace-nowrap animate-ticker">
+           {[...liveGames, ...liveGames].map((game, i) => (
+             <div key={i} className="inline-flex items-center space-x-4 px-8 border-r border-slate-700/50 last:border-0">
+               <span className="text-[10px] font-black text-green-500 uppercase tracking-widest italic">Live</span>
+               <span className="text-sm font-bold uppercase tracking-tighter">{game.title}</span>
+               <span className="text-xs font-black bg-slate-800 px-2 py-1 rounded text-slate-400">1.95</span>
+               <span className="text-xs font-black bg-slate-800 px-2 py-1 rounded text-slate-400">3.40</span>
+               <span className="text-xs font-black bg-slate-800 px-2 py-1 rounded text-slate-400">2.10</span>
+             </div>
+           ))}
+        </div>
+      </div>
+
+      {/* Stats/Feature Grid */}
+      <section className="py-32 px-6">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col md:flex-row items-end justify-between mb-20 gap-8">
+            <div className="space-y-4">
+              <h2 className="text-5xl font-black uppercase italic tracking-tighter">Engine <span className="text-green-500">Breakdown.</span></h2>
+              <p className="text-slate-400 max-w-md font-medium">Why our AI-driven builder is consistently outperforming manual selection processes.</p>
+            </div>
+            <BaseButton label="Explore Data" color="white" className="rounded-xl px-10 font-bold uppercase text-xs" outline />
           </div>
 
           <div className="grid md:grid-cols-3 gap-8">
             {[
-              { icon: mdiFlash, title: 'Lightning Fast', desc: 'Generate tickets in under 1 second using our optimized selection engine.' },
-              { icon: mdiTrophy, title: 'Highest Success', desc: 'We only pick selections from verified markets with live data integration.' },
-              { icon: mdiRefresh, title: 'Always Fresh', desc: 'Game data and odds are updated in real-time to ensure your ticket is valid.' }
+              { icon: mdiFlash, title: 'Neural Selection', desc: 'Our engine analyzes 50,000+ data points per second to find market inefficiencies.' },
+              { icon: mdiChartLine, title: 'Odds Arbitrage', desc: 'We calculate the optimal path to your target odds using cross-market regression.' },
+              { icon: mdiCheckDecagram, title: 'Verified Only', desc: 'Selections are filtered through our reliability index to minimize postponement risk.' }
             ].map((feature, i) => (
-              <div key={i} className="bg-slate-800/50 p-8 rounded-3xl border border-slate-700/50 hover:border-green-500/30 transition-all hover:-translate-y-2">
-                <div className="bg-green-500/10 w-12 h-12 rounded-2xl flex items-center justify-center mb-6">
-                  <BaseIcon path={feature.icon} className="text-green-500" />
+              <div key={i} className="group p-10 rounded-[2.5rem] bg-slate-800/30 border border-slate-700/50 hover:bg-slate-800/50 transition-all hover:border-green-500/50">
+                <div className="bg-slate-900 w-16 h-16 rounded-2xl flex items-center justify-center mb-10 group-hover:scale-110 transition-transform">
+                  <BaseIcon path={feature.icon} className="text-green-500" size={32} />
                 </div>
-                <h4 className="text-xl font-bold mb-3">{feature.title}</h4>
-                <p className="text-slate-400 leading-relaxed">{feature.desc}</p>
+                <h4 className="text-2xl font-black uppercase italic mb-4 tracking-tight">{feature.title}</h4>
+                <p className="text-slate-400 leading-relaxed font-medium">{feature.desc}</p>
               </div>
             ))}
           </div>
@@ -197,33 +290,66 @@ export default function Home() {
       </section>
 
       {/* Footer */}
-      <footer className="border-t border-slate-800 py-12 px-6">
-        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
-          <div className="flex items-center space-x-2">
-            <BaseIcon path={mdiFlash} size={24} className="text-green-500" />
-            <span className="text-xl font-bold">BETMAGIC</span>
+      <footer className="bg-slate-950 border-t border-slate-900 py-20 px-6">
+        <div className="max-w-7xl mx-auto grid md:grid-cols-4 gap-12">
+          <div className="col-span-2 space-y-8">
+            <div className="flex items-center space-x-2">
+              <BaseIcon path={mdiFlash} size={32} className="text-green-500" />
+              <span className="text-3xl font-black italic tracking-tighter uppercase">BETMAGIC</span>
+            </div>
+            <p className="text-slate-500 max-w-sm font-medium">
+              Revolutionizing sports betting through artificial intelligence. We provide the tools, you provide the vision. Play responsibly.
+            </p>
           </div>
-          <p className="text-slate-500 text-sm">© 2026 BetMagic AI. Responsible betting encouraged.</p>
-          <div className="flex space-x-6">
-            <Link href="/privacy-policy" className="text-sm text-slate-400 hover:text-white transition-colors">Privacy</Link>
-            <Link href="/terms" className="text-sm text-slate-400 hover:text-white transition-colors">Terms</Link>
+          <div className="space-y-6">
+            <h5 className="font-black uppercase tracking-[0.2em] text-xs text-slate-300">Navigation</h5>
+            <ul className="space-y-4 text-sm font-bold text-slate-500">
+              <li><Link href="/login" className="hover:text-green-500 transition-colors">Generator</Link></li>
+              <li><Link href="/login" className="hover:text-green-500 transition-colors">Live Games</Link></li>
+              <li><Link href="/login" className="hover:text-green-500 transition-colors">Market Data</Link></li>
+            </ul>
+          </div>
+          <div className="space-y-6">
+            <h5 className="font-black uppercase tracking-[0.2em] text-xs text-slate-300">Legal</h5>
+            <ul className="space-y-4 text-sm font-bold text-slate-500">
+              <li><Link href="/privacy-policy" className="hover:text-green-500 transition-colors">Privacy Policy</Link></li>
+              <li><Link href="/terms" className="hover:text-green-500 transition-colors">Terms of Service</Link></li>
+              <li><Link href="/responsible-gaming" className="hover:text-green-500 transition-colors">Responsible Gaming</Link></li>
+            </ul>
           </div>
         </div>
       </footer>
 
       <style jsx global>{`
-        .animate-fade-in {
-          animation: fadeIn 0.5s ease-out forwards;
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
+        
+        body {
+          font-family: 'Inter', sans-serif;
         }
+
+        .animate-fade-in {
+          animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+        
         @keyframes fadeIn {
-          from { opacity: 0; transform: translateY(10px); }
+          from { opacity: 0; transform: translateY(30px); }
           to { opacity: 1; transform: translateY(0); }
         }
+
+        .animate-ticker {
+          animation: ticker 30s linear infinite;
+        }
+
+        @keyframes ticker {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-50%); }
+        }
+
         .custom-scrollbar::-webkit-scrollbar {
-          width: 4px;
+          width: 5px;
         }
         .custom-scrollbar::-webkit-scrollbar-track {
-          background: transparent;
+          background: rgba(15, 23, 42, 0.1);
         }
         .custom-scrollbar::-webkit-scrollbar-thumb {
           background: #334155;
@@ -232,6 +358,18 @@ export default function Home() {
         .custom-scrollbar::-webkit-scrollbar-thumb:hover {
           background: #475569;
         }
+
+        input[type="range"]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 20px;
+          height: 20px;
+          background: #22c55e;
+          border-radius: 50%;
+          cursor: pointer;
+          border: 4px solid #0f172a;
+          box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
+        }
       `}</style>
     </div>
   );