<template>
  <div class="knowledgeBox topSpace">
    <section class="teaserBox">
      <div class="container">
        <h1>{{ $t('pages.magazin.title') }}</h1>
        <p>{{ $t('pages.magazin.teaser1') }}</p>
        <p>{{ $t('pages.magazin.teaser2') }}</p>
      </div>
    </section>

    <section class="articleBox container">
      <div class="grid">
        <div
          v-for="article in articles"
          :key="article.id"
          class="article"
        >
        
        <NuxtLink :to="getArticleLink(article.slug)" class="article-link">
          <div class="image-wrapper">
            <NuxtImg
              v-if="article.image?.url"
              :src="article.image.url"
              provider="strapi"
              :alt="article.image.alternativeText"
              format="webp"
              class="article-image"
            />
            <div class="overlay">
              <h2>{{ article.header }}</h2>
              <button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
            </div>
          </div>
        </NuxtLink>


        </div>
      </div>
    </section>
  </div>
</template>


<script setup lang="ts">
import { computed, watch } from 'vue'
import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'

const mainStore = useMainStore()
const { articles, cmsUrl } = storeToRefs(mainStore)

const { getArticleLink } = useI18nPages()

const truncateText = (text: string, length = 200) =>
  text?.length > length ? text.substring(0, length) + '…' : text

const currentDomain = typeof window !== 'undefined'
  ? window.location.origin
  : 'https://www.digimedialoop.de'

// SEO: JSON-LD für Artikelübersicht
watch(articles, (newVal) => {
  if (newVal?.length) {
    useHead({
      script: [
        {
          type: 'application/ld+json',
          children: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "ItemList",
            itemListElement: newVal.map((article, index) => ({
              "@type": "ListItem",
              position: index + 1,
              url: `${currentDomain}/wissenswertes/artikel/${article.slug}`,
              name: article.header,
            }))
          })
        }
      ]
    })
  }
}, { immediate: true })
</script>


<style lang="sass">
.articleBox
    display: flex
    justify-content: center
    width: 100%

    .grid
        display: grid
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
        gap: 1rem
        justify-content: start
        width: 100%
        max-width: 100%
        margin: 0 auto

    .article
        width: 100%
        max-width: 450px
        border: 1px solid $beige
        background: linear-gradient(to bottom right, white, $lightgrey)
        border-radius: 1rem
        transition: .8s
        position: relative
        display: flex
        flex-direction: column
        align-items: flex-start
        overflow: hidden

        .article-link
          position: relative
          display: block
          color: white
          text-decoration: none

        .image-wrapper
          position: relative
          width: 100%
          height: 220px

          .article-image
            width: 100%
            height: 450px
            object-fit: cover
            border-top-left-radius: 1rem
            border-top-right-radius: 1rem


          .overlay
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            background-color: rgba(0, 0, 0, 0.7)
            display: flex
            flex-direction: column
            align-items: center
            justify-content: center
            padding: 1rem
            border-top-left-radius: 1rem
            border-top-right-radius: 1rem
            text-align: center
            transition: .5s
            &:hover
              background-color: rgba(255, 255, 255, 0.8)
              h2
                color: black

            h2
              color: white
              font-size: 1.1rem
              line-height: 130%
              font-family: 'Mainfont-Bold'
              margin-bottom: 0.5rem

            .mintBtn
              background-color: $primaryColor
              color: white
              font-size: 0.9rem
              font-family: 'Mainfont-Bold'
              border: none
              padding: 0.4rem 1rem
              border-radius: 0.3rem
              cursor: pointer
</style>