<template>
    <section class="services">
      <h2>Unsere Kernkompetenzen für Ihren Erfolg im Web</h2>
      <p><b>Vier starke Säulen für Ihre Website:</b> Von barrierefrei über SEO bis hin zu Headless CMS und KI-Kompatibilität. Entdecken Sie, wie unsere spezialisierten Leistungen Ihre digitale Präsenz voranbringen. Einfach, effektiv und auf Ihre Bedürfnisse zugeschnitten.</p>
      <div class="serviceBoxes">
            <div
              v-for="(service, index) in services"
              :key="index"
              class="service"
            >
              <NuxtImg
                provider="strapi"
                :src="service.backgroundImage"
                alt=""
                class="service-bg"
                aria-hidden="true"
                priority
                loading="eager"
                fetchpriority="high"
              />
              <div class="overlay"></div>
              <div class="serviceContent">
                <h3>{{ service.title }}</h3>
                <p>{{ service.description }}</p>
                <NuxtLinkLocale :to="service.link" class="link">{{ service.linktext }}</NuxtLinkLocale>
              </div>
            </div>
          </div>
    </section>
</template>

<script setup>
const services = [
  {
    title: 'Barrierefreie Webseiten',
    description: 'Webseiten, die für alle zugänglich sind. Barrierefrei, nutzerfreundlich und technisch modern gestaltet für optimale Bedienbarkeit und bessere Reichweite.',
    link: 'services-accessibility',
    linktext: 'Mehr erfahren',
    backgroundImage: '/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp'
  },
  {
    title: 'Suchmaschinen-Optimierung',
    description: 'Mit technischer SEO sorgen wir für bessere Sichtbarkeit in Google & Co. Schnelle, strukturierte Webseiten, die Besucher anziehen und überzeugen.',
    link: 'services-seo',
    linktext: 'Mehr erfahren',
    backgroundImage: '/uploads/DML_Service_Header_SEO_b11ae8940a.webp'
  },
  {
    title: 'Headless CMS',
    description: 'Flexibles Content-Management mit modernem Headless CMS. Schnelle Webseiten, einfache Pflege und volle Kontrolle über Inhalte und Design.',
    link: 'services-cms',
    linktext: 'Mehr erfahren',
    backgroundImage: '/uploads/DML_Service_Header_CMS_a438599970.webp'
  },
  {
    title: 'KI-Kompatibilität',
    description: 'Webseiten, die mit Künstlicher Intelligenz zusammenarbeiten. Zukunftssicher, smart optimiert und bereit für automatisierte Prozesse und Personalisierung.',
    link: 'services-ai',
    linktext: 'Mehr erfahren',
    backgroundImage: '/uploads/DML_Service_Header_AI_639dd0d7b1.webp'
  },
]
</script>

<style lang="sass">
.services
    width: 80%
    margin: 4rem auto // zentriert den Container
  
    .serviceBoxes
      margin-top: 2rem
      display: flex
      flex-wrap: wrap
      justify-content: center
      gap: 1rem
  
      .service
        flex: 0 1 300px  // fixe Breite von 300px, wächst nicht, schrumpft aber bei Bedarf
        height: 300px
        position: relative
        color: white
        display: flex
        flex-direction: column
        justify-content: flex-end
        overflow: hidden
        border-radius: 8px
        cursor: pointer
        transition: transform 0.3s ease
  
        &:hover
          transform: translateY(-5px)
      
    
      .service-bg
        position: absolute
        inset: 0
        width: 100%
        height: 100%
        object-fit: cover
        object-position: center
        z-index: 0
    
      .overlay
        position: absolute
        inset: 0
        background: linear-gradient(to top right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 100%)
        z-index: 1
    
      .serviceContent
        position: relative
        padding: 1.5rem
        z-index: 2
    
        h3
          margin: 0 0 0.5rem 0
          font-size: 1.25rem
          font-weight: 700
    
        p
          margin: 0 0 1rem 0
          font-size: 1rem
          line-height: 1.3
    
        .link
          color: black
          background-color: white
          padding: .5rem 1.25rem
          border-radius: 1rem            
          text-decoration: none
          font-family: 'Mainfont-Bold'
          font-size: 90%
          text-transform: uppercase
          &:hover
            color: #ddd
</style>