<div class="w-full page bg-white">
  <!-- Header Section -->
  <div class="bg-black text-white px-6 py-4 flex items-center justify-between">
    <div class="flex items-center">
      <div class="text-lg font-bold mr-2">ISHP</div>
      <div class="w-6 h-4 bg-cyan-400 mr-8"></div>
    </div>
    <div class="flex space-x-8 text-sm">
      <span>Name: {{ patient_name | default('Keirstyn Moran') }}</span>
      <span>Age: {{ age | default('34') }}</span>
      <span>Height: {{ height | default('5\'4"') }}</span>
      <span>Weight: {{ weight | default('123lbs') }}</span>
      <span>Focus: {{ focus | default('Endurance') }}</span>
    </div>
  </div>

  <!-- Main Content -->
  <div class="px-8 py-6">
    <!-- Page Title -->
    <h1 class="text-4xl font-bold text-black mb-8">Overview</h1>
    
    <!-- Top Row: Metabolic and Respiratory -->
    <div class="grid grid-cols-2 gap-8 mb-8">
      <!-- Metabolic Section -->
      <div class="border border-gray-300 rounded-lg p-4">
        <div class="flex items-center mb-4">
          <div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
          <h2 class="text-xl font-bold">Metabolic</h2>
        </div>
        
        <div class="grid grid-cols-2 gap-2 text-sm">
          <!-- Headers -->
          <div class="bg-gray-200 p-2 font-semibold border">Resting Metabolic Rate</div>
          <div class="bg-gray-200 p-2 font-semibold border">Active Metabolic Rate</div>
          
          <!-- Row 1 -->
          <div class="bg-red-200 p-2 border">Fat/Carbohydrate Ratio</div>
          <div class="bg-red-200 p-2 border">Metabolic Efficiency Low Intensity</div>
          
          <!-- Row 2 -->
          <div class="bg-gray-200 p-2 border">Metabolism</div>
          <div class="bg-yellow-200 p-2 border">Metabolic Efficiency High Intensity</div>
          
          <!-- Row 3 -->
          <div class="bg-yellow-200 p-2 border">Breathing Frequency</div>
          <div class="bg-white p-2 border"></div>
          
          <!-- Row 4 -->
          <div class="bg-red-200 p-2 border">Breath Volume</div>
          <div class="bg-white p-2 border"></div>
          
          <!-- Row 5 -->
          <div class="bg-gray-200 p-2 border">Heart Rate</div>
          <div class="bg-white p-2 border"></div>
        </div>
      </div>

      <!-- Respiratory Section -->
      <div class="border border-gray-300 rounded-lg p-4">
        <div class="flex items-center mb-4">
          <div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
          <h2 class="text-xl font-bold">Respiratory</h2>
        </div>
        
        <div class="space-y-2 text-sm">
          <div class="bg-gray-200 p-2 font-semibold border">Lung Function</div>
          <div class="bg-green-200 p-2 border">Lung Capacity</div>
          <div class="bg-yellow-200 p-2 border">Lung Capability</div>
          <div class="bg-red-200 p-2 border">Breathing Frequency Zones</div>
        </div>
      </div>
    </div>

    <!-- Middle Row: Cardiovascular and Strength -->
    <div class="grid grid-cols-2 gap-8 mb-8">
      <!-- Cardiovascular Section -->
      <div class="border border-gray-300 rounded-lg p-4">
        <div class="flex items-center mb-4">
          <div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
          <h2 class="text-xl font-bold">Cardiovascular</h2>
        </div>
        
        <div class="space-y-2 text-sm">
          <div class="bg-gray-200 p-2 font-semibold border">Active Metabolic Rate</div>
          <div class="bg-green-200 p-2 border">Aerobic Health (VO2 Max)</div>
          <div class="bg-red-200 p-2 border">Training Zones</div>
          <div class="bg-red-200 p-2 border">Metabolic Efficiency (VO2 Pulse)</div>
        </div>
      </div>

      <!-- Strength Section -->
      <div class="border border-gray-300 rounded-lg p-4">
        <div class="flex items-center mb-4">
          <div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
          <h2 class="text-xl font-bold">Strength</h2>
        </div>
        
        <div class="space-y-2 text-sm">
          <div class="bg-gray-200 p-2 font-semibold border">Strength - High Intensity</div>
          <div class="bg-green-200 p-2 border">CO2/O2 (RER)</div>
          <div class="bg-green-200 p-2 border">Heart Rate</div>
          <div class="bg-green-200 p-2 border">Breath Frequency</div>
          <div class="bg-yellow-200 p-2 border">Muscle Efficiency</div>
        </div>
      </div>
    </div>

    <!-- Bottom Row: Recovery -->
    <div class="grid grid-cols-2 gap-8">
      <!-- Recovery Section -->
      <div class="border border-gray-300 rounded-lg p-4">
        <div class="flex items-center mb-4">
          <div class="w-8 h-8 bg-gray-400 rounded-full mr-3"></div>
          <h2 class="text-xl font-bold">Recovery</h2>
        </div>
        
        <div class="space-y-2 text-sm">
          <div class="bg-gray-200 p-2 font-semibold border">Active Metabolic Rate</div>
          <div class="bg-gray-200 p-2 border flex justify-between items-center">
            <span>Heart Rate</span>
            <span class="bg-green-400 text-white px-2 py-1 rounded font-bold">44</span>
          </div>
          <div class="bg-green-200 p-2 border">Metabolic (CO2)</div>
          <div class="bg-gray-200 p-2 border">Muscle Oxygen</div>
          <div class="bg-red-200 p-2 border">Breath Frequency</div>
        </div>
      </div>

      <!-- Empty space for balance -->
      <div></div>
    </div>
  </div>

  <!-- Footer Section -->
  <div class="absolute bottom-0 left-0 right-0 bg-black text-white px-6 py-3">
    <div class="flex justify-between items-center text-sm">
      <div class="flex space-x-8">
        <span>CONTACT: {{ contact_email | default('info@ishplabs.com') }}</span>
        <span>WEBSITE: {{ website | default('www.ishplabs.com') }}</span>
        <span>SOCIAL: {{ social | default('@ishplabs') }}</span>
      </div>
      <div class="bg-white text-black font-bold px-3 py-1 text-lg">
        {{ page_number | default('3') }}
      </div>
    </div>
  </div>
</div>
