[id].astro

---
import { GetFlights } from '@libs/flying';

export async function getStaticPaths() {
  const flights = await GetFlights();
  return flights.map((f) => ({ params: { id: f.id.toString() } }));
}

const { id } = Astro.params;
const flights = await GetFlights();
const flight = flights.find((f) => f.id.toString() == id);

if (!flight) throw new Error('No flight with ID found');

import BaseLayout from '../../../layouts/BaseLayout.astro';
import Navbar from '@components/Navbar.astro';
import { marked } from 'marked';
import FlightPreview from '@components/flying/FlightPreview';
import FlightStats from '@components/flying/FlightStats';
import 'mapbox-gl/dist/mapbox-gl.css';

const content = marked.parse(flight?.comments ?? '');
const pageTitle = `Flight #${flight.number} — ${flight.location ?? flight.launch?.name ?? 'Unknown'}`;
---

<BaseLayout title={pageTitle} description={`Paragliding flight on ${flight.date}`}>
  <div class="flight-page">

    <!-- Navbar -->
    <div class="pt-2">
      <Navbar />
    </div>

    <!-- Map hero with title overlay -->
    <div class="hero-map relative w-full overflow-hidden" style="height: 480px;">
      <div class="absolute inset-0">
        <FlightPreview client:only="react" flight={flight} height={480} interactive />
      </div>
      <!-- Bottom gradient overlay -->
      <div class="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black/65 to-transparent pointer-events-none" />
      <div class="absolute bottom-0 inset-x-0 px-6 py-4 pointer-events-none">
        <a href="/flying" class="text-white/60 text-xs hover:text-white/90 pointer-events-auto transition-colors">← Paragliding Logbook</a>
        <h1 class="text-white text-2xl font-bold mt-0.5 mb-0">{pageTitle}</h1>
      </div>
    </div>

    <!-- Content -->
    <div class="content-area max-w-3xl mx-auto px-6 py-6 space-y-5">

      <!-- Stats card -->
      <FlightStats client:only="react" flight={flight} />

      <!-- Notes -->
      {flight.comments && (
        <div class="notes-section">
          <p class="notes-heading">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="notes-heading-icon">
              <path d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32l8.4-8.4z" />
            </svg>
            Flight Notes
          </p>
          <div set:html={content} />
        </div>
      )}

    </div>
  </div>
</BaseLayout>

<style>
  .flight-page {
    min-height: 100vh;
    background-color: #f8f7f5;
  }

  .notes-section {
    @apply bg-white rounded-r-xl px-5 pt-3 pb-4 text-gray-600 text-sm leading-relaxed shadow-sm;
    border-left: 3px solid #fdba74;
  }

  .notes-heading {
    @apply flex items-center gap-1.5 text-xs font-semibold text-gray-400 uppercase tracking-widest mb-2 mt-0;
  }

  .notes-heading-icon {
    @apply w-3.5 h-3.5 text-orange-400 flex-shrink-0;
  }

  /* Override BaseLayout link color inside notes */
  .notes-section :global(a) {
    @apply text-orange-500;
  }

  /* Compact the action links row */
  :global(.flight-page .flex.flex-row.pb-4) {
    @apply justify-start pb-0;
  }
</style>