<template>
  <div>
      <div class="row">
        <div class="col-12 pt-3">
          <h6 class="text-muted text-center">{{t("We are analyzing your background noise...")}}</h6>
        </div>
        <div class="col-12">
          <h4 class="text-center fw-bold pt-5">{{t("Please choose a soundscape")}}</h4>
        </div>
        <div class="col-12 text-center ">
        <div class="d-flex mx-auto justify-content-center ">
          <a @click.prevent="saveSetting('Lagoon')"  href="/letsgo" class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block">
          <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="55" height="60" viewBox="0 0 60 46" fill="none">
              <path fill="white" d="M37.1995 0.800049C31.5106 0.800049 26.9895 2.8931 23.3737 5.95864C19.758 9.02418 17.001 13.0339 14.5776 16.9719C12.1542 20.9099 10.0537 24.7914 7.89795 27.5938C5.74224 30.3962 3.67951 32 1.19951 32C1.0405 31.9978 0.882623 32.0272 0.735061 32.0865C0.587499 32.1458 0.453194 32.2338 0.33995 32.3455C0.226707 32.4571 0.136783 32.5902 0.0754062 32.7369C0.0140289 32.8836 -0.0175781 33.041 -0.0175781 33.2C-0.0175781 33.3591 0.0140289 33.5165 0.0754062 33.6632C0.136783 33.8099 0.226707 33.943 0.33995 34.0546C0.453194 34.1663 0.587499 34.2543 0.735061 34.3136C0.882623 34.3729 1.0405 34.4023 1.19951 34.4C4.71951 34.4 7.45679 32.1039 9.80107 29.0563C12.1454 26.0087 14.2448 22.0902 16.6214 18.2282C18.998 14.3662 21.6411 10.5759 24.9253 7.79145C28.2095 5.00699 32.0884 3.20005 37.1995 3.20005C38.9649 3.20005 41.8479 3.64402 44.1183 4.79614C46.3886 5.94827 47.9995 7.59096 47.9995 10.4C47.9995 14 42.4563 15.3789 40.6425 12.2047C40.5476 12.0387 40.4143 11.8977 40.2538 11.7935C40.0934 11.6894 39.9103 11.6251 39.72 11.6061C39.5296 11.5871 39.3375 11.6138 39.1596 11.6841C38.9816 11.7544 38.8231 11.8662 38.6972 12.0102C37.794 13.0424 37.0496 13.3547 36.4237 13.4024C35.7979 13.4501 35.1724 13.2195 34.5511 12.7461C33.9297 12.2727 33.3575 11.5641 32.969 10.8665C32.5806 10.1688 32.3995 9.45005 32.3995 9.20005C32.4018 9.04103 32.3724 8.88316 32.3131 8.7356C32.2538 8.58803 32.1658 8.45373 32.0541 8.34049C31.9425 8.22724 31.8094 8.13732 31.6627 8.07594C31.516 8.01456 31.3585 7.98296 31.1995 7.98296C31.0405 7.98296 30.883 8.01456 30.7363 8.07594C30.5896 8.13732 30.4566 8.22724 30.3449 8.34049C30.2333 8.45373 30.1452 8.58803 30.0859 8.7356C30.0266 8.88316 29.9973 9.04103 29.9995 9.20005C29.9995 10.15 30.3435 11.0813 30.8737 12.0336C31.404 12.986 32.1443 13.9274 33.0979 14.654C33.6051 15.0403 34.1889 15.3588 34.823 15.5657C35.0536 20.6887 37.9132 25.3342 42.1519 28.7024C46.5739 32.2164 52.5195 34.4 58.7995 34.4C58.9585 34.4023 59.1164 34.3729 59.264 34.3136C59.4115 34.2543 59.5458 34.1663 59.6591 34.0546C59.7723 33.943 59.8622 33.8099 59.9236 33.6632C59.985 33.5165 60.0166 33.3591 60.0166 33.2C60.0166 33.041 59.985 32.8836 59.9236 32.7369C59.8622 32.5902 59.7723 32.4571 59.6591 32.3455C59.5458 32.2338 59.4115 32.1458 59.264 32.0865C59.1164 32.0272 58.9585 31.9978 58.7995 32C53.0795 32 47.6251 29.9837 43.6472 26.8227C39.8991 23.8443 37.5194 19.8971 37.2534 15.6758C38.0031 15.471 38.7406 15.0332 39.4565 14.4594C42.992 18.1534 50.3995 15.9064 50.3995 10.4C50.3995 6.60914 47.9604 4.05183 45.2058 2.65395C42.4511 1.25608 39.3341 0.800049 37.1995 0.800049ZM29.9808 17.5836C29.6629 17.5886 29.36 17.7195 29.1386 17.9475C28.9171 18.1756 28.7952 18.4822 28.7995 18.8C28.7995 21.6 30.1263 24.4573 31.8605 26.9797C33.5946 29.5021 35.7547 31.679 37.7339 32.9985C37.8649 33.0889 38.0127 33.1522 38.1684 33.185C38.3242 33.2177 38.485 33.2191 38.6413 33.1891C38.7976 33.1591 38.9464 33.0983 39.079 33.0103C39.2117 32.9222 39.3254 32.8086 39.4137 32.6762C39.502 32.5437 39.5631 32.395 39.5934 32.2388C39.6237 32.0825 39.6225 31.9217 39.5901 31.7659C39.5577 31.6101 39.4945 31.4622 39.4044 31.331C39.3143 31.1998 39.199 31.0878 39.0651 31.0016C37.4444 29.9211 35.4044 27.898 33.8386 25.6204C32.2727 23.3428 31.1995 20.8 31.1995 18.8C31.2017 18.6395 31.1717 18.4801 31.1112 18.3314C31.0507 18.1827 30.9609 18.0476 30.8473 17.9342C30.7337 17.8208 30.5984 17.7313 30.4496 17.6711C30.3007 17.6109 30.1413 17.5811 29.9808 17.5836ZM22.8159 37.9813C22.3527 37.9813 21.9252 38.2538 21.7284 38.675C21.7284 38.675 19.6431 42.8024 15.6159 42.8024C11.5887 42.8024 9.50342 38.675 9.50342 38.675C9.28262 38.2202 8.80502 37.9473 8.30342 37.9977C8.26622 37.9989 8.22812 38 8.19092 38C7.81172 38.0756 7.49282 38.3234 7.32842 38.675C7.32842 38.675 5.18192 42.8024 1.21592 42.8024C0.785119 42.7976 0.382032 43.021 0.161232 43.3954C-0.0547684 43.771 -0.0547684 44.2315 0.161232 44.6071C0.382032 44.9827 0.785119 45.2072 1.21592 45.2024C5.30792 45.2024 7.35152 42.7535 8.41592 41.1875C9.47552 42.7583 11.4999 45.2024 15.6159 45.2024C19.7319 45.2024 21.7563 42.7583 22.8159 41.1875C23.8707 42.7583 25.8999 45.2024 30.0159 45.2024C34.1319 45.2024 36.1611 42.7583 37.2159 41.1875C38.2707 42.7583 40.2951 45.2024 44.4159 45.2024C48.5367 45.2024 50.5611 42.7583 51.6159 41.1875C52.6755 42.7535 54.7191 45.2024 58.8159 45.2024C59.2467 45.2072 59.6498 44.9815 59.8706 44.6071C60.0866 44.2315 60.0866 43.771 59.8706 43.3954C59.6498 43.0198 59.2467 42.7976 58.8159 42.8024C54.8403 42.8024 52.7034 38.675 52.7034 38.675C52.5066 38.2526 52.0791 37.9813 51.6159 37.9813C51.1527 37.9813 50.7252 38.2538 50.5284 38.675C50.5284 38.675 48.4479 42.8024 44.4159 42.8024C40.3839 42.8024 38.3034 38.675 38.3034 38.675C38.1066 38.2526 37.6791 37.9813 37.2159 37.9813C36.7527 37.9813 36.3252 38.2538 36.1284 38.675C36.1284 38.675 34.0479 42.8024 30.0159 42.8024C25.9839 42.8024 23.9034 38.675 23.9034 38.675C23.7066 38.2526 23.2791 37.9813 22.8159 37.9813Z" />
            </svg>
            <p class=" text-center">{{t("Lagoon")}}</p>
          </label>
          </a>

          <a  @click.prevent="saveSetting('Tropic')" href="/letsgo" class="checkmark px-1 pt-2 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"  height="60" viewBox="0 0 52 52" fill="red">
              <path d="M25.8874 0.762501C25.8359 0.771876 25.7843 0.785938 25.7374 0.800001C25.1796 0.926564 24.7859 1.42813 24.7999 2V9.2C24.7952 9.63125 25.0202 10.0344 25.3952 10.2547C25.7702 10.4703 26.2296 10.4703 26.6046 10.2547C26.9796 10.0344 27.2046 9.63125 27.1999 9.2V2C27.214 1.65313 27.0734 1.32031 26.8249 1.08594C26.5718 0.846876 26.2296 0.729688 25.8874 0.762501ZM8.78743 7.8125C8.33743 7.89219 7.97649 8.22031 7.84993 8.65625C7.72337 9.09688 7.85462 9.56563 8.18743 9.875L13.2874 14.975C13.5781 15.3313 14.0421 15.4953 14.4921 15.3922C14.9374 15.2891 15.289 14.9375 15.3921 14.4922C15.4952 14.0422 15.3312 13.5781 14.9749 13.2875L9.87493 8.1875C9.62649 7.92031 9.26556 7.78438 8.89993 7.8125C8.86243 7.8125 8.82493 7.8125 8.78743 7.8125ZM42.8374 7.8125C42.5656 7.85 42.3124 7.98594 42.1249 8.1875L37.0249 13.2875C36.6687 13.5781 36.5046 14.0422 36.6077 14.4922C36.7109 14.9375 37.0624 15.2891 37.5077 15.3922C37.9577 15.4953 38.4218 15.3313 38.7124 14.975L43.8124 9.875C44.1874 9.51875 44.2952 8.96094 44.0749 8.49219C43.8499 8.01875 43.3531 7.74688 42.8374 7.8125ZM25.8874 14C25.8499 14.0094 25.8124 14.0234 25.7749 14.0375C25.6999 14.0422 25.6249 14.0563 25.5499 14.075C25.5359 14.0891 25.5265 14.0984 25.5124 14.1125C19.1468 14.3844 13.9999 19.5688 13.9999 26C13.9999 32.6047 19.3952 38 25.9999 38C32.6046 38 37.9999 32.6047 37.9999 26C37.9999 19.5922 32.8952 14.4266 26.5624 14.1125C26.5202 14.1125 26.4921 14.075 26.4499 14.075C26.3281 14.0281 26.2015 14.0047 26.0749 14C26.0515 14 26.0234 14 25.9999 14C25.9624 14 25.9249 14 25.8874 14ZM25.9249 16.4C25.9484 16.4 25.9765 16.4 25.9999 16.4C26.0374 16.4 26.0749 16.4 26.1124 16.4C31.3624 16.4609 35.5999 20.7359 35.5999 26C35.5999 31.3063 31.3062 35.6 25.9999 35.6C20.6984 35.6 16.3999 31.3063 16.3999 26C16.3999 20.7219 20.6562 16.4422 25.9249 16.4ZM1.66243 24.8C1.00149 24.8938 0.537431 25.5078 0.631181 26.1688C0.724931 26.8297 1.33899 27.2938 1.99993 27.2H9.19993C9.63118 27.2047 10.0343 26.9797 10.2546 26.6047C10.4702 26.2297 10.4702 25.7703 10.2546 25.3953C10.0343 25.0203 9.63118 24.7953 9.19993 24.8H1.99993C1.96243 24.8 1.92493 24.8 1.88743 24.8C1.84993 24.8 1.81243 24.8 1.77493 24.8C1.73743 24.8 1.69993 24.8 1.66243 24.8ZM42.4624 24.8C41.8015 24.8938 41.3374 25.5078 41.4312 26.1688C41.5249 26.8297 42.139 27.2938 42.7999 27.2H49.9999C50.4312 27.2047 50.8343 26.9797 51.0546 26.6047C51.2702 26.2297 51.2702 25.7703 51.0546 25.3953C50.8343 25.0203 50.4312 24.7953 49.9999 24.8H42.7999C42.7624 24.8 42.7249 24.8 42.6874 24.8C42.6499 24.8 42.6124 24.8 42.5749 24.8C42.5374 24.8 42.4999 24.8 42.4624 24.8ZM13.9999 36.65C13.7281 36.6875 13.4749 36.8234 13.2874 37.025L8.18743 42.125C7.83118 42.4156 7.66712 42.8797 7.77024 43.3297C7.87337 43.775 8.22493 44.1266 8.67024 44.2297C9.12024 44.3328 9.58431 44.1688 9.87493 43.8125L14.9749 38.7125C15.3312 38.3703 15.439 37.8406 15.2468 37.3859C15.0593 36.9313 14.6046 36.6406 14.1124 36.65C14.0749 36.65 14.0374 36.65 13.9999 36.65ZM37.6249 36.65C37.1749 36.7297 36.814 37.0578 36.6874 37.4938C36.5609 37.9344 36.6921 38.4031 37.0249 38.7125L42.1249 43.8125C42.4156 44.1688 42.8796 44.3328 43.3296 44.2297C43.7749 44.1266 44.1265 43.775 44.2296 43.3297C44.3327 42.8797 44.1687 42.4156 43.8124 42.125L38.7124 37.025C38.4874 36.7859 38.1781 36.6547 37.8499 36.65C37.8124 36.65 37.7749 36.65 37.7374 36.65C37.6999 36.65 37.6624 36.65 37.6249 36.65ZM25.8874 41.5625C25.8359 41.5719 25.7843 41.5859 25.7374 41.6C25.1796 41.7266 24.7859 42.2281 24.7999 42.8V50C24.7952 50.4313 25.0202 50.8344 25.3952 51.0547C25.7702 51.2703 26.2296 51.2703 26.6046 51.0547C26.9796 50.8344 27.2046 50.4313 27.1999 50V42.8C27.214 42.4531 27.0734 42.1203 26.8249 41.8859C26.5718 41.6469 26.2296 41.5297 25.8874 41.5625Z" fill="#E9C046"/>
            </svg>
            <p class="text-center" >{{t("Tropics")}}</p>
          </label>
          </a>
        </div>
        <div class="d-flex mx-auto justify-content-center ">
          <a @click.prevent="saveSetting('Forest')" href="/letsgo"  class="checkmark pt-2 pt-sm-3 px-1 d-block d-sm-inline-block">
          <input type="radio" class="btn-check" name="options-outlined" id="success-outlined2" autocomplete="off" >
          <label class="btn checklabel py-3 px-5" for="success-outlined2">
            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M42.0375 2.5779e-05C41.6578 0.0469008 41.325 0.267213 41.1375 0.600026L32.1375 16.725C31.9734 17.0203 31.9359 17.3719 32.0437 17.6953C32.1516 18.0141 32.3906 18.2766 32.7 18.4125C32.7 18.4125 33.8062 18.8672 35.175 19.3125L33.1125 22.8375C32.7562 22.3219 32.3437 21.9 31.9125 21.6C31.3125 21.1828 30.9656 21.136 30.4875 20.9625C30.7969 20.1656 31.2 19.3969 31.2 18.4875C31.2 15.5157 29.325 13.0219 26.7375 12.0375C26.7516 11.8735 26.775 11.7282 26.775 11.55C26.775 6.47346 22.7672 2.28753 17.8125 2.28753C14.4422 2.28753 11.5687 4.29378 10.05 7.12503C6.86719 7.68753 4.425 10.4672 4.425 13.875C4.425 14.1703 4.46719 14.4516 4.5 14.7375C3.12188 16.3688 2.2125 18.45 2.2125 20.775C2.2125 21.6844 2.4 22.5047 2.625 23.2875C2.41406 23.9531 2.2125 24.6422 2.2125 25.3875C2.2125 26.0016 2.36719 26.5594 2.5125 27.1125C1.04531 28.3922 0 30.1688 0 32.2875C0 35.2781 1.88906 37.7672 4.5 38.7375C4.48594 38.9063 4.425 39.0516 4.425 39.225C4.425 43.0313 7.44375 46.1625 11.175 46.1625C12.0422 46.1625 12.9422 46.2844 13.9125 46.1625C14.1844 46.1297 14.4562 45.9985 14.7375 45.9C15.1172 48.4172 15.225 50.4703 15.0375 51.7875C14.8031 53.4375 14.3297 54.2438 13.8 54.825C13.2703 55.4063 12.6328 55.711 11.9625 56.2125C11.625 56.4656 11.2734 56.8219 11.025 57.3375C10.7766 57.8531 10.7344 58.4719 10.875 59.0625C10.9219 59.5219 11.2312 59.9156 11.6672 60.0703C12.1031 60.225 12.5906 60.1125 12.9187 59.7891C13.2422 59.461 13.3547 58.9735 13.2 58.5375C13.1484 58.3313 13.1672 58.3735 13.1625 58.3875C13.1578 58.4016 13.2234 58.3125 13.425 58.1625C13.8281 57.8625 14.7187 57.361 15.5625 56.4375C16.4062 55.5141 17.1516 54.1641 17.4375 52.125C17.625 50.8125 17.6156 49.1813 17.4 47.2125C17.9531 47.386 18.4875 47.4469 18.975 47.4375C19.3031 47.4328 19.6266 47.4094 19.9125 47.3625C20.1281 52.3453 21.3609 55.1063 22.725 56.7375C23.475 57.6328 24.2672 58.2141 24.7125 58.575C24.9375 58.7578 25.0547 58.8703 25.0875 58.9125C25.2141 59.4844 25.7344 59.8782 26.3156 59.85C26.9016 59.8219 27.3797 59.3813 27.45 58.8C27.45 58.2891 27.2531 57.7828 27 57.45C26.7469 57.1172 26.475 56.9156 26.2125 56.7C25.6828 56.2735 25.1531 55.861 24.6 55.2C23.6578 54.075 22.7812 51.7172 22.5 47.6625C23.3297 47.8172 24.1266 47.8032 24.75 47.6625C25.0359 47.5969 25.275 47.5219 25.5 47.4375C26.1469 47.8313 27.225 48.3797 28.875 48.9375C31.1391 49.7016 34.4766 50.4563 39.1125 50.7L39.1875 51.2625C39.1922 51.2953 39.1828 51.3047 39.1875 51.3375C39.4219 53.7188 39.2109 55.1391 38.8875 55.8375C38.5594 56.5406 38.2547 56.6625 37.7625 56.775C37.2703 56.8875 36.6328 56.8547 35.925 56.8875C35.5687 56.9016 35.1328 56.8594 34.6125 57.2625C34.0922 57.6656 33.9094 58.5 34.0125 59.025C34.0875 59.5781 34.5328 60.0047 35.0859 60.0563C35.6391 60.1125 36.1594 59.775 36.3375 59.25C36.7828 59.2547 37.425 59.3344 38.2875 59.1375C39.2812 58.9078 40.4437 58.1766 41.0625 56.85C41.6812 55.5235 41.8641 53.7141 41.5875 51.0375C41.5875 51.0141 41.5875 50.986 41.5875 50.9625L41.55 50.775C41.8406 50.7797 42.1172 50.775 42.4125 50.775C43.1625 50.775 43.8609 50.761 44.55 50.7375C44.55 51.1782 44.5641 51.5578 44.55 52.2C44.5078 54.4594 44.6203 55.9078 44.9625 57C45.3047 58.0922 46.0734 58.8844 46.875 59.1375C47.6766 59.3906 48.2906 59.3063 48.6375 59.325C48.9844 59.3438 48.9656 59.3016 49.1625 59.55C49.575 60.0703 50.3344 60.15 50.85 59.7375C51.3703 59.325 51.45 58.5657 51.0375 58.05C50.3859 57.2391 49.4062 56.9625 48.75 56.925C48.0937 56.8875 47.6859 56.8828 47.5875 56.85C47.4891 56.8172 47.4469 56.925 47.25 56.2875C47.0531 55.65 46.9125 54.375 46.95 52.2375C46.9641 51.5485 46.95 51.1172 46.95 50.625C50.9062 50.325 53.7375 49.636 55.725 48.9375C57.0609 48.4688 57.9844 48 58.6125 47.625C59.2406 47.25 59.625 46.9125 59.625 46.9125C60.0562 46.5141 60.1312 45.8625 59.8125 45.375L53.175 35.1375C53.1937 35.1328 53.2312 35.1422 53.25 35.1375C54.3281 34.7063 55.0734 34.2891 55.575 33.9375C56.0766 33.586 56.3625 33.225 56.3625 33.225C56.7047 32.8406 56.7656 32.2828 56.5125 31.8375L49.2375 19.35C49.8984 19.1344 50.5219 18.9141 50.925 18.75C51.1687 18.6516 51.3562 18.5485 51.4875 18.4875C51.5531 18.4594 51.6 18.4313 51.6375 18.4125C51.6562 18.4032 51.6656 18.4172 51.675 18.4125C51.6844 18.4078 51.7125 18.4125 51.7125 18.4125L51.15 17.325L52.2 16.725L43.2375 0.600026C42.9984 0.173463 42.5203 -0.0609118 42.0375 2.5779e-05ZM42.1875 3.67503L49.5 16.725C49.1156 16.875 48.7453 17.0016 48.1875 17.175C46.6547 17.6485 44.55 18.1125 42.3 18.1125C38.85 18.1125 36.2203 17.2032 34.9125 16.6875L42.1875 3.67503ZM17.8125 4.68753C21.4172 4.68753 24.375 7.72034 24.375 11.55C24.375 11.8688 24.3234 12.2344 24.2625 12.6375C24.1734 13.275 24.6047 13.875 25.2375 13.9875C27.2437 14.3625 28.8 16.2141 28.8 18.4875C28.8 19.4297 28.5094 20.2735 28.05 21C27.8437 21.3141 27.7969 21.7031 27.9234 22.0594C28.05 22.411 28.3312 22.6875 28.6875 22.8C29.2312 22.9875 29.925 23.1703 30.525 23.5875C31.1016 23.9907 31.5 24.4547 31.575 25.4625L27.8625 31.8375C27.5812 32.311 27.6609 32.911 28.05 33.3C28.05 33.3 28.4625 33.7172 29.2125 34.1625C29.6531 34.425 30.5484 34.7297 31.275 35.025L24.7125 45.15C24.5578 45.2063 24.4312 45.2532 24.225 45.3C23.5734 45.4453 22.7437 45.4594 21.7875 44.85C21.7641 44.836 21.7359 44.8313 21.7125 44.8125C21.6984 44.7985 21.6891 44.7891 21.675 44.775C21.6516 44.761 21.6234 44.7469 21.6 44.7375C21.5859 44.7375 21.5766 44.7375 21.5625 44.7375C21.5391 44.7235 21.5109 44.7094 21.4875 44.7C21.4734 44.686 21.4641 44.6766 21.45 44.6625C21.4266 44.6625 21.3984 44.6625 21.375 44.6625C21.3609 44.6485 21.3516 44.6391 21.3375 44.625C21.3141 44.625 21.2859 44.625 21.2625 44.625C21.2484 44.625 21.2391 44.625 21.225 44.625C21.2016 44.625 21.1734 44.625 21.15 44.625C21.1125 44.625 21.075 44.625 21.0375 44.625C20.925 44.6203 20.8125 44.6344 20.7 44.6625C20.6625 44.6719 20.625 44.686 20.5875 44.7C20.5875 44.7 19.8 45.0235 18.9375 45.0375C18.075 45.0516 17.4047 44.9813 16.9125 43.875C16.9031 43.8375 16.8891 43.8 16.875 43.7625C16.875 43.7485 16.875 43.7391 16.875 43.725C16.8656 43.6828 16.8469 43.6547 16.8375 43.6125C16.7484 43.1344 16.3781 42.7547 15.9 42.6563C15.4219 42.5578 14.9344 42.7594 14.6625 43.1625C14.3531 43.6266 14.1703 43.6922 13.6125 43.7625C13.0547 43.8328 12.1969 43.7625 11.175 43.7625C8.78906 43.7625 6.825 41.7844 6.825 39.225C6.825 38.8922 6.86719 38.55 6.9375 38.2125C7.00313 37.8985 6.94219 37.5703 6.76406 37.3031C6.59063 37.036 6.31406 36.8485 6 36.7875C3.98438 36.4172 2.4 34.5656 2.4 32.2875C2.4 30.6375 3.24375 29.2266 4.4625 28.425C4.90781 28.1156 5.09531 27.5485 4.9125 27.0375C4.72031 26.5125 4.6125 25.9547 4.6125 25.3875C4.6125 24.7875 4.74375 24.2016 4.95 23.6625C5.03906 23.4094 5.03906 23.1281 4.95 22.875C4.73438 22.1719 4.6125 21.4875 4.6125 20.775C4.6125 18.8391 5.38125 17.1047 6.6 15.8625C6.87656 15.586 7.00313 15.1969 6.9375 14.8125C6.87656 14.5125 6.825 14.1938 6.825 13.875C6.825 11.4188 8.65781 9.48752 10.9125 9.33753C11.3578 9.30471 11.7469 9.03284 11.925 8.62502C12.9844 6.28596 15.2016 4.68753 17.8125 4.68753ZM37.6875 19.8C39.1359 20.1235 40.5375 20.5125 42.3 20.5125C43.9687 20.5125 45.4453 20.2453 46.8 19.95L53.8875 32.1C53.5312 32.3297 53.1141 32.6203 52.35 32.925C50.5266 33.6516 47.3812 34.425 42.3375 34.425C38.3531 34.425 35.5641 33.9375 33.6 33.375C33.5484 33.361 33.4641 33.3516 33.4125 33.3375C33.3422 33.3047 33.2625 33.2813 33.1875 33.2625C31.9312 32.8688 31.0219 32.4141 30.4875 32.1L37.6875 19.8ZM33.6375 35.8125C35.7844 36.3657 38.5266 36.825 42.3375 36.825C46.0734 36.825 48.6469 36.3516 50.7375 35.8125L57.15 45.675C56.6578 45.9563 56.0156 46.3078 54.9375 46.6875C52.5562 47.5266 48.5953 48.375 42.4125 48.375C36.2297 48.375 32.1187 47.4938 29.625 46.65C27.8672 46.0547 27.6891 45.825 27.3 45.5625L33.6375 35.8125Z" fill="#E9C046"/>
            </svg>

            <p class=" text-center">{{t("Forest")}}</p>
          </label>
          </a>
          <a @click.prevent="saveSetting('Meadow')" href="/letsgo" class="checkmark pt-2 px-1 pt-sm-3 d-block d-sm-inline-block">
          <input type="radio" class="btn-check  " name="options-outlined" id="danger-outlined" autocomplete="off">
          <label class="btn checklabel ms-0 ms-lg-3 py-3 px-5 " for="danger-outlined">
            <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.09994 0.399935C5.97807 0.418685 5.83744 0.479622 5.64994 0.587435C5.46244 0.695248 5.24682 0.910872 5.12494 1.18743C5.00307 1.464 4.97963 1.74993 5.01244 1.93743C5.14838 2.68743 5.38744 2.67337 5.57494 2.87493C5.94525 3.27806 6.47494 3.77962 7.18744 4.52494C8.60775 6.01556 10.6984 8.43431 12.8874 12.3249C16.1312 18.0952 19.5765 27.0624 21.1374 40.7124C19.2578 36.3624 16.764 32.7437 14.1999 29.8374C11.5749 26.8656 8.88432 24.6577 6.66244 23.1624C5.5515 22.4124 4.56244 21.8312 3.73744 21.4374C2.91244 21.0437 2.37807 20.7999 1.59994 20.7999C1.44057 20.7999 1.27182 20.8046 0.99994 20.9124C0.728065 21.0202 0.28744 21.3484 0.17494 21.7749C0.0624398 22.2015 0.207753 22.4921 0.28744 22.6749C0.367127 22.8577 0.432753 22.9749 0.51244 23.0874C0.835877 23.5281 1.22963 23.9312 1.78744 24.5124C2.90307 25.6702 4.58119 27.4374 6.32494 30.0249C9.81244 35.2046 13.5999 43.5999 13.5999 56.7249C13.5953 57.1562 13.8203 57.5593 14.1953 57.7796C14.5703 57.9952 15.0296 57.9952 15.4046 57.7796C15.7796 57.5593 16.0046 57.1562 15.9999 56.7249C15.9999 43.1359 12.0249 34.1874 8.31244 28.6749C7.26713 27.1234 6.51244 26.4109 5.61244 25.3749C7.61869 26.7577 10.0328 28.7687 12.3999 31.4499C17.3546 37.0609 21.9999 45.4281 21.9999 56.7249C22.0046 56.7999 22.0187 56.8749 22.0374 56.9499C22.0562 57.0671 22.0937 57.1796 22.1499 57.2874C22.1968 57.3952 22.2624 57.4984 22.3374 57.5874C22.3937 57.6437 22.4593 57.6952 22.5249 57.7374C22.5624 57.7656 22.5999 57.789 22.6374 57.8124C22.7453 57.8687 22.8578 57.9062 22.9749 57.9249C23.1343 57.9577 23.3031 57.9577 23.4624 57.9249C23.5843 57.8921 23.6968 57.8406 23.7999 57.7749C23.8234 57.7656 23.8515 57.7515 23.8749 57.7374C23.9453 57.6812 24.0062 57.6202 24.0624 57.5499C24.1515 57.4749 24.2265 57.3859 24.2874 57.2874C24.3437 57.1702 24.3812 57.0437 24.3999 56.9124C24.4046 56.8515 24.4046 56.7859 24.3999 56.7249C24.3999 33.3296 19.5859 19.3374 14.9874 11.1624C13.8999 9.2265 12.8312 7.6515 11.8374 6.32494C13.989 8.12025 16.4124 10.5109 18.8874 14.0124C24.1046 21.3906 29.1203 32.9077 30.1749 50.0499C30.1703 50.1015 30.1703 50.1484 30.1749 50.1999C30.1749 50.214 30.1749 50.2234 30.1749 50.2374C30.1843 50.2609 30.1984 50.289 30.2124 50.3124C30.3343 52.3749 30.3999 54.4984 30.3999 56.7249C30.3953 57.1562 30.6203 57.5593 30.9953 57.7796C31.3703 57.9952 31.8296 57.9952 32.2046 57.7796C32.5796 57.5593 32.8046 57.1562 32.7999 56.7249C32.7999 54.4327 32.7015 52.2531 32.5749 50.1249C32.5843 50.0499 32.5843 49.9749 32.5749 49.8999C32.5749 49.8859 32.5749 49.8765 32.5749 49.8624C33.0718 33.1796 37.7031 23.8374 41.8749 18.6249C43.9656 16.0187 45.9484 14.4249 47.3124 13.4874C47.9921 13.0187 48.489 12.7421 48.8499 12.5124C49.0328 12.3952 49.1265 12.4937 49.4874 11.9874C49.5765 11.8609 49.7218 11.6031 49.7124 11.1999C49.7031 10.7968 49.4171 10.3796 49.1874 10.2249C48.7281 9.91556 48.5687 10.0046 48.4374 9.99994C47.8046 9.97181 46.7546 10.089 45.1374 10.5624C43.5203 11.0359 41.4531 11.8937 39.2874 13.4124C35.5046 16.0609 31.4593 20.7531 28.7499 28.7499C26.5749 22.0562 23.7437 16.7359 20.8374 12.6249C17.7578 8.27025 14.5937 5.27025 12.0249 3.32493C10.7406 2.34993 9.60619 1.66087 8.68744 1.18743C7.76869 0.713998 7.24838 0.399935 6.39994 0.399935C6.31557 0.399935 6.22182 0.381185 6.09994 0.399935ZM42.4749 14.4999C41.6734 15.2781 40.8531 16.0609 39.9999 17.1249C36.5546 21.4234 32.9968 28.2249 31.2624 38.7999C30.8921 36.7562 30.4328 34.839 29.9499 32.9874C29.9546 32.9734 29.9453 32.964 29.9499 32.9499C32.439 23.139 36.8218 18.0624 40.6749 15.3624C41.3499 14.889 41.8421 14.8374 42.4749 14.4999ZM56.7999 20.7999C56.0218 20.7999 55.4921 21.0812 54.6999 21.4749C53.9078 21.8687 52.9796 22.4124 51.9249 23.1624C49.8156 24.6624 47.2328 26.9031 44.7624 29.8749C39.8171 35.8234 35.1999 44.7859 35.1999 56.7249C35.1953 57.1562 35.4203 57.5593 35.7953 57.7796C36.1703 57.9952 36.6296 57.9952 37.0046 57.7796C37.3796 57.5593 37.6046 57.1562 37.5999 56.7249C37.5999 45.4046 41.9781 37.0187 46.6374 31.4124C48.9671 28.6093 51.3718 26.5281 53.3124 25.1499C53.3406 25.1312 53.3593 25.1312 53.3874 25.1124C52.5156 26.1952 51.7421 27.0062 50.6874 28.7124C47.289 34.2202 43.5999 43.1546 43.5999 56.7249C43.5953 57.1562 43.8203 57.5593 44.1953 57.7796C44.5703 57.9952 45.0296 57.9952 45.4046 57.7796C45.7796 57.5593 46.0046 57.1562 45.9999 56.7249C45.9999 43.5859 49.5156 35.1671 52.7124 29.9874C54.3109 27.3952 55.8296 25.6374 56.8374 24.4749C57.3437 23.8937 57.7093 23.4906 57.9999 23.0124C58.1453 22.7734 58.4921 22.4312 58.1874 21.6624C58.0328 21.2781 57.6578 21.0062 57.3999 20.9124C57.1421 20.8187 56.9593 20.7999 56.7999 20.7999Z" fill="#E9C046"/>
            </svg>

            <p class=" text-center">{{t("Meadow")}}</p>
          </label>

          </a>
        </div>
        </div>
      </div>

    <div class="row pt-5 mt-2 " style="position: fixed;bottom: 50px;left: 0;right: 0">
      <div class="col-12 text-center pt-5 mt-3   pb-2 mb-2" >
        <NuxtLink class="btn btn-warning px-2 "  @click.once="increment(25)" to="/onboarding"></NuxtLink>
        <NuxtLink class="btn btn-warning px-2 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-4 mx-2 " @click.once="increment(100)" to="/onboarding/onboarding4"></NuxtLink>
        <h6 class="text-muted text-center pt-3">{{t("You can customize your selection later")}}</h6>
      </div>

    </div>
  </div>
</template>
<script>
import {useCounterStore} from '@/stores/counter';
import {mapState,mapActions} from "pinia";
export default {
  setup() {
    const { t } = useI18n()
    const localePath = useLocalePath()

    return {
      t,
      localePath,
    }
  },
  mounted() {
    this.increment(100);
  },
  computed:{...mapState(useCounterStore,['count'])},

  data(){
    return{
      bar_val:100,
      form:{
        soundscape:'',
      }
    }
  },
  methods:{
    ...mapActions(useCounterStore,['increment']),
    ...mapActions(useCounterStore,['decrement']),
    saveSetting(value){
      this.form.soundscape=value;
      this.$axios.post('/api/update-setting',this.form).then(({data})=>{
        console.log(data);
        if(data.success){
          this.$toast.success(data.message);
          this.$router.push(this.localePath('letsgo'));
        }
      }).catch((e)=>{
        this.$toast.error("something went wrong while saving...");
      })
    }
  },
}
</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>