<template>
  <section class="rounded-3xl border border-white/10 bg-white/[0.04] p-6">
    <h2 class="text-3xl font-bold">ZKTeco Device Integration</h2>
    <p class="mt-2 text-slate-400">F22, K40, MB Series, UFace, and iClock cloud communication.</p>
    <div class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      <div v-for="device in devices" :key="device.serial" class="rounded-2xl bg-slate-900 p-5">
        <div class="flex items-center justify-between">
          <strong>{{ device.name }}</strong>
          <span class="rounded-full px-3 py-1 text-xs" :class="device.online ? 'bg-emerald-400 text-slate-950' : 'bg-rose-400 text-white'">{{ device.online ? 'Online' : 'Offline' }}</span>
        </div>
        <p class="mt-3 text-sm text-slate-400">{{ device.model }} · {{ device.serial }}</p>
      </div>
    </div>
  </section>
</template>

<script setup>
const devices = [
  { name: 'Main Gate', model: 'ZKTeco F22', serial: 'F22-001', online: true },
  { name: 'Factory Floor', model: 'UFace', serial: 'UF-778', online: true },
  { name: 'Warehouse', model: 'K40', serial: 'K40-210', online: false }
]
</script>
