<script setup lang="ts">
// Design: padding [96, 100], gap 56, screenshot cards cornerRadius 14, border #E2E8F0
const cards = [
  {
    img: '/screenshots/4frZA.png',
    alt: 'TapTrack Student Directory screen',
    title: 'Student Directory',
    description: 'Manage your full roster — NFC ID assignments, parent numbers, section placement, and enrolment status all in one place.',
  },
  {
    img: '/screenshots/Reports.jpg',
    alt: 'TapTrack Reports & Analytics screen',
    title: 'Reports & Analytics',
    description: 'Generate attendance summaries by class, date range, and section. Export to PDF or Excel for DepEd compliance and parent meetings.',
  },
]
</script>

<template>
  <section class="bg-white">
    <div class="page-container flex flex-col gap-14 py-24">

      <!-- Header -->
      <div v-reveal class="flex flex-col items-center gap-2.5 text-center">
        <span class="text-[#1D4ED8] font-semibold text-[11px] tracking-[2px] uppercase">
          Inside TapTrack
        </span>
        <h2 class="text-[#0F172A] font-bold text-[clamp(26px,3vw,38px)] leading-[1.15] max-w-[600px]">
          A system built for how your school actually works.
        </h2>
        <p class="text-[#64748B] text-[16px] leading-[1.6] max-w-[580px]">
          Every screen is purpose-built for school administrators, advisers, and principals — not generic enterprise software.
        </p>
      </div>

      <!-- 2-col card grid, gap 28 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-7">
        <div
          v-for="(card, i) in cards"
          :key="card.title"
          v-reveal="{ delay: i * 120 }"
          class="flex flex-col rounded-[14px] border border-[#E2E8F0] overflow-hidden"
        >
          <!-- Image: height 340, object-top -->
          <div class="h-[260px] sm:h-[320px] lg:h-[340px] overflow-hidden">
            <img
              :src="card.img"
              :alt="card.alt"
              class="w-full h-full object-cover object-top block"
            />
          </div>
          <!-- Info: padding [20, 24], gap 6 -->
          <div class="flex flex-col gap-2 px-6 py-5">
            <h3 class="text-[#0F172A] font-semibold text-base">{{ card.title }}</h3>
            <p class="text-[#64748B] text-[13px] leading-[1.6]">{{ card.description }}</p>
          </div>
        </div>
      </div>

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