<template>
  <main>
    <header class="site-header">
      <a class="brand" href="#start" aria-label="FEDEO Startseite">
        <img src="/Logo.png" alt="FEDEO" />
      </a>

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

    <section id="start" class="hero-section">
      <div class="hero-copy">
        <p class="eyebrow">Open-Source Unternehmenssoftware</p>
        <h1>Platz für dein Unternehmen.</h1>
        <p class="hero-text">
          FEDEO bündelt Projekte, Zeiten, Buchhaltung, Kommunikation, Geräte und Warenflüsse in einer Oberfläche, die den Arbeitsalltag kleiner und mittlerer Teams spürbar ruhiger macht.
        </p>
        <div class="hero-actions">
          <NuxtLink class="primary-action" to="/kontakt">Demo anfragen</NuxtLink>
          <a class="secondary-action" href="#funktionen">Funktionen ansehen</a>
        </div>
      </div>

      <div class="product-preview" aria-label="FEDEO Oberfläche">
        <div class="preview-toolbar">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="preview-grid">
          <aside>
            <strong>FEDEO</strong>
            <span>Dashboard</span>
            <span>Projekte</span>
            <span>Zeiterfassung</span>
            <span>Buchhaltung</span>
            <span>Kommunikation</span>
          </aside>
          <div class="preview-content">
            <div class="metric-row">
              <div>
                <small>Offene Aufgaben</small>
                <strong>18</strong>
              </div>
              <div>
                <small>Rapporte heute</small>
                <strong>42</strong>
              </div>
              <div>
                <small>Geräte online</small>
                <strong>9</strong>
              </div>
            </div>
            <div class="timeline">
              <span style="--width: 82%"></span>
              <span style="--width: 64%"></span>
              <span style="--width: 48%"></span>
            </div>
            <div class="work-card">
              <strong>Projekt Nordhalle</strong>
              <p>Personal, Material und Zeiten sind auf dem aktuellen Stand.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="highlights" aria-label="Die wichtigsten Punkte">
      <article>
        <span>01</span>
        <h2>Einfache Bedienung</h2>
        <p>Schnelle Abläufe, klare Masken und kurze Wege für Teams, die mitten im Betrieb arbeiten.</p>
      </article>
      <article>
        <span>02</span>
        <h2>Cloud oder selbst gehostet</h2>
        <p>FEDEO kann bequem betrieben werden und bleibt offen für eigene Infrastruktur.</p>
      </article>
      <article>
        <span>03</span>
        <h2>Ganzheitlich</h2>
        <p>Von Kundenkontakt bis Inventar greifen die Arbeitsbereiche ineinander.</p>
      </article>
    </section>

    <section id="funktionen" class="section">
      <div class="section-heading">
        <p class="eyebrow">Aktuelle Funktionen</p>
        <h2>Alles, was im Betrieb zusammengehört, an einem Ort.</h2>
        <p>
          Die neue Webseite zeigt FEDEO als modularen Werkzeugkasten für Organisation, kaufmännische Abläufe und tägliche Teamarbeit.
        </p>
      </div>

      <div class="feature-grid">
        <article v-for="feature in features" :key="feature.title">
          <span>{{ feature.tag }}</span>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
          <details>
            <summary>Mehr Details</summary>
            <ul>
              <li v-for="detail in feature.details" :key="detail">{{ detail }}</li>
            </ul>
          </details>
        </article>
      </div>
    </section>

    <section class="workflow-section">
      <div>
        <p class="eyebrow">Vom Auftrag bis zur Auswertung</p>
        <h2>FEDEO verbindet Büro, Lager und Einsatzorte.</h2>
      </div>
      <ol>
        <li>Kontakte, Objekte und Projekte zentral anlegen</li>
        <li>Teams, Fahrzeuge und Material auf der Plantafel planen</li>
        <li>Arbeitszeiten, Rapporte und Aufgaben laufend erfassen</li>
        <li>Belege, Auswertungen und Kommunikation sauber weiterführen</li>
      </ol>
    </section>

    <section class="audience-teaser">
      <div>
        <p class="eyebrow">Für wen</p>
        <h2>Gemacht für Teams, bei denen Büro und Einsatzort zusammenarbeiten müssen.</h2>
      </div>
      <NuxtLink class="secondary-action" to="/zielgruppen">Zielgruppen ansehen</NuxtLink>
    </section>

    <section id="open-source" class="open-source-section">
      <div>
        <p class="eyebrow">Open Source</p>
        <h2>Offen, nachvollziehbar und anpassbar.</h2>
        <p>
          FEDEO wird als Open-Source-Software entwickelt. Das schafft Transparenz, erleichtert eigene Anpassungen und macht die Lösung unabhängig von geschlossenen Plattformversprechen.
        </p>
      </div>
      <a class="secondary-action" href="https://git.federspiel.tech/flfeders/FEDEO">Repository ansehen</a>
    </section>

    <section id="selfhost" class="script-section">
      <div>
        <p class="eyebrow">Selfhosting</p>
        <h2>FEDEO auf deinem Server starten.</h2>
        <p>
          Der Installer prüft die Basisumgebung, richtet Docker bei Bedarf ein, lädt FEDEO und startet danach den geführten Selfhost-Assistenten.
        </p>
      </div>

      <div class="code-window" aria-label="FEDEO Selfhost Installationsbefehl">
        <div class="code-window-toolbar">
          <span></span>
          <span></span>
          <span></span>
          <strong>Terminal</strong>
        </div>
        <pre><code>{{ installCommand }}</code></pre>
      </div>
    </section>

    <section id="matrix" class="matrix-section">
      <div class="section-heading">
        <p class="eyebrow">Tief integriert</p>
        <h2>Matrix als Kommunikationsschicht für FEDEO.</h2>
        <p>
          FEDEO verbindet Chat, Räume, Anrufe und Videokonferenzen mit Projekten, Vorgängen, Kontakten und Berechtigungen. Matrix läuft dabei nicht daneben, sondern wird durch FEDEO provisioniert, verknüpft und betrieben.
        </p>
      </div>

      <div class="matrix-layout">
        <div class="matrix-stack">
          <article v-for="item in matrixStack" :key="item.title">
            <span>{{ item.tag }}</span>
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </article>
        </div>

        <div class="matrix-diagram" aria-label="Matrix Stack Architektur">
          <div>FEDEO Web & App</div>
          <span></span>
          <div>FEDEO Backend<br><small>SSO, Rechte, Objektkontext</small></div>
          <span></span>
          <div>Matrix Homeserver<br><small>Synapse, Räume, Events</small></div>
          <span></span>
          <div>FEDEO Kommunikation<br><small>Räume, Gäste, Föderation</small></div>
        </div>
      </div>

      <div class="federation-panel">
        <div>
          <p class="eyebrow">Föderation</p>
          <h3>FEDEO-Instanzen können kontrolliert miteinander sprechen.</h3>
        </div>
        <p>
          Für sensible Unternehmenskommunikation bleibt die Föderation standardmäßig steuerbar: geschlossen für interne Installationen, per Allowlist für Partner und Kunden oder bewusst geöffnet für öffentliche Matrix-Szenarien.
        </p>
      </div>
    </section>

    <section id="kontakt" class="contact-section">
      <div>
        <p class="eyebrow">Jetzt anfragen</p>
        <h2>Bereit für mehr Ruhe im Betrieb?</h2>
        <p>
          Frag eine Demo an und wir zeigen dir, wie FEDEO zu deinen Abläufen passt.
        </p>
      </div>
      <NuxtLink class="primary-action" to="/kontakt">Kontakt aufnehmen</NuxtLink>
    </section>

    <footer>
      <img src="/Logo.png" alt="FEDEO" />
      <div>
        <NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
        <NuxtLink to="/kontakt">Kontakt</NuxtLink>
        <NuxtLink to="/impressum">Impressum</NuxtLink>
        <NuxtLink to="/datenschutz">Datenschutz</NuxtLink>
        <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 features = [
  {
    tag: 'Projekte',
    title: 'Projekte und Objekte',
    description: 'Aufträge, Dokumentation und projektunabhängige Objektinformationen bleiben nachvollziehbar verbunden.',
    details: [
      'Projektakten mit Aufgaben, Dokumenten und Zeitbezug',
      'Objekte als dauerhafte Wissensbasis unabhängig vom einzelnen Auftrag',
      'Saubere Historie für wiederkehrende Arbeiten und Ansprechpartner'
    ]
  },
  {
    tag: 'Team',
    title: 'Plantafel und Zeiterfassung',
    description: 'Mitarbeitende, Ressourcen, Fahrzeuge, Arbeitszeiten und Rapportzeiten lassen sich durchgängig planen und erfassen.',
    details: [
      'Planung von Teams, Fahrzeugen und Ressourcen',
      'Arbeits- und Rapportzeiten direkt im Projektkontext',
      'Auswertbare Zeiten für Abrechnung, Nachkalkulation und Überblick'
    ]
  },
  {
    tag: 'Büro',
    title: 'Aufgaben und Kommunikation',
    description: 'Aufgaben, interne Nachrichten und Matrix-Räume laufen dort zusammen, wo die Arbeit entsteht.',
    details: [
      'Aufgaben mit Bezug zu Projekten, Vorgängen und Teams',
      'Matrix-Räume für projektnahe Abstimmung',
      'Benachrichtigungen und Lesestatus für laufende Arbeit'
    ]
  },
  {
    tag: 'Warenfluss',
    title: 'Lager und Inventar',
    description: 'Bestände, Ein- und Ausgänge, Inventar und regelmäßige Überprüfungen bleiben im Blick.',
    details: [
      'Bestandsbewegungen für Material und Waren',
      'Inventar mit Zuordnung zu Standorten oder Projekten',
      'Überprüfungen und Nachweise für Geräte und Ausstattung'
    ]
  },
  {
    tag: 'Kaufmännisch',
    title: 'Buchhaltung und Bankportal',
    description: 'Belege, offene Posten, Exporte und Bankabläufe unterstützen den kaufmännischen Alltag.',
    details: [
      'Belege und offene Posten im täglichen Überblick',
      'Bankportal für Zahlungseingänge und Zuordnung',
      'Exporte für Steuerberatung und nachgelagerte Systeme'
    ]
  },
  {
    tag: 'Geräte',
    title: 'Geräteintegration',
    description: 'Bürogeräte, Drucker und angebundene Hardware werden in digitale Prozesse eingebunden.',
    details: [
      'Anbindung von Druckern, Etiketten und Spezialhardware',
      'Gerätebezogene Workflows direkt aus FEDEO heraus',
      'Grundlage für Automatisierung in Büro, Lager und Einsatzort'
    ]
  },
  {
    tag: 'Kontakte',
    title: 'Kunden und Lieferanten',
    description: 'Kontakte, Ansprechpartner und Stammdaten sind zentral erreichbar und für Folgeprozesse nutzbar.',
    details: [
      'Zentrale Stammdaten für Kunden, Lieferanten und Ansprechpartner',
      'Verknüpfung mit Projekten, Objekten und Belegen',
      'Weniger doppelte Pflege durch durchgängige Datennutzung'
    ]
  },
  {
    tag: 'Mobil',
    title: 'Web und App',
    description: 'FEDEO ist für Arbeit am Schreibtisch und für mobile Abläufe im Einsatz vorbereitet.',
    details: [
      'Weboberfläche für Büro und Verwaltung',
      'Mobile App für Kommunikation und Arbeit unterwegs',
      'Selfhost- und Cloud-Betrieb mit gemeinsamen Prozessen'
    ]
  }
]

const matrixStack = [
  {
    tag: 'Chat',
    title: 'Projekt- und Vorgangsräume',
    description: 'Matrix-Räume werden aus FEDEO-Kontexten wie Projekten, Tickets, Teams und Kontakten heraus genutzt.'
  },
  {
    tag: 'Identität',
    title: 'FEDEO bleibt führend',
    description: 'Nutzer, Rollen und Raumzugriffe werden aus FEDEO heraus provisioniert und bei Änderungen synchronisiert.'
  },
  {
    tag: 'Kommunikation',
    title: 'Chat, Gäste und Räume',
    description: 'Teamräume, externe Gäste und projektnahe Abstimmung bleiben direkt mit FEDEO-Kontexten verbunden.'
  },
  {
    tag: 'Betrieb',
    title: 'Selfhost-ready Stack',
    description: 'Synapse, PostgreSQL, Redis, .well-known, Element und TURN/STUN sind im Selfhost-Stack vorbereitet.'
  },
  {
    tag: 'Föderation',
    title: 'Instanzübergreifende Zusammenarbeit',
    description: 'Mehrere FEDEO- oder Matrix-Instanzen können über freigegebene Domains föderieren, ohne die lokale Kontrolle über Nutzer und Räume aufzugeben.'
  }
]

const installCommand = 'curl -fsSL https://git.federspiel.tech/flfeders/FEDEO/raw/branch/dev/scripts/selfhost-install.sh | bash -s -- --simple --start'
</script>
