<?php
// Ensure this path jumps up from public/ to the root for config
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/includes/ad-display.php';

$settings_file = __DIR__ . '/../config/site-settings.json';
$site_name = 'tipspac';
if (file_exists($settings_file)) {
    $loaded = json_decode(file_get_contents($settings_file), true);
    if (!empty($loaded['site_name'])) $site_name = $loaded['site_name'];
}
?>

<?php require_once __DIR__ . '/includes/header.php'; ?>

<!-- Neural Background -->
<div class="fixed inset-0 z-0 pointer-events-none opacity-20 bg-cover bg-center bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1579952363873-27f3bade9f55?q=80&w=2000&auto=format&fit=crop');"></div>
<div class="fixed inset-0 z-0 bg-gradient-to-t from-[#020617] via-[#020617]/85 to-transparent pointer-events-none"></div>
<canvas id="neuralCanvas" class="fixed inset-0 w-full h-full pointer-events-none z-0 opacity-40"></canvas>

<main class="relative z-10 flex-1 w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-20 flex flex-col items-center justify-center min-h-[75vh]">

    <!-- Main Card -->
    <div class="w-full bg-slate-900/60 backdrop-blur-xl border border-slate-800/80 rounded-3xl p-8 md:p-16 text-center relative overflow-hidden shadow-2xl animate-fade-in">
        
        <!-- Ambient Glows -->
        <div class="absolute -top-32 -left-32 w-64 h-64 bg-cyan-500/10 rounded-full blur-3xl animate-pulse-slow"></div>
        <div class="absolute -bottom-32 -right-32 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 3s;"></div>

        <div class="relative z-10 space-y-8">
            
            <!-- Status Badge -->
            <div class="inline-flex items-center space-x-2 bg-amber-500/10 border border-amber-500/20 px-4 py-1.5 rounded-full text-[10px] font-black tracking-widest uppercase text-amber-400">
                <span class="w-2 h-2 rounded-full bg-amber-400 animate-ping"></span>
                <span class="w-2 h-2 rounded-full bg-amber-400"></span>
                <span class="ml-2">System Training in Progress</span>
            </div>

            <!-- Heading -->
            <div class="space-y-4">
                <h1 class="text-4xl md:text-6xl font-black text-white tracking-tight">
                    Custom AI <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Builder</span>
                </h1>
                <p class="text-sm md:text-base text-slate-400 max-w-2xl mx-auto leading-relaxed">
                    We are currently compiling the neural network layers for the custom prediction builder. Soon, you will be able to construct your own algorithms, tweak Poisson distribution weights, and generate autonomous match models.
                </p>
            </div>

            <!-- Progress Bar -->
            <div class="max-w-md mx-auto pt-6 pb-2">
                <div class="flex justify-between text-[10px] font-black tracking-widest uppercase text-slate-500 mb-2">
                    <span>Model Compilation</span>
                    <span class="text-emerald-400 animate-pulse" id="progress-text">89%</span>
                </div>
                <div class="w-full bg-slate-800/80 rounded-full h-2.5 overflow-hidden shadow-inner border border-slate-700/50">
                    <div class="bg-gradient-to-r from-emerald-500 to-cyan-400 h-full rounded-full transition-all duration-1000" id="progress-bar" style="width: 89%;">
                        <div class="absolute top-0 right-0 bottom-0 w-10 bg-white/30 blur-[2px] animate-shimmer"></div>
                    </div>
                </div>
            </div>

            <!-- Features Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-3xl mx-auto pt-8 border-t border-slate-800/60 mt-8">
                <div class="bg-slate-950/40 border border-slate-800 rounded-2xl p-4 text-left hover:border-emerald-500/30 transition-all duration-300 group">
                    <span class="text-cyan-400 text-xl mb-2 block group-hover:scale-110 transition-transform">🧠</span>
                    <h3 class="text-xs font-black text-white uppercase tracking-widest mb-1">Logic Trees</h3>
                    <p class="text-[10px] text-slate-500 leading-relaxed">Set custom parameters for home advantage, injuries, and weather.</p>
                </div>
                <div class="bg-slate-950/40 border border-slate-800 rounded-2xl p-4 text-left hover:border-emerald-500/30 transition-all duration-300 group">
                    <span class="text-emerald-400 text-xl mb-2 block group-hover:scale-110 transition-transform">⚙️</span>
                    <h3 class="text-xs font-black text-white uppercase tracking-widest mb-1">Weight Tuning</h3>
                    <p class="text-[10px] text-slate-500 leading-relaxed">Adjust the algorithmic weight of historical head-to-head statistics.</p>
                </div>
                <div class="bg-slate-950/40 border border-slate-800 rounded-2xl p-4 text-left hover:border-emerald-500/30 transition-all duration-300 group">
                    <span class="text-amber-400 text-xl mb-2 block group-hover:scale-110 transition-transform">⚡</span>
                    <h3 class="text-xs font-black text-white uppercase tracking-widest mb-1">Instant Compute</h3>
                    <p class="text-[10px] text-slate-500 leading-relaxed">Test your custom models against thousands of historical matches instantly.</p>
                </div>
            </div>

            <!-- CTA -->
            <div class="pt-6 flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="predictions.php" class="inline-block bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white px-8 py-3 rounded-xl text-xs font-black tracking-widest uppercase transition shadow-lg shadow-slate-900/50 hover:-translate-y-0.5 hover:shadow-slate-800/30">
                    Return to Live Matrix
                </a>
                <button class="inline-block bg-emerald-600 hover:bg-emerald-500 text-white px-8 py-3 rounded-xl text-xs font-black tracking-widest uppercase transition shadow-lg shadow-emerald-600/30 hover:-translate-y-0.5 hover:shadow-emerald-500/50">
                    Notify Me When Ready
                </button>
            </div>

            <!-- Roadmap Hint -->
            <p class="text-[9px] text-slate-500 mt-4 tracking-widest uppercase">
                🚧 Expected release: Q4 2026 • Early access for VIP members
            </p>

        </div>
    </div>
</main>

<?php require_once __DIR__ . '/includes/footer.php'; ?>

<style>
    @keyframes pulse-slow {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(1.05); }
    }
    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(200%); }
    }
    @keyframes fade-in {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-pulse-slow {
        animation: pulse-slow 5s ease-in-out infinite;
    }
    .animate-shimmer {
        animation: shimmer 2.5s infinite;
    }
    .animate-fade-in {
        animation: fade-in 0.8s ease-out forwards;
    }
</style>

<script>
    // Animated Progress Bar – Simulate incremental loading (just for demo)
    document.addEventListener('DOMContentLoaded', function() {
        const bar = document.getElementById('progress-bar');
        const text = document.getElementById('progress-text');
        let progress = 89;

        // Simulate a slight increase to make it feel alive
        setTimeout(() => {
            progress = 92;
            bar.style.width = progress + '%';
            text.textContent = progress + '%';
        }, 2000);

        setTimeout(() => {
            progress = 95;
            bar.style.width = progress + '%';
            text.textContent = progress + '%';
        }, 4500);

        // Add a random shimmer effect to the bar (just for fun)
        setInterval(() => {
            const shimmer = document.querySelector('.animate-shimmer');
            if (shimmer) {
                shimmer.style.animation = 'none';
                setTimeout(() => {
                    shimmer.style.animation = 'shimmer 2.5s infinite';
                }, 10);
            }
        }, 5000);
    });

    // Neural Background Canvas
    const canvas = document.getElementById("neuralCanvas");
    if(canvas) {
        const ctx = canvas.getContext("2d");
        let width, height;
        let particles = [];
        let mouse = { x: null, y: null, radius: 150 };
        
        window.addEventListener('mousemove', function(e) {
            mouse.x = e.x;
            mouse.y = e.y;
        });

        function initCanvas() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            particles = [];
            let particleCount = (width * height) / 12000;
            for (let i = 0; i < particleCount; i++) {
                particles.push({
                    x: Math.random() * width,
                    y: Math.random() * height,
                    vx: (Math.random() - 0.5) * 1.5,
                    vy: (Math.random() - 0.5) * 1.5,
                    radius: Math.random() * 1.5 + 0.5
                });
            }
        }

        function animateCanvas() {
            ctx.clearRect(0, 0, width, height);
            for (let i = 0; i < particles.length; i++) {
                let p = particles[i];
                p.x += p.vx;
                p.y += p.vy;
                if (p.x < 0 || p.x > width) p.vx *= -1;
                if (p.y < 0 || p.y > height) p.vy *= -1;
                
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fillStyle = "rgba(16, 185, 129, 0.3)";
                ctx.fill();
                
                for (let j = i + 1; j < particles.length; j++) {
                    let p2 = particles[j];
                    let dist = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2));
                    if (dist < 100) {
                        ctx.beginPath();
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.strokeStyle = `rgba(16, 185, 129, ${1 - dist/100})`;
                        ctx.lineWidth = 0.5;
                        ctx.stroke();
                    }
                }
                
                if (mouse.x && mouse.y) {
                    let mouseDist = Math.sqrt(Math.pow(p.x - mouse.x, 2) + Math.pow(p.y - mouse.y, 2));
                    if (mouseDist < mouse.radius) {
                        ctx.beginPath();
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(mouse.x, mouse.y);
                        ctx.strokeStyle = `rgba(16, 185, 129, ${0.8 - mouseDist/mouse.radius})`;
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                }
            }
            requestAnimationFrame(animateCanvas);
        }
        window.addEventListener("resize", initCanvas);
        initCanvas();
        animateCanvas();
    }
</script>