<template>
  <div class="homePage">
    <HeroBox
      image="/uploads/bg_technologie_d24f950ccf.webp"
      :aria-label="$t('pages.services.hero.ariaLabel')"
      :dark-background="true"
    >
      <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">Unsere Referenzen</NuxtLinkLocale>
    </HeroBox>

    <section class="whatWeDo">

      <NuxtImg
        src="/uploads/laechelnde_Dame_a393baf878.webp"
        provider="strapi"
        class="rightImg"
        alt="Mensch"
      />
      <div class="content">
        <h2>Webseiten für Mensch und Maschine</h2>
        <h3>Design das Menschen begeistert mit Struktur die Maschinen verstehen</h3>
        <p>Wir entwickeln performante, barrierefreie Webseiten mit klarer Struktur, 
          die Nutzer überzeugen und von Suchmaschinen wie Google oder Bing, sowie KI-Systemen optimal verstanden werden.</p> 
        <p>Dabei setzen wir auf moderne Standards, erfüllen rechtliche Anforderungen wie Barrierefreiheit und Datenschutz 
          und sorgen mit zukunftsfähiger Technologie dafür, dass Ihre Webseite auf dem neuesten Stand ist.</p>
          

      </div>
      <NuxtImg
        src="/uploads/energy_1_e15df59b8a.webp"
        provider="strapi"
        class="leftImg"
        alt="Maschine"
      />
    </section>
    
    <ServicesTeaser />


    <!-- <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="AI and human"
        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>
        <NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
      </div>
      
    </section>   -->


    
    <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>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">Informationen zu Schulhompages</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>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">Informationen für die Filmbranche</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
      :headline="$t('pages.home.finalCall.title')"
      
      :button-text="$t('pages.home.finalCall.button')"
    />

    <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';

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

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
  .whatWeDo
    position: relative
    overflow-x: hidden

    .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: $breakPointMD)
        width: 90%
        margin: 3rem 5% 3rem 5%
        background-color: rgba(255,255,255,.8)

      h2
        font-size: clamp(1.2rem, .7rem + 2vw, 2rem)  
        font-family: 'Comfortaa' 
      h3
        font-family: 'Mainfont-Bold'
        font-size: 1.3rem
      p
        font-size: 1.1rem  

  
      

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

    .background-image
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: auto
      object-fit: cover
      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

.sectionSolutions
  background-image: linear-gradient(to bottom right, $beige, white, $beige)
  min-height: 200px
  padding: 5rem 0 7rem 0
  position: relative
  overflow: hidden

  .sectorsBox
    display: flex
    gap: 5%
    justify-content: space-arround
    flex-wrap: wrap

    .sector
      position: relative
      flex: 1 1 30%
      background: #f9f9f9
      padding: 2rem
      border-radius: 1rem
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)
      transition: transform 0.3s ease
      border-radius: 1rem
      max-width: 350px
      margin-bottom: 2rem

      .bgImage
        position: absolute
        inset: 0
        width: 100%
        height: 100%
        object-fit: cover
        object-position: center
        z-index: 0
        border-radius: 1rem
        
      .contentBox
        position: relative
        z-index: 2  
        background-image: linear-gradient(to top, rgba(white, .9), rgba(white, .7))
        width: 100%
        padding: 2rem
        border-radius: 1rem
        transform: rotate(-1deg)

        .image-comparison-container  
          text-align: center
          width: 80%
          max-width: 300px
          margin: 0 auto 2rem auto

        h3
          font-size: 1.25rem
          margin: 1rem 0 0.5rem
          z-index: 3
          hyphens: auto

        p
          font-size: 1rem
          color: #333
          margin-bottom: 1.5rem
          min-height: 4.5rem
          z-index: 3
        
        .btn
          text-transform: none
          hyphens: auto
          font-size: 1.1rem
          font-family: 'Mainfont-Bold'

    @media screen and (max-width: $breakPointMD)
      flex-direction: column
      .sector
        flex: 1 1 100%
        max-width: 100%
        padding: 1rem
        .btn
          font-size: 1.05rem



.compBox
  background-image: url(https://strapi.digimedialoop.de/uploads/watercolor_da8a37ce48.webp) 
  background-size: cover
  background-repeat: no-repeat
  padding: 6rem 0 6rem 0
  .content
    background-color: rgba(255,255,255,.7)
    padding: 2rem 5%
    margin-top: 2rem
    margin-bottom: 2rem
    border-radius: 1rem
    transform: rotate(-1deg)
    .btnArea
      a
        margin-right: 1rem 
        font-family: 'Mainfont-Bold'
    h2
      font-family: 'Comfortaa-Bold'
    h3
      line-height: 1.5
    p
      padding-right: 1rem
</style>
