OpenSquawk/app/pages/flightlab/index.vue

<template>
  <div class="min-h-screen bg-[#070d1a] text-white">
    <!-- Header -->
    <header class="border-b border-white/5 bg-[#070d1a]/80 backdrop-blur">
      <div class="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-4 px-4 py-6 sm:px-6 md:px-8">
        <div class="flex items-center gap-3">
          <div class="flex h-12 w-12 items-center justify-center rounded-2xl border border-cyan-400/40 bg-cyan-500/10">
            <v-icon icon="mdi-airplane" size="26" class="text-cyan-300" />
          </div>
          <div>
            <p class="text-lg font-semibold tracking-tight">FlightLab</p>
            <p class="text-sm text-white/60">Guided cockpit experiences</p>
          </div>
        </div>
        <NuxtLink to="/" class="text-sm text-white/50 transition hover:text-white/80">
          <v-icon icon="mdi-arrow-left" size="16" class="mr-1" />
          Zurück
        </NuxtLink>
      </div>
    </header>

    <main>
      <!-- Hero -->
      <section class="relative border-b border-white/5">
        <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-cyan-500/15 via-transparent to-indigo-500/25" />
        <div class="relative z-10 mx-auto w-full max-w-screen-xl px-4 py-16 sm:px-6 md:px-8">
          <div class="max-w-3xl space-y-6">
            <span
              class="inline-flex items-center gap-2 rounded-full border border-cyan-300/40 bg-cyan-400/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-cyan-200/80"
            >
              <v-icon icon="mdi-shield-airplane" size="14" />
              FlightLab
            </span>
            <h1 class="text-3xl font-semibold leading-tight sm:text-4xl md:text-5xl">
              Fliegen verstehen.<br />
              <span class="text-cyan-300">Angst überwinden.</span>
            </h1>
            <p class="max-w-2xl text-base text-white/80 sm:text-lg">
              Schritt für Schritt durch echte Flugphasen - mit erklärenden Stimmen,
              realistischen Cockpit-Geräuschen und deinem persönlichen Tempo.
              Entwickelt für Menschen mit Flugangst, begleitet von erfahrenen Instruktoren.
            </p>
          </div>
        </div>
      </section>

      <!-- Scenarios Grid -->
      <section class="mx-auto w-full max-w-screen-xl px-4 py-12 sm:px-6 md:px-8">
        <h2 class="mb-8 text-xl font-semibold text-white/90">Verfügbare Szenarien</h2>

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <!-- Takeoff Scenario Card -->
          <div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-[#0b1328]/90 shadow-xl shadow-cyan-500/5 transition hover:border-cyan-400/30 hover:shadow-cyan-500/15">
            <!-- Card glow -->
            <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-transparent opacity-0 transition group-hover:opacity-100" />

            <div class="relative z-10 p-6">
              <!-- Icon + Badge -->
              <div class="mb-5 flex items-start justify-between">
                <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-cyan-400/40 bg-cyan-500/10">
                  <v-icon icon="mdi-airplane-takeoff" size="30" class="text-cyan-300" />
                </div>
                <span class="rounded-full border border-emerald-400/40 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-300">
                  Bereit
                </span>
              </div>

              <!-- Title + Info -->
              <h3 class="mb-2 text-xl font-semibold">{{ takeoffEddf.title }}</h3>
              <p class="mb-4 text-sm text-white/60 leading-relaxed">{{ takeoffEddf.description }}</p>

              <!-- Meta -->
              <div class="mb-6 flex flex-wrap gap-3 text-xs text-white/50">
                <span class="flex items-center gap-1.5">
                  <v-icon icon="mdi-airplane" size="14" class="text-cyan-400/60" />
                  {{ takeoffEddf.aircraft }}
                </span>
                <span class="flex items-center gap-1.5">
                  <v-icon icon="mdi-map-marker" size="14" class="text-cyan-400/60" />
                  {{ takeoffEddf.airport }}
                </span>
                <span class="flex items-center gap-1.5">
                  <v-icon icon="mdi-road" size="14" class="text-cyan-400/60" />
                  RWY {{ takeoffEddf.runway }}
                </span>
              </div>

              <!-- Actions -->
              <div class="flex flex-col gap-3">
                <NuxtLink to="/flightlab/takeoff">
                  <v-btn
                    color="primary"
                    variant="flat"
                    size="large"
                    block
                    class="rounded-xl font-semibold"
                    prepend-icon="mdi-play-circle"
                  >
                    Starten
                  </v-btn>
                </NuxtLink>
              </div>
            </div>
          </div>

          <!-- Coming Soon Card -->
          <div class="flex items-center justify-center rounded-3xl border border-dashed border-white/10 bg-[#0b1328]/40 p-6">
            <div class="text-center">
              <v-icon icon="mdi-airplane-landing" size="40" class="mb-3 text-white/20" />
              <p class="text-sm font-medium text-white/30">Weitere Szenarien</p>
              <p class="text-xs text-white/20">Demnächst verfügbar</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Medienstationen -->
      <section class="mx-auto w-full max-w-screen-xl px-4 py-12 sm:px-6 md:px-8">
        <h2 class="mb-8 text-xl font-semibold text-white/90">Medienstationen</h2>

        <NuxtLink to="/flightlab/medienstationen" class="group block max-w-md">
          <div class="flex items-center gap-4 rounded-2xl border border-white/10 bg-[#0b1328]/60 p-5 transition hover:border-cyan-400/30 hover:bg-[#0b1328]/90">
            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-cyan-400/30 bg-cyan-500/10">
              <v-icon icon="mdi-monitor-dashboard" size="24" class="text-cyan-300" />
            </div>
            <div>
              <p class="text-sm font-semibold text-white/90 group-hover:text-white">Instrumente interaktiv lernen</p>
              <p class="text-xs text-white/50">PFD, Navigation und mehr entdecken</p>
            </div>
            <v-icon icon="mdi-chevron-right" size="20" class="ml-auto text-white/30 transition group-hover:text-cyan-300" />
          </div>
        </NuxtLink>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { takeoffEddf } from '~~/shared/data/flightlab/takeoff-eddf'

definePageMeta({
  layout: false,
  middleware: ['require-auth'],
})

useHead({
  title: 'FlightLab - Fliegen verstehen',
})
</script>