<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>
        <div style="place-self: end; height: 1px;"/>
        <p class="fat value">Gleichzeitige Tickets</p>
        <p class="fat value odd">Erreichbarkeit</p>
        <p class="fat value">Monatlicher Preis</p>
        <div />
      </article>
      <article v-for="(service, index) in flatrate" :class=" { 'z-2' : index === 1, 'z-1' : 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>
        <p v-for="(point, pIndex) in service.list" class="value" :class="{ odd: pIndex === 1}">{{ typeof point === 'number' ? intl.format(point) : point }}</p>
        <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: (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: [
          '1',
          'E-Mail',
          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: [
          '2',
          'E-Mail, Instant-Messaging',
          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: [
          '3',
          'E-Mail, Instant-Messaging, Video-Chat',
          8950,
        ],
      }
    ]
</script>
