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

<BaseLayout title="History" description="A brief history of Swansea Airport, formerly RAF Fairwood Common.">
  <script is:inline>
    document.documentElement.classList.add('js');
  </script>

  <section class="container prose history-page">
    <figure class="history-banner" data-history-banner>
      <img src="/images/chipmunk.jpeg" alt="Historic aircraft at Swansea Airport" />
    </figure>

    <p class="eyebrow reveal-item" data-reveal>About</p>
    <h1 class="section-title reveal-item" data-reveal>History</h1>

    <p class="reveal-item" data-reveal>
      Swansea Airport stands on a site with deep aviation roots. Before operating as Swansea
      Airport, the airfield was known as RAF Fairwood Common.
    </p>

    <p class="reveal-item" data-reveal>
      During the wartime period, Fairwood Common played an operational role as part of the wider
      air defence and training network. Its location on the Gower Peninsula gave it a strategic
      position, and over time the airfield developed infrastructure that shaped its later civil use.
    </p>

    <p class="reveal-item" data-reveal>
      In the post-war years, the site evolved from military use into a civilian aerodrome. That
      transition reflected the broader story of many UK airfields, where former RAF stations became
      local centres for flight training, private aviation, and community flying activity.
    </p>

    <p class="reveal-item" data-reveal>
      Today, Swansea Airport continues that legacy. While the role of the airfield has changed, its
      connection to aviation history remains central to its identity, linking RAF Fairwood Common's
      past with present-day operations serving Swansea and the surrounding region.
    </p>
  </section>
</BaseLayout>

<style>
  .history-banner {
    --history-parallax: 0px;

    margin: 0 0 1.5rem;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    aspect-ratio: 21 / 9;
    background: var(--line);
  }

  .history-banner img {
    display: block;
    width: 100%;
    height: calc(100% + 6rem);
    margin-top: -3rem;
    object-fit: cover;
    transform: translate3d(0, var(--history-parallax), 0) scale(1.03);
    will-change: transform;
  }

  :global(.js) .reveal-item {
    opacity: 0;
    transform: translateY(1.4rem);
    transition:
      opacity 680ms ease,
      transform 680ms ease;
  }

  :global(.js) .reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 640px) {
    .history-banner {
      aspect-ratio: 16 / 9;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .history-banner img,
    :global(.js) .reveal-item {
      transform: none;
      transition: none;
    }

    :global(.js) .reveal-item {
      opacity: 1;
    }
  }
</style>

<script>
  const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
  const banner = document.querySelector('[data-history-banner]');
  const revealItems = Array.from(document.querySelectorAll('[data-reveal]'));

  if (!motionQuery.matches) {
    let ticking = false;

    const updateBanner = () => {
      if (!(banner instanceof HTMLElement)) return;

      const rect = banner.getBoundingClientRect();
      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
      const progress = (viewportHeight - rect.top) / (viewportHeight + rect.height);
      const clampedProgress = Math.min(Math.max(progress, 0), 1);
      const offset = (clampedProgress - 0.5) * 64;

      banner.style.setProperty('--history-parallax', `${offset}px`);
      ticking = false;
    };

    const requestBannerUpdate = () => {
      if (ticking) return;
      ticking = true;
      window.requestAnimationFrame(updateBanner);
    };

    updateBanner();
    window.addEventListener('scroll', requestBannerUpdate, { passive: true });
    window.addEventListener('resize', requestBannerUpdate);

    const revealObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add('is-visible');
          revealObserver.unobserve(entry.target);
        });
      },
      { threshold: 0.16, rootMargin: '0px 0px -8% 0px' }
    );

    revealItems.forEach((item) => revealObserver.observe(item));
  } else {
    revealItems.forEach((item) => item.classList.add('is-visible'));
  }
</script>
