<style scoped src="./Services.css"/>

<template>
  <section id="services" class="Services content">
    <h2>Services.</h2>
    <h3>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h3>
    <p class="margin-top">Hinter meinen Angeboten gibt es keinerlei Abos oder versteckte Kosten. Aus Transparenzgründen sei
      aber gesagt, dass sich alle Preise <span class="highlight">zzgl. 19% Umsatzsteuer</span> verstehen.</p>
    <div class="service-list margin-top default-gap">
      <article v-for="service in services" class="z-2 card flex-col default-gap">
        <h3 class="flex-col default-gap">
          <span>{{service.title}}</span>
          <span class="highlight">{{service.price}}</span>
        </h3>
        <span class="chip">{{service.availability}}</span>
        <p>{{service.smallClaim}}</p>
        <Button class="cta" :label="service.button" />
        <ul class="flex-col">
          <li v-for="point in service.list">
            <img class="color-icon" :src="check" aria-hidden="true" alt="checkmark icon" />
            <span>{{point}}</span>
          </li>
        </ul>
        <div class="extra flex-col">
          <small v-for="extra in service.extra">* {{ extra }}</small>
        </div>
      </article>
    </div>
    <h3 class="margin-top-big">Mein Netzwerk</h3>
    <p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge! Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen!</p>
    <div class="network-list">

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

<script setup lang="ts">
import check from 'iconoir/icons/regular/double-check.svg'

const services = [
  {
    title: 'Bug Research',
    price: '149 € / Einmalig',
    availability: 'Frei',
    smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
    button: 'Jetzt untersuchen lassen',
    list: [
      'Untersuchung des Source Code',
      'Konkrete Behebungsempfehlung',
      'Ergebnisse in spätestens 7 Tagen',
    ],
    extra: [
      'Behebung je nach Schwere gegen Aufpreis möglich'
    ]
  }, {
    title: 'Stundenbuchung',
    availability: 'Frei ab 16.12.24',
    price: '105 € / Stunde',
    smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
    button: 'Jetzt buchen',
    list: [
      'Arbeiten nach agilen Prinzipien',
      'Teilnahme an agilen Meetings',
      'Monatliche Rechnungsstellung',
      'Kündigungsfrist von einer Woche',
    ],
    extra: [
      'Mindestabnahme 160 Stunden'
    ]
  }, {
    title: 'Projektbuchung',
    price: 'ab 5.499 € je nach Umfang',
    availability: '3 Slots Frei',
    smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
    button: 'Jetzt durchstarten',
    list: [
      'Aufstellung der Anforderungen',
      'Untersuchung geeigneter Technologien',
      'Regelmäßiger Austausch',
      'Klare Kostenübersicht'
    ],
    extra: [
      'Anzahlung 50% des Projektpreises',
      'Enddatum je nach Umfang'
    ]
  }
]
</script>
