<template>
  <div class="wrap">
    <!-- Optional: Reduce or customize the triangle background effect -->
    <div class="tri" v-for="n in 64" :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" 
          rel="noopener noreferrer"
        >
          <i class="fab fa-discord"></i>
        </a>
        <a 
          title="Source Code" 
          href="https://github.com/blazium-engine/blazium" 
          target="_blank" 
          rel="noopener noreferrer"
        >
          <i class="fab fa-github"></i>
        </a>
        <a 
          title="Twitter / X" 
          href="https://x.com/BlaziumEngine" 
          target="_blank" 
          rel="noopener noreferrer"
        >
          <i class="fab fa-twitter"></i>
        </a>
        <a 
          title="Documentation" 
          href="https://docs.blazium.app" 
          target="_blank" 
          rel="noopener noreferrer"
        >
          <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";
import "@fortawesome/fontawesome-free/css/all.min.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+xml", href: "/assets/logo.svg" },
        { 
          rel: "stylesheet", 
          href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" 
        },
        { 
          href: "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap",
          rel: "stylesheet" 
        }
      ]
    }
  }
}
</script>

<style>
/* CSS Variables for easy theming */
:root {
  --background-color: #1e1e1e;
  --text-color: #f0f0f0;
  --accent-color: #e83951;
  --font-family: 'Montserrat', sans-serif;
}

/* Wrapper styling */
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--background-color);
  color: var(--text-color);
  text-align: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* Optional: Reduce number of triangle effects for cleaner look */
.tri {
  /* Customize or remove as needed */
}

/* Logo styling with hover animation */
#logo img {
  width: 120px;
  transition: transform 0.5s ease;
}

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

/* Intro title styling */
.intro-title {
  font-family: var(--font-family);
  font-weight: 700;
  margin: 1em 0;
  font-size: 2em;
}

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

/* Social icons styling */
.social-icons a {
  font-size: 1.5em;
  color: var(--accent-color);
  margin: 0 1rem;
  transition: color 0.3s, transform 0.3s;
}

.social-icons a:hover {
  color: #ffffff;
  transform: translateY(-5px);
}

/* Release info section */
#release-info {
  margin-top: 20px;
}

/* Release title styling */
.release-title {
  font-family: var(--font-family);
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

/* Responsive Design */
@media (max-width: 600px) {
  .intro-title {
    font-size: 1.5em;
  }

  .social-icons a {
    font-size: 1.2em;
    margin: 0 0.5rem;
  }

  #logo img {
    width: 100px;
  }
}
</style>


fix issues with rendering