<?php
// /var/www/html/index.php
session_start();

// --- CONFIGURATION INCLUDES ---
require_once 'api/db_config.php';
// Check if helper exists before including
if (file_exists('api/config_helpers.php')) {
    require_once 'api/config_helpers.php';
}

// --- SETUP ---
$conn = getDbConnection();
$is_maintenance = false;
$is_admin = isset($_SESSION['isAdmin']) && $_SESSION['isAdmin'] === true;

// Default Text Fallbacks
$hero_text_main = 'Automate Your Trading'; 
$hero_text_color = 'with Confluence King';  
$hero_text_sub = 'The ultra-low latency bridge between TradingView and MetaTrader. Execute trades in milliseconds, not seconds. Start your 7-day free trial today.'; 

// --- DB FETCH ---
if ($conn && function_exists('getSiteConfig')) {
    $maintenance_status = getSiteConfig($conn, 'maintenance_mode');
    
    // Fetch dynamic hero content
    $text_main = getContentSnippet($conn, 'hero_heading_main');
    $text_color = getContentSnippet($conn, 'hero_heading_color');
    $text_sub = getContentSnippet($conn, 'hero_subtext');
    
    $hero_text_main = $text_main ?: $hero_text_main;
    $hero_text_color = $text_color ?: $hero_text_color;
    $hero_text_sub = $text_sub ?: $hero_text_sub;

    $is_maintenance = ($maintenance_status == 'true');
    $conn->close();

    // Maintenance Mode Enforcement
    if ($is_maintenance && !$is_admin) {
        http_response_code(503);
        echo '<body style="background:#0f172a; color:#fff; display:flex; align-items:center; justify-content:center; height:100vh; font-family:sans-serif; text-align:center;">
                <div><h1 style="font-size:3rem; margin-bottom:1rem;">Site Maintenance</h1><p>We are upgrading our systems. Back shortly.</p></div>
              </body>';
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Confluence King - The Ultimate Trading Bridge</title>
    <?php require_once 'includes/meta.php'; ?>
    <style>
        /* Custom Gradients for the "Glow" text */
        .text-gradient {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(to right, #60a5fa, #a855f7);
        }
    </style>
</head>
<body class="bg-slate-900 text-slate-200 font-sans antialiased selection:bg-blue-500 selection:text-white">

    <?php require_once 'includes/header.php'; ?>

    <main>
        <div class="relative overflow-hidden pt-20 pb-16 lg:pt-32 lg:pb-24">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
                    
                    <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
                        <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight text-white mb-6 leading-tight">
                            <?php echo htmlspecialchars($hero_text_main); ?>
                            <span class="block text-gradient mt-2"><?php echo htmlspecialchars($hero_text_color); ?></span>
                        </h1>
                        <p class="mt-4 text-xl text-slate-400 mb-10 max-w-2xl mx-auto lg:mx-0">
                            <?php echo htmlspecialchars($hero_text_sub); ?>
                        </p>
                        
                        <div class="flex flex-col sm:flex-row justify-center lg:justify-start gap-4">
                            <a href="register.php" class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-bold text-lg shadow-lg shadow-blue-500/20 transition-all transform hover:scale-105 text-center">
                                Start Free 7-Day Trial
                            </a>
                            <a href="#how-it-works" class="px-8 py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-lg font-bold text-lg border border-slate-700 transition-all text-center">
                                How It Works
                            </a>
                        </div>
                    </div>
                    
                    <div class="mt-12 lg:mt-0 lg:col-span-6 relative">
                        <div class="absolute -inset-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl blur-2xl opacity-80 animate-pulse"></div>
                        
                        <div class="relative w-full">
                            <img class="w-full rounded-xl shadow-2xl" 
                                 src="images/algo_screenshot.png" 
                                 alt="Confluence King Algo on TradingView">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full z-0 pointer-events-none">
                <div class="absolute top-20 left-1/4 w-96 h-96 bg-blue-600/10 rounded-full blur-3xl"></div>
                <div class="absolute top-40 right-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl"></div>
            </div>
        </div>

        <div class="border-y border-slate-800 bg-slate-900/50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                    <div>
                        <div class="text-4xl font-bold text-white mb-1">&lt; 200ms</div>
                        <div class="text-sm text-slate-500 uppercase tracking-wider">Average Latency</div>
                    </div>
                    <div>
                        <div class="text-4xl font-bold text-white mb-1">99.9%</div>
                        <div class="text-sm text-slate-500 uppercase tracking-wider">Server Uptime</div>
                    </div>
                    <div>
                        <div class="text-4xl font-bold text-white mb-1">24/7</div>
                        <div class="text-sm text-slate-500 uppercase tracking-wider">Automated Execution</div>
                    </div>
                </div>
            </div>
        </div>

        
        <section id="how-it-works" class="py-24 relative">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl font-bold text-white">Automation Made Simple</h2>
                    <p class="text-slate-400 mt-4">Connect your strategy to your broker in three steps.</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                    <div class="relative p-8 bg-slate-800 rounded-2xl border border-slate-700">
                        <div class="absolute -top-6 left-8 w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-xl font-bold text-white shadow-lg">1</div>
                        <h3 class="text-xl font-bold text-white mt-4 mb-3">Create Alert</h3>
                        <p class="text-slate-400">Set up your strategy on TradingView. Paste your unique Confluence King Webhook URL into the alert settings.</p>
                    </div>

                    <div class="relative p-8 bg-slate-800 rounded-2xl border border-slate-700">
                        <div class="absolute -top-6 left-8 w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center text-xl font-bold text-white shadow-lg">2</div>
                        <h3 class="text-xl font-bold text-white mt-4 mb-3">Instant Relay</h3>
                        <p class="text-slate-400">Our high-speed server receives the signal, verifies your license securely, and queues the command instantly.</p>
                    </div>

                    <div class="relative p-8 bg-slate-800 rounded-2xl border border-slate-700">
                        <div class="absolute -top-6 left-8 w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center text-xl font-bold text-white shadow-lg">3</div>
                        <h3 class="text-xl font-bold text-white mt-4 mb-3">Execution</h3>
                        <p class="text-slate-400">The Confluence King EA running on your MT4/MT5 terminal picks up the command and executes the trade.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-24 bg-slate-800/50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
                                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            </div>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-medium text-white">Ultra-Low Latency</h3>
                            <p class="mt-2 text-base text-slate-400">Engineered for speed. Our lightweight architecture ensures your trade hits the market the moment the alert fires.</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-600 text-white">
                                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                            </div>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-medium text-white">Secure Infrastructure</h3>
                            <p class="mt-2 text-base text-slate-400">Protected by IP anti-abuse logic, encrypted connections, and unique license keys for every user.</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            </div>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-medium text-white">Reliable Uptime</h3>
                            <p class="mt-2 text-base text-slate-400">Our distributed monitoring and robust server configuration ensure your signals are never missed.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-24 relative overflow-hidden">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-3xl font-bold text-white mb-6">More Than Just Webhooks</h2>
                <p class="text-xl text-slate-400 mb-10 max-w-2xl mx-auto">
                    Access our exclusive library of Expert Advisors and Pinescript indicators to supercharge your strategy.
                </p>
                
                <div class="inline-grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <a href="marketplace.php" class="px-6 py-3 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-white font-semibold transition-colors">
                        Browse Marketplace
                    </a>
                    <a href="pricing.php" class="px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-lg text-white font-semibold transition-colors">
                        View Webhook Plans
                    </a>
                </div>
            </div>
        </section>

    </main>

    <footer class="bg-slate-950 border-t border-slate-800">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <span class="text-lg font-bold text-white">Confluence King</span>
                    <p class="text-slate-500 text-sm mt-1">Automating the future of trading.</p>
                </div>
                <div class="flex space-x-6 text-sm text-slate-400">
                    <a href="tos.html" class="hover:text-white transition-colors">Terms of Service</a>
                    <a href="privacy.html" class="hover:text-white transition-colors">Privacy Policy</a>
                    <a href="mailto:admin@confluence-king.com" class="hover:text-white transition-colors">Contact Support</a>
                </div>
            </div>
            <div class="mt-8 border-t border-slate-800 pt-8 text-center">
                <p class="text-xs text-slate-600">
                    Trading foreign exchange on margin carries a high level of risk. Confluence King provides software tools only and does not offer financial advice.
                </p>
                <p class="text-xs text-slate-600 mt-2">&copy; <?php echo date('Y'); ?> Confluence King. All rights reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>