<script setup lang="ts">
// Design: padding [96, 100], gap 40, layout vertical, alignItems center
</script>

<template>
  <section class="bg-[#F8FAFF]">
    <div class="page-container flex flex-col items-center gap-10 py-24">

      <!-- Header: gap 10, alignItems center, width fill -->
      <div v-reveal class="flex flex-col items-center gap-2.5 w-full max-w-[640px]">
        <!-- Label: 11px semibold, tracking 2px -->
        <span class="text-[#1D4ED8] font-semibold text-[11px] tracking-[2px] uppercase">
          The System in Action
        </span>
        <!-- Title: 38px bold, lineHeight 1.15, textAlign center, width 600 -->
        <h2 class="text-[#0F172A] font-bold text-[clamp(28px,3vw,38px)] leading-[1.15] text-center">
          The gate display students see every morning.
        </h2>
        <!-- Sub: 16px, lineHeight 1.6, textAlign center, width 600 -->
        <p class="text-[#64748B] text-[16px] leading-[1.6] text-center">
          A full-screen kiosk view runs at your school gate — students tap their NFC ID card and instantly see their name, section, and status confirmed.
        </p>
      </div>

      <!-- Gate screenshot: width 960, height 540, cornerRadius 16, border #E2E8F0 -->
      <div v-reveal="{ delay: 100 }" class="w-full max-w-[960px] rounded-2xl overflow-hidden border border-[#E2E8F0] shadow-lg">
        <img
          src="/screenshots/gE861.png"
          alt="TapTrack gate kiosk display"
          class="w-full h-auto block"
        />
      </div>

      <!-- Caption: 13px, textAlign center, width 700 -->
      <p v-reveal="{ delay: 150 }" class="text-[#94A3B8] text-[13px] text-center max-w-[700px] leading-relaxed">
        Full-screen gate display running on a monitor at your school entrance. No login required for students — just tap and go.
      </p>

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