<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" aria-label="Zur externen Seite von zur Terminbuchung" />
        <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 id="network" 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>
    <client-only>
      <div class="network-list margin-top">
        <div class="scroll-container default-gap">
          <Person ref="persons" v-for="person in network" v-bind="person" />
        </div>
      </div>
    </client-only>
  </section>
</template>

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

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 Quellcodes',
      'Konkrete Lösungsvorschläge',
      'Ergebnisse innerhalb von 7 Tagen',
      'Behebung unkompliziert nachbuchen'
    ],
  }, {
    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: [
      'Anforderungsanalyse',
      'Kontinuierliche Projekt-Updates',
      'Fixe Kosten und Feature-Sets',
      '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 Abrechnung',
      'Kündigungsfrist von einer Woche',
      'Flexible Buchung ab 80 Stunden',
    ],
  }
]


const shuffle = <T>(unshuffled : T[]) => unshuffled
    .map(value => ({ value, sort: Math.random() }))
    .sort((a, b) => a.sort - b.sort)
    .map(({ value }) => value)

const network = shuffle([
  {
    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',
  }, {
    name: 'Maximilian Schluer',
    img: '/img/network/maximilian.jpg',
    tags: ['iOS Development', 'Software-QA'],
    flavour: 'Kann dein iOS-Team unterstützen oder dein Software-Qualitätsproblem lösen – egal welches.',
    link: 'https://max-shluer.de',
  }, {
    name: 'Maria Salcedo',
    img: '/img/network/maria.jpg',
    tags: ['Backend', 'DevOps', 'Architektur'],
    flavour: 'Effizient und kommunikativ. "You build it, you run it."',
    link: 'https://masagu.dev',
  },
])
</script>
