<script setup lang="ts">
// Design: padding [56, 100, 28, 100], footerTop gap 64, fBrand width 260, fDiv #1E293B
const productLinks = [
  { label: 'Features', href: '#features' },
  { label: 'How It Works', href: '#how-it-works' },
  { label: 'Services', href: '#support' },
]
const companyLinks = [
  { label: 'About Us', href: '#' },
  { label: 'Contact', href: '#contact' },
  { label: 'Blog', href: '#' },
]
const legalLinks = [
  { label: 'Privacy Policy', href: '#' },
  { label: 'Terms of Service', href: '#' },
]
</script>

<template>
  <footer class="bg-[#020617]">
    <div class="page-container pt-14 pb-7">

      <!-- Top row: fBrand 260 + spacer + 3 nav columns, gap 64 -->
      <div class="flex flex-col md:flex-row gap-16 pb-10 border-b border-[#1E293B]">

        <!-- Brand column: gap 14, width 260 -->
        <div class="flex flex-col gap-3.5 w-full md:w-[260px] shrink-0">
          <!-- Logo row: gap 8 -->
          <div class="flex items-center gap-2">
            <div class="w-7 h-7 rounded-[6px] bg-[#1D4ED8] flex items-center justify-center shrink-0">
              <span class="text-white font-bold text-sm leading-none">T</span>
            </div>
            <span class="text-white font-bold text-base">TapTrack</span>
          </div>
          <!-- Tagline: 13px, lineHeight 1.65, max-w 220 -->
          <p class="text-[#475569] text-[13px] leading-[1.65] max-w-[220px]">
            On-premises NFC attendance for Philippine schools. Student data stays where it belongs — with you.
          </p>
        </div>

        <!-- Spacer -->
        <div class="hidden md:block flex-1" />

        <!-- Nav columns: gap 64 between columns, gap 12 inside each -->
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-8 md:gap-16">

          <div class="flex flex-col gap-3">
            <span class="text-[#D1D5DB] font-semibold text-[13px]">Product</span>
            <a
              v-for="link in productLinks"
              :key="link.label"
              :href="link.href"
              class="text-[#6B7280] text-[13px] hover:text-white transition-colors duration-150"
            >
              {{ link.label }}
            </a>
          </div>

          <div class="flex flex-col gap-3">
            <span class="text-[#D1D5DB] font-semibold text-[13px]">Company</span>
            <a
              v-for="link in companyLinks"
              :key="link.label"
              :href="link.href"
              class="text-[#6B7280] text-[13px] hover:text-white transition-colors duration-150"
            >
              {{ link.label }}
            </a>
          </div>

          <div class="flex flex-col gap-3">
            <span class="text-[#D1D5DB] font-semibold text-[13px]">Legal</span>
            <a
              v-for="link in legalLinks"
              :key="link.label"
              :href="link.href"
              class="text-[#6B7280] text-[13px] hover:text-white transition-colors duration-150"
            >
              {{ link.label }}
            </a>
          </div>

        </div>
      </div>

      <!-- Bottom bar: padding [20, 0, 0, 0] -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 pt-5">
        <p class="text-[#374151] text-xs">
          © 2025 TapTrack. All rights reserved. Built in the Philippines.
        </p>
        <p class="text-[#374151] text-xs">
          Student data never leaves your premises.
        </p>
      </div>

    </div>
  </footer>
</template>
