<template>
  <div class="homePage">
    <HeroBox
      image="/uploads/bg_technologie_d24f950ccf.webp"
      :aria-label="$t('pages.services.hero.ariaLabel')"
      :dark-background="true"
    >
      <div v-html="getHtmlBySection('home_hero').value"></div>
      <!-- <h1>High-Performance-Webseiten</h1>
      <h2>die Ihre Zielgruppe begeistern</h2>
      <h3>Schnell, effizient und leistungsstark</h3>
      <p>Wir nutzen modernste Technologien wie Nuxt 3 + Strapi in Headless-Architektur, um Webseiten zu entwickeln, die zukunftssicher, robust und flexibel sind.</p> -->
      <NuxtLinkLocale to="references" class="btn whiteBtn">{{ $t('buttons.ourReferences') }}</NuxtLinkLocale>
    </HeroBox>

    <section class="dmlLoop">
      <span class="loopHeader" v-html="getHtmlBySection('home_loopHeader').value"></span>
      <div class="content">
        <div class="column">
          <h4 @click="toggleSection('input')" :class="{ open: openSections.input }">
            Input
            <span>︾</span>
          </h4>
          <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @leave="leave"
          >
            <div v-show="openSections.input" class="sliding-box" v-html="getHtmlBySection('home_loopInput').value" />
          </transition>
        </div>
      <div class="column">
        <NuxtImg
          src="/uploads/Loop_83b4311dd0.webp"
          provider="strapi"
          class="loopImg"
          alt="Zentrale Webseite die als zentraler Touchpoint input verarbeitet und in qualifizierte Leads umwandelt"
        />
      </div>
      <div class="column">
        <h4 @click="toggleSection('output')" :class="{ open: openSections.output }">
          Output
          <span>︾</span>
        </h4>
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @leave="leave"
        >
          <div v-show="openSections.output" class="sliding-box" v-html="getHtmlBySection('home_loopOutput').value" />
        </transition>

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



    <section class="whatWeDo">
      <NuxtImg
        src="/uploads/laechelnde_Dame_a393baf878.webp"
        provider="strapi"
        class="rightImg"
        alt="Mensch"
      />
      <div class="content">
        <div v-html="getHtmlBySection('home_human_machine').value"></div>      
      </div>
      <NuxtImg
        src="/uploads/energy_1_e15df59b8a.webp"
        provider="strapi"
        class="leftImg"
        alt="Maschine"
      />
    </section>
    
    <ServicesTeaser />
    
    <!-- <section class="sectionSolutions">
      <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">
        <h2>Unsere Branchenlösungen mit Vorher-/Nachher-Effekt</h2>
        <div class="sectorsBox">
          <div class="sector">    
            <NuxtImg
              provider="strapi"
              src="/uploads/watercolor_da8a37ce48.webp"
              alt=""
              aria-hidden="true"
              class="bgImage"
            />
            <div class="contentBox">                          
              <ImageComparisonSlider 
                before-image="/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png" 
                after-image="/uploads/BSK_After_9de7feda0b.webp" 
              />  
              <h3 v-show="false">Webseiten für Schulen und Bildungseinrichtungen</h3>
              <p v-show="false">Wir gestalten barrierefreie, DSGVO-konforme Schulwebseiten mit modernem Content-Management-System und einfacher Pflege durch das Schulpersonal.</p>
              <NuxtLinkLocale :to="'sectors-schools'" class="btn">Webseiten für Schulen und Bildungseinrichtungen</NuxtLinkLocale>
            </div>                
          </div>
          <div class="sector">    
            <NuxtImg
              provider="strapi"
              src="/uploads/filmhintergrundcollage_a0c4b0e99d.webp"
              alt=""
              aria-hidden="true"
              class="bgImage"
            />
            <div class="contentBox">
              <ImageComparisonSlider 
                before-image="/uploads/herb_X_vorher_Image_5cef5738f9.webp" 
                after-image="/uploads/herb_X_nachher_Image_e2d2a388ff.webp" 
              />      
              <h3 v-show="false">Webauftritte für die Film- und Fernsehbranche</h3>
              <p v-show="false">Maßgeschneiderte Weblösungen für Produktionen, Studios und Agenturen. Visuell stark, technisch top und bereit für Awards.</p>
              <NuxtLinkLocale :to="'sectors-film'" class="btn">Webauftritte für die Film- und Fernsehbranche</NuxtLinkLocale>
            </div>            
          </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 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 content">
        <h2>Webseiten für Schulen und Bildungseinrichtungen</h2>
        <div class="row d-flex align-items-center">
          <div class="col-md-6">
            
            <h3>Barrierefreiheit nach BITV 2.0 und WCAG 2.1 – gesetzeskonform und nutzerfreundlich</h3>
            <p>Unsere Lösungen für Schulen sind klar strukturiert und barrierefrei – so finden Schüler, Eltern und Lehrer schnell und unkompliziert alle wichtigen Informationen. Ein moderner Internetauftritt, der den Alltag erleichtert und Ihre Kommunikation stärkt.</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>
        <p class="btnArea">
          <NuxtLinkLocale class="btn mintBtn" to="sectors-schools">Infos über Schul-Homepages</NuxtLinkLocale> 
          <NuxtLinkLocale class="btn mintBtn" to="sectors-schools">Projekt: Berchenschule Konstanz</NuxtLinkLocale>
        </p>
      </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> -->

    <CallToActionBox
      :content="getHtmlBySection('ctaBox_home').value"
      
      :button-text="$t('buttons.contactUs')"
    />

    <MarqueeBanner :items="logoItems" :logo-height="60" :speed="30" :title="getHtmlBySection('home_company_trustus').value" :greyscale="true" />
    <FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />

  </div>
</template>


<script setup>
import { useMainStore } from '@/stores/main';
import { storeToRefs } from 'pinia';

const mainStore = useMainStore();
const { customers } = storeToRefs(mainStore);

const { getHtmlBySection } = usePageContentRenderer()

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

const openSections = ref({
  input: false,
  output: false
})

const toggleSection = (key) => {
  openSections.value[key] = !openSections.value[key]
}
function beforeEnter(el) {
  el.style.height = '0'
  el.style.opacity = '0'
  el.style.overflow = 'hidden'
}

function enter(el) {
  const height = el.scrollHeight
  el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
  requestAnimationFrame(() => {
    el.style.height = height + 'px'
    el.style.opacity = '1'
  })

  el.addEventListener('transitionend', () => {
    el.style.height = 'auto'
    el.style.overflow = 'visible'
  }, { once: true })
}

function leave(el) {
  el.style.height = el.scrollHeight + 'px'
  el.style.opacity = '1'
  el.style.overflow = 'hidden'
  requestAnimationFrame(() => {
    el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
    el.style.height = '0'
    el.style.opacity = '0'
  })
}

</script>

<style lang="sass">
@keyframes bounce-fade
  0%
    transform: translateY(0)
    opacity: 1
  50%
    transform: translateY(5px)
    opacity: 0
  51%
    transform: translateY(-5px)
    opacity: 0
  100%
    transform: translateY(0)
    opacity: 1

.slide-fade-enter-active, .slide-fade-leave-active
  transition: all 0.3s ease
  overflow: hidden

.slide-fade-enter-from, .slide-fade-leave-to
  max-height: 0
  opacity: 0
  transform: translateY(-10px)

.slide-fade-enter-to, .slide-fade-leave-from
  max-height: 500px
  opacity: 1
  transform: translateY(0)

.homePage

  .dmlLoop
    width: 80%
    margin: 3rem 10%
    .loopHeader
      text-align: center

      h2
        font-size: clamp(1.8rem, .9rem + 2vw, 2rem)
        margin-bottom: 0
        margin-top: -.5rem

      h3
        font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
        margin: 0 0 1rem 0

      h4
        font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
        margin: .5rem 0 1.5rem 0

      p
        margin-top: 1rem

    .content
      display: flex
      flex-direction: row
      gap: 2rem
      margin: 3rem 0

      .column
        padding: 0
        border-radius: .5rem
        min-width: 280px
        width: calc((100% / 3) - 2rem)

        &:nth-child(1), &:nth-child(3)
          border-bottom: 1px solid #effbf7

        &:nth-child(1)
          border-left: 1px solid #effbf7

          h4
            background-image: linear-gradient(to right, #effbf7, white)

        &:nth-child(3)
          border-right: 1px solid #effbf7

          h4
            background-image: linear-gradient(to right, white, #effbf7)

        &:nth-child(2)
          display: flex
          align-items: center
          justify-content: center

          img
            margin: 22% auto

        &.sliding-box
          padding: .5rem 1rem
          font-size: .9rem
          transition: all 0.4s ease

        h4
          margin: 0
          padding: .8rem 2rem .2rem 2rem
          color: $darkgrey
          border-top-left-radius: .5rem
          border-top-right-radius: .5rem
          font-family: 'Mainfont-Bold'
          font-size: 1.1rem
          text-transform: uppercase
          text-align: center
          letter-spacing: .05rem
          cursor: pointer
          margin-top: 8rem
          transition: .5s ease-in-out

          span
            display: block
            animation: bounce-fade 1.5s infinite ease-in-out
            color: $darkgrey
            transition: transform 0.3s ease

          &.open
            margin-top: 0
            span
              animation: none
              transform: rotate(180deg)

        p
          padding: .5rem 1rem
          font-size: .9rem

        ul
          margin-left: 2vw

          li
            padding: .3rem 0

        .loopImg
          width: 100%
          height: auto
          object-fit: cover
          object-position: center center

    @media screen and (max-width: $breakPointLG)
      .content
        flex-direction: column

        .column
          width: 90%
          min-width: 90%

  .whatWeDo
    position: relative
    overflow-x: hidden
    min-height: 25vw
    margin: 3rem 0

    .rightImg, .leftImg
      height: 100%
      max-height: 500px
      position: absolute
      top: 0
      aspect-ratio: 1 / 1

    .rightImg
      right: 0
      transform: translateX(50%)

    .leftImg
      left: 0
      transform: translateX(-25%)

    .content
      position: relative
      z-index: 1
      width: 65%
      margin: 3rem 15% 2rem 20%
      text-align: center
      padding: 2rem 5%
      border-radius: 1rem

      @media(max-width: $breakPointLG)
        width: 90%
        margin: 3rem 5%
        background-color: rgba(255,255,255,.95)

      h2
        font-size: clamp(1.5rem, .7rem + 2vw, 2rem)
        font-family: 'Comfortaa'

      h3
        font-family: 'Mainfont-Bold'
        font-size: clamp(1.2rem, .9rem + 2vw, 1.6rem)

      p
        font-size: clamp(1.1rem, .5rem + 2vw, 1.2rem)
</style>

