<script setup lang="ts">
import { ref } from 'vue'

const steps = [
  { label: 'Information', value: 1 },
  { label: 'Shipping', value: 2 },
  { label: 'Payment', value: 3 },
]

const currentStep = ref(2)
</script>

<template>
  <header class="w-full border-b bg-background">
    <div class="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
      <!-- Logo -->
      <a href="#" class="text-xl font-bold tracking-tight">
        STORE
      </a>

      <!-- Step Indicator (desktop) -->
      <nav class="hidden items-center gap-2 md:flex" aria-label="Checkout steps">
        <template v-for="(step, index) in steps" :key="step.value">
          <!-- Connector -->
          <div
            v-if="index > 0"
            class="h-px w-8"
            :class="step.value <= currentStep ? 'bg-foreground' : 'bg-border'"
          />
          <!-- Step -->
          <div class="flex items-center gap-2">
            <div
              class="flex size-6 items-center justify-center rounded-full text-xs font-medium"
              :class="
                step.value < currentStep
                  ? 'bg-foreground text-background'
                  : step.value === currentStep
                    ? 'border-2 border-foreground text-foreground'
                    : 'border border-muted-foreground/40 text-muted-foreground'
              "
            >
              <svg
                v-if="step.value < currentStep"
                xmlns="http://www.w3.org/2000/svg"
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              ><path d="M20 6 9 17l-5-5" /></svg>
              <span v-else>{{ step.value }}</span>
            </div>
            <span
              class="text-sm"
              :class="step.value <= currentStep ? 'font-medium text-foreground' : 'text-muted-foreground'"
            >
              {{ step.label }}
            </span>
          </div>
        </template>
      </nav>

      <!-- Secure badge -->
      <div class="flex items-center gap-1.5 text-sm text-muted-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
        <span class="hidden sm:inline">Secure Checkout</span>
      </div>
    </div>

    <!-- Step indicator (mobile) -->
    <div class="border-t px-4 py-2 md:hidden">
      <div class="flex items-center justify-between text-xs">
        <span class="font-medium">Step {{ currentStep }} of {{ steps.length }}</span>
        <span class="text-muted-foreground">{{ steps[currentStep - 1]?.label }}</span>
      </div>
      <div class="mt-1.5 flex gap-1">
        <div
          v-for="step in steps"
          :key="step.value"
          class="h-1 flex-1 rounded-full"
          :class="step.value <= currentStep ? 'bg-foreground' : 'bg-muted'"
        />
      </div>
    </div>
  </header>
</template>