<template>
  <div class="wrap">
    <div class="tri" v-for="n in 256" :key="n"></div>

    <!-- Logo Image -->
    <div id="logo">
      <img src="/assets/logo_white_outline.svg" alt="Blazium Engine Logo" />
    </div>

    <!-- Intro Section -->
    <div id="intro">
      <h2 class="intro-title">Blazium Engine</h2>
      <hr />
      <div class="social-icons">
        <a title="Discord / Community" href="https://discord.gg/Jk93kePyty" target="_blank">
          <i class="fab fa-discord"></i>
        </a>
        <a title="Source Code" href="https://github.com/blazium-engine/blazium" target="_blank">
          <i class="fab fa-github"></i>
        </a>
        <a title="Twitter / X" href="https://x.com/BlaziumEngine" target="_blank">
          <i class="fab fa-twitter"></i>
        </a>
        <a title="Documentation" href="https://docs.blazium.app" target="_blank">
          <i class="fas fa-book"></i>
        </a>
      </div>
    </div>

    <!-- Release Information Box -->
    <div id="release-info">
      <h3 class="release-title">Blazium Engine Release Info</h3>
      <p id="release-message">Loading release information...</p>
    </div>
  </div>
</template>

<script setup>
// Importing CSS files
import "@/public/assets/css/style.css";
import "@/public/assets/css/effects.css";

// Load JavaScript background script
if (process.client) {
  import("@/public/assets/js/background.js");
}
</script>

<script>
export default {
  head() {
    return {
      title: "Blazium Engine",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1.0" },
        { name: "description", content: "Blazium Engine - A powerful and flexible game engine for developers." },
        { name: "keywords", content: "Blazium, Game Engine, Game Development, Blazium Engine, Blazium App" },
        { name: "robots", content: "index, follow" },
        { name: "author", content: "Blazium Team" },
        { name: "theme-color", content: "#000000" },
        { property: "og:title", content: "Blazium Engine" },
        { property: "og:description", content: "Blazium Engine - A powerful and flexible game engine for developers." },
        { property: "og:url", content: "https://blazium.app/" },
        { property: "og:image", content: "https://blazium.app/static/assets/logo.svg" },
        { property: "og:type", content: "website" },
        { property: "og:site_name", content: "Blazium Engine" },
        { name: "twitter:card", content: "summary_large_image" },
        { name: "twitter:title", content: "Blazium Engine" },
        { name: "twitter:description", content: "Blazium Engine - A powerful and flexible game engine for developers." },
        { name: "twitter:image", content: "https://blazium.app/static/assets/logo.svg" },
        { name: "twitter:url", content: "https://blazium.app/" },
      ],
      link: [
        { rel: "shortcut icon", type: "image/svg", href: "/assets/logo.svg" },
        { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css", integrity: "sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==", crossorigin: "anonymous", referrerpolicy: "no-referrer" }
      ]
    }
  }
}
</script>

<style>
/* Scoped or global styles specific to this layout */
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #121212;
  color: white;
  text-align: center;
}

#logo img {
  width: 120px;
  transition: transform 0.3s;
}

#logo img:hover {
  transform: scale(1.1);
}

.intro-title {
  font-family: 'Syncopate', sans-serif;
  font-weight: bolder;
  margin: 1em 0;
}

.social-icons {
  display: flex;
  justify-content: center;
  margin: 1em 0;
}

.social-icons a {
  font-size: 2em;
  color: #e83951;
  margin: 0 0.5em;
  transition: color 0.3s, transform 0.3s;
}

.social-icons a:hover {
  color: #ffffff;
  transform: scale(1.1);
}

#release-info {
  margin-top: 20px;
}

.release-title {
  font-family: 'Syncopate', sans-serif;
}
</style>


fix website make it look more modern and fix social icons dont show