<template>
  <section class="grid gap-6 xl:grid-cols-[1fr_1fr]">
    <div class="rounded-3xl border border-white/10 bg-white/[0.04] p-6">
      <h2 class="text-3xl font-bold">Attendance Engine</h2>
      <p class="mt-2 text-slate-400">Check in/out, lunch, break, overtime, missing punch, and approval workflow.</p>
      <div class="mt-6 space-y-3">
        <div v-for="log in logs" :key="log.time" class="rounded-2xl bg-slate-900 p-4 text-sm">
          {{ log.time }} · {{ log.employee }} · {{ log.type }} · {{ log.mode }}
        </div>
      </div>
    </div>
    <div class="rounded-3xl border border-white/10 bg-white/[0.04] p-6">
      <h3 class="text-xl font-semibold">Rule Engine Samples</h3>
      <ul class="mt-5 space-y-3 text-sm text-slate-300">
        <li v-for="rule in rules" :key="rule" class="rounded-2xl bg-slate-900 p-4">{{ rule }}</li>
      </ul>
    </div>
  </section>
</template>

<script setup>
const logs = [
  { time: '09:01', employee: 'EMP-1001', type: 'Check In', mode: 'Face' },
  { time: '09:12', employee: 'EMP-1002', type: 'Check In', mode: 'Fingerprint' },
  { time: '13:00', employee: 'EMP-1003', type: 'Lunch Out', mode: 'RFID' }
]

const rules = ['Late after 10 minutes = warning', 'Late after 30 minutes = half day', '3 late = 1 absent', 'Holiday overtime multiplier = 2x']
</script>
