- function ms(v) { return v != null ? v.toFixed(0)+' ms' : '—'; }
- const rows = [
-   ['Page Load Time', job.page_load_time],
-   ['Fully Loaded', job.fully_loaded],
-   ['DOM Content Loaded', job.dom_content_loaded],
-   ['DOM Interactive', job.dom_interactive],
-   ['Speed Index', job.speed_index],
-   ['First Visual Change', job.first_visual_change],
-   ['Last Visual Change', job.last_visual_change],
-   ['Visual Complete 85%', job.visual_complete_85],
-   ['Perceptual Speed Index', job.perceptual_speed_index],
-   ['Front End Time', job.front_end_time],
-   ['Back End Time', job.back_end_time],
-   ['Max Potential FID', job.max_potential_fid],
- ]

div(class='bg-white border border-gray-200 rounded-xl p-5')
  h2(class='text-base font-semibold mb-4') Navigation & Visual Timings
  div(class='grid grid-cols-2 sm:grid-cols-3 gap-2')
    each row in rows
      div(class='bg-gray-50 rounded-lg px-3 py-2 flex justify-between items-center')
        span(class='text-xs text-gray-500')= row[0]
        span(class='text-sm font-semibold')= ms(row[1])