<template>
  <section id="services" class="Services content">
    <h2>Prepaid Flatrates.</h2>
    <h3>Genieße fusselige Qualität ohne groß herumzurechnen.</h3>

    <p class="margin-top-small">Bei dir fällt ständig was an oder du hast ein langlaufendes Projekt, bei dem du immer wieder mal Unterstützung brauchst? Kein Ding.
      Hier gibt's die <span class="highlight">Entwickler-Flat</span> für planbare Kosten und On-Demand-Entwicklung.</p>

    <div class="Pricing margin-top">
      <article v-for="(service, index) in flatrate" :class="{ 'z-3-all': index === 1, 'z-2-all': index !== 1}">
        <header>
          <strong>{{service.title}}</strong>
          <p>{{service.smallClaim}}</p>
          <div aria-hidden="true" class="bg-icon">
            <Icon :name="`ph:${service.icon}-thin`" size="1.5em" mode="svg" />
          </div>
        </header>
        <main>
          <ul class="cols">
            <li v-for="point in service.list">
              <span class="value">{{ typeof point.value === 'number' ? intl.format(point.value) : point.value }}</span>
              <span class="label">{{ point.label }}</span>
            </li>
          </ul>
        </main>
        <footer>
<!--          <span class="price">{{intl.format(service.price)}}</span>-->
          <div class="button-wrapper z-2">
            <Button :href="service.link" aria-label="Zur externen Seite Terminbuchung" :design="index === 1 ? 'default' : 'white'">
              {{ service.button }}
            </Button>
          </div>
        </footer>
      </article>
    </div>
  </section>
</template>

<script setup lang="ts">
type Service = {
  title: string
  smallClaim: string
  icon: string
  button: string
  link: string
  list: {
    label: string
    value: string | number
  }[]
}

const intl = new Intl.NumberFormat(
  'de-DE',
  {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  })


const flatrate : Service[] =
    [
      {
        title: 'Casual',
        smallClaim: 'Für kleine Aufgaben nebenbei.',
        icon: 'baby-carriage',
        button: 'Jetzt klar machen',
        link: 'https://tidycal.com/webfussel/flatrate-casual',
        list: [
          {
            label: 'Ticket gleichzeitig',
            value: '1',
          },
          {
            label: 'Erreichbarkeit',
            value: 'Ganz okay',
          },
          {
            label: 'Monatlich',
            value: 2950,
          },
        ],
      },
      {
        title: 'Gold-Fussel',
        smallClaim: 'Wenn\'s mal wieder zu viel wird.',
        icon: 'coins',
        button: 'Jetzt Gold schürfen',
        link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
        list: [
          {
            label: 'Tickets gleichzeitig',
            value: '2',
          },
          {
            label: 'Erreichbarkeit',
            value: 'Mo - Fr',
          },
          {
            label: 'Monatlich',
            value: 4950,
          },
        ],
      },
      {
        title: 'Big Chonker',
        smallClaim: 'Für die richtig großen Sachen.',
        icon: 'skull',
        button: 'Jetzt Fett trimmen',
        link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
        list: [
          {
            label: 'Tickets gleichzeitig',
            value: '3',
          },
          {
            label: 'Erreichbarkeit',
            value: 'Ja.',
          },
          {
            label: 'Monatlich',
            value: 8950,
          },
        ],
      }
    ]
</script>
