---
import BaseLayout from '../layouts/BaseLayout.astro';
import BannerRotator from '../components/BannerRotator.astro';
import FuelPricesWidget from '../components/FuelPricesWidget.astro';
import EventsList from '../components/EventsList.astro';
import FacebookWidget from '../components/FacebookWidget.astro';
import NewsFeed from '../components/NewsFeed.astro';
import { getUpcomingEvents } from '../lib/events';
import { getEvents, getFuelPrices, getHomepageBannerImages, getHomepageVolunteerImages, getNews } from '../lib/directus';

const [fuelPrices, events, news, bannerImages, volunteerImages] = await Promise.all([
  getFuelPrices(),
  getEvents(),
  getNews(),
  getHomepageBannerImages(),
  getHomepageVolunteerImages(),
]);

const upcomingEvents = getUpcomingEvents(events);
const highlightedEvents = upcomingEvents.filter((event) => event.is_featured);
const featuredEvents = (highlightedEvents.length > 0 ? highlightedEvents : upcomingEvents).slice(0, 3);
const latestNews = news.slice(0, 3);

const businessPromos = [
  {
    name: 'Go Skydive',
    href: 'https://www.goskydive.com/dropzone/skydive-centre-swansea/',
    logo: '/images/goskydive.png',
    alt: 'Go Skydive logo',
    description: 'Tandem skydiving from Swansea',
  },
  {
    name: 'Gower Flight Centre',
    href: 'https://www.gowerflightcentre.co.uk/',
    logo: '/images/gowerflightcentre.jpg',
    alt: 'Gower Flight Centre logo',
    description: 'Air experiences, and pilot training',
  },
  {
    name: 'Fly A Spitfire',
    href: 'https://flyaspitfire.com/',
    logo: '/images/flyaspitfire.png',
    alt: 'Fly A Spitfire logo',
    description: 'Spitfire flights',
  },
  {
    name: 'AeroSuperBatics',
    href: 'https://www.aerosuperbatics.com/',
    logo: '/images/aerosuperbatics.jpg',
    alt: 'AeroSuperBatics logo',
    description: 'Wingwalking and aerobatic entertainment flights',
  },
];
---

<BaseLayout title="Home" description="Fast, clear airfield information for pilots and visitors.">
  <BannerRotator images={bannerImages} randomizeAfterFirst />

  <section class="hero">
    <div class="container hero-stack">
      <div class="hero-panel">
        <center><h1 class="hero-title">Welcome to Swansea Airport</h1></center>
        <p class="hero-copy">
          Serving Swansea City and the Swansea Bay Region. Located on the stunning Gower Peninsula, just 15 minutes from Swansea City Centre - Swansea Airport is perfectly located for quick and convenient access to Swansea City, the vast, beautiful Gower Peninsula Area of Outstanding Natural Beauty and the rest of South & West Wales.
        </p>
        <p class="hero-copy">
          There are a whole host of aviation activities at Swansea Airport. If you're looking to learn to fly, or charter an aircraft, Swansea is more convenient and more cost effective than other Welsh and West of England airports. No queues and no expensive handling fees.
        </p>
        <div class="cta-row">
          <a class="button primary" href="/pilot-info/">Pilot Info</a>
          <a class="button primary" href="/ppr/">Request PPR</a>
        </div>
      </div>
    </div>
  </section>

  <div class="container stack">
    <FuelPricesWidget fuelPrices={fuelPrices} moreInfoHref="/pilot-info/#fuel" />
  </div>

  <section class="container business-promo">
    <div class="section-head">
      <div>
        <h2 class="section-title">Experience, training, and adventure on your doorstep</h2>
      </div>
    </div>
    <div class="business-grid">
      {businessPromos.map((business) => (
        <a class="business-card" href={business.href} target="_blank" rel="noopener noreferrer">
          <span class="business-logo-frame">
            <img class="business-logo" src={business.logo} alt={business.alt} loading="lazy" />
          </span>
          <div class="business-copy">
            <h3>{business.name}</h3>
            <p>{business.description}</p>
            <span class="business-link">Visit website</span>
          </div>
        </a>
      ))}
    </div>
  </section>

  <section class="aviation-base">
    <div class="container aviation-base-inner">
      <figure class="aviation-base-image">
        <img src="/images/runway.jpeg" alt="Runway view at Swansea Airport" loading="lazy" />
      </figure>
      <div class="aviation-base-copy">
        <p class="eyebrow">Aviation businesses</p>
        <h2 class="section-title">Base your next chapter at Swansea Airport</h2>
        <p>
          With the new operators having secured a long-term lease, Swansea Airport is entering a
          more stable period for investment, growth, and aviation activity.
        </p>
        <p>
          We are keen to hear from interested parties with aviation businesses who want to explore
          basing themselves at Swansea, from flight training and maintenance to aircraft services,
          experiences, hangarage, and complementary airfield operations.
        </p>
        <div class="aviation-base-actions">
          <a class="button primary" href="/contact/">Start a conversation</a>
          <a class="button secondary" href="/about/">Learn about the airport</a>
        </div>
      </div>
    </div>
  </section>

  <section class="container story-flow">
    <article class="story-copy">
      <p class="eyebrow">Flying from Swansea</p>
      <h2 class="section-title">Run by passionate volunteers</h2>
      <p>
        Swansea Airport is mainly run by volunteers who are passionate about aviation and the local area. The team is dedicated to providing a safe, welcoming, and enjoyable experience for pilots, visitors, and aviation enthusiasts alike.
      </p>
      <p>
        We are always looking for new volunteers to join our team. Whether you have experience in aviation or simply a love for flying, there are many ways to get involved and help support the airport.
      </p>
      <div class="cta-row">
        <a class="button primary" href="/about/volunteering/">Volunteer with us</a>
      </div>
    </article>

    <figure class="story-image">
      <BannerRotator images={volunteerImages} />
    </figure>
  </section>

  <div class="container stack">
    <EventsList events={featuredEvents} title="Upcoming events"  />
    <NewsFeed news={latestNews} />
    <FacebookWidget />
  </div>
</BaseLayout>

<style>
  .aviation-base {
    margin: 1.5rem 0;
    padding: 2.5rem 0;
    border-block: 1px solid var(--line);
    background:
      linear-gradient(135deg, rgba(11, 79, 122, 0.09), transparent 42%),
      linear-gradient(315deg, rgba(246, 181, 56, 0.16), transparent 36%);
  }

  .aviation-base-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }

  .aviation-base-image {
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
  }

  .aviation-base-image img {
    width: 100%;
    min-height: clamp(18rem, 28vw, 25rem);
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .aviation-base .section-title {
    max-width: 18ch;
  }

  .aviation-base-copy {
    max-width: 58ch;
  }

  .aviation-base-copy p:last-child {
    margin-bottom: 0;
  }

  .aviation-base-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
    margin-top: 1.2rem;
  }

  @media (max-width: 860px) {
    .aviation-base-inner {
      grid-template-columns: 1fr;
    }
  }
</style>
