const objHome = { template: `
<div>
    <div v-if="$root.realEstateTeamLoaded && $root.realEstateTeam">
        <div class="home__hero">
            <img class="vector-right" src="assets/images/vector-dots.svg">
            <div class="container">
                <h1>Maximize Your Growth with {{ $root.realEstateTeam?.name }}</h1>
                <!-- <img class="home__arrow" src="assets/images/hero-arrow.svg" /> -->
                <p>
                    <span v-if="$root.realEstateTeam?.name == 'Military Veteran Team'">
                        {{ $root.realEstateTeam?.name }} mission is to modernize and progress the experience of buying and selling real estate with a military discipline approach by cultivating a spirit of collaboration, innovation and integrity.
                    </span>
                    Our team marketing and lead generation is on fire since the market shifted
                    creating the opportunity to add 6-10 agents to our team. Joining
                    {{ $root.realEstateTeam.abbreviation }} is fast and easy so you can immediately start taking our approved buyers on
                    showings, writing offers, and going on listing appointments.
                </p>
                <div class="home__button-wrapper">
                    <button class="btn btn-primary form-button" @click="$root.scrollToElementById('_home__form')">Join Our Amazing Team</button>
                </div>
            </div>
            
            <div class="home__vector-wrapper">
                <div class="home__hero-vector">
                    <div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
                        <img v-if="$root.realEstateTeam?.name == 'Paramount Home Group'" src="assets/images/PHG-Team.png" class="team-photo" alt="Paramount Home Group team">
                    </div>
                    <div v-if="$root.realEstateTeam?.name == 'Military Veteran Team'" class="team-video" alt="iPhone background">
                        <iframe width="266" height="311" src="https://www.youtube.com/embed/Soq8UAOCdrE?si=a9gkr3nvZbodYQVj&origin=https://mvtrecruit.lpt.com" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
            <!-- Wistia Videos -->
            <!-- <videos-gallery /> -->
        </div>
        <div class="home__videos text-center">
            <h1 v-if="$root.realEstateTeam?.name == 'Paramount Home Group'">
                Listen to Keegan Discuss His Philosophy for Creating an Award-Winning Team
            </h1>
            <h1 v-if="$root.realEstateTeam?.name == 'Military Veteran Team'">
                Listen to Larry Discuss the Military Veteran Team and What Sets Them Apart
            </h1>
            <p class="video-paragraph text-center" v-if="$root.realEstateTeam.name == 'Military Veteran Team'">
                Our core values develop and define our culture, our brand, our business strategies and who we are as professionals in today's corporate world. It is our goal to consistently live these core values out in our lives on a daily basis.
            </p>
            <videos-main v-if="$root.realEstateTeam?.name == 'Paramount Home Group'" />
            <div v-if="$root.realEstateTeam?.name == 'Military Veteran Team'" class="video-main">
                <iframe src="https://www.youtube.com/embed/qeWGj7QgZng?si=_YxEQD4BqIVKo5ib&origin=https://mvtrecruit.lpt.com" width="100%" height="100%" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe>
            </div>
        </div>
        <sections-basic 
            id="get-started"
            title="Get Started Right Away"
            paragraph="Our real estate team is committed to professional growth and development. We have a
            top-notch training and mentorship program designed to help new and experienced
            agents massively grow their business. We have personalized guidance and support
            offered by experienced team members, helping agents fast-track their learning curve and
            achieve their goals."
            img="assets/images/join-phone.png"
            altText="Join Our Amazing Team - Parter with our incredible team and make more money in less time"
        />
        <div class="home__reasons">
            <div class="container">
                <h1>Why Agents Are Choosing {{ $root.realEstateTeam?.name }}</h1>
                <p class="text-center" v-if="$root.realEstateTeam?.name == 'Military Veteran Team'">
                    Our agents sell homes. They build relationships. They problem-solve. They negotiate. They understand neighborhoods. They obsess over prices, market values and the newest, hottest listings. They make sure our clients don't buy the wrong home. They can easily accomplish all of this thanks to the backing of the LPT Realty brand and enjoy the benefits LPT offers.
                </p>
                <div class="reasons__row">
                    <div v-for="(reason, index) in reasons" :key="index" class="col-md-6 card__wrapper">
                        <elements-card 
                            :title="reason.title"
                            :paragraph="reason.paragraph"
                            :img="reason.img"
                        />
                    </div>
                </div>
            </div>
        </div>
        <sections-basic 
            id="leadgen"
            title="Leverage Our Exclusive Lead Generation System"
            :paragraph="leadGenParagraph"
            img="assets/images/leadgen.png"
            altText="Visual diagram of the flow of lead generation"
        />
        <!-- <div class="home__leadgen text-center">
            <div class="content">
                <h1>Leverage Our Exclusive Lead Generation System</h1>
                <p>
                    Our team has cutting-edge lead generation systems that provide a consistent flow of
                    high-quality leads to its agents. PHG's focuses on investing in advanced marketing
                    technologies, online advertising, and lead nurturing strategies, enabling agents to focus on what
                    they do best - closing deals.
                </p>
            </div>
        </div> -->
        <div class="home__culture">
            <div class="content">
                <h1 class="text-center">Strong Team Culture and Collaboration</h1>
                <!-- Paramount Home Group -->
                <p class="text-center" v-if="$root.realEstateTeam?.name == 'Paramount Home Group'">
                    Join a team that is focused on work ethic, collaboration, innovation, and having fun! Our
                    team has weekly team events, regular meetings, and opportunities for socializing and
                    networking. Agents thrive in an environment where they feel valued, supported, and part of a
                    dynamic and united team.
                </p>
                <div v-if="$root.realEstateTeam?.name == 'Military Veteran Team'">
                    <p>
                        Military Veteran Realtor Team's mission is to modernize and progress the experience of
                        buying and selling real estate with a military discipline approach by cultivating a spirit of
                        collaboration, innovation, and integrity.
                    </p>
                    <p>
                        Our core values develop and define our culture, our brand, our business strategies and
                        who we are as professionals in today's corporate world. It is our goal to consistently live
                        these core values out in our lives on a daily basis.
                    </p>
                    <p>
                        Every member of the Military Veteran Team is encouraged to take on a military mind
                        approach, as our clients hold us accountable to these values:
                    </p>
                    <ul>
                        <li>Being real and transparent</li>
                        <li>Being responsive and available</li>
                        <li>Obsessing about the details</li>
                        <li>Doing the right thing for the long term</li>
                        <li>Innovate and lead</li>
                        <li>Embrace accountability</li>
                        <li>Execute time on target every time</li>
                        <li>Focus on solutions</li>
                        <li>Build relationships and have fun</li>
                        <li>Be great and never settle</li>
                        <li>Embracing fresh ideas and bold thinking</li>
                    </ul>
                    <p>
                        It's Win/Win. And it's all included in our commission: Solid Experience. Real Results. Full
                        Transparency. Full team effort with a military discipline and Great Communication
                        Guaranteed.
                    </p>
                </div>
            </div>
            <div v-if="$root.realEstateTeam?.name == 'Paramount Home Group'">
                <h3 class="text-center">Listen to {{ $root.realEstateTeam.name }} Agents Talk About Their Experience</h3>
                <videos-rest />
            </div>
        </div>
        <sections-basic 
            id="technology"
            title="Run Your Business Right from Your Phone"
            paragraph="Gain access to over $11k in the latest technologies and platforms to 
            help you run your business. Get realtime tracking of payments as well 
            as Revenue Share and stock grants right from your smart phone. Plus, 
            create tickets and get live support via chat, phone, email or SMS."
            img="assets/images/connect-phone.png"
            altText="LPT Connect Screen - Manage Transactions, View revenue share, Sign in to Chime and Listing Power Tools"
        />
        <div class="home__success">
            <div class="container home__success-row">
                <div class="text-content">
                    <h1>Everything You Need For Success</h1>
                    <p>
                        Even beyond leads and proven marketing, get one-on-one training 
                        with top agents and coaches in the industry. Plus, there are 
                        absolutely no monthly fees or signup fees to our brokerage or the 
                        team. Between oppurtunities for revenue share and stock grants, we 
                        have everything you need for success.
                    </p>
                </div>
                <div class="home__success-checklist">
                    <div class="header">
                        <div class="content">
                            <h3>{{ $root.realEstateTeam?.name }}</h3>
                            <p>Designed to promote your success</p>
                        </div>
                    </div>
                    <div class="checklist">
                        <div class="checklist-item" v-for="(item, index) in checklist" :key="index">
                            <img class="check" src="assets/images/green-check.svg" alt="checkmark">
                            <p>{{ item }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <sections-basic 
            id="marketing"
            title="Utilize Our Proven Marketing Resources"
            :paragraph="marketingParagraph"
            img="assets/images/marketing-resources.png"
            altText="Listing Power Tools Power pack and Property Website screen"
        />
        <div class="home__form" id="_home__form">
            <img src="assets/images/form-vector-left.svg" class="form-vector">
            <div class="container home__form-row">
                <div class="content">
                    <h1>Ready to Grow Your Business?</h1>
                    <div class="home__form-reasons">
                        <div class="home__form-reason" v-for="(reason, index) in formReasons" :key="index">
                            <img :src="reason.img" :alt="reason.title">
                            <h3>{{ reason.title }}</h3>
                        </div>
                    </div>
                </div>
                <div v-if="!formSubmitted" class="form">
                    <h3 class="form-header">Join Our Amazing Team</h3>
                    <p>Partner with our incredible team and make more money in less time.</p>
                    <div class="form-item">
                        <p class="label">Full Name</p>
                        <input 
                            type="text" 
                            v-model="form.fullName"
                            @blur="blur('fullName')"
                            :class="{'input-error': focused.fullName && !isFullNameValid}" 
                        >
                        <p v-if="focused.fullName && !isFullNameValid" class="error">{{ errorMessage.fullName }}</p>
                    </div>
                    <div class="form-item">
                        <p class="label">Email</p>
                        <input 
                            type="text" 
                            v-model="form.email"
                            @blur="blur('email')"
                            :class="{'input-error': focused.email && !isEmailValid}" 
                        >
                        <p v-if="focused.email && !isEmailValid" class="error">{{ errorMessage.email }}</p>
                    </div>
                    <div class="form-item">
                        <p class="label">Phone</p>
                        <input 
                            type="text" 
                            v-model="form.phone"
                            @blur="blur('phone')"
                            :class="{'input-error': focused.phone && !isPhoneValid}" 
                        >
                        <p v-if="focused.phone && !isPhoneValid" class="error">{{ errorMessage.phone }}</p>
                    </div>
                    <buttons-primary
                        btnText="Join Our Team Today"
                        type="submit"
                        :click="submit"
                    />
                    <div class="checkbox-row">
                        <input v-model="form.privacy" type="checkbox" checked required />
                        <label for="sell">By checking this box, I agree to the <router-link to="/privacy">Terms &amp; Privacy Policy</router-link></label>
                    </div>
                    <p v-if="formError !== ''" class="error-message">{{ formError }}</p>
                </div>
                <div v-if="formSubmitted == true" class="form form__thank-you">
                    <div>
                        <div class="form__thanks-row">
                            <h3 class="thanks-header">Thank You!</h3>
                            <img class="thanks-check" src="assets/images/green-check.svg" alt="Check">
                        </div>
                        <p>You're information has been submitted.</p>
                    </div>
                </div>
            </div>
            <img src="assets/images/form-arrow.svg" alt="arrow" class="form-arrow">
        </div>
    </div>
    <div v-if="$root.redirecting" class="home__hero">
        <div class="home__redirect">
            <h4 class="home__redirect-title">Please Wait</h4>
            <p>You are being redirected to lpt.com. This should only take a couple seconds.</p>
        </div>
        <div class="home__hero-vector"></div>
    </div>
</div>
` ,

    data() {
        return {
            formSubmitted: false,
            formError: '',
            reasons: [
                { 
                    title: 'Best In Class Technology', 
                    paragraph: 'Over $11k in the latest tools and technologies and the best in class marketing designed to ensure success',
                    img: 'assets/images/marketing.svg'
                },
                { 
                    title: 'Revenue Share', 
                    paragraph: 'Earn revenue share on transactions closed by agents you sponsor, and the agents they sponsor, down to 7 levels',
                    img: 'assets/images/rev-share.svg'
                },
                { 
                    title: 'Education & Training', 
                    paragraph: 'Live and on-demand webinars to help you get more listings and ensure your success, available daily',
                    img: 'assets/images/education.svg'
                },
                { 
                    title: 'Live Agent Support', 
                    paragraph: 'You\'ll have support available 7 days a week via chat, text, phone, and email to help with whatever you might need',
                    img: 'assets/images/support.svg'
                },
            ],
            checklist: [
                'No monthly fees',
                'No sign up fees',
                'One-on-one training with top agents',
                'Revenue share',
                'Stock grants'
            ],
            formReasons: [
                { title: 'Revenue Share & Stock Grants', img: 'assets/images/revshare-stock.svg' },
                { title: 'Zero Monthly Fees, Zero  Signup Fees', img: 'assets/images/zero-fees.svg' },
                { title: 'Expert Training & Coaching', img: 'assets/images/expert-training.svg' }
            ],
            form: {
                fullName: '',
                email: '',
                phone: '',
                privacy: true
            },
            focused: {
                fullName: false,
                email: false,
                phone: false,
            },
            errorMessage: {
                fullName: 'Please enter your full name',
                email: 'Please enter a valid email',
                phone: 'Please enter a valid phone number'
            }
        }
    },
    methods: {
        submit() {
            this.focused.fullName = true
            this.focused.email = true
            this.focused.phone = true

            let nameSeparatorIdx = this.form.fullName.indexOf(' ');
            if (this.form.fullName !== '' && nameSeparatorIdx >= 0) {
                this.form.firstName = this.form.fullName.substr(0, nameSeparatorIdx);
                this.form.lastName = nameSeparatorIdx ? this.form.fullName.substr(nameSeparatorIdx + 1) : '';
            }

            if (this.isFormValid) {
                let toEmail = ""
                if(this.$root.realEstateTeam?.name == 'Military Veteran Team') {
                    toEmail = "larryfischer1@gmail.com"
                }
                if(this.$root.realEstateTeam?.name == 'Paramount Home Group') {
                    toEmail = "aime@paramounthomegroup.com"
                }
                // Submit to BE
                let payload = {
                    "fullName": this.form.fullName,
                    "firstName": this.form.firstName,
                    "lastName": this.form.lastName,
                    "email": this.form.email,
                    "phone": this.form.phone,
                    "userId": '', // this.$root.getCookie('hv')
                    "teamName": this.$root.realEstateTeam?.name,
                    "leadEmailTo": toEmail
                };

                fetch("api/backend.cfc?method=sendLeadEmail", {
                    method: "POST",
                    headers: {
                        "Content-Type":"application/x-www-form-urlencoded"
                    },
                    body: this.$root.convertJsonToCfFormScope(payload)
                })
                .then((response) => {
                    return response.json()
                })
                .then((data) => {
                    if (data.success) {
                        // TODO: Add gtag handling?
                        this.formSubmitted = true;
                        this.resetForms()
                    } else {
                        this.formError = 'Sorry, there was a problem submitting the form'
                    }
                })
            }
        },
        blur(field) {
            this.focused[field] = true
        },
        resetForm() {
            this.form.fullName = '';
            this.form.email = '';
            this.form.phone = '';
        },
    },
    computed: {
        isFullNameValid() {
            return this.$root.fieldIsValid(this.focused.fullName, this.form.fullName)
        },
        isEmailValid() {
            return this.$root.fieldIsValid(this.focused.email, this.form.email) && this.$root.emailIsValid(this.form.email);
        },
        isPhoneValid() {
            return this.$root.fieldIsValid(this.focused.phone, this.form.phone) && ('' + this.form.phone).replace(/\D/g, '').slice(0, 10).length == 10
        },
        isFormValid() {
            return this.form.fullName !== ''
                && this.form.email !== ''
                && this.$root.emailIsValid(this.form.email)
                && ('' + this.form.phone).replace(/\D/g, '').slice(0, 10).length == 10
        },
        leadGenParagraph() {
            return `Our team has cutting-edge lead generation systems that provide a consistent flow of high-quality leads to its agents. ${this.$root.realEstateTeam.abbreviation}'s focuses on investing in advanced marketing technologies, online advertising, and lead nurturing strategies, enabling agents to focus on what they do best - closing deals.`
        },
        marketingParagraph() {
            return `<p>${this.$root.realEstateTeam.abbreviation} is committed to elevating agents' personal brands and marketing efforts. When
            joining our team you will have access to professional marketing materials, a visually
            striking online presence, and a strong social media strategy. <br/><br/>Agents can leverage our
            team's brand recognition and resources to gain a competitive edge in the market.
            You'll get immediate access to our proven 
            marketing resources designed to ensure your success in the business. 
            Go to your appointments armed with the best listing presentation in 
            the industry that utilizes our multi-faceted marketing system.</p>`
        }
    }
}
app.component('home', objHome); const objPrivacy = { template: `
    <div class="container mb-4">
        <h1 style="font-family: 'Roboto', sans-serif; font-size: 30px;">Privacy Policy/Terms and Conditions</h1>
        <h3 style="font-family: 'Roboto';">Information Collected</h3>
        <p><em>&ldquo;Personal Information&rdquo;</em> includes, but not limited to:</p>
        <ul>
            <li>Name</li>
            <li>Physical Address</li>
            <li>Email Address</li>
            <li>Telephone Number</li>
            <li>Current Occupation, title, and company/organization name</li>
            <li>Demographic information including Date of birth, nationality and country or residence</li>
            <li>Realtor License Number and Real Estate Experience</li>
        </ul>
        <p><em>&ldquo;Usage  Information&rdquo;</em> is any information that does not reveal your specific identity.  This information includes, but not limited to:</p>
        <ul>
            <li>Browser, device, and operating system information</li>
            <li>Internet Protocol (“IP) address</li>
            <li>App usage data</li>
            <li>Information collected through cookies and other technologies</li>
            <li>Demographic information and other information provided by you that does not reveal your specific identity</li>
        </ul>
        <h3 style="font-family: 'Roboto';">Our Communication With You (Telephone Consumer Protection Act Consent)</h3>
        <p>By submitting your Personal Information, you are providing your express written consent to receive communications from us.  Communications from us include, but not limited to:</p>
        <ul>
            <li>Telephone Calls through Landline Phones and Cellular Phones</li>
            <li>E-Mails</li>
            <li>Text Messages including SMS and MMS</li>
            <li>Postal Mail</li>
            <li>Fax</li>
        </ul>
        <p>We may use an automatic telephone dialing system (“Dialer”), which may employ an artificial or pre-recorded voice (“Auto Voicemail”), auto text messages (“RoboTexts”), or artificial or prerecorded voices (“Prerecorded Messages”).  Your carrier’s standard rates and charges may apply.  How often we send you communications may vary.  Communications with you may be on a recorded line.  By submitting your Personal Information, you represent and warrant that you are at least 18 years of age, you have not registered on a national or statewide Do Not Call list, you are the account holder for the email addresses and phone numbers you provided, and the email addresses and phone numbers you provided are accurate.</p>
        <h3 style="font-family: 'Roboto';">Disclosure of Information</h3>
        <p>We may disclose Personal and Usage Information:</p>
        <ul>
            <li>To our Subsidiaries and Affiliates </li>
            <li>To our third-party service providers and business partners</li>
            <li>To comply with applicable law and regulations</li>
            <li>To cooperate with public and government authorities</li>
            <li>To cooperate with law enforcement</li>
            <li>For other legal reasons</li>
        </ul>
        <h3 style="font-family: 'Roboto';">How Information is Collected</h3>
        <p>We collect Personal and Usage Information from the following sources:</p>
        <ul>
            <li>Information we receive from you as a result of your use of our services.</li>
            <li>Information we receive from you, or on your behalf, through forms you complete, or through your communication to us</li>
            <li>Information we receive from you when creating a User Account</li>
            <li>Information we receive from your computer or mobile device</li>
            <li>Information we receive from our third-party service providers, business partners, subsidiaries, or affiliates</li>
            <li>Information we receive from other sources, as permitted by applicable laws, rules and regulations</li>
            <li>Information we receive from you, even if we have not requested such information and the information is not information that we normally collect</li>
        </ul>
        <h3 style="font-family: 'Roboto';">Security</h3>
        <p>We seek to use reasonable organizational, technical and administrative measures to protect Personal Information with our organization.  While we use said measures to protect your confidential information and provide suitable security, please be aware that no security measures are perfect or impenetrable.  We do not and cannot guarantee or warrant that any information transmitted through the Internet is secure, or that such transmissions are free from delay, interruption, interception or error.</p>
        <h3 style="font-family: 'Roboto';">Opt-Out</h3>
        <p>You may Opt-Out from receiving (i) marketing related emails from us; (ii) our sharing of your Personal Information with our affiliates for their direct marketing purposes; or (iii) our sharing of your Personal Information with our third-party business partners for their direct marketing purposes.  To Opt-Out, please contact us at help@lpt.com.  We will comply with your request(s) as soon as reasonably practicable.</p>
        <h3 style="font-family: 'Roboto';">Retention Period</h3>
        <p>We retain Personal Information and Usage Information for as long as needed, in our sole discretion, and in accordance with applicable law.</p>
        <h3 style="font-family: 'Roboto';">Third Party Services</h3>
        <p>This Privacy Policy does not address, and we are not responsible for, the privacy, information or other practices of any third parties.</p>
        <h3 style="font-family: 'Roboto';">Transfer of Information</h3>
        <p>We reserve the right to transfer your Personal Information, as well as any information about or from you, in connection with the merger, sale or other disposition of all or part of our business and/or assets. We cannot make any representations regarding the use or transfer of your information that we may have in the event of our bankruptcy, reorganization, insolvency, receivership, or an assignment for the benefit of creditors. You expressly agree and consent to the use and/or transfer of your information in connection with a sale or transfer of some or all of our assets.  We are not responsible for any breach of security by any third parties or for any actions of any third parties that receive any of the information that is disclosed to us.</p>
        <h3 style="font-family: 'Roboto';">Use of Services by Minors</h3>
        <p>Our Services are not directed to individuals under the age of 18.  We do not knowingly collect or solicit Personal from individuals under the age of 18.  Please email us at help@lpt.com if you believe we collected Personal Information from an individual under the age of 18.</p>
        <h3 style="font-family: 'Roboto';">Your Consent to Future Changes</h3>
        <p>We may change the website, Terms of Use, and this Privacy Policy at any time.  If we change this Privacy Policy, the changes will become effective immediately on posting the updated or revised Privacy Policy on this web page.</p>
        <h3 style="font-family: 'Roboto';">Contacting Us</h3>
        <p>If you have questions about this Privacy Policy, please contact us at help@lpt.com.</p>
    </div>
` ,


}
app.component('privacy', objPrivacy); const objButtonsPrimary = { template: `
    <button :type="type" class="btn btn-primary" @click="click">{{ btnText }}</button>
` ,

    props: {
        btnText: String,
        type: String,
        click: Function
    }
}
app.component('buttons-primary', objButtonsPrimary); const objElementsCard = { template: `
    <div class="card">
        <div class="card__row">
            <img :src="img" :alt="title">
            <div class="content">
                <h3 class="card-title">{{ title }}</h3>
                <p>{{ paragraph }}</p>
            </div>
        </div>
    </div>
` ,

    props: {
        title: String,
        paragraph: String,
        img: String
    }
}
app.component('elements-card', objElementsCard); const objElementsForm = { template: `
    <div class="form">
        <h3>{{ title }}</h3>
        <p>{{ paragraph }}</p>
        <div 
            class="form-item"
            v-for="(field, index) in fields" 
            :key="index"
        >
            <p class="label" :for="field.model">{{ field.label }}</p>
            <input :type="field.type" v-model="field.model">
            <!-- <p class="error">{{ field.errorMessage }}</p> -->
        </div>
        <buttons-primary
            btnText="Join Our Team Today"
            type="submit"
        />
    </div>
` ,

    props: {
        width: String,
        title: String,
        paragraph: String,
        fields: Array,
        errorMessage: String
    },
    data() {
        return {
            form: {

            }
        }
    }
}
app.component('elements-form', objElementsForm); const objNavigationFooter = { template: `
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <img class="footer-logo" src="assets/images/lptr-logo.svg" alt="LPT Realty">
                    <p class="name">{{$root.realEstateTeam?.name }}</p>
                    <!-- <a class="phone" :href="phoneHref">{{ $root.teamPhoneDisplay }}</a> -->
                </div>
                <div class="col-sm-6">
                    <h4>Terms</h4>
                    <router-link to="/privacy">Privacy Policy</router-link>
                </div>
            </div>
            <div class="row">
                <p class="disclaimer">
                    NOT FOR CONSUMERS, THIS SITE IS ONLY FOR LICENSED REAL ESTATE PROFESSIONALS. Benefits offered are exclusively for real estate agents who become exclusive agents of LPT Realty, LLC. Terms and conditions apply. Call for details. We retain $500 per file with a $5000 annual cap on 100% on comp plan. $500 Annual Fee Charged from first closing annually, does not include client transaction fee. Revenue Share requires RevPartner comp plan. Benefits subject to change. Independent Contractor Agreement supersedes all information provided here.
                </p>
            </div>
        </div>
    </footer>
` ,

    data() {
        return {

        }
    },
    computed: {
        phoneHref() {
            return `tel:+${this.$root.teamPhoneRaw}`
        }
    }
}
app.component('navigation-footer', objNavigationFooter); const objNavigationHeader = { template: `
    <nav class="main__navigation">
        <div class="container">
            <img src="assets/images/lptr-logo.svg" class="main__nav-logo" alt="LPT Realty" />
        </div>
    </nav>
` ,


}
app.component('navigation-header', objNavigationHeader); const objSectionsBasic = { template: `
    <div :class="id" class="section__basic">
        <img class="vector-right" src="assets/images/vector-dots.svg">
        <div class="container section__row">
            <div class="content">
                <h1>{{ title }}</h1>
                <p v-html="paragraph"></p>
            </div>
            <img class="section__main-image" :src="img" :altText="altText">
        </div>
        <img class="vector-left" src="assets/images/vector-dots.svg">
    </div>
` ,

    props: {
        id: String,
        title: String,
        paragraph: String,
        img: String,
        altText: String
    }
}
app.component('sections-basic', objSectionsBasic); const objVideosGallery = { template: `
    <div class="videos__gallery">
        <div class="active-video">
            <div class="wistia_responsive_padding" style="padding:56.25% 0 28px 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><iframe :src="$root.activeVideo.src" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div></div>
        </div>
        <div class="videos__pagination-mobile">
            <div v-if="$root.videos.length > 6" class="videos__button-group">
                <button :disabled="page == 0" @click="previousPage" class="previous"><img class="prev-sm" src="assets/images/caret.svg">Previous</button>
                <button :disabled="page == totalPages - 1" @click="nextPage" class="next">Next <img class="next-sm" src="assets/images/caret.svg"></button>
            </div>
            <p class="videos__pagination">
                {{ ($root.videos.indexOf($root.pagedThumbs[0]) + 1) + '-' + ($root.videos.indexOf($root.pagedThumbs[$root.pagedThumbs.length - 1]) + 1) }} of {{ $root.videos.length }} Videos
            </p>
        </div>
        <div class="videos__thumbs-section">
            <button v-if="$root.videos.length > 6" :disabled="page == 0" @click="previousPage" class="btn-previous">
                <img 
                    src="assets/images/caret.svg" 
                    :class="{'button-disabled': page == 0}" 
                    class="prev-button" 
                    alt="previous" 
                />
            </button>
            <div v-if="$root.videos.length > 6" class="videos__thumbs">
                <div 
                    @click="setActiveVideo(video.id)" 
                    :class="{'active-thumbnail' : $root.activeVideo.id == video.id}" 
                    v-for="(video, index) in $root.pagedThumbs" 
                    :key="index" 
                    class="thumbnail-wrapper"
                >   
                    <img :src="video.thumbnail" alt="thumbnail" />
                </div>
            </div>
            <div v-else class="videos__thumbs">
                <div 
                    @click="$root.selectVideo(video.id)" 
                    :class="{'active-thumbnail' : $root.activeVideo.id == video.id}" 
                    v-for="(video, index) in $root.pagedThumbs" 
                    :key="index" 
                    class="thumbnail-wrapper"
                >   
                    <img :src="video.thumbnail" alt="thumbnail" />
                </div>
            </div>
            <button v-if="$root.videos.length > 6" :disabled="page == totalPages - 1" @click="nextPage" class="btn-next">
                <img 
                    
                    src="assets/images/caret.svg" 
                    class="next-button" 
                    alt="next"
                    :class="{'button-disabled': page == totalPages - 1}"
                />
            </button>
        </div>
    </div>
` ,

    data() {
        return {
            page: 0,
            firstIndex: 0,
            lastIndex: 6
        }
    },
    computed: {
        totalPages() {
            return Math.ceil(this.$root.videos.length / 6);
        },
    },
    methods: {
        nextPage() {
            let vm = this;
            vm.page = vm.page += 1;
            vm.$root.pagedThumbs = vm.$root.pagination(vm.$root.videos, vm.page);
        },
        previousPage() {
            let vm = this;
            if (vm.page > 0) {
                vm.page = vm.page - 1;
                this.$root.pagedThumbs = vm.$root.pagination(vm.$root.videos, vm.page);
            }
        },
    }
}
app.component('videos-gallery', objVideosGallery); const objVideosMain = { template: `
    <div class="active-video">
        <div class="wistia_responsive_padding" style="padding:56.25% 0 28px 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><iframe :src="$root.mainVideo.src" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div></div>
    </div>
` ,

    
}
app.component('videos-main', objVideosMain); const objVideosRest = { template: `
    <div>
        <div class="videos__pagination-mobile">
            <!-- <div v-if="$root.videos.length > 6" class="videos__button-group">
                <button :disabled="page == 0" @click="previousPage" class="previous"><img class="prev-sm" src="assets/images/caret.svg">Previous</button>
                <button :disabled="page == totalPages - 1" @click="nextPage" class="next">Next <img class="next-sm" src="assets/images/caret.svg"></button>
            </div> -->
            
        </div>
        <div class="videos__thumbs-section">
            <div class="thumbnail-wrapper" v-for="(video, index) in $root.videos" :key="index">
                <div class="wistia_responsive_padding" style="padding:56.25% 0 28px 0;position:relative; height: 100%;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><iframe :src="video.src" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div></div>
            </div>
        </div>
    </div>
` ,


}
app.component('videos-rest', objVideosRest);