<template>
  <div class="homePage">
    <section class="heroBox" aria-labelledby="hero-heading">
      
      <div class="container-10">
        <h1 id="hero-heading">{{ $t('home.heroBox.h1') }}</h1>
        <h2>{{ $t('home.heroBox.h2') }}</h2>
        <h3>{{ $t('home.heroBox.h3') }}</h3>
      </div>
      <!-- Nach dem Container: Spiegelwelle unten -->
      <svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
      </svg>  
    </section>
    <section aria-labelledby="solution-title">
      <div class="container-10 webStrategy">      
            <h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
            <h3>{{ $t('home.solution.teaser') }}</h3>
            <p>{{ $t('home.solution.text') }}</p>
            <button
              class="mintBtn"
              role="button"
              aria-describedby="solution-title"
              aria-label="headless CMS Info" @click="navigateToArticle">
                {{ $t('home.solution.buttonText') }}
            </button>      
      </div>
    </section>
    <section class="targetGroup" aria-labelledby="invitation-title">
      <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
      </svg>  
      <div class="container-10">
        <div class="row">
          <div class="col-md-4"/>
          <div class="col-md-8 pt-5 pb-5">
            <h2 id="invitation-title">{{ $t('home.invitation.title') }}</h2>
            <h3>{{ $t('home.invitation.teaser') }}</h3>
            <button
class="pinkBtn" role="button"
                    aria-describedby="invitation-title"
                    aria-label="Kontaktformular öffnen"
                    @click.prevent="toggleContactBubble">{{ $t('home.invitation.button') }}</button>
          </div>
        </div>
      </div>
      <svg class="sectionWave wave-bottom" style="transform: scale(-1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
      </svg>  
    </section>
    
    <section class="canDo" aria-labelledby="canDo-section-title">
      <div class="container">
        <h2 id="canDo-section-title" class="text-center">
          {{ $t('home.canDo.title') }}
        </h2>

        <div class="canDoGrid">
          <div
            v-for="(item, index) in canDoItems"
            :key="index"
            class="canDoBox"
          >
            <div
              class="canDoItem"
              :role="index === 2 ? 'group' : null"
              :aria-labelledby="index === 2 ? 'cando-title' : null"
            >
              <NuxtImg
                provider="strapi"
                :src="item.img"
                format="webp"
                :modifiers="{ quality: 80 }"
                sizes="xs:280px sm:300px md:350px"
                class="imageBox"
                loading="lazy"
                :alt="item.alt"
              />
              <h3 :id="index === 2 ? 'cando-title' : null">
                {{ $t(item.title) }}
              </h3>
              <p>{{ $t(item.text) }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>


    <section class="compBox">
      <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
      </svg> 
      <div class="container-10 pb-5">
        <div class="row d-flex align-items-center">
          <div class="col-md-6">
            <h2>{{ $t('home.compBox.title') }}</h2>
            <h3>{{ $t('home.compBox.subtitle') }}</h3>
            <p>{{ $t('home.compBox.text') }}</p>
          </div>
          <div class="col-md-6 mt-5 pt-4 pb-4">
            <ImageComparisonSlider 
              before-image="/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png" 
              after-image="/uploads/BSK_After_9de7feda0b.webp" 
            />
          </div>
        </div>
      </div>
      <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
      </svg>  
    </section>
    <section>
      <div class="container-10 text-center py-5">
        <h3>{{ $t('home.finalCall.title') }}</h3>
        <button
class="pinkBtn mt-3" 
                role="button"
                :aria-label="$t('home.finalCall.button')"
                @click.prevent="toggleContactBubble">{{ $t('home.finalCall.button') }}</button>
      </div>
    </section>
    <MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('home.marqueeBanner.title')" />
    <FAQArea page-link="/" :headline="$t('home.faqArea.headline')" />

  </div>
</template>


<script setup>
import { useMainStore } from '@/stores/main';
import { storeToRefs } from 'pinia';
import { defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const runtimeConfig = useRuntimeConfig();
const cmsUrl = computed(() => runtimeConfig.public.cmsBaseUrl)

const mainStore = useMainStore();
const { customers } = storeToRefs(mainStore);
const toggleContactBubble = () => mainStore.toggleContactBubble();

const navigateToArticle = () => {
  router.push('/wissenswertes/artikel/design-und-inhalt-sauber-getrennt-warum-headless-webdesign-die-beste-wahl-fuer-moderne-unternehmen-ist');
};

const screenWidth = computed(() => mainStore.screenWidth);
const waveHeight = computed(() => (screenWidth.value / 25).toFixed(0));

const logoItems = computed(() => {
  return customers.value.map(customer => ({
    company: customer.company || '',
    logo: {
      url: customer.logo?.url || '',
      alternativeText: customer.company || ''
    }
  }))
})
const canDoItems = [
  {
    img: '/uploads/website_Erfolg_Marketing_3c36a43ba5.png',
    alt: 'Website Erfolg Marketing',
    title: 'home.canDo.item1.title',
    text: 'home.canDo.item1.text',
  },
  {
    img: '/uploads/Kundenbindung_45d45ef3fc.png',
    alt: 'Kundenbindung Strategie',
    title: 'home.canDo.item2.title',
    text: 'home.canDo.item2.text',
  },
  {
    img: '/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png',
    alt: 'Screen Tool Beispiel 1',
    title: 'home.canDo.item3.title',
    text: 'home.canDo.item3.text',
  },
  {
    img: '/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png',
    alt: 'Screen Tool Beispiel 2',
    title: 'home.canDo.item4.title',
    text: 'home.canDo.item4.text',
  },
];

</script>


<style lang="sass">
.homePage
  .heroBox
    background-image: url('https://strapi.digimedialoop.de/uploads/DML_Home_Hero_4f27bc7f8e.webp')
    background-repeat: no-repeat
    background-size: cover
    background-position: right bottom
    min-height: 35rem
    height: 70vh
    max-height: 200vw
    display: flex
    align-items: center
    justify-content: center
    position: relative
    @media (max-width: $breakPointMD)
      background-position: center bottom

    .container-10, h1, h2, h3
      position: relative
      z-index: 1               // über dem Bild

    h1
      margin-top: 3rem
      z-index: 2      
      color: mix(black, $pink, 2%)  
      font-size: clamp(1rem, .8rem + 1vw, 1.2rem)
      line-height: 1.5
      margin-bottom: 0
      max-width: 70%
      @media (max-width: $breakPointMD)
        max-width:  100%
    h2
      z-index: 2
      font-size: clamp(1.4rem, .8rem + 2vw, 2.4rem)
      line-height: 1.5
      margin-top: 1rem
      max-width: 55%
      font-family: 'Comfortaa'
      @media (max-width: $breakPointMD)
        max-width:  90%
    h3
      max-width: 55%
      line-height: 1.5
      font-size: clamp(1rem, .8rem + 1vw, 1.6rem)
      @media (max-width: $breakPointMD)
        max-width:  90%
    &::after
      content: ''
      position: absolute
      top: 0
      left: 0
      width: 50%
      height: 100%
      background-image: linear-gradient(to right, rgba(white, .3), transparent)
      z-index: 1
    .container
      z-index: 2

  /* Welle oben */
  .sectionWave.wave-top
      position: absolute
      left: 0
      width: 100%
      z-index: 1
      transform: scaleY(1) scaleX(-1)
      top: -2px
  /* Welle unten */
  .sectionWave.wave-bottom
      position: absolute
      left: 0
      width: 100%
      z-index: 1
      transform: scaleY(-1) 
      bottom: -2px
  .webStrategy
    padding: 4rem 0 3.5rem 0
    h2
      font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
      line-height: 150%
      font-family: 'Comfortaa'
      margin-left: 30%
    h3
      font-size: clamp(1.1rem, .75rem + 1vw, 1.25rem)
      line-height: 150%
      margin-left: 30%
    p
      margin-left: 30%
    button
      margin-left: 30%
    &::after
      content: ''
      position: absolute
      top: 5%
      left: -36vw
      width: 60vw
      height: 90%
      min-height: 550px
      max-height: 800px
      background-image: url('https://strapi.digimedialoop.de/uploads/Net_f1020a2216.png')
      background-repeat: no-repeat
      background-position: center right
      background-size: cover
      border-radius: 42% 49% 52% 48% / 53% 38% 62% 47%
      animation: bubble-wobble 25s infinite ease alternate, gradient-animation 70s infinite alternate ease-in-out
      box-shadow: $innerShadow
      @media(max-width: $breakPointMD)
          right: -50vw
  .targetGroup
    background-image: url('https://strapi.digimedialoop.de/uploads/smartphone_Contacts_40ae56a178.jpg') 
    background-repeat: no-repeat
    background-size: cover
    background-position: center top
    min-height: 70vh
    display: flex
    align-items: center
    justify-content: center
    position: relative
    padding: 3rem 0    
    h2
      font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
    h3
      font-size: clamp(1.1rem, .8rem + 1vw, 1.2rem)
      line-height: 150%
.firstTeaser
  h2
    font-size: 1.6rem
    line-height: 2.4rem
.subLine
  color: adjust-color($darkgrey, $lightness: 20%)
  font-size: 80%
.pinkFont
  color: darken($pink, 10%)
.imgRight
  float: right
  max-width: 50%
.homeImageTop
  margin: 4.5rem 0 8vh 3rem !important
.compBox
  background-image: linear-gradient(to bottom left, white, #FEDEE8, white)
  padding: 5rem 0 3rem 0
  h2
    font-family: 'Comfortaa'
  h3
    line-height: 1.5
  p
    padding-right: 1rem
  
.canDo
  margin: 12vh 0

  h2
    margin-bottom: 3.5rem
    font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)

.canDoGrid
  display: grid
  gap: 2rem
  justify-content: center
  align-items: stretch
  grid-template-columns: 1fr // Default: 1 Spalte

  @media (min-width: $breakPointMD) 
    grid-template-columns: repeat(2, 1fr)

  @media (min-width: $breakPointXL) 
    grid-template-columns: repeat(4, 1fr)

  .canDoBox
    width: 100%
    display: flex
    flex-direction: column
    align-items: center
    justify-content: flex-start
    background-image: linear-gradient(to bottom right, transparent , white)
    box-shadow: 3px 3px 8px 1px $lightgrey
    border-bottom-right-radius: 1rem
    padding: 2rem
    border-right: 1px solid lighten($beige, 0%)
    border-bottom: 1px solid lighten($beige, 0%)
    height: 100%

  .canDoItem
    width: 100%
    
    .imageBox
      margin: 2rem auto
      width: 100%
      max-width: 180px
      aspect-ratio: 5 / 4
      object-fit: cover
      border-radius: 1rem
      display: block

      &:nth-child(1) 
        border-radius: $loopShape1
      &:nth-child(2) 
        border-radius: $loopShape2
      &:nth-child(3) 
        border-radius: $loopShape3
      &:nth-child(4) 
        border-radius: $loopShape4

    h3
      font-size: 1.2rem
      line-height: 1.5rem
      text-align: center
      font-family: 'Mainfont-Bold'
      color: darken($pink, 10%)
      text-transform: uppercase

    p
      font-size: .9rem
      text-align: left !important
  


</style>
