<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-2 pl-2 mb-[-10px]"
  style="background-image:url('/images/footer.png'); 
         background-repeat:no-repeat; 
         background-position:bottom; 
         background-size: 100% 200px;"
         margin-bottom=-10px;
  >
    <!-- Character Preview -->
     <div class="w-full max-w-md flex flex-col items-center z-60 " >
        <div class="relative flex items-end justify-center z-30 px-[10px] mt-[40px]">
          <img
            src="/images/logo.png"
            :alt="selectedCharacter.name"
            class="object-contain relative z-30 pb-0"
          />
        </div>
        <div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
          <img
            :src="selectedProfile.img"
            :alt="selectedCharacter.name"
            class="w-40 h-60 object-contain relative z-30 pb-12"
          />
          <div
              class="absolute w-[30px] h-[30px] right-0 top-[100px] z-40 bg-green-600 hover:bg-green-400 transition"
              style="
                -webkit-mask: url('/images/icon-edit.svg') no-repeat center;
                -webkit-mask-size: contain;
                mask: url('/images/icon-edit.svg') no-repeat center;
                mask-size: contain;
              "
              @click="changeAva('profile')"
            ></div>

        </div>
     </div>
    <div class="w-full max-w-md flex flex-col items-center z-60">
      <div class="bg-lime-200 shadow-xl rounded-2xl p-6 flex flex-col items-center 
        relative w-full px-[10px] mx-[10px] bg-cover bg-center bg-no-repeat" 
        style="background-image: url('/images/bghero.jpg')">
        <div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px] mt-[40px]">
          <img
            :src="selectedCharacter.img"
            :alt="selectedCharacter.name"
            class="w-40 h-60 object-contain relative z-30 pb-16"
          />
        </div>
        <div class="flex flex-row items-start justify-between gap-12 w-full pt-5 absolute bottom-2 left-2 pr-5">
          <div class="bg-white w-[90px] h-[60px] rounded-xl p-1 shadow-lg flex flex-col bottom-0">
            <span class="text-xs font-bold text-gray-800 items-center text-center">{{ 'KOIN' }}</span>
            <div class="flex items-end justify-center gap-2 p-1">
              <img src="/images/token-poin.svg" alt="coin" class="w-6 h-6" />
              <span>100</span>
            </div>
          </div>
          <div class="bg-white w-[90px] h-[60px] rounded-xl p-1 shadow-lg flex flex-col bottom-0">
            <span class="text-xs font-bold text-gray-800 items-center text-center">{{ 'Dayly Quest' }}</span>
            <div class="flex items-end justify-center gap-2 p-1">
              <span>3/10</span>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-center w-[30px] h-[30px] rounded-full border-4 border-green-500 absolute top-2 right-2">
        <img src="/images/but-nav-koleksi.png" alt="img" class="w-[20px] h-[20px] " 
        @click="changeAva('character')">
        </div>
      </div>
    </div>


    <div class="logo w-full max-w-md flex flex-col items-center mt-4">
      <div class="bg-grey shadow-xl rounded-2xl px-16 py-1 flex flex-col items-center">
        <h2 class="mt-4 mb-4 text-md font-bold text-grey-400">Level 10 - Hari ke-2</h2>
      </div>
    </div>

    <!-- Character Selection -->
     <div class="w-full max-w-md flex flex-col items-center bg-green-grey py-[0px] mx-[10px] md:mx-0
     transform transition-transform duration-300 hover:scale-105
     ">
        <div class="rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]"
          :class="isDone ? ' bg-lime-500' : 'bg-white'" >
          <div class="flex-shrink-0 mt-1">
            <img src="/images/qicon1.png" alt="Quest Icon" class="w-12 h-12" />
          </div>

          <div class="flex-1">
            <h2 class="text-xl font-bold text-gray-800">{{ 'BANGUN PAGI' }}</h2>
            <p class="text-sm text-gray-600 mb-2">{{ 'Mulai hari dengan semangat.!' }}</p>

            <div class="flex items-center gap-4 text-xs text-gray-700">
              <span class="flex items-center gap-1">
                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/></svg>
                {{ '12:20' }}
              </span>
              <span class="flex items-center gap-1">
                <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
                +{{ '1000' }} koin
              </span>
              <span class="flex items-center gap-1">
                <svg class="w-4 h-4 text-green-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
                +{{ '100' }}mm
              </span>
            </div>
            <div class="flex items-center gap-4 text-xs text-gray-700">
              <button class="w-full mt-4 py-2 px-4 rounded-lg bg-green-600 text-white font-bold hover:bg-green-700 transition">MULAI QUEST</button>
            </div>
          </div>
        </div>
    </div>
    <div class="w-full max-w-md flex flex-col items-center bg-white-grey py-[0px] mx-2.5 md:mx-5 
    transform transition-transform duration-300 hover:scale-105
    ">
        <div class="bg-white rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
          <div class="flex-shrink-0 mt-1">
            <img src="/images/qicon2.png" alt="Quest Icon" class="w-12 h-12" />
          </div>

          <div class="flex-1">
            <h2 class="text-xl font-bold text-gray-800">{{ 'MAKAN SIANG' }}</h2>
            <p class="text-sm text-gray-600 mb-2">{{ 'Waktunya makan siang dan istirahat.' }}</p>

            <div class="flex items-center gap-4 text-xs text-gray-700">
              <span class="flex items-center gap-1">
                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/></svg>
                {{ '12:20' }}
              </span>
              <span class="flex items-center gap-1">
                <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
                +{{ '1000' }} koin
              </span>
              <span class="flex items-center gap-1">
                <svg class="w-4 h-4 text-green-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
                +{{ '100' }}mm
              </span>
            </div>
            <div class="flex items-center gap-4 text-xs text-gray-700">
              <button class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold hover:bg-green-700 transition">MULAI QUEST</button>
            </div>
          </div>
        </div>
    </div>
    <div class="w-full max-w-md flex flex-col items-center bg-green-grey py-[0px] mx-2.5 md:mx-5
    transform transition-transform duration-300 hover:scale-105
    ">
        <div class="bg-white rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
          <div class="flex-shrink-0 mt-1">
            <img src="/images/qicon3.png" alt="Quest Icon" class="w-12 h-12" />
          </div>

          <div class="flex-1">
            <h2 class="text-xl font-bold text-gray-800">{{ 'CERITA HARI INI' }}</h2>
            <p class="text-sm text-gray-600 mb-2">{{ 'Berbagi cerita seru hari ini' }}</p>

            <div class="flex items-center gap-4 text-xs text-gray-700">
              <span class="flex items-center gap-1">
                <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/></svg>
                {{ '12:20' }}
              </span>
              <span class="flex items-center gap-1">
                <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
                +{{ '1000' }} koin
              </span>
              <span class="flex items-center gap-1">
                <svg class="w-4 h-4 text-red-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
                +{{ '100' }}mm
              </span>
            </div>
            <div class="flex items-center gap-4 text-xs text-gray-700">
              <button class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold hover:bg-green-700 transition">MULAI QUEST</button>
            </div>
          </div>
        </div>
    </div>
    <!-- Modal -->
    <div
      v-if="showModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
    >
      <div class="bg-white rounded-lg p-6 w-80 max-h-[80vh] overflow-auto relative">
        <h2 class="text-xl font-bold mb-4">Pilih {{ modalType === 'profile' ? 'Profil' : 'Karakter' }}</h2>

        <!-- Tombol close -->
        <button
          @click="showModal = false"
          class="absolute top-2 right-2 text-gray-500 hover:text-gray-800"
        >
          ✕
        </button>

        <!-- List karakter -->
        <div class="grid grid-cols-3 gap-4" v-if="modalType === 'profile'">
          <div 
            v-for="prof in profiles" 
            :key="prof.name"
            @click="profileListSelected(prof)"
            class="cursor-pointer hover:scale-105 transform transition flex flex-col items-center"
          >
            <img :src="prof.img" :alt="prof.name" class="w-16 h-16 rounded"/>
            <span class="text-sm mt-1">{{ prof.name }}</span>
          </div>
        </div>
        <div class="grid grid-cols-3 gap-4" v-if="modalType === 'character'">
          <div 
            v-for="char in characters" 
            :key="char.name"
            @click="clickCharacter(char)"
            class="cursor-pointer hover:scale-105 transform transition flex flex-col items-center"
          >
            <img :src="char.img" :alt="char.name" class="w-16 h-16 rounded"/>
            <span class="text-sm mt-1">{{ char.name }}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      characters: [
        { name: "Bear", img: "../images/char/bear.png" },
        { name: "Rabbit", img: "../images/char/rabbit.png" },
        { name: "Fox", img: "../images/char/fox.png" },
        { name: "Brown Bear", img: "../images/char/brownbear.png" },
        { name: "Lion", img: "../images/char/lion.png" },
        { name: "Monkey", img: "../images/char/monkey.png" },
        { name: "Pig", img: "../images/char/pig.png" },
        { name: "Sheep", img: "../images/char/sheep.png" },
        { name: "Tiger", img: "../images/char/tiger.png" },
      ],

      profiles : [
        {name : "profile", img: "/images/propic-001.svg"},
        {name : "profile", img: "/images/propic-blank.svg"},
      ],

      selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
      showModal:false,
      selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
      modalType : "profile",
      isDone : true,
    };
  },
  methods: {
    clickCharacter(char) {
      this.selectedCharacter = char;
      this.showModal = false;
    },
    changeAva(type) {
      this.modalType = type;
      this.showModal = true;
    },
     profileListSelected(profile) {
      this.selectedProfile = profile;
      this.showModal = false;
    }
  },
}; 
</script>
