<?php
require_once __DIR__ . '/db/auth.php';

auth_start_session();
auth_bootstrap();

$session_cl_auth_user = isset($_SESSION['user']) ? (string) $_SESSION['user'] : '';
$session_cl_auth_right = isset($_SESSION['role']) ? (string) $_SESSION['role'] : '';
$is_authenticated = $session_cl_auth_user !== '';
$has_member_access = $is_authenticated && in_array($session_cl_auth_right, ['member', 'admin'], true);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="BlackOps Agency, Star Citizen, Advocacy, UEE, Sécurité, Exploration, Renseignement, Patrouilles, Chasses de primes, Investigation, Neutralisation de menaces, Assistance humanitaire, Abordages, Réseaux anti-toxicité, Formation tactique, Entraînements, Coopération, Zones UEE, Systèmes inexplorés, Lore Star Citizen, Missions multi-joueurs, Protocole Arkange, Protocole Vigilance, Respect des lois impériales, Justice interstellaire, Criminalité galactique, Piraterie, XenoThreat, Vanduul, Sécurité spatiale, Leadership BlackOps, Collaboration stratégique, Combat spatial, Star Citizen gameplay, Exploration stratégique, Missions BlackOps Agency, Réputation UEE, Gestion des conflits, BlackOps, Agency, Recrutement Star Citizen, Zones de guerre, Star Citizen immersion.">
    
	<title>Rapid Emergency & Action Combat Team / Star Citizen</title>
    
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<link rel="stylesheet" type="text/css" href="css/switch.css" />
	<link rel="stylesheet" type="text/css" href="css/styles-modal.css" />
	<script src="js/modernizr.custom.js"></script>
</head>

<body>
		<div class="assets-div-menu">
			<a href="#" class="md-trigger" data-modal="modal-ScanReference">Signatures de minage</a>
			<?php if ($has_member_access): ?>
				<a href="#" class="md-trigger" data-modal="modal-ShipPresets">Presets de vaisseaux</a>
				<a href="#" class="md-trigger" data-modal="modal-ItemCustom">Item Custom</a>
			<?php endif; ?>
		</div>
	<div class="connexion-div-menu <?php echo $is_authenticated ? 'is-authenticated' : 'md-trigger'; ?>" data-login-label="Login" <?php echo $is_authenticated ? '' : 'data-modal="modal-Login"'; ?> id="accountPanel">
		<span id="accountLabel"><?php echo htmlspecialchars($is_authenticated ? $session_cl_auth_user : 'Login', ENT_QUOTES, 'UTF-8'); ?></span>
		<span class="connexion-actions" id="accountActions" <?php echo $is_authenticated ? '' : 'hidden'; ?>>
			<a id="adminLink" href="admin.php" <?php echo $session_cl_auth_right === 'admin' ? '' : 'hidden'; ?>>Admin</a>
			<a id="logoutLink" href="logout.php">Déconnexion</a>
		</span>
	</div>
	
	<div class="se-switch switch-center" role="group" aria-label="Choix entre FR et EN">
	  <a class="se-switch__btn" href="index.php" data-site="se1">🇫🇷</a>
	  <a class="se-switch__btn is-active" href="index-en.php" data-site="se2" aria-current="page">🇬🇧</a>
	</div>

    <div class="md-modal md-effect-1" id="modal-Login">	
		<div class="md-content">
			<h3>
				<img class="float-left" src="img/icon_bops.png" width="48" height="48" alt="" />
				LOGIN INTERFACE
				<a class="frame-icon-close md-close float-right" href="#"><img src="img/icon_close.png" width="48" height="48" alt="" /></a>
			</h3>
			<div>
				<p class="txt-center">Enter your credentials to access the secure area.*</p>
				<form class="js-login-form" method="post" action="login.php">
				  <div>
					<p class="txt-center"><input class="connexion-champ" id="idr" type="text" name="cl_auth_user" placeholder="RID" required /></p>
					<p class="txt-center"><input class="connexion-champ" id="pwr" type="password" name="cl_auth_pass" placeholder="PASSWORD" required /></p>
				  </div>
				  <div>
					<p class="txt-center"><input class="connexion-bouton" type="submit" value="Authenticate" /></p>
					<p class="txt-center login-status" id="loginStatus" aria-live="polite"></p>
				  </div>
				</form>
				<p class="txt-center txt-s10">* Access under high surveillance. By confirming your credentials, you agree to the R.E.A.C.T. Initiative security protocols. Any breach of protocol is subject to sanctions.</p>
			</div>
		</div>
	</div>
	
	<div class="md-modal md-effect-1" id="modal-About">	
		<div class="md-content">
			<h3>
				<img class="float-left" src="img/icon_bops.png" width="48" height="48" alt="" />
				MORE INFORMATIONS
				<a class="frame-icon-close md-close float-right" href="#"><img src="img/icon_close.png" width="48" height="48" alt="" /></a>
			</h3>
			<div>
				<img class="float-left" src="img/fl_security.png" width="300" height="460" alt="" />
				<p>La sécurité et la protection des intérêts impériaux sont des priorités absolues pour l’agence.</p>
				<p>En tant que garante de l’ordre dans les zones sous juridiction de l’UEE, l’agence BOPS s'engage à prévenir, neutraliser et répondre efficacement à toutes les formes de menaces, qu'elles soient internes ou externes aux territoires de l'Empire.</p>
				<p>Cette mission repose sur une approche combinant vigilance, réactivité et expertise tactique, afin d’assurer la stabilité, la sécurité des citoyens et le respect des lois impériales.</p>
				<p>Chaque opération est conçue pour inspirer confiance aux populations locales tout en projetant une image de force et de discipline au sein de l’univers connu.</p>
				<p class="ul-style">
					— Surveillance active des secteurs critiques pour dissuader les menaces potentielles.</br>
					— Protection rapprochée de convois, personnalités importantes ou cargaisons sensibles.</br>
					— Neutralisation de vaisseaux hostiles ou suspects, avec récupération d’actifs stratégiques.</br>
					— Ciblage et capture ou élimination de fugitifs dangereux, conformément aux lois impériales.</br>
					— Protection des civils en détresse et aide aux infrastructures endommagées.</br>
					— Collecte et analyse d’informations sur des activités suspectes, incidents ou organisations hostiles.
				</p>
			</div>
		</div>
	</div>
	
	<div class="center-page-bops"></div>
	
	<div class="center-div-menu">
		<div class="padding50">
			
			<p class="txt-center txt-bold txt-s40 small-caps padding25 txt-or">Rapid Emergency & Action Combat Team</p>
			<!-- <p class="txt-center txt-bold txt-italic txt-s20 padding15 txt-or"><span class="padding5">SÉCURITÉ</span> —— <span class="padding5">INTELLIGENCE</span> —— <span class="padding5">SAUVETAGE</span></p> -->
			<p class="txt-justify padding5">Founded to combat extreme criminality across the Verse. R.E.A.C.T. is an independent operational label, uniting dedicated pilots from all horizons to neutralize threats where the law is failing.</p>
			<p class="txt-center txt-bold txt-s22 padding25 txt-or">—————— R.E.A.C.T. is not an organization, but a tactical standard ——————</p>
			<p class="txt-justify padding5">It is a cross-org initiative designed for players who share the same vision: protecting citizens and NPCs from hostile entities. Wearing the R.E.A.C.T. badge doesn’t mean leaving your organization; it means joining a rapid response network.</p>
		</div>
		<div class="center-div-menu-flex txt-bold">
			<div class="menu-item md-trigger" data-modal="modal-About"><a href="#">> MORE INFORMATIONS <</a></div>
		</div>
	</div>

    <div class="black-filter"></div>

    <!-- Vidéo de fond -->
    <div class="video-container" aria-hidden="true">
        <iframe
            id="react-video"
            src="https://www.youtube-nocookie.com/embed/tFDqWOqm1G8?controls=0&autoplay=1&mute=1&playsinline=1&loop=1&playlist=tFDqWOqm1G8&cc_load_policy=0&iv_load_policy=3&modestbranding=1&rel=0&enablejsapi=1"
            title="Présentation R.E.A.C.T — YouTube"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
            allowfullscreen
            referrerpolicy="strict-origin-when-cross-origin">
        </iframe>
    </div>
	
	<div class="md-overlay"></div><!-- the overlay element -->

	<!-- classie.js by @desandro: https://github.com/desandro/classie -->
	<script src="js/classie.js"></script>
	<script src="js/modalEffects.js"></script>
	<script src="js/auth.js"></script>

	<!-- for the blur effect -->
	<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
	<script>
		// this is important for IEs
		var polyfilter_scriptpath = '/js/';
	</script>
	<script src="js/cssParser.js"></script>
	<script src="js/css-filters-polyfill.js"></script>
	
    <script>
        // On ajoute dynamiquement l'origine à l'URL de l'iframe (recommandé par l'API YouTube)
        (function attachOrigin(){
            const iframe = document.getElementById('react-video');
            const url = new URL(iframe.src);
            if (!url.searchParams.has('origin')) {
                url.searchParams.set('origin', window.location.origin);
                iframe.src = url.toString();
            }
        })();

        // Utilitaires pour parler au lecteur via postMessage (API YouTube)
        function ytCommand(func, args = []) {
            const iframe = document.getElementById('react-video');
            if (!iframe || !iframe.contentWindow) return;
            iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', func, args }), '*');
        }

        // Au premier geste utilisateur : on remet le son et on met le volume à 50 %
        function enableSoundOnce() {
            ytCommand('unMute');
            ytCommand('setVolume', [50]);

            // Masquer le bouton
            const btn = document.getElementById('unmute-btn');
            if (btn) btn.style.display = 'none';

            // Retirer les écouteurs pour ne pas répéter l’action
            window.removeEventListener('pointerdown', enableSoundOnce);
            window.removeEventListener('keydown', enableSoundOnce);
            window.removeEventListener('touchstart', enableSoundOnce, { passive: true });
        }

        // Bouton dédié
        // document.getElementById('unmute-btn').addEventListener('click', enableSoundOnce);

        // …ou n’importe quel premier geste sur la page
        //window.addEventListener('pointerdown', enableSoundOnce, { once: true });
        //window.addEventListener('keydown',      enableSoundOnce, { once: true });
        //window.addEventListener('touchstart',   enableSoundOnce, { once: true, passive: true });
    </script>
	<div class="footer txt-s12 txt-center">
		<p>
			<a href="https://robertsspaceindustries.com/en/orgs/REACT" target="_blank" title="Notre page RSI"><img src="img/icon09b.png" width="48" height="48" alt="" /></a>
			<a href="https://discord.gg/dAvST8E7Mq" target="_blank" title="Notre Discord"><img src="img/icon08b.png" width="48" height="48" alt="" /></a>
			<a href="https://robertsspaceindustries.com" target="_blank" title="RSI"><img src="img/icon10.png" width="48" height="48" alt="" /></a>
		</p>
		<p>Copyright © 2025-<?php echo date('Y'); ?> | www.react-sc.fr | All Rights Reserved.</p>
	</div>
</body>

</html>
