<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Contact - Notre Entreprise</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />
    <link rel="stylesheet" href="css/all.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>    
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <link rel="stylesheet" href="css/templatemo-style.css" />
  </head>

  <body id="servicesPage">
    <div class="parallax-window" data-parallax="scroll" data-image-src="img/bg-01.jpg">
      <div class="container-fluid">
        <div class="row tm-brand-row">
          <div class="col-lg-4 col-11">
            <div class="tm-brand-container tm-bg-white-transparent">
              <i class="fas fa-2x fa-pen tm-brand-icon"></i>
              <div class="tm-brand-texts">
                <h1 class="text-uppercase tm-brand-name">Notre Entreprise</h1>
                <p class="small">Solutions innovantes pour votre succès</p>
              </div>
            </div>
          </div>
          <div class="col-lg-8 col-1">
            <div class="tm-nav">
              <nav class="navbar navbar-expand-lg navbar-light tm-bg-white-transparent tm-navbar">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-toggle="collapse"
                  data-target="#navbarNav"
                  aria-controls="navbarNav"
                  aria-expanded="false"
                  aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav">
                    <!-- ACCUEIL -->
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="index.php">Accueil</a>
                    </li>

                    <!-- À PROPOS -->
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="about.php">À propos</a>
                    </li>

                    <!-- SERVICES (MENU DÉROULANT) -->
                    <li class="nav-item dropdown">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
                        Services
                      </a>
                      <div class="dropdown-menu" aria-labelledby="servicesDropdown">
                        <a class="dropdown-item" href="#">Conseil en stratégie</a>
                        <a class="dropdown-item" href="#">Audit et conformité</a>
                        <a class="dropdown-item" href="#">Support technique 24/7</a>
                        <a class="dropdown-item" href="#">Maintenance applicative</a>
                      </div>
                    </li>

                    <!-- SOLUTIONS (MENU DÉROULANT) -->
                    <li class="nav-item dropdown">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link dropdown-toggle" href="#" id="solutionsDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
                        Solutions
                      </a>
                      <div class="dropdown-menu" aria-labelledby="solutionsDropdown">
                        <a class="dropdown-item" href="#">Solution CRM</a>
                        <a class="dropdown-item" href="#">Solution ERP</a>
                        <a class="dropdown-item" href="#">Infrastructure Cloud</a>
                        <a class="dropdown-item" href="#">Intelligence Artificielle</a>
                        <a class="dropdown-item" href="#">Cybersécurité</a>
                      </div>
                    </li>

                    <!-- FORMATION -->
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="#">Formation</a>
                    </li>

                    <!-- CONTACT -->
                    <li class="nav-item green-highlight active">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="contact.php">Contact</a>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>

        <!-- Contact header -->
        <section class="row" id="tmServices">
          <div class="col-12">
            <div class="parallax-window tm-services-parallax-header tm-testimonials-parallax-header"
                 data-parallax="scroll"
                 data-z-index="101"
                 data-image-src="img/people.jpg">

                 <div class="tm-bg-black-transparent text-center tm-services-header tm-testimonials-header">
                    <h2 class="text-uppercase tm-services-page-title tm-testimonials-page-title">Contactez-nous</h2>
                    <p class="tm-services-description mb-0 small">
                        Nous sommes à votre écoute. N'hésitez pas à nous contacter pour tout projet ou information.
                    </p>
                </div>
            </div>
          </div>   
        </section>

        <section class="row tm-contact-row">
            <div class="col-lg-6 tm-contact-col-left">
                <?php
                // Traitement du formulaire
                $message_envoye = false;
                if ($_SERVER["REQUEST_METHOD"] == "POST") {
                    $nom = htmlspecialchars($_POST['contact_name']);
                    $email = htmlspecialchars($_POST['contact_email']);
                    $message = htmlspecialchars($_POST['contact_message']);
                    
                    // Ici vous pouvez ajouter l'envoi d'email
                    // Pour l'instant, on simule l'envoi
                    $message_envoye = true;
                }
                ?>
                
                <?php if ($message_envoye): ?>
                <div class="alert alert-success">
                    Votre message a bien été envoyé ! Nous vous répondrons dans les plus brefs délais.
                </div>
                <?php endif; ?>
                
                <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="tmContactForm" class="tm-bg-black-transparent tm-contact-form">
                  <div class="form-group">
                    <input type="text" id="contact_name" name="contact_name" class="form-control rounded-0 border-top-0 border-right-0 border-left-0" placeholder="Nom complet" required="">
                  </div>
                  <div class="form-group">
                    <input type="email" id="contact_email" name="contact_email" class="form-control rounded-0 border-top-0 border-right-0 border-left-0" placeholder="Adresse email" required="">
                  </div>
                  <div class="form-group">
                    <textarea rows="6" id="contact_message" name="contact_message" class="form-control rounded-0 border-top-0 border-right-0 border-left-0" placeholder="Votre message" required=""></textarea>
                  </div>
                  <div class="text-right">
                    <button type="submit" class="btn btn-primary tm-btn-submit rounded-0">
                      Envoyer
                    </button>
                  </div>
                </form>
            </div>
            <div class="col-lg-6 tm-contact-col-right">
                <div class="tm-bg-black-transparent tm-contact-text">
                            
                    <i class="mx-auto mb-5 fas fa-3x fa-address-card tm-app-feature-icon"></i>
                    
                    <h3 class="tm-service-tab-title">Nos coordonnées</h3>
                    <p class="tm-service-tab-p">
                        <strong><i class="fas fa-map-marker-alt"></i> Adresse :</strong><br>
                        123 Avenue des Innovations, 75000 Paris, France
                    </p>
                    <p class="tm-service-tab-p">
                        <strong><i class="fas fa-phone"></i> Téléphone :</strong><br>
                        +33 1 23 45 67 89
                    </p>
                    <p class="tm-service-tab-p">
                        <strong><i class="fas fa-envelope"></i> Email :</strong><br>
                        contact@notreentreprise.com
                    </p>                            
                    <p class="mb-0">
                        <strong><i class="fas fa-clock"></i> Horaires d'ouverture :</strong><br>
                        Lundi - Vendredi : 9h00 - 18h00<br>
                        Samedi : 10h00 - 13h00
                    </p>
                </div>
            </div>
        </section>

        <!-- Call to Action -->
        <section class="row tm-testimonials-cta" id="tmCallToAction">
          <div class="col-12 tm-call-to-action-col">
            <img src="img/call-to-action-3.jpg" alt="Image" class="img-fluid tm-call-to-action-image" />
            <div class="tm-bg-white tm-call-to-action-text">
              <h2 class="tm-call-to-action-title">Recevez nos actualités</h2>
              <p class="tm-call-to-action-description">
                Inscrivez-vous à notre newsletter pour recevoir nos derniers articles, offres et actualités.
              </p>
              <form action="#" method="get" class="tm-call-to-action-form">                
                <input name="email" type="email" class="tm-email-input" id="email" placeholder="Votre email" />
                <button type="submit" class="btn btn-secondary">S'abonner</button>
              </form>
            </div>
          </div>
        </section>

        <!-- Page footer -->
        <footer class="row">
          <p class="col-12 text-white text-center tm-copyright-text">
            Copyright &copy; 2025 Notre Entreprise. 
            Designed by <a href="#" class="tm-copyright-link">Votre Entreprise</a>
          </p>
        </footer>
      </div>
      <!-- .container-fluid -->
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/parallax.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="slick/slick.min.js"></script>
    
    <style>
        .dropdown-menu {
            background-color: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 0;
            margin-top: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .dropdown-item {
            padding: 10px 20px;
            font-size: 0.9rem;
            color: #333;
            transition: all 0.3s ease;
        }
        .dropdown-item:hover {
            background-color: #006666;
            color: white;
        }
        .alert-success {
            background-color: #006666;
            color: white;
            border: none;
            border-radius: 0;
        }
        @media (max-width: 991px) {
            .dropdown-menu {
                background-color: rgba(255, 255, 255, 0.98);
                position: static !important;
                transform: none !important;
                width: 100%;
                margin-top: 0;
                padding-left: 20px;
            }
            .dropdown-item {
                padding: 8px 20px;
            }
        }
    </style>
  </body>
</html>