<script setup lang="ts">
import {
  CreditCard,
  MessageSquare,
  LayoutDashboard,
  BookOpen,
  Users,
  Activity,
} from 'lucide-vue-next'
import FeatureCard from './FeatureCard.vue'

const features = [
  {
    icon: CreditCard,
    iconColor: '#1D4ED8',
    iconBg: '#EFF6FF',
    title: 'NFC Tap-In Attendance',
    description: 'Students tap their NFC ID card on the reader. Attendance is recorded instantly — no queuing, no manual entry, no errors.',
  },
  {
    icon: MessageSquare,
    iconColor: '#059669',
    iconBg: '#ECFDF5',
    title: 'Instant Parent SMS Alerts',
    description: 'Parents receive an automatic SMS the moment their child arrives or is marked absent. No app required on their end.',
  },
  {
    icon: LayoutDashboard,
    iconColor: '#CA8A04',
    iconBg: '#FEF9C3',
    title: 'Live Attendance Dashboard',
    description: 'Principals and advisers see real-time attendance, late counts, and absent students — all from a single screen.',
  },
  {
    icon: BookOpen,
    iconColor: '#7C3AED',
    iconBg: '#F3E8FF',
    title: 'Automated Attendance Reports',
    description: 'Monthly attendance summaries are generated and sent automatically to administrators — with per-student and per-class breakdowns.',
  },
  {
    icon: Users,
    iconColor: '#E11D48',
    iconBg: '#FFF1F2',
    title: 'Student & Section Management',
    description: "Manage your full student roster, assign sections and advisers, and link each student to their parent's contact number.",
  },
  {
    icon: Activity,
    iconColor: '#0284C7',
    iconBg: '#E0F2FE',
    title: 'SMS Credit Monitoring',
    description: 'Track your prepaid SMS credit balance in real time. Low-credit alerts let you top up before you run out — no interruptions to parent notifications.',
  },
]
</script>

<template>
  <!-- Design: padding [96, 100], gap 72 between header and grid -->
  <section id="features" class="bg-white">
    <div class="page-container flex flex-col gap-[72px] py-24">

      <!-- Header: gap 10, alignItems center -->
      <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">
          What TapTrack Does
        </span>
        <h2 class="text-[#0F172A] font-bold text-[clamp(28px,3vw,40px)] leading-[1.15] max-w-[560px]">
          Every feature your school<br class="hidden sm:block" /> actually needs.
        </h2>
        <p class="text-[#64748B] text-[17px] leading-[1.6] max-w-[560px]">
          Designed around the real workflow of Filipino schools — from homeroom attendance to parent communication.
        </p>
      </div>

      <!-- 2 rows × 3 cols, gap 24 between cards, gap 24 between rows -->
      <div class="flex flex-col gap-6">
        <!-- Row 1 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="(f, i) in features.slice(0, 3)"
            :key="f.title"
            v-reveal="{ delay: i * 80 }"
            class="flex"
          >
            <FeatureCard v-bind="f" />
          </div>
        </div>
        <!-- Row 2 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="(f, i) in features.slice(3)"
            :key="f.title"
            v-reveal="{ delay: i * 80 }"
            class="flex"
          >
            <FeatureCard v-bind="f" />
          </div>
        </div>
      </div>

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