<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="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 toggleContactBubble = () => mainStore.toggleContactBubble();




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: 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/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>
