<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.
          Outside University I've been studying Backend Development with Go to
          build lightning fast and efficient RESTful APIs I've also been
          studying Frontend Development with Vue.js to build modern and
          responsive web applications.
        </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">
              +20
            </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>
