<?php /* Template Name: Homepage */ get_header(); ?>

<div class="uk-cover-container uk-text-center banner" uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <canvas class="uk-visible@m" width="" height="780"></canvas>
    <canvas class="uk-hidden@m" width="" height="600"></canvas>

	<img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/home-with-christmas-lights-at-night-1.webp" data-width data-height uk-cover>

  <div class="uk-position-cover uk-flex uk-flex-bottom">
    <img class="uk-width-1-1" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/snow-curve-desktop-gray-1@2x.webp" data-width data-height>
  </div>
	<div class="uk-position-cover uk-text-center uk-container uk-flex uk-flex-center uk-flex-middle" uk-scrollspy="cls: uk-animation-fade; delay: 500">
        <div>
          <div class="uk-width-2-3@m uk-margin-auto">
            <h1 class="green">Commercial & Residential Lighting by Mr. Winter</h1>
            <h4 class="white uk-margin-medium-top uk-margin-large-bottom">Transformative holiday, permanent, and commercial lighting solutions across British Columbia.</h4>
            <div class="uk-child-width-1-2@m uk-margin-large-bottom" uk-grid>
              <div>
                <div class="uk-text-right@m uk-text-center">
                  <a href="<?php echo home_url(); ?>/request-an-estimate" class="red-btn">GET A FREE ESTIMATE</a>
                </div>
              </div>
              <div>
                <div class="uk-text-left@m uk-text-center">
                  <a href="<?php echo home_url(); ?>/services" class="outline-btn">EXPLORE OUR SERVICES <i class="fa-regular fa-lights-holiday uk-margin-small-left"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>

<?php /*
<div class="grey-bg">
  <div class=" uk-padding-large uk-padding-remove-horizontal">
    <div class="uk-container">
      <div class="uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
        <div>

          <h5 class="blue uk-margin-remove-bottom">TOP OF THE LINE LIGHTING</h5>

          <h2 class="red uk-margin-remove-top">We now offer Permanent Chromaglow™ Lighting</h2>

          <h4 class="grey">Year‑round elegance with app-controlled, commercial-grade LED trim.</h4>

          <P class="uk-margin-medium-top uk-margin-medium-bottom">Mr Winter proudly installs Chromaglow™ permanent lighting from Big Star Lights, industry-leading, smart architectural lighting that blends seamlessly into your home or business.</P>

          <a href="<?php echo home_url(); ?>/services/chromaglow-lights/" class="page-link">SEE CHROMAGLOW IN ACTION <i class="fa-light fa-arrow-right"></i></a>
        </div>
        <div>
          <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/chromaglow-big-star-lights.webp" data-width data-height>
        </div>
      </div>
    </div>
  </div>

  <img class="uk-width-1-1" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/snow-curve-desktop-white-1@2x.webp" data-width data-height>

</div> */ ?>


<div class="grey-bg">
  <div class=" uk-padding-large uk-padding-remove-horizontal">
    <div class="uk-container">
      <div class="uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
        <div>

          <h5 class="blue uk-margin-remove-bottom">TOP OF THE LINE LIGHTING</h5>

          <h2 class="red uk-margin-remove-top">Commercial Lighting Solutions</h2>

          <h4 class="grey">Show your business in the best light with <strong>permanent, professional-grade exterior lighting</strong>. From storefronts and restaurants to large-scale venues, our custom installations add year-round curb appeal and help your business stand out day or night.</h4>

          <P class="uk-margin-medium-top uk-margin-medium-bottom">Give your business the professional edge it deserves—lighting that’s as reliable and hardworking as you are.</P>

          <a href="<?php echo home_url(); ?>/commercial-work/" class="page-link">SEE OUR COMMERCIAL LIGHTING <i class="fa-light fa-arrow-right"></i></a>
        </div>
        <div>
          <img class="corners uk-margin-large-top" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/orchard-park-commercial-holidy-lighting.webp" data-width data-height>
        </div>
      </div>
    </div>
  </div>

  <img class="uk-width-1-1" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/snow-curve-desktop-white-1@2x.webp" data-width data-height>

</div>

<div class="uk-container uk-container-large">
  <div uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <h5 class="blue uk-margin-remove-bottom uk-text-center uk-margin-large-top">OUR LIGHTING SERVICES</h5>
    <h2 class="red uk-margin-remove-top uk-text-center">Stress Free Holiday &amp; Year Round Lighting</h2>
    <h4 class="grey uk-text-center uk-margin-large-bottom">Custom lighting displays, installed safely and stress‑free.</h4>
  </div>


  <div uk-slider>

      <div class="uk-position-relative">

          <div class="uk-slider-container">
              <div class="uk-slider-items uk-child-width-1-3@m" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">

                <?php
                $args = array(
                    'post_type'      => 'services',
                    'posts_per_page' => 10, // change to -1 for all
                    'post_status'    => 'publish',
                    'orderby'        => 'date',
                    'order'          => 'DESC'
                );

                $testimonials = new WP_Query( $args );

                if ( $testimonials->have_posts() ) :
                    while ( $testimonials->have_posts() ) : $testimonials->the_post(); ?>

                    <div>
                      <div class="">

                        <?php
                          $image = get_field('image');
                          if( $image ): ?>
                              <a href="<?php the_permalink(); ?>"><img class="corners" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" /></a>
                          <?php endif; ?>

                          <h3><a class="blue green-hov" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                          <?php
                          $text = get_field('short_description');
                          if( $text ): ?>
                              <p><?php echo esc_html($text); ?></p>
                          <?php endif; ?>

                      </div>
                    </div>

                  <?php endwhile;
                  wp_reset_postdata();
              endif; ?>
            </div>
        </div>


        <div class="slide-nav uk-flex uk-flex-center uk-margin-medium-top uk-margin-large-bottom" uk-scrollspy="cls: uk-animation-fade; delay: 300">
            <a class="uk-margin-medium-right" href uk-slider-item="previous"><i class="fa-light fa-arrow-left-long fa-2x red"></i></a>
            <a class="uk-margin-medium-left" href uk-slider-item="next"><i class="fa-light fa-arrow-right-long fa-2x red"></i></a>
        </div>

      </div>
    </div>

    <div class="corners uk-margin-large-bottom ontop" uk-scrollspy="cls: uk-animation-fade; delay: 300">
      <div class="grey-bg uk-padding">
        <h3 class="red uk-text-center uk-margin-large-bottom">Don’t battle the Ladder</h3>

        <div class="uk-child-width-1-3@m" uk-grid>
          <div>
            <div class="icon-circle"><i class="fa-light fa-file-pen"></i></div>
            <h4 class="blue uk-margin-remove-bottom">Free, No Obligation Quotes</h4>
            <P class="uk-margin-remove">Call us today to discuss your project, big or small.</P>
          </div>
          <div>
            <div class="icon-circle"><i class="fa-light fa-calendar-clock"></i></div>
            <h4 class="blue uk-margin-remove-bottom">Flexible Scheduling</h4>
            <P class="uk-margin-remove">We install at the date and time that works best for you.</P>
          </div>
          <div>
            <div class="icon-circle"><i class="fa-light fa-lights-holiday"></i></div>
            <h4 class="blue uk-margin-remove-bottom">Hassle Free Take Down</h4>
            <P class="uk-margin-remove">When the season’s over (or whenever you’re ready), we’ll return to safely remove and store your lights.</P>
          </div>
        </div>
      </div>
      <div class="blue-bg white uk-padding">
        <div class="uk-child-width-1-2@m" uk-grid>
          <div>
            <h3 class="white">Ready to Light Things Up?</h3>
          </div>
          <div>
            <h4 class="white">From holiday sparkle to sleek, permanent lighting—we’ve got you covered.</h4>
          </div>
        </div>
        <div class="uk-text-center">
          <a href="<?php echo home_url(); ?>/request-an-estimate" class="red-outline-btn uk-margin-medium-top">GET A FREE ESTIMATE</a>
        </div>
      </div>
    </div>
</div>

<div class="up">
  <img class="uk-width-1-1" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/snow-curve-desktop-gray-1@2x.webp" data-width data-height>

  <div class="grey-bg uk-padding-top-xlarge">

    <div class="uk-container uk-container-expand">
      <?php
      // Get gallery field from page ID 15
      $gallery = get_field('gallery', 15);

      if( $gallery ) {
          // Pick up to 6 random images
          $random_images = array_rand($gallery, min(6, count($gallery)));

          // Ensure it's always an array
          if( !is_array($random_images) ) {
              $random_images = [$random_images];
          }

          echo '<div class="uk-grid uk-child-width-1-2 uk-child-width-1-6@m uk-grid-small" uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300" uk-grid uk-lightbox="animation: slide">';
              foreach( $random_images as $i ) {
                  $image = $gallery[$i];
                  echo '<div>';
                      echo '<a href="' . esc_url($image['url']) . '" data-caption="' . esc_attr($image['alt']) . '">';
                          echo '<img class="corners" src="' . esc_url($image['sizes']['thumbnail']) . '" alt="' . esc_attr($image['alt']) . '" />';
                      echo '</a>';
                  echo '</div>';
              }
          echo '</div>';
      }
      ?>

    </div>

    <div class="uk-container uk-container-large uk-margin-xlarge-top uk-margin-xlarge-bottom">
      <div class="uk-grid-large" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
        <div class="uk-width-1-3@m">
          <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/jaime-howard-exterior-holiday-lights-review.webp" data-width data-height>
        </div>
        <div class="uk-width-2-3@m">
          <div uk-grid>
            <div class="uk-width-expand">
              <h3 class="blue uk-margin-remove-top">Used Mr. Winter (Kelowna) for Christmas lights installation at our cabin. Absolutely fantastic service!</h3>
            </div>
            <div class="uk-width-auto">
              <i class="fa-regular fa-comment-quote bright-blue fa-4x"></i>
            </div>
          </div>
          <h4 class="grey">Very happy with how it turned out and definitely would recommend to anyone looking to get Christmas lights done! Very professional install (spacing & straight lines perfect). Pricing was great value & included all the light strands etc. We will be using this service in the future!</h4>
          <h4 class="blue">- Jaime Howard</h4>
        </div>
      </div>
    </div>



    <div class="uk-container" uk-scrollspy="cls: uk-animation-fade; delay: 300">
    	<main role="main">
    			<section>

    			<?php if (have_posts()): while (have_posts()) : the_post(); ?>

    				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    					<?php the_content(); ?>

    					<br class="clear">

    					<?php edit_post_link( __('Edit this page'), '', '', 0, 'post-edit-link uk-label uk-float-right' ); ?>

    				</article>

    			<?php endwhile; ?><?php endif; ?>

    			</section>
    	</main>
    </div>
    <img class="uk-width-1-1" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/snow-curve-desktop-white-1@2x.webp" data-width data-height>

  </div>
</div>


<div class="uk-container uk-container-expand uk-margin-xlarge-top uk-margin-large-bottom">
  <div class="uk-child-width-1-2@m uk-grid-large uk-flex uk-flex-bottom" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div>
      <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/orchard-park-sign-lighting-by-mr-winter-1.webp" data-width data-height>
    </div>
    <div>
      <h5 class="blue uk-margin-remove-bottom">COMMERCIAL SHOWCASE</h5>
      <h2 class="red uk-margin-remove-top">High-profile installations from Mission Hill to Orchard Park Mall</h2>

      <P>View our completed projects, vineyards, malls, and commercial complexes that stand as testaments to our expertise.</P>

      <a href="<?php echo home_url(); ?>/commercial-work/" class="page-link uk-margin-bottom">VIEW COMMERCIAL PROJECTS <i class="fa-light fa-arrow-right"></i></a>
    </div>
  </div>
  <div class="uk-child-width-1-3@m uk-grid-small" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div>
      <div class="uk-grid-small" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
        <div class="uk-width-1-2">
          <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/beautiful-home-in-the-okanagan-with-holiday-lighting-1.webp" data-width data-height>
        </div>
        <div class="uk-width-1-2">
          <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/orchard-park-front-entry-holiday-lights-by-mr-winter-1.webp" data-width data-height>
        </div>
        <div class="uk-width-1-1">
          <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/commercial-street-with-trees-covered-in-holiday-lights-1.webp" data-width data-height>
        </div>
      </div>
    </div>
    <div>
      <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/orchard-park-holiday-lights-1.webp" data-width data-height>
    </div>
    <div>
      <div class="uk-grid-small" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
        <div class="uk-width-1-1">
          <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/valley-pro-holiday-lighting-1.webp" data-width data-height>
        </div>
        <div class="uk-width-1-2">
          <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/synthetic-turf-holiday-lighting-display-1.webp" data-width data-height>
        </div>
        <div class="uk-width-1-2">
          <img class="corners" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/mission-hill-winery-tree-lighting-1.webp" data-width data-height>
        </div>
      </div>
    </div>
  </div>

</div>


<img class="uk-width-1-1" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/snow-curve-desktop-gray-1@2x.webp" data-width data-height>
<div class="grey-bg uk-padding-large uk-padding-remove-horizontal" >
  <div class="uk-container uk-container-large">
    <div class="lights-bg corners uk-padding" uk-scrollspy="cls: uk-animation-fade; delay: 300">
      <h2 class="white uk-margin-remove-top uk-text-center uk-margin-medium-bottom">Ready to Light Up Your Next Project?</h2>
      <div class="uk-width-2-3@m uk-margin-auto">
        <h4 class="white uk-text-center">Whether for your home or business, our team is ready to design, install, and maintain lighting that captivates.</h4>
      </div>

      <div class="uk-text-center">
        <a href="<?php echo home_url(); ?>/request-an-estimate" class="red-outline-btn uk-margin-medium-top">REQUEST A FREE CONSULTATION TODAY!</a>
      </div>

    </div>
  </div>


  <div class="uk-container uk-margin-large-top">
    <div class="uk-flex uk-flex-middle" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
      <div class="uk-width-2-3@m">
        <h5 class="blue uk-margin-remove-bottom">GIVING BACK TO THE COMMUNITY</h5>
        <h2 class="red uk-margin-remove-top">Partnering with local charities &amp; bringing joy</h2>
        <P class="uk-margin-medium-top uk-margin-medium-bottom">We proudly support Mamas for Mamas, Coha Central Okanagan Hospice, and organize our annual Toy Drive with decorated tractors and media coverage.</P>
        <a href="<?php echo home_url(); ?>/giving-back" class="page-link">LEARN MORE ABOUT GIVING BACK <i class="fa-light fa-arrow-right"></i></a>
      </div>
      <div class="uk-width-1-3@m">
        <video autoplay loop muted playsinline uk-scrollspy="cls: uk-animation-fade; delay: 300">
          <source src="<?php echo get_template_directory_uri(); ?>/images/mrwintervideo.mp4" type="video/mp4">
        </video>
      </div>
    </div>

    <div class="uk-child-width-1-3" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
      <div>
        <img class="logo-img" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/mamas-for-mamas-logo@2x.webp" data-width data-height>
      </div>
      <div>
        <div class="uk-text-center">
          <img class="logo-img" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/coha-logo@2x.webp" data-width data-height>
        </div>
      </div>
      <div>
        <div class="uk-text-right">
          <img class="logo-img" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/okanagan-toy-drive-mr-winter-logo@2x.webp" data-width data-height>
        </div>
      </div>
    </div>

  </div>

</div>


<?php get_footer(); ?>
