<template>
  <section class="text-white mt-18" id="about">
    <div class="absolute z-0 top-[93rem] inset-x-0 h-64 flex items-start">
      <div
        class="h-24 w-64 bg-gradient-to-br from-primary via-secondary blur-2xl to-[#570cac] opacity-20"
      ></div>
    </div>
    <div
      class="md:grid md:grid-cols-2 gap-8 items-center py-8 px-4 xl:gap-16 sm:py-16 xl:px-16 z-1"
    >
      <div data-aos="flip-right">
        <h2 class="text-4xl font-bold text-white text-left mb-8">
          My Education
        </h2>
        <div class="space-y-8 py-8">
          <div
            v-for="el in education"
            :key="el.id"
            class="flex items-center md:w-[80%] w-full rounded-xl bg-gray-900 shadow-lg border border-[#1f1641]"
          >
            <div class="w-1/4 items-center justify-center flex">
              <img
                src="https://img.icons8.com/ios-glyphs/60/ffffff/graduation-cap--v1.png"
                alt="graduation-cap--v1"
              />
            </div>
            <div class="w-3/4 pl-4 py-2">
              <h3
                class="text-2xl font-semibold uppercase text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary lg:text-xl"
              >
                {{ el.institution }}
              </h3>
              <p class="text-white">{{ el.course }}</p>
              <p class="text-gray-400">{{ el.year }}</p>
            </div>
          </div>
        </div>
      </div>
      <div
        class="mt-4 md:mt-0 text-left flex flex-col z-10 h-full"
        data-aos="flip-right"
      >
        <h2 class="text-4xl font-bold text-white md:text-center text-left mb-4">
          More
          <span
            class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary"
            >About</span
          >
          Me
        </h2>
        <p class="text-base lg:text-lg mt-8 py-8 text-justify">
          I am a Software Engineering student from Portugal with 4+ years of
          experience from my internships and Self Learning + Personal Projects.
          I am passionate about technology and always eager to learn more. I am
          currently pursuing my Bachelor's on Software Engineering after having
          completed a CTeSP in programming, where I gained a solid foundation in
          C, .NET, PHP, Java, and MySQL. In my free time I've taken a few online
          courses on Unity 3D, Swift/SwiftUI, Cypress, Git, React, Golang. I've
          also had the pleasure to be a QA/QC Intern at VOID Software in Leiria
          for five months. There, I contributed to the testing and quality
          assurance of several projects, using Cypress and Cucumber to automate
          and streamline the testing process and Git to manage the source code
          and collaborate with the development team. I am always looking for new
          challenges and opportunities to grow as a developer.
        </p>
        <div class="grid grid-cols-3 gap-4 max-w-lg pt-8">
          <div
            class="text-center rounded-xl bg-gray-900 shadow-lg border border-[#1f1641] p-3"
          >
            <h3 class="text-white font-bold text-xl sm:text-2xl lg:text-3xl">
              +200
            </h3>
            <p class="text-sm sm:text-base text-gray-300">Happy Clients</p>
          </div>
          <div
            class="text-center rounded-xl bg-gray-900 shadow-lg border border-[#1f1641] p-3"
          >
            <h3 class="text-white font-bold text-xl sm:text-2xl lg:text-3xl">
              +4
            </h3>
            <p class="text-sm sm:text-base text-gray-300">Years Experience</p>
          </div>
          <div
            class="text-center rounded-xl bg-gray-900 shadow-lg border border-[#1f1641] p-3"
          >
            <h3 class="text-white font-bold text-xl sm:text-2xl lg:text-3xl">
              +300
            </h3>
            <p class="text-sm sm:text-base text-gray-300">Projects</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from "vue";

const education = ref([
  {
    id: 1,
    course: "CTeSP in Programing and IT",
    institution: "Polytechnic of Leiria",
    year: "2023",
  },
  {
    id: 2,
    course: "Bachelor's Degree in Software Engineering",
    institution: "Polytechnic of Leiria",
    year: "2026 (Expected)",
  },
]);
</script>
