<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title><?= !empty($pageTitle) ? htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') : "ThrillSense" ?></title>
  <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">

<?php if ($_SERVER['REQUEST_URI'] === '/'): ?>
  <link rel="preload" as="image" href="/assets/hero.jpg">
<?php endif; ?>

  <!-- SEO Meta -->
  <?php if (!empty($metaDescription)): ?>
    <meta name="description" content="<?= htmlspecialchars($metaDescription, ENT_QUOTES, 'UTF-8') ?>">
  <?php endif; ?>

  <?php if (!empty($canonicalUrl)): ?>
    <link rel="canonical" href="<?= htmlspecialchars($canonicalUrl, ENT_QUOTES, 'UTF-8') ?>">
  <?php endif; ?>

  <!-- Open Graph / Social Sharing -->
  <?php if (!empty($pageTitle)): ?>
    <meta property="og:title" content="<?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?>">
  <?php endif; ?>

  <?php if (!empty($metaDescription)): ?>
    <meta property="og:description" content="<?= htmlspecialchars($metaDescription, ENT_QUOTES, 'UTF-8') ?>">
  <?php endif; ?>

  <?php if (!empty($featuredImage)): ?>
    <meta property="og:image" content="https://www.thrillsense.com<?= htmlspecialchars($featuredImage, ENT_QUOTES, 'UTF-8') ?>">
  <?php endif; ?>

  <?php if (!empty($canonicalUrl)): ?>
    <meta property="og:url" content="<?= htmlspecialchars($canonicalUrl, ENT_QUOTES, 'UTF-8') ?>">
  <?php endif; ?>

  <meta property="og:type" content="article">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />

  <?= $extra_head ?? '' ?>
  <link rel="stylesheet" href="/styles/style.css">
</head>

<body class="bg-light text-white">
  <nav class="navbar navbar-expand-lg navbar-dark bg-transparent position-absolute w-100 z-3 px-4">
    <a class="navbar-brand d-flex align-items-center" href="/">
      <img src="/assets/thrillsense-sm.png" height="50" alt="ThrillSense" />
    </a>

    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
            aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="custom-toggler">
        <span class="line line1"></span>
        <span class="line line2"></span>
        <span class="line line3"></span>
      </span>
    </button>

    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto align-items-center">

        <?php foreach (['Home', 'News', 'Articles', 'Parks', 'Guides'] as $item): ?>
          <?php
            $url = '#';

            if ($item === 'News') {
              $url = '/news';
            } elseif ($item === 'Home') {
              $url = '/';
            } elseif ($item === 'Parks') {
              $url = '/parks';
            } elseif ($item === 'Articles') {
              $url = '/articles';
            } elseif ($item === 'Guides') {
              $url = '/guides';
            }
          ?>

          <li class="nav-item">
            <a class="nav-link" href="<?= htmlspecialchars($url, ENT_QUOTES, 'UTF-8') ?>">
              <?= htmlspecialchars($item, ENT_QUOTES, 'UTF-8') ?>
            </a>
          </li>
        <?php endforeach; ?>

        <li class="nav-item">
          <a class="nav-link" href="/contact">
            Contact
          </a>
        </li>

        <li class="nav-item d-lg-none">
          <a class="nav-link" href="/search">
            Search
          </a>
        </li>

        <li class="nav-item d-none d-lg-block ms-2">
          <button 
            type="button"
            class="ts-search-icon-btn"
            data-bs-toggle="modal"
            data-bs-target="#tsSearchModal"
            aria-label="Open search"
          >
            <i class="bi bi-search"></i>
          </button>
        </li>

      </ul>
    </div>
  </nav>

  <!-- Search Overlay -->
  <div 
    class="modal fade ts-search-modal" 
    id="tsSearchModal" 
    tabindex="-1" 
    aria-labelledby="tsSearchModalLabel" 
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

        <button 
          type="button" 
          class="ts-search-close" 
          data-bs-dismiss="modal" 
          aria-label="Close"
        >
          <i class="bi bi-x-lg"></i>
        </button>

        <div class="modal-body">

          <p class="ts-search-kicker">
            Search ThrillSense
          </p>

          <h5 class="ts-search-heading" id="tsSearchModalLabel">
            What are you looking for?
          </h5>

          <form 
            action="/search" 
            method="get" 
            class="ts-modal-search-form"
            role="search"
          >
            <div class="ts-search-input-wrap">
              <i class="bi bi-search"></i>

              <input 
                id="tsSearchInput"
                type="search"
                name="q"
                placeholder="Try Alton Towers, Universal, Thorpe Park..."
                aria-label="Search ThrillSense"
                value="<?= htmlspecialchars($_GET['q'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
              >
            </div>

            <button type="submit">
              Search
            </button>
          </form>

          <p class="ts-search-helper">
            Search across parks, news, articles and guides.
          </p>

        </div>

      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var collapseEl = document.getElementById('mainNav');
      var toggler = document.querySelector('.navbar-toggler');
      var searchModal = document.getElementById('tsSearchModal');
      var searchInput = document.getElementById('tsSearchInput');
      var savedScrollY = 0;

      if (searchModal && searchInput) {
        searchModal.addEventListener('shown.bs.modal', function () {
          searchInput.focus();
        });
      }

      if (!collapseEl || !toggler) return;

      var placeholder = document.createComment('mainNav-placeholder');
      var togglerPlaceholder = document.createComment('toggler-placeholder');

      var originalParent = collapseEl.parentNode;
      var originalNext = collapseEl.nextSibling;

      function lockBodyScroll() {
        savedScrollY = window.scrollY || window.pageYOffset;

        document.body.classList.add('nav-open');
        document.body.style.top = '-' + savedScrollY + 'px';
      }

      function unlockBodyScroll() {
        document.body.classList.remove('nav-open');
        document.body.style.top = '';

        window.scrollTo(0, savedScrollY);
      }

      function moveToBody() {
        if (window.innerWidth > 991.98) return;

        if (!collapseEl.classList.contains('fullscreen')) {
          collapseEl.classList.add('fullscreen');

          if (collapseEl.parentNode) {
            collapseEl.parentNode.replaceChild(placeholder, collapseEl);
          }

          document.body.appendChild(collapseEl);

          if (toggler.parentNode) {
            toggler.parentNode.replaceChild(togglerPlaceholder, toggler);
          }

          document.body.appendChild(toggler);
        }
      }

      function restoreToNav() {
        if (collapseEl.classList.contains('fullscreen')) {
          collapseEl.classList.remove('fullscreen');

          if (placeholder.parentNode) {
            placeholder.parentNode.replaceChild(collapseEl, placeholder);
          } else if (originalParent) {
            if (originalNext) {
              originalParent.insertBefore(collapseEl, originalNext);
            } else {
              originalParent.appendChild(collapseEl);
            }
          }
        }

        if (togglerPlaceholder.parentNode) {
          togglerPlaceholder.parentNode.replaceChild(toggler, togglerPlaceholder);
        }
      }

      collapseEl.addEventListener('show.bs.collapse', function () {
        moveToBody();
        lockBodyScroll();
        collapseEl.classList.add('show');
      });

      collapseEl.addEventListener('hidden.bs.collapse', function () {
        collapseEl.classList.remove('show');
        restoreToNav();
        unlockBodyScroll();
      });

      collapseEl.addEventListener('click', function (e) {
        if (e.target.matches('a.nav-link')) {
          var collapseInstance = bootstrap.Collapse.getInstance(collapseEl);

          if (collapseInstance) {
            collapseInstance.hide();
          }
        }
      });

      window.addEventListener('resize', function () {
        if (window.innerWidth > 991.98) {
          restoreToNav();
          unlockBodyScroll();
        }
      });
    });
  </script>
</body>
</html>
