<?php
/**
 * SMM Paket Satış Scripti - Bakım Modu Sayfası
 * @version 1.0.1
 */

// Config zaten dahil edilmişse tekrar dahil etme
if (!isset($settings)) {
    require_once __DIR__ . '/config.php';
}

// Site bilgilerini al
$siteName = $settings->get('site_name', 'Site');
$siteTitle = $settings->get('site_title', 'Bakım Modu');
$siteLogo = $settings->get('site_logo', '');
$contactEmail = $settings->get('contact_email', '');
$whatsappNumber = $settings->get('whatsapp_number', '');

// Tema renkleri
$primaryColor = $theme['primary_color'] ?? '#6366f1';
$secondaryColor = $theme['secondary_color'] ?? '#8b5cf6';

// Hex to RGB
function hexToRgbMaintenance($hex) {
    $hex = ltrim($hex, '#');
    if (strlen($hex) == 3) {
        $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
    }
    return implode(', ', array_map('hexdec', str_split($hex, 2)));
}

$primaryRgb = hexToRgbMaintenance($primaryColor);
$secondaryRgb = hexToRgbMaintenance($secondaryColor);

// HTTP Status
http_response_code(503);
header('Retry-After: 3600');
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title>Bakım Modu - <?php echo htmlspecialchars($siteName); ?></title>
    
    <?php if ($settings->get('site_favicon')): ?>
    <link rel="icon" href="<?php echo SITE_URL . '/' . $settings->get('site_favicon'); ?>">
    <?php endif; ?>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: <?php echo $primaryColor; ?>;
            --secondary: <?php echo $secondaryColor; ?>;
            --primary-rgb: <?php echo $primaryRgb; ?>;
            --secondary-rgb: <?php echo $secondaryRgb; ?>;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html, body {
            min-height: 100%;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #0a0e1a;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 40px 20px;
        }
        
        /* Animated Background */
        .bg-animation {
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
        }
        
        .bg-gradient {
            position: absolute;
            width: 150%;
            height: 150%;
            top: -25%;
            left: -25%;
            background: 
                radial-gradient(ellipse at 20% 20%, rgba(var(--primary-rgb), 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(var(--secondary-rgb), 0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
            animation: bgRotate 30s linear infinite;
        }
        
        @keyframes bgRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .floating-shapes {
            position: absolute;
            inset: 0;
        }
        
        .shape {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--secondary-rgb), 0.05));
            animation: float 20s ease-in-out infinite;
        }
        
        .shape:nth-child(1) { width: 300px; height: 300px; top: 10%; left: 5%; animation-delay: 0s; }
        .shape:nth-child(2) { width: 200px; height: 200px; top: 60%; right: 10%; animation-delay: -5s; }
        .shape:nth-child(3) { width: 150px; height: 150px; bottom: 15%; left: 20%; animation-delay: -10s; }
        .shape:nth-child(4) { width: 100px; height: 100px; top: 30%; right: 25%; animation-delay: -15s; }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-30px) rotate(5deg); }
            50% { transform: translateY(0) rotate(0deg); }
            75% { transform: translateY(30px) rotate(-5deg); }
        }
        
        /* Grid Pattern */
        .grid-pattern {
            position: absolute;
            inset: 0;
            background-image: 
                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 50px 50px;
            mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
        }
        
        /* Main Container */
        .maintenance-container {
            position: relative;
            z-index: 10;
            text-align: center;
            max-width: 550px;
            width: 100%;
        }
        
        /* Card */
        .maintenance-card {
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 32px;
            padding: 50px 40px;
            box-shadow: 0 25px 80px rgba(0,0,0,0.5);
        }
        
        /* Logo */
        .logo-wrapper {
            margin-bottom: 35px;
        }
        
        .logo-wrapper img {
            max-height: 50px;
            width: auto;
        }
        
        .logo-wrapper .text-logo {
            font-size: 28px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Icon Animation */
        .icon-wrapper {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto 35px;
        }
        
        .icon-circle {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: var(--primary);
            animation: spin 2s linear infinite;
        }
        
        .icon-circle:nth-child(2) {
            inset: 10px;
            border-top-color: transparent;
            border-right-color: var(--secondary);
            animation-duration: 3s;
            animation-direction: reverse;
        }
        
        .icon-circle:nth-child(3) {
            inset: 20px;
            border-top-color: var(--primary);
            border-right-color: transparent;
            animation-duration: 4s;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .icon-inner {
            position: absolute;
            inset: 30px;
            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--secondary-rgb), 0.2));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .icon-inner i {
            font-size: 32px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: pulse 2s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        /* Content */
        .maintenance-title {
            font-size: 32px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 15px;
            line-height: 1.2;
        }
        
        .maintenance-title span {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .maintenance-text {
            font-size: 16px;
            color: rgba(255,255,255,0.6);
            line-height: 1.7;
            margin-bottom: 30px;
        }
        
        /* Progress Bar */
        .progress-wrapper {
            background: rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 30px;
            border: 1px solid rgba(255,255,255,0.08);
        }
        
        .progress-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .progress-label {
            font-size: 13px;
            font-weight: 600;
            color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .progress-label i {
            color: var(--primary);
            animation: spin 2s linear infinite;
        }
        
        .progress-percent {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary);
        }
        
        .progress-bar {
            height: 6px;
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 3px;
            width: 0%;
            animation: progressAnim 3s ease-in-out infinite;
            position: relative;
        }
        
        .progress-fill::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s ease-in-out infinite;
        }
        
        @keyframes progressAnim {
            0% { width: 0%; }
            50% { width: 80%; }
            100% { width: 0%; }
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        /* Contact Links */
        .contact-section {
            padding-top: 25px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        
        .contact-title {
            font-size: 12px;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 15px;
        }
        
        .contact-links {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .contact-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            color: #fff;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .contact-link:hover {
            transform: translateY(-2px);
        }
        
        .contact-link.whatsapp:hover {
            background: rgba(37, 211, 102, 0.15);
            border-color: #25d366;
            color: #25d366;
        }
        
        .contact-link.email:hover {
            background: rgba(var(--primary-rgb), 0.15);
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .contact-link i {
            font-size: 16px;
        }
        
        /* Features */
        .features {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 25px;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        
        .feature {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: rgba(255,255,255,0.4);
        }
        
        .feature i {
            color: var(--primary);
            font-size: 12px;
        }
        
        /* Footer */
        .maintenance-footer {
            margin-top: 30px;
            text-align: center;
        }
        
        .maintenance-footer p {
            font-size: 12px;
            color: rgba(255,255,255,0.3);
        }
        
        /* Responsive */
        @media (max-width: 576px) {
            body {
                padding: 20px 15px;
            }
            
            .maintenance-card {
                padding: 35px 25px;
                border-radius: 24px;
            }
            
            .maintenance-title {
                font-size: 26px;
            }
            
            .maintenance-text {
                font-size: 14px;
            }
            
            .icon-wrapper {
                width: 100px;
                height: 100px;
            }
            
            .icon-inner {
                inset: 25px;
            }
            
            .icon-inner i {
                font-size: 26px;
            }
            
            .contact-links {
                flex-direction: column;
            }
            
            .contact-link {
                width: 100%;
                justify-content: center;
            }
            
            .features {
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- Background Animation -->
    <div class="bg-animation">
        <div class="bg-gradient"></div>
        <div class="floating-shapes">
            <div class="shape"></div>
            <div class="shape"></div>
            <div class="shape"></div>
            <div class="shape"></div>
        </div>
        <div class="grid-pattern"></div>
    </div>
    
    <!-- Main Content -->
    <div class="maintenance-container">
        <div class="maintenance-card">
            <!-- Logo -->
            <div class="logo-wrapper">
                <?php if ($siteLogo): ?>
                    <img src="<?php echo SITE_URL . '/' . htmlspecialchars($siteLogo); ?>" alt="<?php echo htmlspecialchars($siteName); ?>">
                <?php else: ?>
                    <span class="text-logo"><?php echo htmlspecialchars($siteName); ?></span>
                <?php endif; ?>
            </div>
            
            <!-- Animated Icon -->
            <div class="icon-wrapper">
                <div class="icon-circle"></div>
                <div class="icon-circle"></div>
                <div class="icon-circle"></div>
                <div class="icon-inner">
                    <i class="fas fa-cog"></i>
                </div>
            </div>
            
            <!-- Title & Text -->
            <h1 class="maintenance-title">
                Sitemiz <span>Bakımda</span>
            </h1>
            <p class="maintenance-text">
                Daha iyi bir deneyim sunabilmek için sistemlerimizi güncelliyoruz. 
                Kısa süre içinde tekrar hizmetinizde olacağız.
            </p>
            
            <!-- Progress -->
            <div class="progress-wrapper">
                <div class="progress-header">
                    <span class="progress-label">
                        <i class="fas fa-sync-alt"></i>
                        Güncelleme devam ediyor
                    </span>
                    <span class="progress-percent">Çalışıyoruz...</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
            </div>
            
            <!-- Contact -->
            <?php if ($contactEmail || $whatsappNumber): ?>
            <div class="contact-section">
                <p class="contact-title">Acil durumlar için bize ulaşın</p>
                <div class="contact-links">
                    <?php if ($whatsappNumber): 
                        $wpNumber = preg_replace('/[^0-9]/', '', $whatsappNumber);
                    ?>
                    <a href="https://wa.me/<?php echo $wpNumber; ?>" target="_blank" class="contact-link whatsapp">
                        <i class="fab fa-whatsapp"></i>
                        WhatsApp
                    </a>
                    <?php endif; ?>
                    
                    <?php if ($contactEmail): ?>
                    <a href="mailto:<?php echo htmlspecialchars($contactEmail); ?>" class="contact-link email">
                        <i class="fas fa-envelope"></i>
                        E-posta Gönder
                    </a>
                    <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>
        </div>
        
        <!-- Features -->
        <div class="features">
            <div class="feature">
                <i class="fas fa-clock"></i>
                <span>Kısa sürede aktif</span>
            </div>
            <div class="feature">
                <i class="fas fa-shield-alt"></i>
                <span>Güvenli güncelleme</span>
            </div>
            <div class="feature">
                <i class="fas fa-rocket"></i>
                <span>Daha hızlı sistem</span>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="maintenance-footer">
            <p>© <?php echo date('Y'); ?> <?php echo htmlspecialchars($siteName); ?>. Tüm hakları saklıdır.</p>
        </div>
    </div>
    
    <script>
        // Sayfa yenilendiğinde bakım bitmiş mi kontrol et (her 30 saniyede)
        setInterval(function() {
            fetch(window.location.href, { method: 'HEAD' })
                .then(function(response) {
                    if (response.status === 200) {
                        window.location.reload();
                    }
                })
                .catch(function() {});
        }, 30000);
    </script>
</body>
</html>
<?php exit; ?>