<script setup lang="ts">
import {
  Headphones,
  Settings,
  GraduationCap,
  Monitor,
  DatabaseBackup,
} from 'lucide-vue-next'
import FeatureCard from './FeatureCard.vue'

// Design: padding [96, 100], gap 64, card padding [36, 28]
const supportCards = [
  {
    icon: Headphones,
    iconColor: '#1D4ED8',
    iconBg: '#EFF6FF',
    title: 'Dedicated Support Channel',
    description: 'Get direct access to our technical team via chat or phone. No ticket queues, no bots — real people who know your setup.',
  },
  {
    icon: Settings,
    iconColor: '#CA8A04',
    iconBg: '#FEF9C3',
    title: 'System Updates & Maintenance',
    description: 'We push updates to fix bugs and add improvements. Your system stays current without you having to do anything.',
  },
  {
    icon: GraduationCap,
    iconColor: '#059669',
    iconBg: '#ECFDF5',
    title: 'Staff Re-training Assistance',
    description: "New school year, new staff? We'll get your team up to speed. Re-training sessions available on request.",
  },
  {
    icon: Monitor,
    iconColor: '#7C3AED',
    iconBg: '#F3E8FF',
    title: 'Remote Troubleshooting',
    description: 'Most issues can be resolved remotely. Our team can connect to your system and fix problems without an on-site visit.',
  },
  {
    icon: DatabaseBackup,
    iconColor: '#E11D48',
    iconBg: '#FFF1F2',
    title: 'Data Backup Assistance',
    description: 'We help you set up regular attendance data backups so your records are always safe, even if hardware fails.',
  },
]
</script>

<template>
  <section id="support" class="bg-white">
    <div class="page-container flex flex-col gap-16 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">
          After-Sales Support
        </span>
        <h2 class="text-[#0F172A] font-bold text-[clamp(28px,3vw,38px)] leading-[1.15] max-w-[560px]">
          We don't just install and leave.
        </h2>
        <p class="text-[#64748B] text-[17px] leading-[1.6] max-w-[560px]">
          Our team stays with you long after go-live. If something breaks or your staff needs help, we're one message away.
        </p>
      </div>

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

      <!-- Row 2: 2 support cards + quote card -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="(card, i) in supportCards.slice(3)"
          :key="card.title"
          v-reveal="{ delay: i * 80 }"
          class="flex"
        >
          <FeatureCard v-bind="card" />
        </div>

        <!-- Quote card: fill #EFF6FF, border #BFDBFE, padding [36, 28], gap 16 -->
        <div v-reveal="{ delay: 160 }" class="flex flex-col gap-4 bg-[#EFF6FF] border border-[#BFDBFE] rounded-2xl px-7 pt-9 pb-8">
          <p class="text-[#1E3A5F] font-medium text-base leading-[1.65] flex-1">
            "Think of us as your school's IT partner for attendance — not just a vendor who sold you something."
          </p>
          <div class="flex items-center gap-2.5">
            <div class="w-9 h-9 rounded-full bg-[#1D4ED8] flex items-center justify-center shrink-0">
              <span class="text-white font-bold text-xs">TT</span>
            </div>
            <span class="text-[#1D4ED8] font-semibold text-[13px]">TapTrack Support Team</span>
          </div>
        </div>
      </div>

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