---
import { site } from '../lib/site';
import '../styles/global.css';

type Props = {
  title?: string;
  description?: string;
};

const { title, description = 'A fast, static, operational website for Swansea Airport.' } = Astro.props as Props;
const pageTitle = title ? `${title} · ${site.name}` : site.name;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content={description} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <header class="topbar">
      <div class="container topbar-inner">
        <a class="brand brand-mobile" href="/"><img src="/images/logo-text.webp" alt="Swansea Airport" /></a>
        <details class="mobile-nav">
          <summary aria-label="Main menu">
            <span class="mobile-nav-icon" aria-hidden="true"></span>
            <span>Menu</span>
          </summary>
          <div class="mobile-nav-panel">
            {site.navigation.map((item) => (
              item.children ? (
                <details class="mobile-subnav">
                  <summary>{item.label}</summary>
                  <div class="mobile-subnav-panel">
                    <a href={item.href}>Overview</a>
                    {item.children.map((child) => (
                      <a href={child.href}>{child.label}</a>
                    ))}
                  </div>
                </details>
              ) : (
                <a href={item.href}>{item.label}</a>
              )
            ))}
          </div>
        </details>
      </div>
    </header>

    <nav class="navshell" aria-label="Primary">
      <div class="container nav-inner">
        <a class="brand" href="/"><img src="/images/logo-text.webp" alt="Swansea Airport" /></a>

        <div class="nav-links">
          {site.navigation.map((item) => (
            item.children ? (
              <div class="nav-item nav-dropdown">
                <a href={item.href}>{item.label}</a>
                <div class="nav-dropdown-menu">
                  {item.children.map((child) => (
                    <a href={child.href}>{child.label}</a>
                  ))}
                </div>
              </div>
            ) : (
              <a href={item.href}>{item.label}</a>
            )
          ))}
        </div>
      </div>
    </nav>

    <main>
      <slot />
    </main>

    <footer class="site-footer">
      <div class="container footer-grid">
        <section>
          <img class="footer-logo" src="/images/swansea.webp" alt="Swansea Airport logo" loading="lazy" />
          <p class="eyebrow">Address</p>
          <p>{site.address}</p>
        </section>
        <section>
          <p class="eyebrow">Phone</p>
          <p><a href={`tel:${site.phone.replace(/\s+/g, '')}`}>{site.phone}</a></p>
          <p class="eyebrow">Email</p>
          <p><a href="mailto:tower@swansea-airport.wales">tower@swansea-airport.wales</a></p>
        </section>
        <section>
          <p class="eyebrow">Contact</p>
          <p>For public contacts and general enquiries, use the contact page.</p>
          <p><a class="footer-link" href="/contact/">Contact Swansea Airport</a></p>
        </section>
      </div>
    </footer>
  </body>
</html>
