<template>
  <section class="Home flex-col content full">
    <div class="home-hero">
      <div class="text">
        <h1>
          Du zahlst zuviel fürs Papier?
        </h1>
        <NuxtLink to="/rechner">
          <PpButton class="cta">Preise vergleichen</PpButton>
        </NuxtLink>
        <h2>
          Mit ProPapier Preise vergleichen und sparen.
        </h2>
      </div>
    </div>
    <div class="home-text padding">
      <p>
        Mit <strong>ProPapier</strong> vergleichst du schnell & unkompliziert Preise für Klopapier und sparst so bares Geld.
      </p>
    </div>
    <div class="home-text padding">
      <h3>
        Wir haben noch viel vor!
      </h3>
      <p class="padding">
        Für ProPapier sind über die nächste Zeit noch einige weitere Features geplant.
      </p>
      <div class="timeline">
        <PpTimelineCard
          v-for="card in timeline"
          v-bind="card"
        />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import type { TimelineCard } from '../../shared/TimelineCard'

definePageMeta({
  layout: 'landingpage'
})

const timeline : TimelineCard[] = [
  {
    icon: 'uil:chart-bar',
    title: 'Mehr Vergleiche',
    description: 'Zusätzliche Kategorien für Taschentücher und Küchenrolle',
    state: {
      value: 'inProgress',
    }
  },
  {
    icon: 'uil:cloud-database-tree',
    title: 'Datenbank',
    description: 'Eine von der Community gestützte Datenbank mit Preisen für alle Produkte',
    state: {
      value: 'planned',
      message: '2025',
    }
  },
  {
    icon: 'uil:qrcode-scan',
    title: 'Barcode Scan',
    description: 'Ganz einfach Barcode Scannen und Produkt direkt zum Rechner hinzufügen',
    state: {
      value: 'planned',
      message: '2025',
    }
  },
  {
    icon: 'uil:user',
    title: 'Optionale Accounts',
    description: 'Zur Synchronisierung auf mehreren Geräten',
    state: {
      value: 'planned',
    }
  },
  {
    icon: 'uil:cog',
    title: 'Personalisierung',
    description: 'Persönliche Präferenzen zur Wortwahl, Standardsortierung und mehr',
    state: {
      value: 'planned',
    }
  },
  {
    icon: 'uil:vector-square',
    title: 'm² Preise',
    description: 'Quadratmeterpreise für noch genauere Vergleiche',
    state: {
      value: 'planned',
    }
  },
]
</script>