<template>
  <div class="homePage">
    <section class="heroBox" aria-labelledby="hero-heading">
      <NuxtImg
        provider="strapi"
        src="/uploads/DML_Home_hero_f0916b5608.png"              
        class="hero-bg"
        format="webp"
        sizes="100vw"
        alt=""                  
        aria-hidden="true"    
        priority  
      />
      <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">
        <NuxtImg
          provider="strapi"
          class="imgFloatLeft"
          src="/uploads/web_wireframe_Strategie_0bae802a68.png"
          alt="Wireframe Web Strategie"
          width="300"   
          :modifiers="{ format: 'webp' }"
          sizes="300px"
          loading="lazy"
        />
         
            <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">
      <div class="container">
        <h2 class="text-center">{{ $t('home.canDo.title') }}</h2>
        <div class="row mb-5">
          <div class="col-xl-6">
            <div class="row">
              <div class="col-md-6 my-5">
                <div class="innerBox">
                  <div class="canDoItem">
                    <NuxtImg
                      provider="strapi"
                      src="/uploads/website_Erfolg_Marketing_3c36a43ba5.png"
                      format="webp"
                      :modifiers="{ quality: 80 }"
                      sizes="xs:280px sm:300px md:350px"
                      class="imageBox"
                      loading="lazy"
                      alt="Website Erfolg Marketing"
                    />
                    <h3>{{ $t('home.canDo.item1.title') }}</h3>
                    <p>{{ $t('home.canDo.item1.text') }}</p>
                  </div>
                </div>
              </div>
              <div class="col-md-6 my-5">
                <div class="innerBox">
                  <div class="canDoItem">
                    <NuxtImg
                      provider="strapi"
                      src="/uploads/Kundenbindung_45d45ef3fc.png"
                      format="webp"
                      :modifiers="{ quality: 80 }"
                      sizes="xs:280px sm:300px md:350px"
                      class="imageBox"
                      loading="lazy"
                      alt="Kundenbindung Strategie"
                    />
                    <h3>{{ $t('home.canDo.item2.title') }}</h3>
                    <p>{{ $t('home.canDo.item2.text') }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-6">
            <div class="row">
              <div class="col-md-6 my-5">
                <div class="innerBox">
                  <div class="canDoItem" role="group" aria-labelledby="cando-title">
                    <NuxtImg
                      provider="strapi"
                      src="/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png"
                      format="webp"
                      :modifiers="{ quality: 80 }"
                      sizes="xs:280px sm:300px md:350px"
                      class="imageBox"
                      loading="lazy"
                      alt="Screen Tool Beispiel"
                    />
                    <h3 id="cando-title">{{ $t('home.canDo.item3.title') }}</h3>
                    <p>{{ $t('home.canDo.item3.text') }}</p>
                  </div>
                </div>
              </div>
              <div class="col-md-6 my-5">
                <div class="innerBox">
                  <div class="canDoItem">
                    <NuxtImg
                      provider="strapi"
                      src="/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png"
                      format="webp"
                      :modifiers="{ quality: 80 }"
                      sizes="xs:280px sm:300px md:350px"
                      class="imageBox"
                      
                      alt="Screen Tool Beispiel"
                    />
                    <h3>{{ $t('home.canDo.item4.title') }}</h3>
                    <p>{{ $t('home.canDo.item4.text') }}</p>
                  </div>
                </div>
              </div>
            </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 || ''
    }
  }))
})

</script>


<style lang="sass">
.homePage
  .heroBox
    position: relative
    min-height: 35rem
    height: 70vh
    display: flex
    align-items: center
    justify-content: center
    overflow: hidden           // wichtig: Bild beschneiden

    .hero-bg
      position: absolute
      inset: 0                 // füllt Section komplett
      width: 100%
      height: 100%
      object-fit: cover
      object-position: right bottom
      z-index: 0               // liegt unter Content

    .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%
      @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 + 1vw, 1.8rem)
      line-height: 150%
    h3
      font-size: clamp(1.2rem, .8rem + 1vw, 1.4rem)
      line-height: 150%
    img
      width: 80%
      margin: 0 2rem 1rem 0   
      max-width: 300px
      float: left  
  .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    
    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
  h3
    line-height: 1.5
  p
    padding-right: 1rem
.canDo
  margin: 15vh 0
  h2
    margin-bottom: 3.5rem
  .row
    display: flex
    flex-wrap: wrap
    height: 100%
    align-items: stretch
  .innerBox
    width: 90%
    margin: 0 5% 0 5%
    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: 0 2rem 1rem 2rem
    border-right: 1px solid lighten($beige, 0%)
    border-bottom: 1px solid lighten($beige, 0%)
    height: 100%

    .canDoItem
      
      .imageBox
        margin: 2rem auto          
        width: 100%
        max-width: 280px
        aspect-ratio: 5 / 4
        object-fit: cover
        border-radius: 1rem
        display: block
    
        // Individuelle Formen für jedes Bild
        &: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
    
    h4
      font-size: 1.4rem
      line-height: 1.8rem
      margin: 2rem 0
      font-family: 'Mainfont-Bold'

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


</style>
