<template>
  <div>
        <div class="row">
        <div class="col-12 pt-3">
          <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
        </div>
        <div class="col-12">
          <h4 class="text-center fw-bold pt-5">Do your headphones have ANC?</h4>
          <h6 class="text-center text-muted">What’s that?</h6>
        </div>
        <div class=" pt-5 text-center">
<<<<<<< HEAD:pages/onboarding/onboarding2.vue
          <div class="d-flex mx-auto justify-content-center ">
            <div class="checkmark pt-2 px-1 d-block d-sm-inline-block d-inline-block">
=======
          <div class=" ">
            <nuxt-link to="/onbording/onbording3"  @click.once="increment(75)"  class="checkmark pt-2 d-block d-sm-inline-block d-inline-block">
>>>>>>> c2fd5cdf9222ad06828578796322b9ef8ac834d1:pages/onbording/onbording2.vue
              <input type="radio" class="btn-check" name="options-outlined" id="success-outlined1" autocomplete="off" >
              <label class="btn pt-4 px-5 checklabel" for="success-outlined1">
                <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 46" fill="none">
                  <path d="M15.4874 0.162403C15.4358 0.171779 15.3843 0.18584 15.3374 0.199903C14.7796 0.326466 14.3858 0.828029 14.3999 1.3999V44.5999C14.3952 45.0312 14.6202 45.4343 14.9952 45.6546C15.3702 45.8702 15.8296 45.8702 16.2046 45.6546C16.5796 45.4343 16.8046 45.0312 16.7999 44.5999V1.3999C16.8139 1.05303 16.6733 0.720216 16.4249 0.48584C16.1718 0.246778 15.8296 0.12959 15.4874 0.162403ZM44.2874 0.162403C44.2358 0.171779 44.1843 0.18584 44.1374 0.199903C43.5796 0.326466 43.1858 0.828029 43.1999 1.3999V44.5999C43.1952 45.0312 43.4202 45.4343 43.7952 45.6546C44.1702 45.8702 44.6296 45.8702 45.0046 45.6546C45.3796 45.4343 45.6046 45.0312 45.5999 44.5999V1.3999C45.6139 1.05303 45.4733 0.720216 45.2249 0.48584C44.9718 0.246778 44.6296 0.12959 44.2874 0.162403ZM8.28738 10.9624C8.23581 10.9718 8.18425 10.9858 8.13738 10.9999C7.57956 11.1265 7.18581 11.628 7.19988 12.1999V33.7999C7.19519 34.2312 7.42019 34.6343 7.79519 34.8546C8.17019 35.0702 8.62956 35.0702 9.00456 34.8546C9.37956 34.6343 9.60456 34.2312 9.59988 33.7999V12.1999C9.61394 11.853 9.47331 11.5202 9.22488 11.2858C8.97175 11.0468 8.62956 10.9296 8.28738 10.9624ZM51.4874 10.9624C51.4358 10.9718 51.3843 10.9858 51.3374 10.9999C50.7796 11.1265 50.3858 11.628 50.3999 12.1999V33.7999C50.3952 34.2312 50.6202 34.6343 50.9952 34.8546C51.3702 35.0702 51.8296 35.0702 52.2046 34.8546C52.5796 34.6343 52.8046 34.2312 52.7999 33.7999V12.1999C52.8139 11.853 52.6733 11.5202 52.4249 11.2858C52.1718 11.0468 51.8296 10.9296 51.4874 10.9624ZM22.6874 12.1624C22.6358 12.1718 22.5843 12.1858 22.5374 12.1999C21.9796 12.3265 21.5858 12.828 21.5999 13.3999V22.9999V32.5999C21.5952 33.0312 21.8202 33.4343 22.1952 33.6546C22.5702 33.8702 23.0296 33.8702 23.4046 33.6546C23.7796 33.4343 24.0046 33.0312 23.9999 32.5999V13.3999C24.0139 13.053 23.8733 12.7202 23.6249 12.4858C23.3718 12.2468 23.0296 12.1296 22.6874 12.1624ZM37.0874 12.1624C37.0358 12.1718 36.9843 12.1858 36.9374 12.1999C36.3796 12.3265 35.9858 12.828 35.9999 13.3999V32.5999C35.9952 33.0312 36.2202 33.4343 36.5952 33.6546C36.9702 33.8702 37.4296 33.8702 37.8046 33.6546C38.1796 33.4343 38.4046 33.0312 38.3999 32.5999V13.3999C38.4139 13.053 38.2733 12.7202 38.0249 12.4858C37.7718 12.2468 37.4296 12.1296 37.0874 12.1624ZM1.08738 18.1624C1.03581 18.1718 0.984252 18.1858 0.937377 18.1999C0.379564 18.3265 -0.0141859 18.828 -0.000123334 19.3999V26.5999C-0.00481083 27.0312 0.220189 27.4343 0.59519 27.6546C0.97019 27.8702 1.42956 27.8702 1.80456 27.6546C2.17956 27.4343 2.40456 27.0312 2.39988 26.5999V19.3999C2.41394 19.053 2.27331 18.7202 2.02488 18.4858C1.77175 18.2468 1.42956 18.1296 1.08738 18.1624ZM29.8874 18.1624C29.8358 18.1718 29.7843 18.1858 29.7374 18.1999C29.1796 18.3265 28.7858 18.828 28.7999 19.3999V26.5999C28.7952 27.0312 29.0202 27.4343 29.3952 27.6546C29.7702 27.8702 30.2296 27.8702 30.6046 27.6546C30.9796 27.4343 31.2046 27.0312 31.1999 26.5999V19.3999C31.2139 19.053 31.0733 18.7202 30.8249 18.4858C30.5718 18.2468 30.2296 18.1296 29.8874 18.1624ZM58.6874 18.1624C58.6358 18.1718 58.5843 18.1858 58.5374 18.1999C57.9796 18.3265 57.5858 18.828 57.5999 19.3999V26.5999C57.5952 27.0312 57.8202 27.4343 58.1952 27.6546C58.5702 27.8702 59.0296 27.8702 59.4046 27.6546C59.7796 27.4343 60.0046 27.0312 59.9999 26.5999V19.3999C60.0139 19.053 59.8733 18.7202 59.6249 18.4858C59.3718 18.2468 59.0296 18.1296 58.6874 18.1624Z" fill="white"/>
                </svg>
                <p class=" text-center">No</p>
              </label>
            </nuxt-link>

            <nuxt-link to="/onboarding/onboarding3"  @click.once="increment(75)" class="checkmark pt-2 px-1 d-inline-block">
              <input type="radio" class="btn-check checkmark" name="options-outlined" id="danger-outlined1" autocomplete="off">
              <label class="btn checklabel  ms-0 ms-sm-3  pt-4 px-5" for="danger-outlined1">
                <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"  viewBox="0 0 60 46" fill="none">
                  <path d="M15.4874 0.162403C15.4358 0.171779 15.3843 0.18584 15.3374 0.199903C14.7796 0.326466 14.3858 0.828029 14.3999 1.3999V44.5999C14.3952 45.0312 14.6202 45.4343 14.9952 45.6546C15.3702 45.8702 15.8296 45.8702 16.2046 45.6546C16.5796 45.4343 16.8046 45.0312 16.7999 44.5999V1.3999C16.8139 1.05303 16.6733 0.720216 16.4249 0.48584C16.1718 0.246778 15.8296 0.12959 15.4874 0.162403ZM44.2874 0.162403C44.2358 0.171779 44.1843 0.18584 44.1374 0.199903C43.5796 0.326466 43.1858 0.828029 43.1999 1.3999V44.5999C43.1952 45.0312 43.4202 45.4343 43.7952 45.6546C44.1702 45.8702 44.6296 45.8702 45.0046 45.6546C45.3796 45.4343 45.6046 45.0312 45.5999 44.5999V1.3999C45.6139 1.05303 45.4733 0.720216 45.2249 0.48584C44.9718 0.246778 44.6296 0.12959 44.2874 0.162403ZM8.28738 10.9624C8.23581 10.9718 8.18425 10.9858 8.13738 10.9999C7.57956 11.1265 7.18581 11.628 7.19988 12.1999V33.7999C7.19519 34.2312 7.42019 34.6343 7.79519 34.8546C8.17019 35.0702 8.62956 35.0702 9.00456 34.8546C9.37956 34.6343 9.60456 34.2312 9.59988 33.7999V12.1999C9.61394 11.853 9.47331 11.5202 9.22488 11.2858C8.97175 11.0468 8.62956 10.9296 8.28738 10.9624ZM51.4874 10.9624C51.4358 10.9718 51.3843 10.9858 51.3374 10.9999C50.7796 11.1265 50.3858 11.628 50.3999 12.1999V33.7999C50.3952 34.2312 50.6202 34.6343 50.9952 34.8546C51.3702 35.0702 51.8296 35.0702 52.2046 34.8546C52.5796 34.6343 52.8046 34.2312 52.7999 33.7999V12.1999C52.8139 11.853 52.6733 11.5202 52.4249 11.2858C52.1718 11.0468 51.8296 10.9296 51.4874 10.9624ZM22.6874 12.1624C22.6358 12.1718 22.5843 12.1858 22.5374 12.1999C21.9796 12.3265 21.5858 12.828 21.5999 13.3999V22.9999V32.5999C21.5952 33.0312 21.8202 33.4343 22.1952 33.6546C22.5702 33.8702 23.0296 33.8702 23.4046 33.6546C23.7796 33.4343 24.0046 33.0312 23.9999 32.5999V13.3999C24.0139 13.053 23.8733 12.7202 23.6249 12.4858C23.3718 12.2468 23.0296 12.1296 22.6874 12.1624ZM37.0874 12.1624C37.0358 12.1718 36.9843 12.1858 36.9374 12.1999C36.3796 12.3265 35.9858 12.828 35.9999 13.3999V32.5999C35.9952 33.0312 36.2202 33.4343 36.5952 33.6546C36.9702 33.8702 37.4296 33.8702 37.8046 33.6546C38.1796 33.4343 38.4046 33.0312 38.3999 32.5999V13.3999C38.4139 13.053 38.2733 12.7202 38.0249 12.4858C37.7718 12.2468 37.4296 12.1296 37.0874 12.1624ZM1.08738 18.1624C1.03581 18.1718 0.984252 18.1858 0.937377 18.1999C0.379564 18.3265 -0.0141859 18.828 -0.000123334 19.3999V26.5999C-0.00481083 27.0312 0.220189 27.4343 0.59519 27.6546C0.97019 27.8702 1.42956 27.8702 1.80456 27.6546C2.17956 27.4343 2.40456 27.0312 2.39988 26.5999V19.3999C2.41394 19.053 2.27331 18.7202 2.02488 18.4858C1.77175 18.2468 1.42956 18.1296 1.08738 18.1624ZM29.8874 18.1624C29.8358 18.1718 29.7843 18.1858 29.7374 18.1999C29.1796 18.3265 28.7858 18.828 28.7999 19.3999V26.5999C28.7952 27.0312 29.0202 27.4343 29.3952 27.6546C29.7702 27.8702 30.2296 27.8702 30.6046 27.6546C30.9796 27.4343 31.2046 27.0312 31.1999 26.5999V19.3999C31.2139 19.053 31.0733 18.7202 30.8249 18.4858C30.5718 18.2468 30.2296 18.1296 29.8874 18.1624ZM58.6874 18.1624C58.6358 18.1718 58.5843 18.1858 58.5374 18.1999C57.9796 18.3265 57.5858 18.828 57.5999 19.3999V26.5999C57.5952 27.0312 57.8202 27.4343 58.1952 27.6546C58.5702 27.8702 59.0296 27.8702 59.4046 27.6546C59.7796 27.4343 60.0046 27.0312 59.9999 26.5999V19.3999C60.0139 19.053 59.8733 18.7202 59.6249 18.4858C59.3718 18.2468 59.0296 18.1296 58.6874 18.1624Z" fill="white"/>
                </svg>
                <p class="text-center">Yes</p>
              </label>
            </nuxt-link>
          </div>
        </div>
      </div>
    <div class="row pt-5 mt-0 mt-sm-4 ">
      <div class="col-12 text-center pt-5 mt-3   pb-5 mb-2">
        <NuxtLink class="btn btn-warning px-2 " @click.once="increment(25)" to="/onboarding"></NuxtLink>
        <NuxtLink class="btn btn-warning px-4 mx-2" @click.once="increment(50)" to="/onboarding/onboarding2"></NuxtLink>
        <NuxtLink class="btn btn-warning px-2 " @click.once="increment(75)" to="/onboarding/onboarding3"></NuxtLink>
        <NuxtLink class="btn btn-warning px-2 mx-2" @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
        <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
      </div>

    </div>
  </div>
</template>
<script>
import {useCounterStore} from '@/stores/counter';
import {mapState,mapActions} from "pinia";
export default {
  mounted() {
    this.increment(50);
  },
  computed:{...mapState(useCounterStore,['count'])},
  methods:{
    ...mapActions(useCounterStore,['increment']),
  },
  data(){
    return{
      bar_val:25,
    }
  }
}
</script>

<style scoped>
.bar{
  background-color: #e9c046;
}
.checklabel:hover{
  border-color: #e9c046;
}
.checklabel {
  color: #e9c046 !important;
  border: 1px solid #e9c046;
}
.checkmark .checklabel  svg  path{
  /*background-color: white;*/
  fill: #e9c046;
}
.checkmark input:checked ~ .checklabel {
  background-color: #e9c046;
  border: 1px solid #e9c046;
  color: #f4f5f7 !important;
}
.checkmark input:checked ~ .checklabel svg path {
  fill: white;
}
.checkmark input:hover ~ .checklabel {
  background-color: #e9c046;
  border: 1px solid #e9c046;
  color: #f4f5f7 !important;
}
.checkmark input:hover ~ .checklabel svg path {
  fill: white;
}
</style>