<template>
    <div class="cmsPage">
      <HeroBox
        image="/uploads/DML_Service_Header_CMS_a438599970.webp"
        :aria-label="$t('pages.services.cms.hero.ariaLabel')"
        :dark-background="true"
      >
        <h1>{{ $t('pages.services.cms.hero.headline1') }}</h1>
        <h2>{{ $t('pages.services.cms.hero.headline2') }}</h2>
        <h3>{{ $t('pages.services.cms.hero.headline3') }}</h3>
      </HeroBox>

        <section class="whatIs">
          <div class="container-10">
            <NuxtImg
              src="/uploads/Headless_CMS_c1370c8823.webp"
              provider="strapi"
              alt="Traditional vs. Headless CMS"
            />          
            <h2>Was ist ein Headless Content-Management-System (CMS)?</h2>
            <p>Ein Headless CMS ist ein modernes Content-Management-System, das Inhalte unabhängig vom Design verwaltet. Im Gegensatz zu klassischen Systemen wie WordPress oder Joomla ist es nicht an ein festes Frontend gebunden. Inhalte werden über eine API bereitgestellt – und können so überall ausgespielt werden: auf Webseiten, Apps, Smart TVs oder sogar Sprachassistenten.</p>
            <!-- <h3>Vorteile eines Headless CMS gegenüber herkömmlichen, monolithischen Systemen wie WordPress & Co</h3>
            <ul class="check">
              <li><b>Maximale Flexibilität</b> Inhalte können frei gestaltet und an jede Plattform angepasst werden – ohne Design- oder Technologiebeschränkungen.</li>
              <li><b>Höchste Performance</b> Schnelle Ladezeiten dank moderner Front-End-Technologien wie Nuxt3 und einer sauberen Trennung von Backend und Darstellung.</li>
              <li><b>Multi-Channel-Fähigkeit</b> Veröffentliche Inhalte gleichzeitig auf Website, App oder anderen digitalen Kanälen – zentral verwaltet, überall verfügbar.</li>
              <li><b>Mehr Sicherheit</b> Da das CMS keine direkte Verbindung zur öffentlichen Website hat, sinkt die Angriffsfläche deutlich.</li>
              <li><b>Einfache Skalierbarkeit</b> Egal ob Start-up oder Konzern – Headless CMS wachsen problemlos mit deinen Anforderungen mit.</li>
              <li><b>API-first Architektur</b> Inhalte werden per Schnittstelle ausgeliefert – das ermöglicht eine schnelle, strukturierte Integration in jede Umgebung.</li>
              <li><b>Bessere SEO-Möglichkeiten</b> Durch sauberen Code, optimierte Meta-Tags und strukturierte Daten rankt deine Website besser bei Google & Co.</li>
            </ul> -->
          </div>
          
        </section>
        
        <section class="compare">
          <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>Wie unterscheiden sich traditionelle von headless Content-Management-Systemen?</h2>
            
          </div>
          <div class="compare-table">
              <div class="compare-row header">
                <div>Kriterium</div>
                <div>Traditionelles CMS</div>
                <div>Headless CMS</div>
              </div>
              <div
                class="compare-row"
                v-for="row in rows"
                :key="row[0]"
              >
                <div>{{ row[0] }}</div>
                <div>{{ row[1] }}</div>
                <div>{{ row[2] }}</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="evolution">
          <div class="container-10">
            <h2>Die Evolution der Webentwicklung und deren Content-Management-Systeme</h2>
            <div class="timeline">
              <div class="timeline-item" v-for="item in timeline" :key="item.period">
                <div class="circle">
                  <div class="label">
                    <span class="period">{{ item.period }}</span>                    
                  </div>
                </div>
                <div class="content-box">
                  <h3>{{ item.era }}</h3>
                  <p>{{ item.description }}</p>
                  <h4>Technologien</h4>
                  <div class="logos">
                    <NuxtImg v-for="logo in item.logos" :key="logo" :src="logo" alt="logo" provider="strapi"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="howWeDo">
          <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 Lösung für Ihre digitale Zukunft</h2>
            <p>
              Für unsere Headless-Projekte setzen wir konsequent auf moderne Technologien: <strong>Nuxt 3</strong> im Frontend und <strong>Strapi</strong> als leistungsfähiges Headless CMS im Backend.
            </p>
            <p>
              Diese Kombination vereint maximale Flexibilität, schnelle Ladezeiten und eine zukunftssichere Architektur.
            </p> 
            <p>Inhalte werden einmalig in Strapi gepflegt und lassen sich über eine API auf beliebige Kanäle ausspielen. Ganz egal ob Website, App oder Social Media.
            </p>
            <ul class="check">
              <li><strong>Performance</strong> <br>Nuxt 3 liefert ultraschnelle Seiten mit Server-Rendering oder statischem Output.</li>
              <li><strong>Freiheit im Design</strong> <br>Keine starren Templates. Das Frontend wird passgenau auf Marken und Nutzerführung abgestimmt.</li>
              <li><strong>Zentrale Inhaltspflege</strong> <br>Inhalte werden medienneutral in Strapi gepflegt und über Schnittstellen überall verfügbar gemacht.</li>
              <li><strong>Skalierbarkeit</strong> <br>Die Architektur ist modular erweiterbar, ideal für wachsende Projekte.</li>
              <li><strong>Modern & wartungsarm</strong> <br>Keine veralteten Plugins oder Sicherheitslücken, sondern moderne APIs, klarer Code und automatisierte Updates.</li>
            </ul>
            <p>
              So entsteht ein digitales Fundament, das nicht nur heute überzeugt, sondern auch morgen noch tragfähig ist.
            </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="Bereit für eine digitale Transformation?"
          text="Wir bringen Ihre Webseite auf das nächste Level!"
          button-text="Sprechen Sie mit uns!"
        />

        <MarqueeBanner 
            :items="projectItems" 
            :logo-height="200" 
            title="Aus der Praxis: Unsere Projekte mit Headless Architektur" 
            link="projekt" 
            aria-label="Headless CMS Projekte"
            speed="15"
          />

        <FAQArea
          page-link="/leistungen/headless-cms"
          headline="Fragen und Antworten zu Content-Management-Systemen"
        />

    </div>
</template>

<script setup>
definePageMeta({
  name: 'services-cms'
})

import { useMainStore } from '@/stores/main';
const mainStore = useMainStore();
const { projects } = storeToRefs(mainStore)
console.log(projects.value[2])
const projectItems = computed(() => {
  return projects.value
    .filter(project =>
      project.customer &&
      project.projectImages.length > 0 &&
      Array.isArray(project.technologies) &&
      project.technologies.some(tech => tech.titel === 'Strapi')
    )
    .map(project => ({
      text: project.customer?.company || '',
      image: {
        url: project.projectImages[0]?.url || '',
        alternativeText: project.projectImages[0]?.alternativeText || project.customer?.company || ''
      },
      link: '/projekt/' + (project.link || '')
    }))
})




const rows = [
  ['Struktur', 'Frontend & Backend untrennbar gekoppelt', 'Frontend und Backend sind strikt getrennt'],
  ['Flexibilität im Design', 'Stark vom CMS-Theme und Plugins abhängig', 'Vollständig frei – jedes Frontend möglich'],
  ['Performance', 'Oft langsam durch Plugins und Overhead', 'Höchste Geschwindigkeit dank API und modernem Frontend'],
  ['Sicherheit', 'Große Angriffsfläche durch Plugin-Ökosystem', 'Weniger Risiko durch entkoppeltes Backend'],
  ['Skalierbarkeit', 'Begrenzt durch Systemarchitektur', 'Hervorragend – wächst mit den Anforderungen'],
  ['Multi-Channel-Fähigkeit', 'Nur eine Website im Fokus', 'Website, App, Voice u. v. m. gleichzeitig bespielbar'],
  ['Content-Wartung', 'Im Kontext des Layouts', 'Zentral und unabhängig vom Design'],
  ['SEO-Optimierung', 'Teilweise limitiert durch Themes', 'Technisch ideal umsetzbar mit strukturierten Daten'],
  ['Entwicklungsfreiheit', 'CMS-zentriert, wenig flexibel', 'Freie Wahl moderner Frameworks wie Nuxt3'],
  ['Updates & Wartung', 'Viele Plugins & Themes einzeln pflegen', 'Zentrale Pflege des CMS – unabhängig vom Frontend']
]

const timeline = [
  {
    period: '1990 – 2000',
    era: 'Statische Ära',
    description: 'Webseiten wurden manuell in HTML geschrieben und per FTP auf Server geladen – ohne CMS, ohne Dynamik.',
    logos: ['/uploads/Logo_HTML_d35e99cee0.webp']
  },
  {
    period: '2000 – 2010',
    era: 'Dynamische Ära',
    description: 'Klassische CMS wie WordPress, TYPO3 oder Joomla dominierten. PHP und MySQL bildeten das Fundament.',
    logos: [
      '/uploads/php_1_logo_png_transparent_89dd277d4b.webp',
      '/uploads/mysql_PNG_3_8ffbd31d8f.webp',
      '/uploads/Logo_Wordpress_91e875f393.webp',
      '/uploads/Que_es_Typo3_36452b50a7.webp',
      '/uploads/Joomla_Logo_wine_b02534a76a.webp',
      '/uploads/contao_logo_orange_768ca4a997.webp'
    ]
  },
  {
    period: '2010 – 2016',
    era: 'API-fähige / Hybrid-CMS-Ära',
    description: 'Erste Headless-Ansätze mit API-zentrierten Systemen wie Drupal. Parallel gewannen Frontend-Frameworks wie React, AngularJS und VueJS an Bedeutung.',
    logos: [
      '/uploads/Drupal_logo_b3af071c6b.webp',
      '/uploads/react_Logo_b22d0ba7b6.webp',
      '/uploads/angular_js_logo_png_seeklogo_299138_a34cf0a3a6.webp',
      '/uploads/vue_Logo_b6d76ec351.webp'
      
    ]
  },
  {
    period: '2016 – 2022',
    era: 'JAMstack / Headless-Ära',
    description: 'Trennung von Content & Präsentation. Git, Markdown & APIs. Headless CMS + moderne Frontends wie Nuxt & Gatsby setzen sich durch.',
    logos: [      
      '/uploads/nuxtjs_80e2fe3ec4.webp',
      '/uploads/netlify_1e40347dd9.webp',
      '/uploads/Strapi_vertical_logo_dark_6e414dd744.webp'
    ]
  },
  {
    period: '2022 – heute',
    era: 'Edge & AI Ära',
    description: 'Serverless, AI, globale Edge-Funktionen. Systeme werden intelligenter, performanter – und extrem nutzerzentriert.',
    logos: [
    '/uploads/vercel_Logo_601fec4c71.webp' ,
      '/uploads/chat_GPT_0a7e882c07.webp',
      '/uploads/Cloudflare_logo_ee9df880dd.webp',
      '/uploads/nuxt3_logo_1ea432e01c.webp'
      
    ]
  }
]



</script>

<style lang="sass">
.cmsPage
  .whatIs
    margin: 4rem 0    
    img
      float: right
      width: 100%
      max-width: 300px
      margin: 1rem 0 2rem 2rem
  .evolution
    
    padding: 2rem 0
  
    h2
      margin-bottom: 3rem
      text-align: center
  
    .timeline
      position: relative
      margin-left: 2rem
      padding-left: 0
      border-left: 10px solid $lightgrey      
  
      .timeline-item
        display: flex
        align-items: flex-start
        margin-bottom: 4rem
        position: relative
  
        &:last-child
          margin-bottom: 0
  
        .circle
          position: absolute
          left: -5.2rem
          top: 0
          width: 10rem
          height: 7rem
          background: #37857C
          border-radius: $loopShape
          border: 2px solid white
          display: flex
          align-items: center
          justify-content: center
          color: white
          text-align: center
          font-size: 0.8rem
          font-family: 'Mainfont-Bold'
          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)
  
          .label
            display: flex
            flex-direction: column
  
            .period
              font-weight: bold
              font-size: 1rem
              font-family: monospace             
  
        .content-box
          background: white
          border-radius: 1rem
          padding: 1.5rem 3rem 2rem 4rem
          margin-left: 3rem
          margin-top: 2rem
          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2)
          flex: 1
  
          h3
            text-transform: uppercase
            color: #2B3E3F
            font-family: 'Mainfont-Bold'
            margin: 1rem 0
          h4
            color: #37857C
            font-family: 'Mainfont-Bold'
            text-transform: uppercase
            font-size: 1rem
          p
            margin: 0 0 1rem 0
            font-size: 1rem
  
          .logos
            display: flex
            flex-wrap: wrap
            gap: 1rem
  
            img
              height: 2rem
              width: auto
              filter: grayscale(1)
              
    
  .compare
    background-image: linear-gradient(to bottom right, #37857C, #2B3E3F)
    padding: 8% 0
    color: white

    .compare-table
      display: flex
      flex-direction: column
      width: 100%
      border-collapse: collapse
      padding: 0 5vw

    .compare-row
      display: grid
      grid-template-columns: 1fr 1fr 1fr
      border-bottom: 1px solid rgba(255, 255, 255, 0.1)

      div
        padding: 1rem
        border-right: 1px solid rgba(255, 255, 255, 0.1)
        @media(max-width: $breakPointSM)
          font-size: .8rem
          hyphens: auto

      div:last-child
        border-right: none

      div:nth-child(1)
        background-image: linear-gradient(to right, #2B3E3F, #326863)
        color: white
        font-weight: 600
        font-family: 'Mainfont-Bold'
        

    .compare-row.header
      background: rgba(255, 255, 255, 0.1)

      div
        font-weight: 700
        font-family: 'Mainfont-Bold'
  
  .howWeDo
    background-image: linear-gradient(to bottom right, #37857C, #2B3E3F)
    padding: 8% 0
    color: white

@for $i from 1 through 10
  $duration: 5s + ($i * 0.2s) // deutlich langsamer
  $delay: random(800) + ms

  .cmsPage .evolution .timeline .timeline-item:nth-child(#{$i}) .circle
    background: darken(#37857C, ($i - 1) * 4%)
    //animation: float #{$duration} ease-in-out infinite
    //animation-delay: #{$delay}
      
</style>