---
import BaseLayout from '../../layouts/BaseLayout.astro';

const gaCharges = [
  ['Microlight', '£10', 'Free of charge', '£10', '£20'],
  ['Standard GA Single', '£15', 'Free of charge', '£15', '£30'],
  ['GA Light Twin', '£25', 'Free of charge', '£15', '£30'],
  ['2500kg - 3000kg', '£60', 'Free of charge', '£30', 'Price on request'],
  ['3001kg - 4000kg', '£80', '5 hours free, £5 after', '£45', 'Price on request'],
  ['4001kg - 5000kg', '£180', '5 hours free, £10 after', '£60', 'Price on request'],
];

const touchAndGoCharges = [
  ['Microlight', '£5', '£10'],
  ['Standard GA Single', '£10', '£30'],
  ['GA Light Twin', '£15', '£50'],
  ['2500kg - 3000kg', '£30', '£120'],
  ['3001kg - 4000kg', '£40', '£160'],
  ['4001kg - 5000kg', '£80', '£360'],
];

const businessCharges = [
  ['4001kg - 5000kg', '£200', '5 hours free, £15 after', '£80'],
  ['5001kg - 6000kg', '£220', '5 hours free, £15 after', '£80'],
  ['6001kg - 7000kg', '£240', '5 hours free, £15 after', '£80'],
  ['7001kg - 8000kg', '£265', '4 hours free, £15 after', '£80'],
  ['8001kg - 9000kg', '£290', '4 hours free, £20 after', '£100'],
  ['9001kg - 10000kg', '£330', '4 hours free, £20 after', '£100'],
  ['10001kg - 11000kg', '£360', '£20', '£120'],
  ['11001kg - 12000kg', '£390', '£20', '£120'],
  ['12001kg - 13000kg', '£420', '£25', '£140'],
  ['13001kg - 14000kg', '£450', '£25', '£140'],
  ['14001kg - 15000kg', '£480', '£25', '£140'],
  ['15001kg - 16000kg', '£560', '£30', '£180'],
  ['16001kg - 17000kg', '£640', '£30', '£180'],
  ['17001kg - 18000kg', '£740', '£30', '£180'],
];

const additionalCharges = [
  ['Handling charges', 'Up to £60, price on request', 'Includes marshalling, catering, hotel and transport organisation, and use of crew room if available.'],
  ['Out of hours', '£130', 'Per hour required.'],
  ['Passenger loading', '£5 per passenger', 'Aircraft up to 5000kg.'],
  ['Passenger loading', '£8 per passenger', 'Aircraft between 5001kg and 10000kg.'],
  ['Passenger loading', '£10 per passenger', 'Aircraft 10001kg and above.'],
  ['Porterage charges', 'On request', 'Assistance with baggage or cargo from or to the aircraft.'],
  ['Runway closure', '£50', 'At management discretion following incident or accident.'],
  ['Drones', '£25', 'Commercial drones need 2 days notice before flight and a permit.'],
];

const gaHeaders = ['Type', 'Landing fee', 'Daytime parking', 'Overnight parking outside', 'Overnight parking hangar'];
const touchAndGoHeaders = ['Type', 'Single', 'Unlimited'];
const businessHeaders = ['MTOW', 'Landing fee', 'Daytime parking', 'Overnight parking'];
const additionalHeaders = ['Charge', 'Price', 'Notes'];
---

<BaseLayout title="Fees and Charges" description="Swansea Airport landing, parking, handling, and related charges.">
  <section class="container fees-page">
    <p class="eyebrow">About</p>
    <h1 class="section-title">Fees and Charges</h1>
    <p class="section-copy">Prices are based on maximum take-off weight (MTOW) unless otherwise stated.</p>

    <section class="fee-section">
      <h2>General Aviation</h2>
      <div class="fee-table-wrap">
        <table class="fee-table">
          <thead>
            <tr>
              {gaHeaders.map((header) => <th scope="col">{header}</th>)}
            </tr>
          </thead>
          <tbody>
            {gaCharges.map((row) => (
              <tr>
                {row.map((cell, index) => <td data-label={gaHeaders[index]}>{cell}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>

    <section class="fee-section">
      <h2>Touch and Go's</h2>
      <div class="fee-table-wrap compact">
        <table class="fee-table">
          <thead>
            <tr>
              {touchAndGoHeaders.map((header) => <th scope="col">{header}</th>)}
            </tr>
          </thead>
          <tbody>
            {touchAndGoCharges.map((row) => (
              <tr>
                {row.map((cell, index) => <td data-label={touchAndGoHeaders[index]}>{cell}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>

    <section class="fee-section">
      <h2>GA Notes</h2>
      <ul>
        <li>Hangarage parking is subject to availability.</li>
        <li>Daytime parking is 0900-1700 local.</li>
        <li>Overnight parking is 1700-0900 local.</li>
        <li>GA aircraft departing after hours will not be subject to additional fees.</li>
        <li>Handling is free of charge up to 2500kg.</li>
        <li>Aircraft above 2500kg in the GA category may be charged up to £60 for handling.</li>
        <li>Other prices are by request.</li>
      </ul>
    </section>

    <section class="fee-section">
      <h2>Business and Corporate Aviation</h2>
      <div class="fee-table-wrap">
        <table class="fee-table">
          <thead>
            <tr>
              {businessHeaders.map((header) => <th scope="col">{header}</th>)}
            </tr>
          </thead>
          <tbody>
            {businessCharges.map((row) => (
              <tr>
                {row.map((cell, index) => <td data-label={businessHeaders[index]}>{cell}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <ul>
        <li>Hangarage parking is subject to availability.</li>
        <li>Daytime parking is 0900-1700 local.</li>
        <li>Overnight parking is 1700-0900 local.</li>
        <li>Aircraft departing out of hours will be charged £130 per hour.</li>
        <li>Aircraft may be charged for handling services.</li>
      </ul>
    </section>

    <section class="fee-section">
      <h2>Handling and Additional Charges</h2>
      <div class="fee-table-wrap">
        <table class="fee-table">
          <thead>
            <tr>
              {additionalHeaders.map((header) => <th scope="col">{header}</th>)}
            </tr>
          </thead>
          <tbody>
            {additionalCharges.map((row) => (
              <tr>
                {row.map((cell, index) => <td data-label={additionalHeaders[index]}>{cell}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  </section>
</BaseLayout>

<style>
  .fees-page {
    display: grid;
    gap: 1.25rem;
  }

  .fee-section {
    padding-block: 0.6rem;
  }

  .fee-section h2 {
    margin: 0 0 0.8rem;
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 800;
  }

  .fee-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-block: 0.75rem 1rem;
  }

  .fee-table {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 24px rgba(16, 34, 51, 0.08);
  }

  .fee-table-wrap.compact .fee-table {
    min-width: 28rem;
  }

  .fee-table thead {
    background: linear-gradient(180deg, rgba(11, 79, 122, 0.14), rgba(29, 118, 184, 0.09));
  }

  .fee-table th,
  .fee-table td {
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }

  .fee-table th {
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .fee-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.62);
  }

  .fee-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .fee-section ul {
    margin-top: 0.6rem;
  }

  @media (max-width: 700px) {
    .fees-page {
      gap: 1rem;
    }

    .fee-section {
      padding-block: 0.35rem;
    }

    .fee-table-wrap {
      overflow: visible;
    }

    .fee-table,
    .fee-table tbody,
    .fee-table tr,
    .fee-table td {
      display: block;
      width: 100%;
    }

    .fee-table {
      min-width: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .fee-table-wrap.compact .fee-table {
      min-width: 0;
    }

    .fee-table thead {
      display: none;
    }

    .fee-table tbody {
      display: grid;
      gap: 0.75rem;
    }

    .fee-table tr {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 10px 22px rgba(16, 34, 51, 0.07);
    }

    .fee-table tbody tr:nth-child(even) {
      background: rgba(255, 255, 255, 0.88);
    }

    .fee-table td {
      display: grid;
      grid-template-columns: minmax(8rem, 0.9fr) minmax(0, 1.1fr);
      gap: 0.75rem;
      padding: 0.68rem 0.85rem;
      border-bottom: 1px solid var(--line);
      overflow-wrap: anywhere;
    }

    .fee-table td:first-child {
      display: block;
      padding: 0.85rem;
      background: linear-gradient(180deg, rgba(11, 79, 122, 0.12), rgba(29, 118, 184, 0.07));
      color: var(--text);
      font-weight: 800;
    }

    .fee-table td:first-child::before {
      content: none;
    }

    .fee-table td:last-child {
      border-bottom: 0;
    }

    .fee-table td::before {
      content: attr(data-label);
      color: var(--brand);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      line-height: 1.25;
      text-transform: uppercase;
    }
  }

  @media (max-width: 420px) {
    .fee-table td {
      grid-template-columns: 1fr;
      gap: 0.2rem;
    }
  }
</style>
