{% extends "base.html" %}

{% block title %}Voice-Befehle{% endblock %}
{% block heading %}🎤 Voice-Befehle{% endblock %}

{% block topbar_actions %}
  <a class="btn btn-primary" href="/marketing/pdf/takoma-voice-cheatsheet.pdf" target="_blank">
    📄 Als PDF (Werkstatt-Aushang)
  </a>
{% endblock %}

{% block content %}
<style>
  .voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; }
  .voice-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 1.2rem; }
  .voice-card h3 { color: #f59e0b; font-size: 14px; margin: 0 0 0.5rem 0; text-transform: uppercase; letter-spacing: 0.04em; }
  .voice-card table { width: 100%; font-size: 13px; }
  .voice-card td { padding: 4px 8px 4px 0; }
  .voice-card td:first-child { font-family: monospace; color: #60a5fa; white-space: nowrap; vertical-align: top; }
  .voice-card td:last-child { color: #cbd5e1; }
  .voice-hero { background: linear-gradient(135deg, #356692, #1f3d5c); padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; color: #fff; }
  .voice-hero h2 { margin: 0 0 0.5rem 0; }
</style>

<div class="voice-hero">
  <h2>So funktioniert Voice</h2>
  <p>Klick auf das <strong>Mikrofon-Icon unten rechts</strong> oder sag <strong>„Hey Takoma"</strong>.<br>
     Takoma begrüßt dich mit deinem Namen und der Tageslage, dann hört es zu.<br>
     <strong>Tipp:</strong> Klar und in normaler Lautstärke sprechen — kein Schreien nötig.</p>
</div>

<div class="voice-grid">

  <div class="voice-card">
    <h3>📊 Navigation</h3>
    <table>
      <tr><td>„Öffne Dashboard"</td><td>Übersichts-Seite</td></tr>
      <tr><td>„Öffne Aufträge"</td><td>Sales-Order-Liste</td></tr>
      <tr><td>„Öffne Kunden"</td><td>Kunden-Liste</td></tr>
      <tr><td>„Öffne Anfragen"</td><td>Inquiry-Liste</td></tr>
      <tr><td>„Öffne Werkstatt"</td><td>Hallen-Display</td></tr>
      <tr><td>„Öffne Werkzeuge"</td><td>Tool-Management</td></tr>
      <tr><td>„Öffne Materialien"</td><td>Material-Liste</td></tr>
      <tr><td>„Öffne Sägeplan"</td><td>Sägeplan-Optimierung</td></tr>
      <tr><td>„Öffne Berichte"</td><td>Auswertungen</td></tr>
    </table>
  </div>

  <div class="voice-card">
    <h3>❓ Fragen stellen</h3>
    <table>
      <tr><td>„Was sind meine Todos?"</td><td>Tagesübersicht</td></tr>
      <tr><td>„Was muss ich heute tun?"</td><td>Persönliche Aufgaben</td></tr>
      <tr><td>„Zeig den Kapazitätsplan"</td><td>Maschinen-Auslastung</td></tr>
      <tr><td>„Kapazität" / „Auslastung"</td><td>Kapazitäts-Übersicht</td></tr>
      <tr><td>„Wie viele Kunden?"</td><td>Kunden-Liste</td></tr>
      <tr><td>„Status Auftrag F-A 487"</td><td>Detail-Status</td></tr>
    </table>
  </div>

  <div class="voice-card">
    <h3>▶ Aktionen ausführen</h3>
    <table>
      <tr><td>„Auftrag … starten"</td><td>Job startet, Zeit läuft</td></tr>
      <tr><td>„Auftrag … pausieren"</td><td>Pause aktiv</td></tr>
      <tr><td>„Auftrag … fertig"</td><td>Bestätigung → abschließen</td></tr>
      <tr><td>„Stückzahl 5"</td><td>Aktuelle Position +5</td></tr>
      <tr><td>„Einstempeln" / „Guten Morgen"</td><td>Arbeitszeit start</td></tr>
      <tr><td>„Ausstempeln" / „Feierabend"</td><td>Arbeitszeit ende</td></tr>
      <tr><td>„Pause" / „Mittag"</td><td>Pause start</td></tr>
    </table>
  </div>

  <div class="voice-card">
    <h3>📝 Wizards (mehrstufig)</h3>
    <table>
      <tr><td>„Neuer Auftrag"</td><td>Schritt für Schritt</td></tr>
      <tr><td>„Neuer Kunde"</td><td>Kunde anlegen</td></tr>
      <tr><td>„Neue Anfrage"</td><td>Inquiry anlegen</td></tr>
      <tr><td>„Materialbestellung"</td><td>Purchase-Order</td></tr>
    </table>
    <p style="margin-top: 0.8rem; font-size: 12px; color: #94a3b8;">
      Takoma fragt nacheinander nach Name, Menge, etc. Antworte einfach mit Sprache.
    </p>
  </div>

  <div class="voice-card">
    <h3>🛑 Wizard-Steuerung</h3>
    <table>
      <tr><td>„Ja" / „Stimmt"</td><td>Aktion bestätigen</td></tr>
      <tr><td>„Nein" / „Falsch"</td><td>Schritt korrigieren</td></tr>
      <tr><td>„Abbrechen" / „Stop"</td><td>Wizard beenden</td></tr>
      <tr><td>„Wiederhole das"</td><td>Letzte TTS-Ausgabe</td></tr>
      <tr><td>„Hilfe"</td><td>Diese Übersicht</td></tr>
      <tr><td>„Starte Tutorial"</td><td>Geführte Einführung</td></tr>
    </table>
  </div>

  <div class="voice-card">
    <h3>🔧 Wenn etwas nicht klappt</h3>
    <table>
      <tr><td>Kein Sound?</td><td>Mikrofon-Erlaubnis im Browser prüfen (🔒 in Adressleiste)</td></tr>
      <tr><td>Falsche Stimme?</td><td>Browser-Console (F12): <code style="font-size:11px;">_voiceListAvailable()</code></td></tr>
      <tr><td>Verzögerung?</td><td>macOS Premium-Stimmen herunterladen</td></tr>
      <tr><td>Wizard hängt?</td><td>„Abbrechen" sagen oder 5 Min warten (Auto-Cancel)</td></tr>
    </table>
  </div>

</div>

<p style="margin-top: 2rem; text-align: center; color: #6b7280; font-size: 12px;">
  Voice-Engine: Web Speech API (Browser-nativ) · Tipps & Updates folgen mit jeder Version.
</p>
{% endblock %}