const objHelloworld = { template: `
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
` ,

  props: {
    msg: String
  }
}
app.component('helloworld', objHelloworld); const objHome = { template: `
  <div class="home">
    <!-- Hero Section -->
    <div class="home__hero">
      <div class="container">
        <h1>Revolutionize Your Real Estate Business with dezzy.ai</h1>
        <div class="home__video-wrapper">
          <div class="wistia_responsive_padding" style="padding: 56.25% 0 0 0; position: relative">
            <div
              class="wistia_responsive_wrapper" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;">
              <iframe
                src="https://fast.wistia.net/embed/iframe/a67alx5xml?seo=false&videoFoam=true"
                title="dezzy.ai Promo Video"
                allow="autoplay; fullscreen"
                allowtransparency="true"
                frameborder="0"
                scrolling="no"
                class="wistia_embed"
                name="wistia_embed"
                msallowfullscreen
                width="100%"
                height="100%"
              ></iframe>
            </div>
          </div>
        </div>
        <img class="bot" src="assets/images/dezzy-bot.png" alt="Dezzy Bot" />
      </div>
    </div>

    <!-- Text Section -->
    <div class="home__text">
      <div class="container">
      <div class="custom">
          <h1>Utilize Advanced AI Technology</h1>
          <p>
            dezzy.ai is a cutting-edge AI bot, bringing revolutionary advancements 
            to various aspects of real estate operations. By seamlessly integrating 
            with dotloop, dezzy.ai streamlines workflows, automates the creation of 
            Commission Disbursement Authorizations (CDAs), and monitors employee 
            performance. Additionally, agents can create high quality print marketing 
            materials, find helpful articles on real estate topics and create 
            engaging social media content. 
          </p>
      </div>
      </div>
    </div>

    <!-- Why dezzy.ai Section -->
    <div class="home__bot">
      <div class="container">
        <h1>Why Agents Love dezzy.ai</h1>
        <div class="reasons-row">
          <div class="reasons-col">
            <div class="reason" v-for="(reason, index) in reasonsGroupOne" :key="index">
              <div class="check">
                <img src="assets/images/check-white.svg">
              </div>
              <span>{{ reason.text }}</span>
            </div>
          </div>
          <div class="reasons-col">
            <img class="dezzy-large" src="assets/images/dezzy-bot-lg.png" alt="Dezzy Bot">
          </div>
          <div class="reasons-col">
            <div class="reason" v-for="(reason, index) in reasonsGroupTwo" :key="index">
              <div class="check">
                <img src="assets/images/check-white.svg">
              </div>
              <span>{{ reason.text }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- LPT Realty Section -->
    <div class="home__lpt">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-sm-6">
            <h2>A Little Bit About LPT Realty</h2>
            <p>
              LPT Realty is an innovative, agent-first platform that empowers 
              agents with tools and the latest technologies to succeed and 
              provide the best service possible to their clients. LPT Realty 
              maintains high standards of efficiency and ensures that 
              agents are consistently delivering results. The utilization of 
              dezzy.ai enhances workflows, boosts productivity, and delivers 
              exceptional experiences in the real estate industry.
              dezzy.ai is now available exclusively for LPT Realty agents.
            </p>
            <p>
              
            </p>
            <button class="btn btn-primary"><a href="https://lpt.com/">Learn More</a></button>
          </div>
          <div class="col-sm-6">
            <img src="assets/images/dezzy-mockup.png" alt="dezzy.ai Designer Screen - Business Cards" class="mockup">
            <div class="info">
              <div class="row">
                <div v-for="(reason, index) in lptReasons" :key="index" class="col">
                  <img :src="reason.img" :alt="reason.text">
                  <h3 class="lpt-reason">{{ reason.text }}</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
` ,

  data() {
    return {
      reasons: [
        {text: 'Maximizes agent potential'},
        {text: 'Marketing materials in minutes'},
        {text: 'Instantly connect with leads'},
        {text: '3D mockups for social media'},
        {text: 'Performance monitoring'},
        {text: 'Seamless dotloop integration'},
        {text: 'Access relevant helpful articles'},
        {text: 'Workflow optimization'},
      ],
      lptReasons: [
        {
          text: 'Revenue Share & Stock Grants',
          img: 'assets/images/rev-share.svg'
        },
        {
          text: 'Zero Monthly Fees, Zero  Signup Fees',
          img: 'assets/images/no-fees.svg'
        },
        {
          text: 'Expert Training & Coaching',
          img: 'assets/images/education.svg'
        }
      ]
    }
  },
  computed: {
    reasonsGroupOne() {
      return this.reasons.slice(0,4)
    },
    reasonsGroupTwo() {
      return this.reasons.slice(4,8)
    }
  }
}
app.component('home', objHome); const objAboutRpfunding = { template: `
  <div class="about">
    <h1>This is an about page</h1>
    <p>
        All about rpfunding and what they do.
    </p>
  </div>
` ,


}
app.component('about-rpfunding', objAboutRpfunding); const objNavigationFooter = { template: `
    <footer>
        <div class="container">
            <img class="logo" src="assets/images/dezzy_logo_horizontal_v2_black.svg" alt="dezzy.ai">
            <!-- <a href="">Privacy Policy</a> -->
            <p class="disclaimer">dezzy.ai 2023 All rights reserved</p>
        </div>
    </footer>
` ,


}
app.component('navigation-footer', objNavigationFooter); const objNavigationMain = { template: `
    <nav class="navbar navbar-expand-lg fixed-top" role="navigation">
        <div class="container-fluid">
                <a class="navbar-brand" href="#"><img src="assets/images/dezzy_logo_horizontal_v1.svg" alt="dezzy.ai"></a>
                 <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="toggler-icon top-bar"></span>
                    <span class="toggler-icon middle-bar"></span>
                    <span class="toggler-icon bottom-bar"></span>
                </button>
            <div class="collapse navbar-collapse py-5 py-lg-0" id="bs-example-navbar-collapse-1">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <router-link class="nav-link"  to="/">Home</router-link>
                    </li>
                    <!-- <li class="nav-item">
                        <router-link class="nav-link" to="/about">About</router-link>
                    </li>  -->
                    <!-- <li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown<b class="caret"></b></a>
                        <ul class="dropdown-menu downdownopen bg-dark border-0"  aria-labelledby="navbarDropdownMenuLink">
                            <li>
                                <a class="dropdown-item text-muted" href="about.html">1 Route</a>
                            </li>
                            <li>
                                <a  class="dropdown-item text-muted"  href="certification.html">2 Routes</a>
                            </li>
                        </ul>
                    </li>                    -->
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
` ,


}
app.component('navigation-main', objNavigationMain);