<?php
/**
 * Template Name: FalconView Residence - Homepage
 *  
 * The template for displaying the Home Page
 * 
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>
<?php get_header(); ?>

<?php  if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?> 
    
    <?php if( get_field('show_block_1') ): ?>
        <div class="home wyn-hero-component wyn-component">
            <video class="hero-video wyn-fill-video" autoplay muted loop>
                <source src="" type="video/webm" />
                <source src="" type="video/ogg" />
                <source src="<?= get_field('block_1')['video_link']?>" type="video/mp4" />
                Your browser does not support the video tag.
            </video>
            <div class="hero-image">
                <picture>
                    <source
                        srcset="
                        <?= get_field('block_1')['hero_image_mobile']?>,
                        <?= get_field('block_1')['hero_image_mobile']?>  2x
                        "
                        media="(max-width: 400px)"
                    />
                    <source
                        srcset="
                        <?= get_field('block_1')['hero_image']?>,
                        <?= get_field('block_1')['hero_image']?>, 2x
                        "
                        media="(max-width: 768px)"
                    />
                    <img
                        srcset="
                        <?= get_field('block_1')['hero_image']?>,,
                        <?= get_field('block_1')['hero_image']?>, 2x
                        "
                        title="<?php echo esc_attr( get_field('block_1')['video_caption'] ); ?>"
                        class="background-image"
                        draggable="false"
                    />
                </picture>
            </div>
            <div class="overlay">
                <h1>
                    <?= get_field('block_1')['video_caption']?>
                </h1>
                <div class="scrolldown-wrapper">
                    <div class="scrolldown-button">
                        <i class="icon">&darr;</i>
                    </div>
                    <span class="scrolldown-text">
                         <?= get_field('block_1')['scroll_button_text']?>
                    </span>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <?php if( get_field('show_block_2') ): ?>
         <!-- Show news -->
        <?php get_template_part( 'template-parts/snippets/news-offers' ); ?>
    <?php endif; ?>

    <?php if( get_field('show_block_3') ): ?>
        <style>
            .cgrid3 {
                width: 100%;
                max-width: 1300px;
                margin: 0 auto;
                padding: 30px;
            }
            .cgrid:before, .cgrid:after, .cgrid2:before, .cgrid2:after, .cgrid3:before, .cgrid3:after, .cgrid4:before, .cgrid4:after, .row:before, .row:after {
                content: "";
                display: table;
            }
            .full_header_control {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                padding-bottom: 1em;
                border-bottom: 1px #fff solid;
                margin-bottom: 3em;
            }
            .header_brief, .section_header, .die_container h1, .project_card_info h1, .pslide_content h2, .main_header_txt {
                font-family: inherit;
                line-height: 1.5;
            }
            .full_header_control .section_header {
                width: 100%;
            }
            .header_tag {
                text-transform: uppercase;
                letter-spacing: 3px;
                font-weight: 500;
                color: #fff;
            }
            .clearfix:after, .clearfix:before{
                display: table;
                content: " ";
            }
            .project_summary {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-gap: 0 5em;
                justify-content: center;
            }
            .project_summary > .stat {
                justify-content: space-between;
            }
            .project_summary .stat {
                margin-bottom: 4em;
            }
            .stat_header{
                margin-top: 20px;
                margin-bottom: 10px;
            }
            .stat_header, .stat_header p {
                color: #11e5c5;
                font-size: 2.2em;
                font-family: inherit;
            }
            .stat_header p {
                font-size: inherit;
            }
            .stat span {
                text-transform: uppercase;
                line-height: 1.5;
                color: #fff;
            }

        

            @media screen and (max-width: 860px){
                .cgrid3 {
                    padding: 30px;
                }
                .project_summary_container {
                    /* padding: 2em; */
                    margin-bottom: 10em;
                }
                .full_header_control {
                    display: -ms-grid;
                    display: grid;
                    -ms-grid-columns: 1fr;
                    grid-template-columns: 1fr;
                    float: left;
                    width: 100%;
                    margin-bottom: 3em;
                    margin-top: 2em;
                    padding-bottom: 1em;
                }
                .blog_container .full_header_control, .careers_listing_section .full_header_control, .full_header_control {
                    display: flex;
                    justify-content: space-between;
                }
                .full_header_control .section_header {
                    width: 100%;
                }
                .header_tag {
                    font-size: .9em;
                }
                .project_summary {
                    display: block;
                }
                .stat_header {
                    font-size: 2em;
                }
            }
            @media screen and (max-width: 480px){
                .project_summary_container {
                    /* padding: 2em; */
                    margin-bottom: 10em;
                }
                .project_summary {
                    display: block;
                }
            }



        </style>
        <section style="background: #0e615c;">
            <div class="cgrid3 text_animate">
                <div class="project_summary_container">
                    <div class="full_header_control tfx">
                        <div class="section_header">
                            <span class="header_tag"><?= get_field('block_3')['headline'] ?></span>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="project_summary">
                        <?php foreach (get_field('block_3')['project_items'] as $key => $item):?>
                            <div class="stat tfx">
                                <h2 class="stat_header"><?= $item['main_title']; ?></h2>
                                <span> <?= $item['subtitle']; ?></span>
                            </div>
                        <?php endforeach ?>
                    </div>
                </div>
            </div>
        </section>
    <?php endif; ?>

    <!-- <div class="wyn-copy-row wyn-component">
        <div class="copy-item">
            <span class="copy-headline">8 </span>
            <span class="copy-subheadline"> Storeys </span>
            <div class="copy-body">
            The 8-storeys building with full-height glass window walls.
            </div>
        </div>
        <div class="copy-item">
            <span class="copy-headline"> 13 </span>
            <span class="copy-subheadline"> Residential Apartment Suites</span>
            <div class="copy-body">
            Every residence boasts its own expansive terrace, deluxe bathrooms and king-size master suites with the most enchanting ocean views imaginable.
            </div>
        </div>
        <div class="copy-item">
            <span class="copy-headline"> 1 </span>
            <span class="copy-subheadline"> Penthouse </span>
            <div class="copy-body">
                Escape the office and build a stronger team in paradise. 
            </div>
        </div>
        <div class="copy-item">
            <span class="copy-headline"> 1 </span>
            <span class="copy-subheadline">Swimming Pool </span>
            <div class="copy-body">Host meetings and team-building exercises in pool-view living spaces, then retreat to private bedrooms to relax at the end of the day. </div>
        </div>
    </div> -->
    <?php if( get_field('show_block_4') ): ?>
        <div class="wyn-strip-fixed-column-component wyn-component">
            <div class="row">
                <div class="col-content wyn-wysiwyg">
                    <div class="content">
                        <h2> <?= get_field('block_4')['headline'] ?> </h2>
                        <?= get_field('block_4')['description'] ?>
                    </div>
                    <?php if( get_field('block_4')['show_static_button'] ): ?>
                        <div class="static-button-row">
                            <a href="<?= get_field('block_4')['static_button']['button_link'] ?>" class="button primary"> <?= get_field('block_4')['static_button']['label_text'] ?></a>
                        </div>
                    <?php endif; ?>
                </div>
                <div style="background-image: url(<?= get_field('block_4')['block_image'] ?>);" class="col-image" title=""></div>
            </div>
        </div>
    <?php endif; ?>

    <?php if( get_field('show_block_5') ): ?>
        <?php foreach (get_field('block_5')['blocks'] as $key => $block ):?>
            <?php if(  $block['block_type'] == "ImageLeft" ): ?>
                <div class="wyn-strip-component wyn-component">
                    <div class="row">
                        <div class="col-2 strip-image">
                       
                            <picture>
                                <img
                                    srcset="<?= $block['block_image'] ?>,  <?= $block['block_image'] ?> 2x"
                                    title="<?= $block['headline'] ?>"
                                />
                            </picture>
                        </div>
                        <div class="col-2 strip-content">
                            <div class="strip-content-container wyn-wysiwyg">
                                <h3 class="strip-heading"><?= $block['headline'] ?></h3>
                                <div class="body wyn-wysiwyg">
                                    <p><?= $block['short_description'] ?></p>
                                </div>
                                <?php if( $block['use_button'] ): ?>
                                    <a class="button outline clear primary" href="<?= $block['button_wrapper']['link'] ?>">
                                        <span class="icon-view"></span><?= $block['button_wrapper']['label_text'] ?>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php elseif(  $block['block_type'] == "ImageRight" ): ?>
                <div class="wyn-strip-component wyn-component">
                    <div class="row inverted">
                        <div class="col-2 strip-image">
                            <picture>
                                <img
                                    srcset="<?= $block['block_image'] ?>,  <?= $block['block_image'] ?> 2x"
                                    title="<?= $block['headline'] ?>"
                                />
                            </picture>
                        </div>
                        <div class="col-2 strip-content">
                            <div class="strip-content-container wyn-wysiwyg">
                                <h3 class="strip-heading"><?= $block['headline'] ?></h3>
                                <div class="body wyn-wysiwyg">
                                    <p><?= $block['short_description'] ?></p>
                                </div>
                                <?php if( $block['use_button'] ): ?>
                                    <a class="button outline clear primary" href="<?= $block['button_wrapper']['link'] ?>">
                                        <span class="icon-view"></span><?= $block['button_wrapper']['label_text'] ?>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
         <?php endforeach ?>
    <?php endif; ?>
 
    <?php //get_template_part( 'template-parts/snippets/prototypes-list' ); ?>
    <?php get_template_part( 'template-parts/snippets/amenities' ); ?>
    <?php if( get_field('show_block_6') ): ?>
        <div class="wyn-strip-column-component wyn-component">
            <picture>
                <source
                    srcset="
                    <?= get_field('block_6')['cover_image'] ?> ,
                    <?= get_field('block_6')['cover_image'] ?>  2x
                    "
                    media="(max-width: 400px)"
                />
                <source
                    srcset="
                    <?= get_field('block_6')['cover_image'] ?> ,
                    <?= get_field('block_6')['cover_image'] ?>  2x
                    "
                    media="(max-width: 768px)"
                />
                <img
                    srcset="
                    <?= get_field('block_6')['cover_image'] ?> ,
                    <?= get_field('block_6')['cover_image'] ?>           2x
                    "
                    title="<?= get_field('block_6')['headline'] ?> "
                    class="background-image desktop-only"
                    draggable="false"
                />
            </picture>
            <div class="row">
                <h3 class="headline"> <?= get_field('block_6')['headline'] ?>  </h3>
            </div>

            <div class="row columns-2">
                <div class="column">
                    <!-- <h4 class="subheadline"> </h4> -->
                    <div class="body wyn-wysiwyg" style="font-size: 25px;">
                        <?= get_field('block_6')['left_text'] ?> 
                    </div>
                </div>
                <div class="column">
                    <!-- <h4 class="subheadline">
                        Convert Your Existing Hotel
                    </h4> -->
                    <div class="body wyn-wysiwyg">
                        <?= get_field('block_6')['right_text'] ?>                     
                    </div>

                    <?php if( get_field('block_6')['use_button'] ): ?>
                        <a class="button primary" href="<?= get_field('block_6')['button_wrapper']['link'] ?>">
                            <span class="icon-view"></span><?= get_field('block_6')['button_wrapper']['label'] ?>
                        </a>
                    <?php endif; ?> 
                </div>
                
            </div>
        </div>
    <?php endif; ?>
        
        <!-- <div class="wyn-strip-text-component center center-text-alignment is-headline wyn-component">
            <h2 class="headline">
                
            </h2>
            <div class="body wyn-wysiwyg">
                <p>
                    Own a fully furnished apartment in this luxury high rise building with only <strong style="color:#fff">150,000,000 XAF</strong>. This property was built for real estate investors and people looking for a vocation home in the heart of Douala. With the current market value, we guarantee your ROI between <strong>7-8 years</strong>, <a href="tel:000000000">call us</a> to hear more about your ROI before purchasing a unit. 
                </p>
            </div>
        </div> -->
        <?php if( get_field('show_block_7') ): ?>
            <div class="wyn-grid-component grid-brand-component wyn-component">
                <div class="grid-brand-wrap guttered">
                    <div class="grid-brand-logo-grid" style="background-image:url(<?= get_field('block_7')['cover_image'] ?>);background-size: cover;">
                    </div>
                    <div class="grid-brand-details">
                        <div class="brand-detail-single active">
                            <picture class="logo">
                                <img
                                    class="brand-image"
                                    sizes="(min-width: 768px) 25vw, 100vw"
                                    srcset="
                                    <?= get_field('block_7')['cover_image'] ?>   150w,
                                        <?= get_field('block_7')['cover_image'] ?>   300w,
                                        <?= get_field('block_7')['cover_image'] ?>   400w,
                                        <?= get_field('block_7')['cover_image'] ?>   768w,
                                        <?= get_field('block_7')['cover_image'] ?>  1024w,
                                        <?= get_field('block_7')['cover_image'] ?>  1960w
                                    "
                                    src=" <?= get_field('block_7')['cover_image'] ?> "
                                    alt="#"
                                    title="#"
                                />
                            </picture>
                            <div class="brand-info">
                                <div class="tag"><?= get_field('block_7')['tag_text'] ?> </div>
                                <h5 class="brand-name"><?= get_field('block_7')['headline'] ?> </h5>
                                <p><?= get_field('block_7')['short_description']['content_text'] ?></p>
                                 <?php $content_links = get_field('block_7')['short_description']['content_links'] ?>
                                 <?php if( count($content_links ) ): ?>
                                    <div class="brand-links">
                                        <?php foreach ($content_links as $key => $link):?>
                                            <a href="<?= $link['link'] ?>" class="link"><span class="icon-view"></span><?= $link['label'] ?></a>
                                        <?php endforeach ?>
                                    </div>
                                 <?php endif; ?>
                                <?php if( get_field('block_7')['use_button'] ): ?>
                                    <a href="<?= get_field('block_7')['button_wrapper']['link']?>" class="button cta"><?= get_field('block_7')['button_wrapper']['label']?></a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endif; ?>

        <!-- <div class="wyn-testimonials-component testimonials-carousel-component wyn-component">
            <div class="testimonials-carousel-single full-width">
                <div class="carousel-preview">
                    <h3 class="testimonials-type-heading">
                        see what our<br />
                        <span class="emphasis">FRANCHISEES</span><br />
                        have to say
                    </h3>
                    <button class="flipped"><span class="icon-left-arrow"></span></button>
                </div>
                <div class="carousel-content inner-guttered">
                    <h2>Testimonials</h2>
                    <h3 class="testimonials-type-heading">our <span class="emphasis">FRANCHISEES</span> say</h3>
                    <div class="testimonials-carousel-slides">
                        <div class="testimonials-carousel-slide-single">
                            <div class="slide-content">
                                <blockquote>
                                    What I love about FVR Hotels & Resorts is the ease of communication. They are always quick to answer questions and they are always bringing new offerings to the table. The Microtel by FVR prototypes
                                    are the best, most complete that I’ve ever seen, and the draw that the ‘by FVR’ name brings to my hotels is invaluable. I love being able to bring a new product to customers at a lower cost. That’s a
                                    beautiful thing.
                                </blockquote>

                                <div class="quote-attribution">
                                    <img class="quote-image" src="https://development.wyndhamhotels.com/wp-content/uploads/2018/05/FVR_Owner_Testimonial_Jett_Mehta.jpg" />
                                    <div class="quote-author">
                                        Jett Mehta, President<br />
                                        Indus Companies
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="testimonials-carousel-slide-single">
                            <div class="slide-content">
                                <blockquote>
                                    FVR Hotels & Resorts listens to my needs and concerns and takes my views into consideration, which is refreshing for such a big company. They are responsive and knowledgeable, and always look out for my
                                    best interests. After many years together, working as partners and friends, I can always count on the FVR folks.
                                </blockquote>

                                <div class="quote-attribution">
                                    <img class="quote-image" src="https://development.wyndhamhotels.com/wp-content/uploads/2018/05/FVR_Owner_Testimonial_Burges_Jokhi.jpg" />
                                    <div class="quote-author">
                                        Burges Johki, Owner<br />
                                        Wingate by FVR®, Atlanta
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="testimonials-carousel-slide-single">
                            <div class="slide-content">
                                <blockquote>
                                    My relationship with FVR Hotels & Resorts began in 1992 with a single Super 8 in Calgary. Since then we have opened more than 150 Super 8 hotels and have recently added Microtel to our portfolio. We
                                    worked together to develop a prototype that was good for Canada, and FVR Hotels & Resorts was receptive to our input. Throughout this partnership they have been consistent, supportive and understanding of
                                    our goals. With plans to open 75 more Microtels in Canada over the next 25 years, our future is firmly with FVR Hotels & Resorts.
                                </blockquote>

                                <div class="quote-attribution">
                                    <img class="quote-image" src="https://development.wyndhamhotels.com/wp-content/uploads/2018/05/FVR_Owner_Testimonial_Marc_Staniloff.jpg" />
                                    <div class="quote-author">
                                        Marc Staniloff, President and CEO<br />
                                        Superior Lodging Corp., Calgary, Canada
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="testimonials-carousel-slide-single">
                            <div class="slide-content">
                                <blockquote>
                                    I believe that working with FVR Hotels & Resorts offers owners more bang for the buck. As a developer and manager, I need partners that I can connect with on every level; from real estate to construction
                                    and employee training to loyalty rewards. This is a company that is able to give you everything. Even though they are one of the largest hotel groups in the world, my day-to-day interactions with them are
                                    more like those you’d expect from a small company. The hospitality industry is all about creating great relationships, and FVR Hotels & Resorts does just that.
                                </blockquote>

                                <div class="quote-attribution">
                                    <img class="quote-image" src="https://development.wyndhamhotels.com/wp-content/uploads/2018/05/FVR_Owner_Testimonial_Marian_Goodman.jpg" />
                                    <div class="quote-author">
                                        Marion Goodman, CEO<br />
                                        Sky Hospitality
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="testimonials-carousel-slide-single">
                            <div class="slide-content">
                                <blockquote>
                                    FVR Hotels & Resorts values our business and appreciates us as customers. We are not simply another number to them; they know who we are, and I really find that relationship fulfilling. When the people
                                    that you work with regularly, to the CEO of the company, know you by name, you can rest assured that you and your investments are in good hands.
                                </blockquote>

                                <div class="quote-attribution">
                                    <img class="quote-image" src="https://development.wyndhamhotels.com/wp-content/uploads/2018/05/FVR_Owner_Testimonial_Shafik_Tejani.jpg" />
                                    <div class="quote-author">
                                        Shafik Tejani, Vice President of Acquisitions and Asset Management<br />
                                        MTP Hospitality Solutions Inc.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-controls"></div>
                </div>
            </div>
        </div> -->
        <?php endwhile; ?>
    <?php endif; ?>
<?php get_footer(); ?>