<template>
  <div>
    <div class="header">
      <div class="box">
        <div class="logoImg">
          <router-link to="/index"
            ><img src="../assets/Layer_1.png" alt=""
          /></router-link>
        </div>
        <nav>
          <router-link to="/Payments">Payments</router-link>
          <router-link to="/AboutUs">About Us</router-link>
          <router-link to="/FAQ">FAQ</router-link>
          <router-link to="/ContactUs">Contact Us</router-link>
        </nav>
        <!-- phone and email -->
      </div>
      <div class="phoneInfo">
        <div class="phone" @click="call">
          <svg-icon icon-class="tel" class="icon" />
          <p>1300 67 61 61</p>
        </div>
        <div class="email" @click="sendEmail" >
          <svg-icon icon-class="email" class="icon" />
          <p>sales@trustypay.com.au</p>
        </div>
      </div>

      <router-link to="/ContactUs"
        ><el-button type="primary" class="btnInfo"
          >Sign up</el-button
        ></router-link
      >
    </div>
  </div>
</template>

<script>
import svgIcon from "@/components/svgIcon";
export default {
  name: "headTop",
  components: {
    svgIcon,
  },
  data() {
    return {
      searchQuery: "",
      showSearchInput: false,
    };
  },
  methods: {
    toggleSearch() {
      this.showSearchInput = !this.showSearchInput;
    },
    search() {
      // Perform search logic here
      console.log("Searching for:", this.searchQuery);
    },
    call() {
      window.location.href = "tel:1300676161";
    },
    sendEmail() {
      window.location.href = "mailto:sales@trustypay.com.au";
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  margin: 0 auto;
  padding-top: 20px;
  gap: 100px;
  .box {
    display: flex;
    align-items: center;
    .logoImg {
      width: 295px;
      height: 60px;
      img {
        width: 295px;
        height: 60px;
      }
    }

    nav {
      display: flex;
      align-items: center;
      // margin: 0px 60px;
    }
    nav a {
      text-decoration: none;
      margin: 0px 40px;
      font-size: 16px;
      color: #000;
    }
  }
  .btnInfo {
    width: 121px;
    height: 38px;
    border-radius: 10px;
    background: #00a0e8;
    font-size: 16px;
  }
  input {
    height: 26px;
    outline: none;
    border: none;
    border: 1px solid #00a0e8;
  }
  .phoneInfo {
    .icon {
      width: 20px;
      height: 20px;
    }
    .phone {
      display: flex;
      align-items: center;
      cursor: pointer;
      p {
        margin: 0;
        padding: 8px 10px;
      }
    }
    .email {
      display: flex;
      align-items: center;
      cursor: pointer;
      p {
        margin: 0;
        padding: 8px 10px;
      }
    }
  }
}
</style>
