<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 <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
      Aus Transparenzgründen sei aber gesagt, dass sich alle Preise zzgl. 19% Umsatzsteuer 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 :href="service.link" 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>
      </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 default-gap margin-top" :style="{'--width': `${width}px`, '--children': network.length }">
      <Person ref="persons" v-for="person in network" v-bind="person" />
    </div>
  </section>
</template>

<script setup lang="ts">
import check from 'iconoir/icons/regular/double-check.svg'
import type { Person } from '#components'

const width = ref(0)
const persons = ref<InstanceType<typeof Person>[]>([])

onMounted(() => {
  width.value = persons.value[0].$el.getBoundingClientRect().width
})

const services = [
  {
    title: 'Bug Research',
    price: '99 € / Einmalig',
    availability: 'Frei',
    smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
    button: 'Jetzt untersuchen',
    link: 'https://tidycal.com/webfussel/bug-research',
    list: [
      'Untersuchung des Source Code',
      'Konkrete Behebungsempfehlung',
      'Ergebnisse in spätestens 7 Tagen',
      'Fix problemlos anschließend buchen'
    ],
  }, {
    title: 'Projektbuchung',
    price: 'ab 999 € je nach Umfang',
    availability: '3 Slots Frei',
    smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
    button: 'Jetzt durchstarten',
    link: 'https://tidycal.com/webfussel/project-booking',
    list: [
      'Aufstellung der Anforderungen',
      'Regelmäßige Projektupdates',
      'Fixe Kosten und Featuresets',
      'Nur 50% Projektpreis als Anzahlung'
    ],
  }, {
    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',
    link: 'https://tidycal.com/webfussel/hourly-booking',
    list: [
      'Flexible Aufgabenverteilung',
      'Arbeiten nach agilen Prinzipien',
      'Monatliche Rechnungsstellung',
      'Kündigungsfrist von einer Woche',
      'Ab 80 Stunden flexibel buchbar',
    ],
  }
]

const network = [
  {
    name: 'Robert Janus',
    img: '/img/network/robert.jpg',
    tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
    flavour: 'Website, SEO und Conversions. Auf einen Klick.',
    link: 'https://robertjanus.de/webertoire',
  }, {
    name: 'Matthias Lehmann',
    img: '/img/network/matthias.jpg',
    tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
    flavour: 'Software die macht, was DU willst!',
    link: 'https://mind-deploy.de',
  },
]
</script>
