<script setup lang="ts">
import { Server, Shield, WifiOff } from 'lucide-vue-next'

const stats = [
  { icon: Server, label: 'On-Premises', sub: 'Your server only' },
  { icon: Shield, label: 'DepEd Aligned', sub: 'Data privacy ready' },
  { icon: WifiOff, label: 'Works Offline', sub: 'No internet required' },
]
</script>

<template>
  <!-- Design: padding [56, 100], gap 80, alignItems center -->
  <section class="bg-[#0F172A]">
    <div class="page-container flex flex-col lg:flex-row items-start lg:items-center gap-20 py-14">

      <!-- Left: gap 12 -->
      <div v-reveal class="flex-1 flex flex-col gap-3 min-w-0">
        <!-- Label: fill #1E3A5F, cornerRadius 4, padding [4,10] -->
        <div class="w-fit bg-[#1E3A5F] rounded px-[10px] py-1">
          <span class="text-[#60A5FA] font-semibold text-[11px] tracking-[1px] uppercase">
            Data Privacy
          </span>
        </div>
        <!-- Title: 28px bold, lineHeight 1.2, max-w 500 -->
        <h2 class="text-white font-bold text-[28px] leading-[1.2] max-w-[500px]">
          Student data never leaves your school.
        </h2>
        <!-- Sub: 15px, lineHeight 1.6, max-w 500 -->
        <p class="text-[#94A3B8] text-[15px] leading-[1.6] max-w-[500px]">
          TapTrack runs entirely on your own server. No student records, attendance logs, or personal data are ever uploaded to a third-party cloud.
        </p>
      </div>

      <!-- Right: gap 40, stat items centered -->
      <div class="flex flex-row flex-wrap gap-10 shrink-0">
        <div
          v-for="(stat, i) in stats"
          :key="stat.label"
          v-reveal="{ delay: i * 100 }"
          class="flex flex-col items-center gap-1.5 min-w-[100px]"
        >
          <component :is="stat.icon" class="text-[#60A5FA]" :size="28" :stroke-width="1.75" />
          <span class="text-white font-semibold text-[13px]">{{ stat.label }}</span>
          <span class="text-[#64748B] text-[12px]">{{ stat.sub }}</span>
        </div>
      </div>

    </div>
  </section>
</template>
