<script setup>
import { ref } from 'vue'

import AboutSection from './components/AboutSection.vue'
import ProjectSection from './components/ProjectSection.vue'
import ContactSection from './components/ContactSection.vue'
import GenericSection from './components/GenericSection.vue'
import ImgViewer from './components/ImgViewer.vue'

const currentImage = ref('')

function viewImage(image) {
  currentImage.value = image
}

function closeImage() {
  currentImage.value = ''
}
</script>

<template>
  <div>
    <ImgViewer
      :image="currentImage"
      :key="currentImage"
      class="fixed"
      :class="currentImage ? '' : 'hidden'"
      @close="closeImage"
    />
    <div
      class="flex flex-col min-h-dvh bg-linear-to-r from-red-100 via-yellow-50 to-cyan-100 items-center *:w-full"
    >
      <div class="flex justify-center gap-4 items-center">
        <div class="p-4 text-3xl font-mono text-center">
          netman.<sub><sub>[screw]</sub>ovh</sub>
        </div>
        <div
          class="p-2 bg-slate-500/80 text-slate-100 font-mono text-center !w-fit m-2 opacity-75 rounded-xl cursor-pointer"
        >
          blog <sub>(maybe someday)</sub>
        </div>
      </div>
      <AboutSection />
      <ProjectSection @view-image="viewImage" />
      <ContactSection />
      <GenericSection>
        <template #title> setup </template>
        <template #content>
          <div class="flex gap-8">
            <div>
              <p class="font-bold">ThinkBook 16 G7:</p>
              <p>* Ryzen 5 7535HS</p>
              <p>* 64GB (DDR5)</p>
            </div>
            <div>
              <p class="font-bold">EndeavourOS:</p>
              <p>* KDE Plasma</p>
              <p>* VSCode</p>
            </div>
          </div>
        </template>
      </GenericSection>
      <div class="flex-1"></div>
      <div class="text-xl font-mono text-center bg-slate-200/20 p-1.5">
        <a class="link" href="https://git.mandarynki.eu/netman/landing">(source code)</a>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
