<?php
// Load environment variables
$envFile = '/config/.env';  // This is where the .env file is mounted in the container
if (file_exists($envFile)) {
    $envVars = parse_ini_file($envFile);
    foreach ($envVars as $key => $value) {
        putenv("$key=$value");
        $_ENV[$key] = $value;
    }
}

// Set security headers
header('X-Content-Type-Options: nosniff');
header('X-Frame-Options: DENY');
header('Referrer-Policy: same-origin');
?>
<!DOCTYPE HTML>
<html lang="en">

  <head>
      <! -- <meta http-equiv="Cache-Control" content="no-cache, max-age=300"> -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="HandheldFriendly" content="True">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="description" content="Chris Arends - Coming Soon">
      <meta name="keywords" content="Woody, coming soon page, html5, responsive">
      <meta name="author" content="Mountain-Sleds">
    
      <title>Chris Arends - Coming Soon</title>
      
      <!-- ============ GOOGLE FONTS ============ -->
      <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,600' rel='stylesheet' type='text/css'>

      <!-- CSS -->
      <!-- Animate css -->
      <link rel="stylesheet" type="text/css" href="css/animate.css">
      <!-- Font-Awesome 6 PRO-->
      <link rel="stylesheet" href="fonts/all.min.css" />
      <!-- Bootstrap 5 -->
      <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
      <!-- Custom styles CSS -->
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <!-- Favicons -->
      <link rel="shortcut icon" href="images/favicon.ico">

  </head>

  <body>

<!-- LOADER TEMPLATE -->
<div id="page-loader">
  <div class="loader-icon fa fa-spin colored-border"></div>
</div>
<!-- /LOADER TEMPLATE -->



<!-- HEADER -->
<header>


  <!-- YOUTUBE PLAYER -->
  <!--<div id="video" data-property="{videoURL:'ClIBmBT9clU',containment:'.video-box', showControls:false, autoPlay:true, loop:true, mute: true}"></div>-->
  <!-- /YOUTUBE PLAYER -->


  <div class="container">


          <!-- Social Icons -->
          <div class="social-icons">
          <ul>
            <li><a href="https://discord.com/" target="_blank" title="Discord"><i aria-hidden="true" class="fa-brands fa-discord"></i></a></li>
            <li><a href="https://www.twitter.com/" target="_blank" title="Twitter"><i aria-hidden="true" class="fa-brands fa-twitter"></i></a></li>
            <li><a href="https://facebook.com/" target="_blank" title="Facebook"><i aria-hidden="true" class="fa-brands fa-facebook"></i></a></li>
            <li><a href="https://www.dribbble.com/" target="_blank" title="Dribbble"><i aria-hidden="true" class="fa-brands fa-dribbble"></i></a></li>              
            <li><a href="https://www.instagram.com/" target="_blank" title="Instagram"><i aria-hidden="true" class="fa-brands fa-instagram"></i></a></li>
            <li><a href="https://www.youtube.com/" target="_blank" title="YouTube"><i aria-hidden="true" class="fa-brands fa-youtube"></i></a></li>
          </ul>
          </div>
          <!-- /Social Icons -->

          <div class="logo"><img src="images/logo.png"  alt="logo"> </div>
          <div class="typed">under construction.</div>
          <p>Coming Soon.<br>Have fun.</p> 
          <div class="countdown"> </div>
      

         <!-- MOUSE ICON -->
         <div class="mouse-wrapper">
          <div class="mouse">
            <a href="#about">
              <span>skroll</span>
              <i class="fa fa-chevron-down"></i>
            </a>
          </div>
         </div>
         <!-- /MOUSE ICON -->

  </div>

   <!-- SINGLE BACKGROUND IMAGE -->
   <div class="image-box"></div>

   <!-- VIDEO BACKGROUND -->
   <!-- <div class="video-box"></div> -->

    <!-- EFFECT BOX -->
    <div id="effect-box">
      <canvas id="snow"></canvas>
    </div>


</header>
<!-- END HEADER -->

<!-- About Section -->
<section class="section-about" id="about">

  <div class="row">

      <div class="col-md-6 left-box">

        <div class="intro-text wow fadeUp" data-wow-delay=".3s">
          <h2>Dream it. Make it. Share it.</h2>
          <p>Chris Arends is an incredibly innovative and creative entrepreneur, who is currently working as a project manager for amazing technology development in the virtual universe. Arends is passionate about utilizing the latest technologies and pushing the boundaries of what is possible. He has extensive experience in software engineering, product development, and business process optimization. With a keen eye for detail and a passion for problem-solving, Arends is able to quickly identify and implement solutions that bring lasting value to his clients. His enthusiasm for creating new experiences and pushing the boundaries of technology has allowed him to lead countless successful projects. Chris Arends is a true innovator who is dedicated to creating the best possible products for his clients.</p>
        </div>

      </div>

      
      <div class="col-md-6 right-box" style="background-image: url(images/about.jpg);">
        <div class="row gy-5">
    
          
          <div class="col-md-3">
            <div class="experience-box wow fadeUp" data-wow-delay=".3s">
              <div class="icon">
                <i aria-hidden="true" class="fas fa-briefcase"></i>
              </div>
              <h4>Projects</h4>
                <div class="timer">
                  <span class="number">769</span>
                </div>
            </div>
          </div>
          
          <div class="col-md-3">
            <div class="experience-box wow fadeUp" data-wow-delay=".3s">
              <div class="icon">
                <i aria-hidden="true" class="fas fa-face-smile"></i>
              </div>
              <h4>Clients</h4>
                <div class="timer">
                  <span class="number">371</span>
                </div>
            </div>
          </div>
          
          <div class="col-md-3">
            <div class="experience-box wow fadeUp" data-wow-delay=".3s">
              <div class="icon">
                <i aria-hidden="true" class="fas fa-coffee"></i>
              </div>
              <h4>Coffees</h4>
                <div class="timer">
                  <span class="number">213</span>
                </div>
            </div>
          </div>
          
          <div class="col-md-3">
            <div class="experience-box wow fadeUp" data-wow-delay=".3s">
              <div class="icon">
                <i aria-hidden="true" class="fas fa-trophy"></i>
              </div>
              <h4>Awards</h4>
                <div class="timer">
                  <span class="number">129</span>
                </div>
            </div>
          </div>
          
          
        </div>
      </div>

  </div>

</section>


<!-- Section Services -->
<section class="section-services" id="services">

  <div class="row">

    <div class="col-md-6 left-box" style="background-image: url(images/services.jpg);">

      <div class="title-section wow fadeUp" data-wow-delay=".3s">
        <i class="fas fa-cogs"></i>
        <h2>Services</h2>
        <p>It will be nice to hear from you.</p>
      </div>

    </div>

    
    <div class="col-md-6 right-box">

      <div class="row">

        
        <div class="col-md-6">
          <div class="services-box wow fadeUp" data-wow-delay=".3s">
            <div class="icon">
              <i aria-hidden="true" class="fas fa-laptop"></i>
            </div>
            <div class="info-box">
              <h2>Inovative Ideas</h2>
              <p>We don't want to conquer the cosmos, we simply want to extend the boundaries of Earth to the frontiers of the cosmos.</p>
            </div>
          </div>
        </div>
        
        <div class="col-md-6">
          <div class="services-box wow fadeUp" data-wow-delay=".3s">
            <div class="icon">
              <i aria-hidden="true" class="fas fa-code"></i>
            </div>
            <div class="info-box">
              <h2>Clean code</h2>
              <p>We don't want to conquer the cosmos, we simply want to extend the boundaries of Earth to the frontiers of the cosmos.</p>
            </div>
          </div>
        </div>
        
        <div class="col-md-6">
          <div class="services-box wow fadeUp" data-wow-delay=".3s">
            <div class="icon">
              <i aria-hidden="true" class="fas fa-bullhorn"></i>
            </div>
            <div class="info-box">
              <h2>24/7 Support</h2>
              <p>We don't want to conquer the cosmos, we simply want to extend the boundaries of Earth to the frontiers of the cosmos.</p>
            </div>
          </div>
        </div>
        
        <div class="col-md-6">
          <div class="services-box wow fadeUp" data-wow-delay=".3s">
            <div class="icon">
              <i aria-hidden="true" class="fa-brands fa-html5"></i>
            </div>
            <div class="info-box">
              <h2>HTML5</h2>
              <p>We don't want to conquer the cosmos, we simply want to extend the boundaries of Earth to the frontiers of the cosmos.</p>
            </div>
          </div>
        </div>
        

      </div>

    </div>

</div>

</section>


<!-- Section Team -->
<section class="section-team" id="team">

  <div class="row">

    <div class="col-md-6 left-box">
   
      <div class="row">

        
        <div class="col-md-6">
          <div class="team-box wow fadeUp" data-wow-delay=".3s">
              <img src="images/team/team1.png" alt="CHRIS ARENDS">
            <h2>CHRIS ARENDS</h2>
            <span>Project manager</span>
            <p>We don't want to conquer the cosmos, we simply want to extend the boundaries of Earth to the frontiers of the cosmos.</p>
            <div class="social-icons">
              <ul>
                
                <li><a href="https://discord.com/" target="_blank" title="Discord"><i aria-hidden="true" class="fa-brands fa-discord"></i></a></li>
                
                <li><a href="https://discord.com/" target="_blank" title="Discord"><i aria-hidden="true" class="fa-brands fa-discord"></i></a></li>

                <li><a href="https://www.twitter.com/" target="_blank" title="Twitter"><i aria-hidden="true" class="fa-brands fa-twitter"></i></a></li>
                 
                <li><a href="https://facebook.com/" target="_blank" title="Facebook"><i aria-hidden="true" class="fa-brands fa-facebook"></i></a></li>
                 
                <li><a href="https://www.dribbble.com/" target="_blank" title="Dribbble"><i aria-hidden="true" class="fa-brands fa-dribbble"></i></a></li>
                 
                <li><a href="https://www.instagram.com/" target="_blank" title="Instagram"><i aria-hidden="true" class="fa-brands fa-instagram"></i></a></li>
              
              </ul>
              </div>
          </div>
        </div>
        
      <div class="col-md-6">
          <div class="team-box wow fadeUp" data-wow-delay=".3s">
              <img src="images/team/team2.png" alt="AMELIA ARENDS">
            <h2>AMELIA ARENDS</h2>
            <span>Design Consultant</span>
            <p>We don't want to conquer the cosmos, we simply want to extend the boundaries of Earth to the frontiers of the cosmos.</p>
            <div class="social-icons">
              <ul>
                
                <li><a href="https://discord.com/" target="_blank" title="Discord"><i aria-hidden="true" class="fa-brands fa-discord"></i></a></li>

                <li><a href="https://discord.com/" target="_blank" title="Discord"><i aria-hidden="true" class="fa-brands fa-discord"></i></a></li>

                <li><a href="https://www.twitter.com/" target="_blank" title="Twitter"><i aria-hidden="true" class="fa-brands fa-twitter"></i></a></li>
                 
                <li><a href="https://facebook.com/" target="_blank" title="Facebook"><i aria-hidden="true" class="fa-brands fa-facebook"></i></a></li>
                 
                <li><a href="https://www.dribbble.com/" target="_blank" title="Dribbble"><i aria-hidden="true" class="fa-brands fa-dribbble"></i></a></li>
                 
                <li><a href="https://www.instagram.com/" target="_blank" title="Instagram"><i aria-hidden="true" class="fa-brands fa-instagram"></i></a></li>
              
              </ul>
              </div>
          </div>
        </div>
        
        <div class="col-md-6">
          <div class="team-box wow fadeUp" data-wow-delay=".3s">
              <img src="images/team/team3.png" alt="MATTHEW ARENDS">
            <h2>MATTHEW ARENDS</h2>
            <span>Solid Materials Manager</span>
            <p>We don't want to conquer the cosmos, we simply want to extend the boundaries of Earth to the frontiers of the cosmos.</p>
            <div class="social-icons">
              <ul>
                
                <li><a href="https://discord.com/" target="_blank" title="Discord"><i aria-hidden="true" class="fa-brands fa-discord"></i></a></li>

                <li><a href="https://discord.com/" target="_blank" title="Discord"><i aria-hidden="true" class="fa-brands fa-discord"></i></a></li>

                <li><a href="https://www.twitter.com/" target="_blank" title="Twitter"><i aria-hidden="true" class="fa-brands fa-twitter"></i></a></li>
                 
                <li><a href="https://facebook.com/" target="_blank" title="Facebook"><i aria-hidden="true" class="fa-brands fa-facebook"></i></a></li>
                 
                <li><a href="https://www.dribbble.com/" target="_blank" title="Dribbble"><i aria-hidden="true" class="fa-brands fa-dribbble"></i></a></li>
                 
                <li><a href="https://www.instagram.com/" target="_blank" title="Instagram"><i aria-hidden="true" class="fa-brands fa-instagram"></i></a></li>
              
              </ul>
              </div>
          </div>
        </div>
        
        <div class="col-md-6">
          <div class="team-box wow fadeUp" data-wow-delay=".3s">
              <img src="images/team/team4.png" alt="CHRIS ARENDS">
            <h2>CHRIS ARENDS</h2>
            <span>Web-Developer</span>
            <p>We don't want to conquer the cosmos, we simply want to extend the boundaries of Earth to the frontiers of the cosmos.</p>
            <div class="social-icons">
              <ul>

                <li><a href="https://discord.com/" target="_blank" title="Discord"><i aria-hidden="true" class="fa-brands fa-discord"></i></a></li>

                <li><a href="https://www.twitter.com/" target="_blank" title="Twitter"><i aria-hidden="true" class="fa-brands fa-twitter"></i></a></li>
                 
                <li><a href="https://facebook.com/" target="_blank" title="Facebook"><i aria-hidden="true" class="fa-brands fa-facebook"></i></a></li>
                 
                <li><a href="https://www.dribbble.com/" target="_blank" title="Dribbble"><i aria-hidden="true" class="fa-brands fa-dribbble"></i></a></li>
                 
                <li><a href="https://www.instagram.com/" target="_blank" title="Instagram"><i aria-hidden="true" class="fa-brands fa-instagram"></i></a></li>
              
              </ul>
              </div>
          </div>
        </div>
        


      </div>
      
    </div>

    
    <div class="col-md-6 right-box" style="background-image: url(images/team.jpg);">

      <div class="title-section wow fadeUp" data-wow-delay=".3s">
        <i class="fas fa-users"></i>
        <h2>Meet our team</h2>
        <p>It will be nice to hear from you.</p>
      </div>

    </div>

</div>

</section>
 


<!-- Section Contact -->
<section class="section-contact" id="contact">

  <div class="row">

    <div class="col-md-6 left-box" style="background-image: url(images/contact.jpg);">
      <!-- Left column is now just a background image -->
    </div>

    <div class="col-md-6 right-box">
      <div class="title-section wow fadeUp" data-wow-delay=".3s">
        <i class="fas fa-envelope"></i>
        <h2>Get in touch</h2>
        <p>It will be nice to hear from you.</p>
      </div>

      <div class="contact-info-container wow fadeUp" data-wow-delay=".3s">
        <div class="contact-info">
          <div class="icon">
            <i aria-hidden="true" class="fa-solid fa-location-dot"></i>
          </div>
          <div class="info-box">
            <h3>Address</h3>
            <p><?php echo getenv('CONTACT_ADDRESS') ?: 'Somewhere, Gresham OR 97030'; ?></p>
          </div>
        </div>
        
        <div class="contact-info">
          <div class="icon">
            <i aria-hidden="true" class="fas fa-phone"></i>
          </div>
          <div class="info-box">
            <h3>Phone number</h3>
            <p><?php echo getenv('CONTACT_PHONE') ?: '+5039991234'; ?></p>
          </div>
        </div>
        
        <div class="contact-info">
          <div class="icon">
            <i aria-hidden="true" class="fas fa-paper-plane"></i>
          </div>
          <div class="info-box">
            <h3>Email</h3>
            <p><?php echo getenv('ADMIN_EMAIL') ?: 'you@email.com'; ?></p>
          </div>
        </div>
      </div>

      <div id="note"></div>
      <form id="ajax-contact-form" class="contact-form">
        <div class="form-group">
          <input class="wow fadeUp" data-wow-delay=".3s" type="text" name="name" id="name" placeholder="Name" required />
        </div>
        <div class="form-group">
          <input class="wow fadeUp" data-wow-delay=".3s" type="email" name="email" id="email" placeholder="Email" required />
        </div>
        <div class="form-group">
          <textarea class="wow fadeUp" data-wow-delay=".3s" name="msg" id="msg" placeholder="Message" required></textarea>
        </div>
        <div class="form-group">
          <input class="wow fadeUp" data-wow-delay=".3s" type="submit" name="submit" id="submit" value="Send" />
        </div>
        <div id="form-messages"></div>
      </form>
    </div>

</div>

</section>


<!-- Section Subscribe -->
<section class="section-subscribe" id="subscribe">

  <div class="row">
  
    <div class="col-md-6 left-box">
  
   
      <div id="google-container"></div>
      <div id="zoom-in"></div>
      <div id="zoom-out"></div>
      
  
    </div>
  
    
    <div class="col-md-6 right-box" style="background-image: url(images/subscribe.jpg);">
  
      <div class="title-section wow fadeUp" data-wow-delay=".3s">
        <i class="fas fa-paper-plane"></i>
        <h2>Subscribe</h2>
      </div>
      <form id="subscribe-form" class="wow fadeUp" data-wow-delay=".3s">
        <div class="form-group">
          <input id="subscribe-email" type="email" name="email" placeholder="Enter your email address" required>
          <button type="submit"><i class="fas fa-paper-plane"></i></button>
        </div>
        <div id="subscribe-messages"></div>
      </form>
  
    </div>
  
  </div>
  
  </section>

<!-- FOOTER -->
<footer>
  <div class="container">
     <div class="row">

       <div class="copyright">Chris Arends @ 2025 <a href='http://chrisarends.com' target='_blank'> Mountain-Sleds.</a></div>

     </div>
  </div>
</footer>
<!-- END FOOTER -->


    <!-- Javascript files -->
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!-- Backstretch -->
    <script src="js/jquery.backstretch.min.js"></script>
    <!-- CountDown  -->
    <script src="js/jquery.countdown.js"></script>
    <!-- Validate form -->
    <script src="js/jquery.validate.js"></script>
    <!-- Youtube Player -->
    <script src="js/jquery.mb.YTPlayer.min.js"></script>
    <!-- Ajax chimp -->
    <script src="js/jquery.ajaxchimp.js"></script>
    <!-- Wow -->
    <script src="js/wow.min.js"></script>
    <!-- Counter -->
    <script src="js/jquery.countTo.min.js"></script>
    <!-- jQuery Appear -->
    <script src="js/jquery.appear.min.js"></script>
    <!-- Custom -->
    <script src="js/main.js"></script>
    <!-- Form handling -->
    <script>
      jQuery.noConflict()(function($) {
        $(document).ready(function() {
          // Contact form handling
          $('#ajax-contact-form').on('submit', function(e) {
            e.preventDefault();
            console.log('Form submitted');
            const form = $(this);
            const formMessages = $('#form-messages');
            
            // Clear previous messages
            formMessages.removeClass('success error').html('');
            
            // Get form data
            const formData = {
              name: $('#name').val(),
              email: $('#email').val(),
              msg: $('#msg').val()
            };
            
            console.log('Sending form data:', formData);
            
            // Send the form data
            $.ajax({
              type: 'POST',
              url: '/api/contact.php',
              data: formData,
              dataType: 'json',
              success: function(response) {
                console.log('Form submission response:', response);
                if (response.success) {
                  formMessages.addClass('success').html('Thank you for your message! We will get back to you soon.');
                  form[0].reset();
                } else {
                  formMessages.addClass('error').html(response.message || 'An error occurred. Please try again.');
                }
              },
              error: function(xhr, status, error) {
                console.error('Form submission error:', {xhr, status, error});
                formMessages.addClass('error').html('An error occurred. Please try again later.');
              }
            });
          });
          
          // Subscribe form handling
          $('#subscribe-form').on('submit', function(e) {
            e.preventDefault();
            const form = $(this);
            const formMessages = $('#subscribe-messages');
            const email = $('#subscribe-email').val();
            
            // Clear previous messages
            formMessages.removeClass('success error').html('');
            
            // Validate email
            if (!email || !email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
              formMessages.addClass('error').html('Please enter a valid email address.');
              return;
            }
            
            // Send the subscription request
            $.ajax({
              type: 'POST',
              url: '/api/subscribe.php',
              data: { email: email },
              dataType: 'json',
              success: function(response) {
                if (response.success) {
                  formMessages.addClass('success').html('Thank you for subscribing!');
                  form[0].reset();
                } else {
                  formMessages.addClass('error').html(response.message || 'An error occurred. Please try again.');
                }
              },
              error: function() {
                formMessages.addClass('error').html('An error occurred. Please try again later.');
              }
            });
          });
        });
      });
    </script>
    <!-- Google map -->
    <script>
      // Function to handle map loading errors
      function handleMapsError(message) {
        const container = document.getElementById('google-container');
        if (container) {
          container.innerHTML = `<div style="padding: 20px; text-align: center; color: #666;">
            <p>${message}</p>
            <p>Please try refreshing the page.</p>
          </div>`;
        }
        console.error('Maps Error:', message);
      }

      // Function to initialize the map
      async function initializeMap() {
        try {
          // Fetch the API key first
          const response = await fetch('/api/get-maps-key.php');
          if (!response.ok) throw new Error('Failed to fetch map parameters');
          
          const data = await response.json();
          if (!data.key) throw new Error('No API key received');

          // Load the Google Maps API
          const script = document.createElement('script');
          script.src = `https://maps.googleapis.com/maps/api/js?key=${data.key}&v=beta&libraries=places&map_ids=dbdf96ee2a25f4b42913dd80`;
          script.async = true;
          script.defer = true;

          // Create a promise that resolves when the script loads
          const scriptLoadPromise = new Promise((resolve, reject) => {
            script.onload = resolve;
            script.onerror = () => reject(new Error('Failed to load Google Maps API'));
          });

          // Add the script to the document
          document.head.appendChild(script);

          // Wait for the script to load
          await scriptLoadPromise;

          // Now that the script is loaded, import the required libraries
          const { Map } = await google.maps.importLibrary("maps");
          const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

          // Initialize the map
          if (typeof mt_google_map === 'function') {
            mt_google_map(
              parseFloat(data.latitude),
              parseFloat(data.longitude),
              parseInt(data.zoom),
              { Map, AdvancedMarkerElement }
            );
          } else {
            throw new Error('Map initialization function not found');
          }
        } catch (error) {
          handleMapsError(error.message);
        }
      }

      // Initialize map after the page loads
      window.addEventListener('load', () => {
        // Add a timeout to detect if Google Maps fails to load
        const mapsTimeout = setTimeout(() => {
          handleMapsError('Google Maps failed to load. Please check your internet connection.');
        }, 10000);

        // Start the initialization process
        initializeMap().finally(() => {
          clearTimeout(mapsTimeout);
        });
      });
    </script>
    <!-- Winter Animation -->
    <script src="js/winter.js"></script>
</body>
</html>