{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="page-canvas flex-1">
  {{template "page_header" (pageHeader .View "pages.passengerGuide.title" "pages.passengerGuide.description" "/static/images/pages/guide.jpg")}}

  <div class="page-container py-10 pb-16">
    <div class="reveal-stagger grid gap-6 lg:grid-cols-2">
      <div class="guide-card guide-card--arrival">
        <div class="guide-card__header">
          <span class="guide-card__icon guide-card__icon--arrival" aria-hidden="true">
            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2.5 19h19v2H2.5v-2zm16.84-3.15c.8.21 1.62-.26 1.84-1.06.22-.79-.26-1.62-1.06-1.84l-5.31-1.42-2.76-9.02-1.94-.52v8.28L5.15 8.95l-.93-2.32-1.45-.39v5.17l16.57 4.44z"/></svg>
          </span>
          <div>
            <h2 class="font-display text-xl font-bold text-slate-900 dark:text-white">{{t .View "passengerGuideContent.arriving.title"}}</h2>
            <p class="text-sm text-slate-500 dark:text-slate-400">{{t .View "passengerGuideContent.arriving.subtitle"}}</p>
          </div>
        </div>
        <div class="guide-card__body">
          <ol class="step-list">
            {{range $i, $tip := .ArrivingTips}}
            <li class="step-list__item">
              <span class="step-list__num step-list__num--brand">{{add $i 1}}</span>
              <div>
                <p class="font-semibold text-sm text-slate-900 dark:text-white">{{index $tip "title"}}</p>
                <p class="text-sm text-slate-600 dark:text-slate-300">{{index $tip "description"}}</p>
              </div>
            </li>
            {{end}}
          </ol>
        </div>
      </div>

      <div class="guide-card guide-card--departure">
        <div class="guide-card__header">
          <span class="guide-card__icon guide-card__icon--departure" aria-hidden="true">
            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2.5 19h19v2H2.5v-2zm19.57-9.36c-.22-.8-1.04-1.28-1.84-1.06L14.92 10.35 8.02 3.64l-1.93.51 4.14 7.17-4.97 1.33-1.97-1.54-1.45.39 2.59 4.49L21 13.42c.8-.23 1.28-1.05 1.07-1.78z"/></svg>
          </span>
          <div>
            <h2 class="font-display text-xl font-bold text-slate-900 dark:text-white">{{t .View "passengerGuideContent.departing.title"}}</h2>
            <p class="text-sm text-slate-500 dark:text-slate-400">{{t .View "passengerGuideContent.departing.subtitle"}}</p>
          </div>
        </div>
        <div class="guide-card__body">
          <ol class="step-list">
            {{range $i, $tip := .DepartingTips}}
            <li class="step-list__item">
              <span class="step-list__num step-list__num--sky">{{add $i 1}}</span>
              <div>
                <p class="font-semibold text-sm text-slate-900 dark:text-white">{{index $tip "title"}}</p>
                <p class="text-sm text-slate-600 dark:text-slate-300">{{index $tip "description"}}</p>
              </div>
            </li>
            {{end}}
          </ol>
          <div class="mt-6 flex justify-end">
            <a href="/flights" class="btn-primary">{{t .View "passengerGuideContent.ticker.viewAll"}} →</a>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-8 flex flex-wrap gap-3">
      <a href="/directory" class="link-chip">{{t .View "passengerGuideContent.arriving.directoryLink"}} →</a>
      <a href="/services" class="link-chip">{{t .View "passengerGuideContent.arriving.servicesLink"}} →</a>
      <a href="/flights" class="btn-primary">{{t .View "passengerGuideContent.ticker.viewAll"}} →</a>
    </div>
  </div>
</main>
{{template "footer" .View}}
{{template "scripts" .View}}