<script setup lang="ts">
// No props needed — all content is static copy from design
</script>

<template>
  <!-- Design: height 640, padding [0, 100], gap 80 between columns -->
  <section class="bg-[#F8FAFF]">
    <div class="page-container w-full flex flex-col lg:flex-row items-center gap-20 min-h-[640px] py-20 lg:py-16">

      <!-- ── Left Column ─────────────────────────────────── -->
      <div v-reveal class="flex-1 flex flex-col gap-7 min-w-0">

        <!-- Pill badge: fill #EFF6FF, cornerRadius 20, padding [5,12], gap 6 -->
        <div class="inline-flex items-center gap-1.5 bg-[#EFF6FF] rounded-full px-3 py-[5px] w-fit">
          <span class="w-1.5 h-1.5 rounded-full bg-[#1D4ED8] shrink-0"></span>
          <span class="text-[#1D4ED8] font-semibold text-xs leading-none">Built for Philippine Schools</span>
        </div>

        <!-- H1: 58px bold, lineHeight 1.1 -->
        <h1 class="text-[#0F172A] font-bold text-[clamp(38px,4.5vw,58px)] leading-[1.1] max-w-[560px]">
          Attendance That<br>Runs Itself.
        </h1>

        <!-- Subtitle: 17px, lineHeight 1.7 -->
        <p class="text-[#475569] text-[17px] leading-[1.7] max-w-[520px]">
          TapTrack is an on-premises NFC attendance system — students tap their ID card, parents get an SMS, and your records are updated automatically. No manual registers. No paper trails.
        </p>

        <!-- CTA Buttons: gap 12, padding [13, 26] -->
        <div class="flex flex-wrap items-center gap-3">
          <a
            href="#contact"
            class="inline-flex items-center bg-[#1D4ED8] hover:bg-[#1A43C0] text-white font-semibold text-[15px] px-[26px] py-[13px] rounded-lg transition-colors duration-150 whitespace-nowrap"
          >
            Request a Demo
          </a>
          <a
            href="#how-it-works"
            class="inline-flex items-center bg-white hover:bg-[#F8FAFF] text-[#334155] font-medium text-[15px] px-[26px] py-[13px] rounded-lg border border-[#CBD5E1] transition-colors duration-150 whitespace-nowrap"
          >
            See How It Works
          </a>
        </div>

        <!-- Trust row: gap 20 -->
        <div class="flex flex-wrap items-center gap-5">
          <span class="text-[#64748B] text-[13px]">✓&nbsp; Student data stays on your servers</span>
          <span class="text-[#64748B] text-[13px]">✓&nbsp; No cloud lock-in</span>
        </div>
      </div>

      <!-- ── Right Column: width 580, gap 16 ───────────────── -->
      <div v-reveal="{ delay: 150 }" class="w-full lg:w-[580px] shrink-0 flex flex-col gap-4 items-center">

        <!-- Screenshot: 580×380, cornerRadius 16, border 2px -->
        <div class="w-full max-w-[580px] h-[320px] sm:h-[380px] rounded-2xl overflow-hidden border-2 border-[#E2E8F0] shadow-xl">
          <img
            src="/screenshots/58IBI.png"
            alt="TapTrack live attendance dashboard"
            class="w-full h-full object-cover object-top"
          />
        </div>

        <!-- Caption: 12px, textAlign center -->
        <p class="text-[#94A3B8] text-xs text-center max-w-[520px] leading-relaxed">
          Live dashboard running on your school's own server — data never leaves your premises.
        </p>
      </div>

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