<?php
// Définir le nom de la page pour le SEO
$current_page = 'support';
// Inclure le head avec SEO
include 'includes/head.php'; 
?>
<body id="default_theme" class="about_us">
<!-- loader -->
<div class="bg_load"> <img class="loader_animation" src="images/loaders/loader_1.png" alt="#" /> </div>
<!-- end loader -->

<?php include 'includes/topbar.php'; ?>
<?php include 'includes/navbar.php'; ?>

<!-- inner page banner -->
<div id="inner_banner" class="section inner_banner_section">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="title-holder">
            <div class="title-holder-cell text-left">
              <h1 class="page-title">Support &amp; Assistance</h1>
              <ol class="breadcrumb">
                <li><a href="index.php">Accueil</a></li>
                <li class="active">Support</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end inner page banner -->

<!-- Section Support -->
<div class="section padding_layout_1">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="full">
          <div class="main_heading text_align_center">
            <h2 style="text-transform: none;">Contactez notre équipe support</h2>
            <p class="large">Nous sommes à votre écoute pour toute question ou assistance technique</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row margin_top_50">
      <div class="col-md-6">
        <div class="full">
          <form method="post" action="contact.php">
            <div class="mb-3">
              <label for="name" class="form-label">Nom</label>
              <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="mb-3">
              <label for="email" class="form-label">Email</label>
              <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="mb-3">
              <label for="subject" class="form-label">Sujet</label>
              <input type="text" class="form-control" id="subject" name="subject" required>
            </div>
            <div class="mb-3">
              <label for="message" class="form-label">Message</label>
              <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Envoyer la demande</button>
          </form>
        </div>
      </div>
      <div class="col-md-6">
        <div class="full about_content">
          <h3 style="color: #011f3e; margin-bottom: 20px;">💬 Assistance rapide par chat</h3>
          <p style="font-size: 16px; line-height: 1.6; margin-bottom: 15px;">Pour une réponse immédiate, utilisez le widget de chat en ligne en bas à droite de votre écran.</p>
          <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
            <h4 style="color: #011f3e; margin-bottom: 15px;">👨‍💻 Agents disponibles</h4>
            <div class="row">
              <div class="col-md-6 mb-2">
                <div class="d-flex align-items-center">
                  <img src="images/it_service/services-ae-it1.jpg" alt="Youssef" style="width:48px;height:48px;border-radius:50%;margin-right:12px;object-fit:cover;">
                  <div>
                    <strong>Youssef</strong><br>
                    <a href="https://wa.me/212665446585" target="_blank" class="btn btn-success btn-sm mt-1">
                      <i class="fa fa-whatsapp"></i> WhatsApp
                    </a>
                  </div>
                </div>
              </div>
              <div class="col-md-6 mb-2">
                <div class="d-flex align-items-center">
                  <img src="images/it_service/rachid_avatar.webp" alt="Rachid" style="width:48px;height:48px;border-radius:50%;margin-right:12px;object-fit:cover;">
                  <div>
                    <strong>Rachid</strong><br>
                    <a href="https://wa.me/212663690212" target="_blank" class="btn btn-success btn-sm mt-1">
                      <i class="fa fa-whatsapp"></i> WhatsApp
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <button id="liveChatBtn" class="btn btn-primary mt-3 w-100" style="font-weight:600;">
              <i class="fa fa-comments"></i> Conversation en direct
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php include 'includes/footer.php'; ?>
<?php include 'includes/support-chat-widget.php'; ?>

<!-- js section -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/menumaker.js"></script>
<script src="js/wow.js"></script>
<script src="js/custom.js"></script>
<script src='js/hizoom.js'></script>
<script>
  document.addEventListener('DOMContentLoaded', function(){
    // Masquer l'icône du widget de chat au chargement
    var chatIcon = document.querySelector('.support-chat-icon, .chat-widget-icon');
    if(chatIcon){
      chatIcon.style.display = 'none';
    }
    var btn = document.getElementById('liveChatBtn');
    if(btn){
      btn.addEventListener('click', function(){
        // Affiche l'icône et simule le clic pour ouvrir le chat
        if(chatIcon){
          chatIcon.style.display = 'block';
          chatIcon.click();
        }
        var chatWidget = document.getElementById('supportChatWidget');
        if(chatWidget){
          chatWidget.style.display = 'block';
        }
      });
    }
  });
</script>
</body>
</html>
