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

<BaseLayout title="Drones" description="Drone operating guidance and coordination process for Swansea Airport.">
  <script is:inline>
    document.documentElement.classList.add('js');
  </script>

  <section class="container prose drones-page">
    <figure class="drone-banner" data-drone-banner>
      <img src="/images/avata2.jpg" alt="Drone aerial view over Swansea Airport" />
    </figure>

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

    <p class="reveal-item" data-reveal>
      Firstly, please be assured that Swansea Airport likes to help our drone flying colleagues
      where we possibly can.
    </p>

    <p class="reveal-item" data-reveal>
      You are likely aware that Swansea Airport has a Flight Restriction Zone (FRZ) and two Runway Protection Zones (RPZs) that are in place to protect the public and aircraft from the risk of an accident. 
    </p>

    <p class="reveal-item" data-reveal>
      <img src="/images/FRZ.png" alt="Swansea Airport Flight Restriction Zone and Runway Protection Zones map" loading="lazy" />
    </p>

    <p class="reveal-item" data-reveal>
      It is a requirement to obtain permission from Swansea Airport before flying a drone within the FRZ or RPZs. This is to ensure that we can coordinate your flight with any other aircraft that may be operating in the area, and to ensure that you are aware of any operational considerations that may affect your flight.
    </p>

    <p class="reveal-item" data-reveal>
      <center><a class="button primary" href="/drone-flight-request/">Request a Drone Flight</a></center>
    </p>

    <p class="reveal-item" data-reveal>
      We will then reply with any operational considerations and, if required, approve or decline a
      flight if it is within the FRZ or RPZs. We are not in the habit of declining, so please do submit your request, and we will do our best to accommodate you.
    </p>

    <p class="reveal-item" data-reveal>
      After this, all we ask is that on the day, you call us in tower on
      <a href="tel:01792687042">01792 687042</a> twenty minutes prior to launch, so we can give
      you any operational updates and also broadcast a warning on our frequency to any aircraft.
    </p>

    <h2 class="reveal-item" data-reveal>Parachuting</h2>
    <p class="reveal-item" data-reveal>
      Parachuting tends to take place Friday to Sunday from Spring to Winter. This can involve free
      fall descents from 15,000' AMSL. We recommend avoiding these times due to the requirement to
      ensure the safety of descending skydivers.
    </p>
  </section>
</BaseLayout>

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

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

  .drone-banner img {
    display: block;
    width: 100%;
    height: calc(100% + 6rem);
    margin-top: -3rem;
    object-fit: cover;
    transform: translate3d(0, var(--drone-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) {
    .drone-banner {
      aspect-ratio: 16 / 9;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .drone-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-drone-banner]');
  const revealItems = Array.from(document.querySelectorAll('[data-reveal]'));

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

    const updateBanner = () => {
      if (!banner) 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('--drone-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>
