<script setup lang="ts">
import AppHeader from '../components/AppHeader.vue'
import { useDemoStore } from '../data'

const store = useDemoStore()
</script>

<template>
  <main class="screen">
    <AppHeader title="Navigation lab" subtitle="Runtime controls" back />
    <section class="lab-intro">
      <span>60</span>
      <div><strong>FPS baseline</strong><p>Interactive layers use transform and opacity only.</p></div>
    </section>
    <section class="settings-group">
      <h2>Simulation</h2>
      <label><span><strong>Network latency</strong><small>{{ store.settings.simulatedLatency }} ms</small></span><input v-model.number="store.settings.simulatedLatency" type="range" min="0" max="1200" step="20" /></label>
      <label><span><strong>Force message failures</strong><small>Test optimistic UI</small></span><input v-model="store.settings.simulateFailures" type="checkbox" /></label>
      <div><span><strong>Connection</strong><small>Browser network state</small></span><b :class="{ offline: store.offline.value }">{{ store.offline.value ? 'Offline' : 'Online' }}</b></div>
    </section>
    <section class="settings-group">
      <h2>Gesture recipes</h2>
      <p>Hold an edge-back gesture at any progress, swipe between primary routes, drag a conversation, or open the compose sheet.</p>
    </section>
    <button class="reset-button" type="button" @click="store.reset">Reset offline demo data</button>
  </main>
</template>
