<?php
// Inclure la configuration
require_once 'includes/config.php';
// Inclure les fonctions de sécurité
require_once 'includes/security.php';
// Appliquer les en-têtes de sécurité
setSecurityHeaders();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo generateCSRFToken(); ?>">
    <title><?php echo SITE_NAME; ?> - Ouverture prochaine</title>
    <meta name="description" content="<?php echo htmlspecialchars(SITE_DESCRIPTION); ?> Ouverture prochaine.">
    <link rel="canonical" href="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . '/countdown.php'; ?>">
    
    <!-- Styles -->
    <link rel="stylesheet" href="css/countdown.css?v=<?php echo filemtime('css/countdown.css'); ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
    <meta name="theme-color" content="#FF0000">

    <!-- PWA Meta Tags -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="<?php echo SITE_NAME; ?>">
    <meta name="application-name" content="<?php echo SITE_NAME; ?>">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="<?php echo SITE_NAME; ?> - Ouverture prochaine">
    <meta property="og:description" content="La plateforme multimédia <?php echo SITE_NAME; ?> ouvrira ses portes le <?php
        $targetDate = new DateTime(COUNTDOWN_TARGET_DATE);
        setlocale(LC_TIME, 'fr_FR.UTF-8');
        echo strftime('%e %B %Y', $targetDate->getTimestamp());
    ?>. Restez connectés !">
    <meta property="og:image" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . '/img/logo.png'; ?>">
    <meta property="og:url" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="<?php echo SITE_NAME; ?>">
    <meta property="og:locale" content="fr_FR">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?php echo SITE_NAME; ?> - Ouverture prochaine">
    <meta name="twitter:description" content="La plateforme multimédia <?php echo SITE_NAME; ?> ouvrira ses portes le <?php
        $targetDate = new DateTime(COUNTDOWN_TARGET_DATE);
        setlocale(LC_TIME, 'fr_FR.UTF-8');
        echo strftime('%e %B %Y', $targetDate->getTimestamp());
    ?>. Restez connectés !">
    <meta name="twitter:image" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . '/img/logo.png'; ?>">

    <!-- Configuration JavaScript -->
    <script nonce="<?php echo getCspNonce(); ?>">
        const COUNTDOWN_TARGET_DATE = '<?php echo defined('COUNTDOWN_TARGET_DATE') ? COUNTDOWN_TARGET_DATE : '2025-10-11 00:00:00'; ?>';
    </script>
</head>
<body>
    <div class="countdown-overlay">
        <div class="countdown-container">
            <!-- Logo -->
            <img src="img/logo.png" alt="Logo <?php echo SITE_NAME; ?>" class="countdown-logo">

            <!-- Titre principal -->
            <h1 class="countdown-title"><?php echo SITE_NAME; ?></h1>
            
            <!-- Sous-titre -->
            <p class="countdown-subtitle">Plateforme Multimédia - Ouverture prochaine</p>
            
            <!-- Compte à rebours -->
            <div class="countdown-timer">
                <div class="countdown-unit">
                    <span class="countdown-number" id="countdown-days">00</span>
                    <span class="countdown-label">Jours</span>
                </div>
                <div class="countdown-unit">
                    <span class="countdown-number" id="countdown-hours">00</span>
                    <span class="countdown-label">Heures</span>
                </div>
                <div class="countdown-unit">
                    <span class="countdown-number" id="countdown-minutes">00</span>
                    <span class="countdown-label">Minutes</span>
                </div>
                <div class="countdown-unit">
                    <span class="countdown-number" id="countdown-seconds">00</span>
                    <span class="countdown-label">Secondes</span>
                </div>
            </div>
            
            <!-- Message -->
            <div class="countdown-message">
                <p>La plateforme ouvrira ses portes le <strong><?php 
                    $targetDate = new DateTime(COUNTDOWN_TARGET_DATE);
                    setlocale(LC_TIME, 'fr_FR.UTF-8');
                    echo strftime('%e %B %Y à %H:%M', $targetDate->getTimestamp());
                ?></strong> (heure de La Réunion).</p>

                <!-- Heures des autres territoires -->
                <div class="countdown-other-timezones">
                    <?php
                    $timezones = defined('COUNTDOWN_TIMEZONES') ? COUNTDOWN_TIMEZONES : [
                        'Martinique / Guadeloupe' => 'America/Martinique',
                        'Guyane' => 'America/Cayenne', 
                        'France' => 'Europe/Paris',
                        'Ma\'ohi Nui' => 'Pacific/Tahiti',
                        'Kanaky' => 'Pacific/Noumea'
                    ];

                    foreach($timezones as $name => $timezone):
                        $targetDateLocal = new DateTime(COUNTDOWN_TARGET_DATE, new DateTimeZone(DEFAULT_TIMEZONE));
                        $targetDateLocal->setTimezone(new DateTimeZone($timezone));

                        // Vérifier si c'est un jour différent
                        $reunionDate = new DateTime(COUNTDOWN_TARGET_DATE);
                        $dayDiff = $targetDateLocal->format('j') - $reunionDate->format('j');

                        $dayIndicator = '';
                        if ($dayDiff > 0) {
                            $dayIndicator = ' <span class="day-indicator next-day">+1j</span>';
                        } elseif ($dayDiff < 0) {
                            $dayIndicator = ' <span class="day-indicator prev-day">-1j</span>';
                        }
                    ?>
                        <div class="timezone-item">
                            <span class="timezone-name"><?php echo $name; ?></span>
                            <span class="timezone-time">
                                <?php echo $targetDateLocal->format('H:i'); ?>
                                <?php echo $dayIndicator; ?>
                            </span>
                        </div>
                    <?php endforeach; ?>
                </div>

                <p>Restez connectés et suivez-nous sur nos réseaux sociaux !</p>
            </div>
            
            <!-- Réseaux sociaux -->
            <div class="countdown-social">
                <?php if (defined('FACEBOOK_URL') && !empty(FACEBOOK_URL)): ?>
                    <a href="<?php echo FACEBOOK_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                <?php endif; ?>
                
                <?php if (defined('X_URL') && !empty(X_URL)): ?>
                    <a href="<?php echo X_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)">
                        <i class="fab fa-x-twitter"></i>
                    </a>
                <?php endif; ?>
                
                <?php if (defined('INSTAGRAM_URL') && !empty(INSTAGRAM_URL)): ?>
                    <a href="<?php echo INSTAGRAM_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                        <i class="fab fa-instagram"></i>
                    </a>
                <?php endif; ?>
                
                <?php if (defined('YOUTUBE_URL') && !empty(YOUTUBE_URL)): ?>
                    <a href="<?php echo YOUTUBE_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
                        <i class="fab fa-youtube"></i>
                    </a>
                <?php endif; ?>
                
                <?php if (defined('TIKTOK_URL') && !empty(TIKTOK_URL)): ?>
                    <a href="<?php echo TIKTOK_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
                        <i class="fab fa-tiktok"></i>
                    </a>
                <?php endif; ?>
                
                <?php if (defined('MASTODON_URL') && !empty(MASTODON_URL)): ?>
                    <a href="<?php echo MASTODON_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="Mastodon">
                        <i class="fab fa-mastodon"></i>
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="js/countdown.js"></script>
    <script src="js/pwa-update.js?v=<?php echo filemtime('js/pwa-update.js'); ?>"></script>
</body>
</html>