<template>
  <main>
    <header class="site-header">
      <NuxtLink class="brand" to="/" aria-label="FEDEO Startseite">
        <img src="/Logo.png" alt="FEDEO" />
      </NuxtLink>

      <nav aria-label="Hauptnavigation">
        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
        <NuxtLink to="/#funktionen">Funktionen</NuxtLink>
        <NuxtLink to="/#open-source">Open Source</NuxtLink>
        <NuxtLink to="/#selfhost">Selfhost</NuxtLink>
        <NuxtLink to="/#matrix">Matrix</NuxtLink>
        <NuxtLink to="/#kontakt">Kontakt</NuxtLink>
        <a class="login-link" href="https://app.fedeo.de">Einloggen</a>
      </nav>
    </header>

    <section class="audience-page">
      <div class="audience-heading">
        <p class="eyebrow">Zielgruppen</p>
        <h1>FEDEO passt zu Betrieben, die viele kleine Abläufe sauber zusammenhalten müssen.</h1>
        <p>
          Die Software ist besonders stark dort, wo Projekte, Einsatzorte, Mitarbeitende, Material, Kommunikation und kaufmännische Vorgänge in einem Alltag zusammenlaufen.
        </p>
      </div>

      <div class="audience-grid">
        <article v-for="audience in audiences" :key="audience.title">
          <span>{{ audience.tag }}</span>
          <h2>{{ audience.title }}</h2>
          <p>{{ audience.description }}</p>
          <ul>
            <li v-for="item in audience.points" :key="item">{{ item }}</li>
          </ul>
        </article>
      </div>

      <div class="audience-fit">
        <div>
          <p class="eyebrow">Passt besonders gut, wenn</p>
          <h2>dein Team nicht noch ein weiteres isoliertes Tool braucht.</h2>
        </div>
        <ul>
          <li>Informationen heute über Tabellen, Messenger, E-Mail und Bauchgefühl verteilt sind.</li>
          <li>Projektarbeit, Dokumentation, Zeiten und kaufmännische Abläufe enger zusammenrücken sollen.</li>
          <li>Selfhosting, Open Source und eigene Datenhoheit echte Kriterien sind.</li>
          <li>Kommunikation nicht lose neben der Arbeit laufen soll, sondern im Projektkontext bleibt.</li>
        </ul>
      </div>
    </section>

    <section class="contact-section">
      <div>
        <p class="eyebrow">Einordnung</p>
        <h2>Nicht sicher, ob FEDEO zu deinem Betrieb passt?</h2>
        <p>In einer Demo lässt sich schnell prüfen, welche Abläufe FEDEO direkt abdecken kann.</p>
      </div>
      <a class="primary-action" href="https://fedeo.de/kontakt">Demo anfragen</a>
    </section>

    <footer>
      <img src="/Logo.png" alt="FEDEO" />
      <div>
        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
        <NuxtLink to="/impressum">Impressum</NuxtLink>
        <a href="https://federspiel.tech/datenschutz">Datenschutz</a>
        <a href="https://app.fedeo.de">Einloggen</a>
      </div>
      <p>Copyright © 2026 Federspiel Technology UG haftungsbeschränkt.</p>
    </footer>
  </main>
</template>

<script setup lang="ts">
const audiences = [
  {
    tag: 'Service',
    title: 'Technische Dienstleister',
    description: 'Für Teams, die Einsätze planen, Geräte betreuen und Arbeit nachvollziehbar dokumentieren müssen.',
    points: [
      'Projekt- und Objektakten für wiederkehrende Arbeiten',
      'Zeiten, Material und Kommunikation im gleichen Kontext',
      'Mobile Nutzung für Mitarbeitende vor Ort'
    ]
  },
  {
    tag: 'Handwerk',
    title: 'Handwerks- und Montagebetriebe',
    description: 'Für Betriebe, bei denen Büro, Baustelle, Lager und Abrechnung jeden Tag ineinandergreifen.',
    points: [
      'Plantafel für Mitarbeitende, Fahrzeuge und Ressourcen',
      'Rapporte und Arbeitszeiten aus dem Einsatz heraus',
      'Bestände, Geräte und Belege ohne Medienbruch'
    ]
  },
  {
    tag: 'Betrieb',
    title: 'Kleine und mittlere Unternehmen',
    description: 'Für Unternehmen, die mehr Struktur brauchen, aber keine schwere Konzernsoftware einführen wollen.',
    points: [
      'Zentrale Stammdaten für Kontakte, Objekte und Projekte',
      'Aufgaben, Kommunikation und Dokumente an einem Ort',
      'Selfhost-Option für Kontrolle über Betrieb und Daten'
    ]
  },
  {
    tag: 'Verwaltung',
    title: 'Organisationen mit vielen Vorgängen',
    description: 'Für Teams, die wiederkehrende Abläufe, Zuständigkeiten und Nachweise ruhig organisieren müssen.',
    points: [
      'Vorgänge mit Historie, Dokumentation und Zuständigkeit',
      'Rollen und Berechtigungen für unterschiedliche Teams',
      'Nachvollziehbare Kommunikation über Matrix-Räume'
    ]
  },
  {
    tag: 'IT-nah',
    title: 'Open-Source-orientierte Betreiber',
    description: 'Für Betreiber, die Software verstehen, anpassen und auf eigener Infrastruktur betreiben wollen.',
    points: [
      'Offener Code und nachvollziehbare Architektur',
      'Docker-basierter Selfhost-Stack',
      'Matrix-Föderation und Integrationen kontrollierbar betreiben'
    ]
  },
  {
    tag: 'Wachstum',
    title: 'Teams im Übergang von Tools zu System',
    description: 'Für Betriebe, die aus Tabellen, Messenger-Chaos und Insellösungen herauswachsen.',
    points: [
      'Schrittweise Einführung statt Big-Bang-Projekt',
      'Module für die wichtigsten Betriebsbereiche',
      'Ein gemeinsames System für Büro, Leitung und Ausführung'
    ]
  }
]
</script>
