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

    <p class="margin-top">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. Aus Transparenzgründen sei aber gesagt, dass sich <span class="highlight">*alle Preise zzgl. 19 % Umsatzsteuer</span>. verstehen.</p>

    <FreeInfo />

    <div class="Pricing margin-top">
      <article v-for="(service, index) in flatrate" :class=" { 'z-2' : index === 1, 'z-1' : index !== 1 }">
        <header>
          <span v-if="service.best" class="chip dark z-2"><Icon name="ph:fire-duotone" mode="svg"/> Beschd</span>
          <strong class="margin-top-small">{{service.title}}</strong>
          <p class="claim">{{service.smallClaim}}</p>
          <p class="price">{{intl.format(service.price)}}</p>
          <div aria-hidden="true" class="bg-icon">
            <Icon :name="service.icon" size="1.5em" mode="svg" />
          </div>
        </header>
        <main>
          <ul>
            <li>
              <Icon class="icon yes" name="ph:check-circle-duotone" mode="svg" />
              <span class="value">{{ service.hours }} Stunden pro Woche zugesichert</span>
            </li>
            <li v-for="(check, index) in service.checks">
              <Icon class="icon" :class="{ 'yes' : check, 'no' : !check }" :name="check ? 'ph:check-circle-duotone' : 'ph:x-circle-duotone'" mode="svg" />
              <span class="value">{{ points[index] }}</span>
            </li>
          </ul>
        </main>
        <footer>
          <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>
          <p class="conmin margin-top-small">Die Mindestvertragslaufzeit beträgt {{ service.contractMin }} Monate.</p>
        </footer>
      </article>
    </div>

    <div class="flex-col gap-sm margin-top">
      <Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
    </div>
  </section>
</template>

<script setup lang="ts">
import FreeInfo from './FreeInfo.vue'

type Service = {
  title: string
  smallClaim: string
  icon: string
  button: string
  link: string
  best: boolean
  price: number
  hours: number
  contractMin: number
  checks: boolean[]
}

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

const points : string[] = [
  'Kontakt per E-Mail',
  'Kontakt per Instant Messaging',
  'Kontakt per Video Call',
  'Weiterführende Performance Optimierung',
  'Framework Migration',
]

const flatrate : Service[] =
    [
      {
        title: 'Casual',
        smallClaim: 'Für kleine Aufgaben nebenbei.',
        icon: 'ph:baby-carriage-thin',
        button: 'Jetzt klar machen',
        link: 'https://tidycal.com/webfussel/flatrate-casual',
        best: false,
        price: 2950,
        hours: 5,
        contractMin: 3,
        checks: [
          true,
          false,
          false,
          false,
          false,
        ],
      },
      {
        title: 'Gold-Fussel',
        smallClaim: 'Wenn\'s mal wieder zu viel wird.',
        icon: 'ph:coins-thin',
        button: 'Jetzt Gold schürfen',
        link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
        best: true,
        price: 4950,
        hours: 10,
        contractMin: 3,
        checks: [
          true,
          true,
          false,
          true,
          false,
        ],
      },
      {
        title: 'Big Chonker',
        smallClaim: 'Für die richtig großen Sachen.',
        icon: 'ph:skull-thin',
        button: 'Jetzt Fett trimmen',
        link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
        best: false,
        price: 8950,
        hours: 15,
        contractMin: 6,
        checks: [
          true,
          true,
          true,
          true,
          true,
        ],
      }
    ]

const faq = [
  {
    header: 'Was ist eine Entwickler-Flatrate?',
    content: [
      'Die Entwickler-Flatrate ist ein Angebot, bei dem du für eine bestimmte Zeit eine bestimmte Menge an Leistungen erhältst.',
      'Sie wird auch oft als sogenannter "Retainer" bezeichnet und ist eine günstige Art immer wieder anfallende Aufgaben auszulagern.'
    ]
  },
  {
    header: 'Wie läuft die Zusammenarbeit ab?',
    content: [
      'Nach einer ersten Analyse deines Projekts legen wir gemeinsam den Umfang und die monatlichen Aufgaben fest. Du kannst mich je nach Paket auf den vereinbarten Wegen jederzeit kontaktieren.',
      'Die Bearbeitung erfolgt innerhalb der vereinbarten Fristen.',
    ]
  },
  {
    header: 'Wie wird abgerechnet?',
    content: [
      'Du zahlst monatlich einen festen Betrag im Prepaid-Format unabhängig davon wie viele Aufgaben tatsächlich anfallen.',
      'Dadurch kannst du dein Budget besser einplanen und Aufgaben verteilen.'
    ]
  },
  {
    header: 'Kann ich den Retainer jederzeit kündigen?',
    content: [
      'Ja klar. Du musst dabei nur die Mindestvertragslaufzeit beachten - die bezahlte Leistung steht dir weiterhin Fall zu.',
      'Falls wir merken, dass wir für eine Zusammenarbeit mehr als ungeeignet sind, bekommst du dein Geld anteilig der verbleibenden Zeit zurück und verlierst den Anspruch auf Leistungen ab diesem Zeitpunkt.'
    ]
  },
  {
    header: 'Was passiert, wenn ich dich mal weniger brauche?',
    content: [
      'Der monatliche feste Betrag bleibt bestehen. Ähnlich wie bei einer Versicherung bezahlst du hier für den Fall, dass du mich brauchst und erhältst dann entsprechend die vereinbarten Leistungen.',
      'Wenn du merkst, dass du mich nicht mehr brauchst, dann kannst du den Vertrag jederzeit kündigen und die Leistungen auslaufen lassen.'
    ]
  },
  {
    header: 'Für wen lohnt sich sowas überhaupt?',
    content: [
      'Vor allem Unternehmen, bei denen immer wieder Aufgaben anfallen für die sich aber kein komplettes Projekt oder gar eine feste Stelle in der Firma lohnt, profitieren von dieser Art von Leistung.',
      'Sie ist ideal für eine langfristige und zuverlässige Zusammenarbeit.'
    ]
  }
]
</script>
