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

const cafeImages = await getCafePageImages();
---

<BaseLayout title="Cafe" description="A friendly, dog-friendly cafe at Swansea Airport.">
  <section class="container prose cafe-page">
    <div class="cafe-copy">
      <h1 class="section-title">The Whirlybird Cafe</h1>
      <p>
        The cafe at Swansea Airport is a relaxed, welcoming spot for pilots, visitors, walkers,
        families, and anyone passing through the airfield. It is friendly, informal, and dog
        friendly, making it an easy place to stop for a drink, a bite to eat, and a view of the
        airfield.
      </p>
      <p>
        Whether you are meeting friends, watching the aircraft, or taking a break while exploring
        Fairwood Common and the Gower, the cafe offers a comfortable place to pause and enjoy the
        airport atmosphere.
      </p>
      <p>
        On Thursday to Sunday evenings, the cafe transforms into Thai Bach Express, serving Thai
        food for delivery and dining in.
        <a href="https://thaibach.co.uk/" target="_blank" rel="noopener noreferrer">Visit Thai Bach</a>.
      </p>
      <div class="social-follow">
        <div class="cta-row">
          <a class="button primary social-button" href="https://www.facebook.com/SwanseaAirportCafe" target="_blank" rel="noopener noreferrer">
            <span class="facebook-mark" aria-hidden="true">f</span>
            Whirlybird Cafe on Facebook
          </a>
          <a class="button primary social-button" href="https://www.facebook.com/p/Thai-Bach-Express-61560037651153/" target="_blank" rel="noopener noreferrer">
            <span class="facebook-mark" aria-hidden="true">f</span>
            Thai Bach Express on Facebook
          </a>
        </div>
      </div>
    </div>

    <div class="cafe-gallery" aria-label="Cafe photo gallery">
      <BannerRotator images={cafeImages} />
    </div>
  </section>
</BaseLayout>

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

  .cafe-gallery {
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

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

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

  .social-follow p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
  }

  .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);
  }
</style>
