<template>
  <q-page class="landing-page column items-center q-pa-md bg-theme">
    <div class="hero text-center q-pa-xl full-width">
      <img
        src="/stylepoint.png"
        alt="StylePoint Logo"
        class="logo q-mb-md"
        style="max-width: 300px; width: 100%;"
      >
      <h1 class="text-h3 text-weight-bold text-yellow q-mb-sm">
        Welcome to {{ productName }}
      </h1>
      <p class="text-h6 text-white q-mb-lg">
        An all-in-one tool designed for StyleTech Developers.
      </p>
    </div>

    <div
      class="features q-mt-xl q-pa-md text-center"
      style="max-width: 800px; width: 100%;"
    >
      <h2 class="text-h4 text-weight-medium text-yellow q-mb-lg q-mt-sm">
        Features
      </h2>
      <q-list
        bordered
        separator
        class="rounded-borders"
        dark
      >
        <q-item
          v-for="(feature, index) in features"
          :key="index"
          class="q-pa-md"
        >
          <q-item-section>
            <q-item-label class="text-body1">
              {{ feature }}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </div>
  </q-page>
</template>

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

const productName = process.env.PRODUCT_NAME;

const features = ref([
  'Automated Daily Reports',
  'Deep Mantis Integration',
  'Easy Authentication',
  'And more..?'
]);

</script>

<style scoped>
.hero {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

.logo {
  filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.5));
}

.features {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 10px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}
</style>