<template>
  <section class="text-white mt-20" id="projects">
    <div class="px-4 xl:pl-16">
      <div class="mb-4 md:flex md:justify-between xl:pr-16">
        <h2 class="text-4xl font-bold text-white">My Projects</h2>
        <div class="flex space-x-4 mb-4 mt-5 md:mt-0">
          <button
            class="hover:text-primary z-10 cursor-pointer"
            v-for="cat in ['All', 'Academic', 'Personal']"
            :key="cat"
            @click="selectedCategory = cat"
          >
            {{ cat }}
          </button>
        </div>
      </div>
      <ul
        class="px-4 sm:py-16 xl:pr-16 grid grid-cols-1 gap-6 pt-10 sm:grid-cols-2 md:gap-10 md:pt-12 lg:grid-cols-3"
        data-aos="fade-right"
      >
        <div v-for="p in filteredProjects" :key="p.id">
          <div
            class="h-52 md:h-[24rem] rounded-t-xl relative group"
            :style="{
              backgroundImage: 'url(' + p.image + ')',
              backgroundSize: 'cover',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'center',
            }"
          >
            <div
              class="overlay items-center justify-center absolute top-0 left-0 w-full h-full backdrop-blur-none hidden group-hover:flex group-hover:backdrop-blur-sm transition-all duration-50"
            >
              <a
                v-if="p.webURL"
                :href="p.webURL"
                target="_blank"
                rel="noopener"
                class="h-14 w-14 mr-2 border-2 relative rounded-full border-gray-900 hover:border-white group/link"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                  class="h-10 w-10 text-gray-900 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover/link:text-white"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
                  ></path>
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
                  ></path>
                </svg>
              </a>
              <span
                v-else
                class="h-14 w-14 mr-2 border-2 relative rounded-full border-gray-900 opacity-40 cursor-not-allowed flex items-center justify-center"
                aria-disabled="true"
                title="Live demo unavailable"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  aria-hidden="true"
                  data-slot="icon"
                  class="h-10 w-10 text-gray-900 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover/link:text-white"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
                  ></path>
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
                  ></path>
                </svg>
              </span>

              <a
                v-if="p.gitURL"
                :href="p.gitURL"
                target="_blank"
                rel="noopener"
                class="h-14 w-14 mr-2 border-2 relative rounded-full border-gray-900 hover:border-white group/link"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                  aria-hidden="true"
                  data-slot="icon"
                  class="h-10 w-10 text-gray-900 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
                  ></path>
                </svg>
              </a>
              <span
                v-else
                class="h-14 w-14 mr-2 border-2 relative rounded-full border-gray-900 opacity-40 cursor-not-allowed flex items-center justify-center"
                aria-disabled="true"
                title="Live demo unavailable"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                  aria-hidden="true"
                  data-slot="icon"
                  class="h-10 w-10 text-gray-900 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
                  ></path>
                </svg>
              </span>
            </div>
          </div>
          <div
            class="text-white rounded-b-xl mt-3 bg-gray-900 shadow-lg border border-[#1f1641] py-6 px-4"
          >
            <h3 class="text-lg font-semibold uppercase lg:text-xl">
              {{ p.title }}
            </h3>
            <p class="text-[#ADB7BE]">{{ p.description }}</p>
            <div class="flex flex-wrap p-2.5">
              <div
                v-for="tech in p.technologies"
                :key="tech"
                class="text-center ml-1 mt-1 rounded-3xl bg-gray-800"
                style="
                  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                  border: 1px solid #111827;
                  backdrop-filter: blur(9px);
                  -webkit-backdrop-filter: blur(9px);
                "
              >
                <p class="px-5 py-2">{{ tech }}</p>
              </div>
            </div>
          </div>
        </div>
      </ul>
    </div>
  </section>
</template>
<script setup>
import { ref, computed } from "vue";
// Import assets so Vite includes them in the production build (rather than using raw 'src/assets/...' paths)
import stuffandgoWeb from "@/assets/stuffandgo_web.jpg";
import stuffngoMobile from "@/assets/stuffngo_mobile.jpg";
import restGest from "@/assets/RestGest.png";
import sgi from "@/assets/sgi.png";
import chat from "@/assets/chat.png";
import veloxBot from "@/assets/velox_bot.png";
import veloxWeb from "@/assets/velox_web.jpg";
import portfolioImg from "@/assets/portfolio.png";
import lk from "@/assets/Lk.png";

const projects = ref([
  {
    id: 1,
    category: "Academic",
    image: stuffandgoWeb,
    title: "Stuff&Go Web Store",
    description: "Supermarket e-commerce platform",
    technologies: ["PHP", "JavaScript", "MySQL"],
    gitURL: "https://github.com/FernandoJVideira/PL2-G7_ProjetoPlatSI",
    webURL: "",
  },
  {
    id: 2,
    category: "Academic",
    image: stuffngoMobile,
    title: "Stuff&Go Mobile App",
    description: "Mobile application for supermarket shopping.",
    technologies: ["Java", "MQTT", "Android"],
    gitURL: "https://github.com/FernandoJVideira/PL2-G7_ProjetoAMSI",
    webURL: "",
  },
  {
    id: 3,
    category: "Academic",
    image: restGest,
    title: "RestGest",
    description: "Restaurant POS system.",
    technologies: ["C#", ".Net", "SQL Server"],
    gitURL: "https://github.com/FernandoJVideira/PSI_DA_PL2_G",
    webURL: "",
  },
  {
    id: 4,
    category: "Academic",
    image: sgi,
    title: "La Redoute Product Page UI",
    description: "UI design for a La Redoute product page.",
    technologies: ["HTML", "Bootstrap", "Three.js"],
    gitURL: "https://github.com/FernandoJVideira/SGI_Projeto24",
    webURL: "",
  },
  {
    id: 5,
    category: "Academic",
    image: chat,
    title: "Secure Chat",
    description: "End-to-End Encrypted Multi-Client Chat Application.",
    technologies: ["C#", ".Net", "Encryption Algorithms"],
    gitURL: "https://github.com/FernandoJVideira/SGI_Projeto24",
    webURL: "",
  },
  {
    id: 6,
    category: "Personal",
    image: veloxBot,
    title: "Velox Discord Bot",
    description: "Multi-purpose Discord bot built in Python.",
    technologies: ["Python", "PostgreSQL", "Discord.py"],
    gitURL: "https://github.com/FernandoJVideira/VeloxDiscordBot",
    webURL: "",
  },
  {
    id: 7,
    category: "Personal",
    image: veloxWeb,
    title: "Velox Web Framework",
    description: "Fullstack laravel like web framework built with Go.",
    technologies: ["Go"],
    gitURL: "https://github.com/FernandoJVideira/velox",
    webURL: "",
  },
  {
    id: 8,
    category: "Personal",
    image: portfolioImg,
    title: "My Portfolio",
    description: "Showcase of my projects and skills built in Vue 3.",
    technologies: ["Vue.js", "Tailwind CSS"],
    gitURL: "",
    webURL: "https://fernandovideira.com",
  },
  {
    id: 9,
    category: "Personal",
    image: lk,
    title: "LK Results Website",
    description: "Landing Page for my Company.",
    technologies: ["React.js", "Typescript"],
    gitURL: "",
    webURL: "https://lk-results.com",
  },
]);

const selectedCategory = ref("All");

const filteredProjects = computed(() => {
  if (selectedCategory.value === "All") {
    return projects.value;
  }
  return projects.value.filter(
    (p) =>
      p.category.toLocaleLowerCase() ===
      selectedCategory.value.toLocaleLowerCase()
  );
});
</script>
