---
import BannerRotator from '../../components/BannerRotator.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getGiftShopImages } from '../../lib/directus';

const giftShopImages = await getGiftShopImages();
---

<BaseLayout
  title="Gift Shop"
  description="Discover Chocks Away Gift Shop at Swansea Airport, with aviation memorabilia, RAF-themed gifts, Welsh souvenirs, toys, clothing, and accessories."
>
  <section class="container prose gift-shop-page">
    <figure class="gift-shop-hero">
      <img src="/images/camain.jpg" alt="Chocks Away Gift Shop at Swansea Airport" />
    </figure>

    <div class="gift-shop-copy">
      <h1 class="section-title">Gift Shop</h1>

      <p>
        Discover Chocks Away Gift Shop at Swansea Airport, a small shop packed with unique gifts
        and aviation charm. Inspired by the airport's rich WWII heritage, you will find aviation
        memorabilia, RAF-themed gifts, Welsh souvenirs, children's toys, clothing, accessories,
        and much more.
      </p>

      <p>
        From Spitfires to dragons, cufflinks to caps, whether you are flying in, visiting the
        airport, or simply looking for the best gift or souvenir, there is something for every
        aviation lover.
      </p>

      <div class="social-follow">
        <div class="cta-row">
          <a class="button primary social-button" href="https://www.facebook.com/profile.php?id=61590636748267" target="_blank" rel="noopener noreferrer">
            <span class="facebook-mark" aria-hidden="true">f</span>
            Chocks Away Gift Shop on Facebook
          </a>
        </div>
      </div>

    </div>

    <div class="gift-shop-gallery" aria-label="Gift shop photo gallery">
      <BannerRotator images={giftShopImages} />
    </div>
      <p class="gift-shop-disclaimer">
        Chocks Away Gift Shop is an independent business based at Swansea Airport and is not
        affiliated with airport management.
      </p>

  </section>
</BaseLayout>

<style>
  .gift-shop-page {
    display: grid;
    gap: 1.5rem;
  }

  .gift-shop-hero {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    aspect-ratio: 21 / 9;
    background: var(--line);
  }

  .gift-shop-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .gift-shop-copy {
    display: grid;
    gap: 0.85rem;
  }

  .gift-shop-copy p {
    margin: 0;
  }

  .gift-shop-gallery {
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--line);
  }

  .gift-shop-gallery :global(.banner-rotator) {
    min-height: clamp(16rem, 42vw, 30rem);
  }

  .gift-shop-disclaimer {
    margin-top: 0.35rem !important;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 700;
  }

  .social-follow {
    display: grid;
    gap: 0.7rem;
  }

  .social-button {
    gap: 0.55rem;
  }

  .facebook-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: #1877f2;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-0.02em);
  }

  @media (max-width: 760px) {
    .gift-shop-hero {
      aspect-ratio: 16 / 9;
    }
  }
</style>