<?php
// Définir le nom de la page pour le SEO
$current_page = 'services';

// Inclure le head avec SEO
include 'includes/head.php'; 
?>
<body id="default_theme" class="it_service service">
<div id="page-wrapper">
<!-- 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'; ?>

<style>
/* Styles pour les images dans services.php */
.img-responsive {
    border-radius: 10px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.img-responsive:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Masquer les images sur mobile */
@media (max-width: 768px) {
    .img-responsive {
        display: none !important;
    }
}

/* Espacement organisé des sections */
.section {
    padding: 80px 0;
}

.section:first-of-type {
    padding-top: 40px;
}

.section:last-of-type {
    padding-bottom: 40px;
}

/* Espacement entre les services */
.service-section {
    margin-bottom: 100px;
}

.service-section:last-child {
    margin-bottom: 60px;
}

/* Espacement interne des services */
.service-detail-row {
    padding: 60px 0;
}

.service-detail-row:nth-child(even) {
    background: rgba(248, 249, 250, 0.5);
    margin: 30px 0;
    border-radius: 10px;
}
</style>

<div id="main-content">

<!-- inner page banner avec image de fond aléatoire et overlay noir -->
<?php
$bg_images = glob('images/bg/*.{jpg,jpeg,png,gif}', GLOB_BRACE);
$random_bg = !empty($bg_images) ? $bg_images[array_rand($bg_images)] : 'images/bg/inner_page_banner.jpg';
?>
<style>
  #inner_banner.overlay-black {
    position: relative;
    overflow: hidden;
  }
  #inner_banner.overlay-black::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1;
  }
  #inner_banner.overlay-black > .container {
    position: relative;
    z-index: 2;
  }
</style>
<div id="inner_banner" class="section inner_banner_section overlay-black" style="background: url('<?php echo $random_bg; ?>') center center/cover no-repeat;">
  <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">Nos Services</h1>
              <ol class="breadcrumb">
                <li><a href="index.php">Accueil</a></li>
                <li class="active">Services</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end inner page banner -->



<!-- Détails des services -->
<div class="section padding_layout_1" style="background: #f8f9fa;">
  <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;">Détails de Nos Services</h2>
            <p class="large">Découvrez notre expertise technique approfondie</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Maintenance & Réparation -->
    <div class="row service-detail-row" id="maintenance">
      <div class="col-md-6">
        <div class="full">
          <img class="img-responsive" src="images/it_service/post-08.jpg" alt="Maintenance PC" />
        </div>
      </div>
      <div class="col-md-6">
        <div class="full service_detail_cont">
          <h3>🔧 Maintenance & Réparation PC</h3>
          <p>Notre équipe technique experte intervient pour diagnostiquer, réparer et maintenir tous vos équipements informatiques avec professionnalisme.</p>
          <ul>
            <li>✅ Diagnostic complet hardware et software</li>
            <li>✅ Réparation PC de bureau et portables</li>
            <li>✅ Remplacement de composants défaillants</li>
            <li>✅ Installation et configuration de systèmes</li>
            <li>✅ Nettoyage et optimisation des performances</li>
            <li>✅ Récupération de données perdues</li>
          </ul>
          <hr>
          <div class="contact_info">
            <p><strong>📞 Contact:</strong> Youssef +212665446585 | Rachid +212663690212</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Réseaux & Sécurité -->
    <div class="row service-detail-row" id="reseaux">
      <div class="col-md-6">
        <div class="full service_detail_cont">
          <h3>🌐 Installation Réseaux & Sécurité</h3>
          <p>Solutions réseau complètes pour sécuriser et optimiser votre infrastructure informatique d'entreprise.</p>
          <ul>
            <li>✅ Installation de réseaux locaux (LAN/WiFi)</li>
            <li>✅ Configuration de routeurs et switches</li>
            <li>✅ Sécurisation des accès et pare-feu</li>
            <li>✅ VPN et accès distant sécurisé</li>
            <li>✅ Surveillance réseau et monitoring</li>
            <li>✅ Audit de sécurité informatique</li>
          </ul>
          <hr>
          <div class="contact_info">
            <p><strong>📞 Contact:</strong> Youssef +212665446585 | Rachid +212663690212</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="full">
          <img class="img-responsive" src="images/it_service/services-ae-net.jpg" alt="Réseaux sécurité" />
        </div>
      </div>
    </div>
    
    <!-- Vidéo Surveillance -->
    <div class="row service-detail-row" id="surveillance">
      <div class="col-md-6">
        <div class="full">
          <img class="img-responsive" src="images/it_service/services-ae-cam.jpg" alt="Vidéo surveillance" />
        </div>
      </div>
      <div class="col-md-6">
        <div class="full service_detail_cont">
          <h3>📹 Systèmes de Vidéo Surveillance</h3>
          <p>Protection avancée de vos locaux avec des systèmes de surveillance haute technologie et monitoring temps réel.</p>
          <ul>
            <li>✅ Caméras IP haute résolution</li>
            <li>✅ Enregistrement et stockage sécurisé</li>
            <li>✅ Accès distant via smartphone/PC</li>
            <li>✅ Détection de mouvement et alertes</li>
            <li>✅ Vision nocturne et infrarouge</li>
            <li>✅ Intégration systèmes d'alarme</li>
          </ul>
          <hr>
          <div class="contact_info">
            <p><strong>📞 Contact:</strong> Youssef +212665446585 | Rachid +212663690212</p>
          </div>
        </div>
      </div>
    
    <!-- Développement Web -->
    <div class="row service-detail-row" id="web">
      <div class="col-md-6">
        <div class="full service_detail_cont">
          <h3>💻 Développement Web & Applications</h3>
          <p>Création de solutions web sur mesure, modernes et performantes pour développer votre présence digitale et votre business en ligne.</p>
          <ul>
            <li>✅ Sites web responsives et modernes</li>
            <li>✅ Applications web personnalisées</li>
            <li>✅ E-commerce et boutiques en ligne</li>
            <li>✅ Systèmes de gestion (CRM, ERP)</li>
            <li>✅ Optimisation SEO et référencement</li>
            <li>✅ Maintenance et mise à jour continue</li>
          </ul>
          <hr>
          <div class="contact_info">
            <p><strong>📞 Contact:</strong> Youssef +212665446585 | Rachid +212663690212</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="full">
          <img class="img-responsive" src="images/it_service/services-ae-app.jpg" alt="Développement web" />
        </div>
      </div>
    </div>
    
    <!-- Support Technique -->
    <div class="row service-detail-row" id="support">
      <div class="col-md-6">
        <div class="full">
          <img class="img-responsive" src="images/it_service/services-ae-support.jpg" alt="Support technique" />
        </div>
      </div>
      <div class="col-md-6">
        <div class="full service_detail_cont">
          <h3>🛠️ Support Technique 24/7</h3>
          <p>Assistance technique continue et intervention rapide pour résoudre tous vos problèmes informatiques urgents et maintenir vos systèmes opérationnels.</p>
          <ul>
            <li>✅ Support téléphonique 24h/24 - 7j/7</li>
            <li>✅ Intervention sur site en urgence</li>
            <li>✅ Dépannage à distance sécurisé</li>
            <li>✅ Maintenance préventive programmée</li>
            <li>✅ Surveillance proactive des systèmes</li>
            <li>✅ Formation utilisateurs et documentation</li>
          </ul>
          <hr>
          <div class="contact_info">
            <p><strong>📞 Contact:</strong> Youssef +212665446585 | Rachid +212663690212</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Zone de contact rapide -->
<div class="section padding_layout_1 contact-section" style="background: url('images/it_service/services-ae-work.jpg') center center no-repeat; background-size: cover; color: white; position: relative;">
  <div class="overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(1, 31, 62, 0.85);"></div>
  <div class="container" style="position: relative; z-index: 2;">
    <div class="row">
      <div class="col-md-12">
        <div class="full text_align_center">
          <h2 style="color: white; text-transform: none;">Besoin d'Assistance Technique ?</h2>
          <p class="large" style="color: #e2e8f0;">Notre équipe SERVICES-AE est disponible pour intervenir rapidement</p>
          <div class="contact_buttons margin_top_30">
            <div class="row">
              <div class="col-md-4">
                <div class="contact_item">
                  <i class="fa fa-phone" style="font-size: 2em; color: #4299e1; padding-top: 10px;"></i>
                  <h4 class="text-white">Youssef</h4>
                  <p style="color: #e2e8f0;"><strong>+212 665 446 585</strong></p>
                  <a href="tel:+212665446585" class="btn main_bt">Appeler Maintenant</a>
                </div>
              </div>
              <div class="col-md-4">
                <div class="contact_item">
                  <i class="fa fa-phone" style="font-size: 2em; color: #4299e1; padding-top: 10px;"></i>
                  <h4 class="text-white">Rachid</h4>
                  <p style="color: #e2e8f0;"><strong>+212 663 690 212</strong></p>
                  <a href="tel:+212663690212" class="btn main_bt">Appeler Maintenant</a>
                </div>
              </div>
              <div class="col-md-4">
                <div class="contact_item">
                  <i class="fa fa-envelope" style="font-size: 2em; color: #4299e1; padding-top: 10px;"></i>
                  <h4 class="text-white">Contact Général</h4>
                  <p style="color: #e2e8f0;"><strong>Formulaire de Contact</strong></p>
                  <a href="contact-ae.php" class="btn main_bt">Nous Contacter</a>
                </div>
              </div>
            </div>
          </div>
          <div class="margin_top_30" style="padding-top: 50px;">
            <p class="text-white"><i class="fa fa-map-marker"></i> <strong>Zone d'intervention:</strong> Marrakech et région - Service rapide et professionnel</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Pourquoi nous choisir -->
<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;">Pourquoi Choisir SERVICES-AE ?</h2>
            <p class="large">Excellence technique et service client de qualité</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="full services_blog text_align_center">
          <div class="service_icon">
            <i class="fa fa-cogs" style="font-size: 3em; color: #011f3e; margin-bottom: 20px;"></i>
          </div>
          <h4>Expertise Technique</h4>
          <p>Plus de 10 ans d'expérience dans le domaine informatique</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="full services_blog text_align_center">
          <div class="service_icon">
            <i class="fa fa-clock-o" style="font-size: 3em; color: #011f3e; margin-bottom: 20px;"></i>
          </div>
          <h4>Intervention Rapide</h4>
          <p>Déplacement sous 24h en urgence sur Marrakech</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="full services_blog text_align_center">
          <div class="service_icon">
            <i class="fa fa-shield" style="font-size: 3em; color: #011f3e; margin-bottom: 20px;"></i>
          </div>
          <h4>Garantie Qualité</h4>
          <p>Garantie sur toutes nos interventions et réparations</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="full services_blog text_align_center">
          <div class="service_icon">
            <i class="fa fa-users" style="font-size: 3em; color: #011f3e; margin-bottom: 20px;"></i>
          </div>
          <h4>Support 24/7</h4>
          <p>Assistance technique disponible jour et nuit</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="search_bar" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-8 col-md-8 col-sm-8 offset-lg-2 offset-md-2 offset-sm-2 col-xs-10 col-xs-offset-1">
            <div class="navbar-search">
              <form action="#" method="get" id="search-global-form" class="search-global">
                <input type="text" placeholder="Type to search" autocomplete="off" name="s" id="search" value="" class="search-global__input">
                <button class="search-global__btn"><i class="fa fa-search"></i></button>
                <div class="search-global__note">Begin typing your search above and press return to search.</div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Model search bar -->
</div>
<!-- end main-content -->

<!-- footer -->
<?php include 'includes/footer.php'; ?>

<!-- js section -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- menu js -->
<script src="js/menumaker.js"></script>
<!-- wow animation -->
<script src="js/wow.js"></script>
<!-- custom js -->
<script src="js/custom.js"></script>
<!-- zoom effect -->
<script src='js/hizoom.js'></script>
<script>
        $('.hi1').hiZoom({
            width: 300,
            position: 'right'
        });
        $('.hi2').hiZoom({
            width: 400,
            position: 'right'
        });
</script>

</div>
<!-- end page-wrapper -->
</body>
</html>