<template>
  <div class="homePage">

    <section class="heroBox" :aria-label="$t('pages.services.hero.ariaLabel')">
      <NuxtImg
        provider="strapi"
        src="/uploads/bg_technologie_d24f950ccf.webp"              
        class="hero-bg"
        sizes="sm:100vw md:100vw lg:100vw"
        alt=""                  
        aria-hidden="true"    
        priority 
        loading="eager" 
        preload
        fetchpriority="high"
      />
      <div class="container-10">
        <h1>{{ $t('pages.services.hero.headline1') }}</h1>
        <h2>{{ $t('pages.services.hero.headline2') }}</h2>
        <h3>{{ $t('pages.services.hero.headline3') }}</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 class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
        <NuxtImg
        src="/uploads/Human_Maschine_BG_5c91e9100f.webp"
        provider="strapi"
        format="webp"
        sizes="100vw"
        class="background-image"
        alt=""
        aria-hidden="true"
      />
      <div class="container-15 content">
        <h2>{{ $t('pages.services.explain.headline1') }}</h2>
        <h3>{{ $t('pages.services.explain.headline2') }}</h3>
       
        <p>{{ $t('pages.services.explain.paragraph') }}</p>
        <ul class="check">
          <li>{{ $t('pages.services.explain.bullet1') }}</li>
          <li>{{ $t('pages.services.explain.bullet2') }}</li>
          <li>{{ $t('pages.services.explain.bullet3') }}</li>
          <li>{{ $t('pages.services.explain.bullet4') }}</li>
          <li>{{ $t('pages.services.explain.bullet5') }}</li>
        </ul>
      </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('pages.home.compBox.title') }}</h2>
            <h3>{{ $t('pages.home.compBox.subtitle') }}</h3>
            <p>{{ $t('pages.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('pages.home.finalCall.title') }}</h3>
        <button
class="pinkBtn mt-3" 
                role="button"
                :aria-label="$t('pages.home.finalCall.button')"
                @click.prevent="toggleContactBubble">{{ $t('pages.home.finalCall.button') }}</button>
      </div>
    </section>
    <MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('pages.home.marqueeBanner.title')" :greyscale="true" />
    <FAQArea page-link="/" :headline="$t('pages.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 mainStore = useMainStore();
const { customers } = storeToRefs(mainStore);
const toggleContactBubble = () => mainStore.toggleContactBubble();


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

const logoItems = computed(() => {
  return customers.value.map(customer => ({
    text: customer.company || '',
    image: {
      url: customer.logo?.url || '',
      alternativeText: customer.logo?.alternativeText || customer.company || ''
    }
  }))
})



</script>


<style lang="sass">
.homePage

  .heroBox
    position: relative
    min-height: 35rem
    height: 70vh
    display: flex
    align-items: center
    justify-content: center
    overflow: hidden     

    &::after
      position: absolute
      content: ""
      z-index: 0
      top: 0
      left: 0
      width: 100%
      height: 100%
      background-image: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0.3) 2%,
    rgba(0, 0, 0, 0.7) 60%,
    rgba(255, 255, 255, 0) 100%,
    transparent 100%
    )


    .hero-bg
      position: absolute
      inset: 0                 
      width: 100%
      height: 100%
      object-fit: cover
      object-position: center top
      z-index: -1               

    .container-10, h1, h2, h3
      position: relative
      z-index: 1               
    h1, h2, h3
      color: white
      z-index: 2
      line-height: 1.5
      max-width: 70%
      @media (max-width: $breakPointMD)
        max-width:  100%
    h1
      margin-top: 0  
      font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem)
      margin-bottom: 0
      font-family: 'Comfortaa'
    h2
      font-size: clamp(1.2rem, .7rem + 2vw, 2rem)      
      margin: .8rem 0 .8rem 0
      font-family: 'Comfortaa'
    h3
      font-size: 1.2rem

  .explainBox
    position: relative
    overflow: hidden
    min-height: 400px
    margin: 5vh 0
    padding: 8vh 0

    .background-image
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: auto
      object-fit: contain
      object-position: center center
      z-index: 0
      pointer-events: none

    .content
      position: relative
      z-index: 1
      padding-left: 10%  
      h2
        font-size: clamp(1.2rem, .7rem + 2vw, 2rem)  
        font-family: 'Comfortaa' 
      h3
        font-family: 'Mainfont-Bold'
        font-size: 1.2rem  
  
  
  
  

.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: url(https://strapi.digimedialoop.de/uploads/bubbles_DM_Lmint_trans_08ddb0a921.webp) //linear-gradient(to bottom left, white, #FEDEE8, white)
  background-size: cover
  background-repeat: no-repeat
  padding: 5rem 0 3rem 0
  h2
    font-family: 'Comfortaa'
  h3
    line-height: 1.5
  p
    padding-right: 1rem
  




</style>
