<!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">

  <!-- Fullscreen mobile menu styles -->
  <style>
    @media (max-width: 991.98px) {
      /* Fullscreen menu */
      #mainNav.fullscreen {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 1.5rem;
        background-color: rgba(0,0,0,0.96);
        z-index: 2100 !important;
        overflow-y: auto !important;
        opacity: 0;
        transform: scale(0.95);
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }

      #mainNav.fullscreen.show {
        opacity: 1;
        transform: scale(1);
      }

      #mainNav.fullscreen.collapse {
        display: flex !important;
        height: 100vh !important;
        overflow: hidden;
      }

      #mainNav.fullscreen ul.navbar-nav {
        width: 100%;
        justify-content: center;
      }

      #mainNav.fullscreen .nav-item {
        display: block;
        text-align: center;
        width: 100%;
      }

      #mainNav.fullscreen .nav-link {
        font-size: 1.6rem;
        padding: 1rem 0;
        color: #fff !important;
        text-align: center;
      }

      /* Toggler fixed top-right */
      .navbar-toggler {
        position: fixed !important;
        top: 1rem;
        right: 1rem;
        z-index: 2201 !important;
        display: block !important;
        background: none;
        border: none;
        padding: 0;
      }

      .navbar-toggler .custom-toggler {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        position: relative;
      }

      .navbar-toggler .line {
        display: block;
        height: 3px;
        background: #000;
        border-radius: 2px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .navbar-toggler:not(.collapsed) .line1 {
        transform: rotate(45deg);
        background: #fff;
      }

      .navbar-toggler:not(.collapsed) .line2 {
        opacity: 0;
      }

      .navbar-toggler:not(.collapsed) .line3 {
        transform: rotate(-45deg);
        background: #fff;
      }

      body.nav-open {
        overflow: hidden;
        touch-action: none;
      }
    }
  </style>
</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', 'Contact'] 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';
            } elseif ($item === 'Contact') {
              $url = '/contact';
            }
          ?>

          <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; ?>
      </ul>
    </div>
  </nav>

  <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');

      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 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);
          }

          toggler.style.position = 'fixed';
          toggler.style.top = '1rem';
          toggler.style.right = '1rem';
          toggler.style.zIndex = '2201';

          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);

          toggler.style.position = '';
          toggler.style.top = '';
          toggler.style.right = '';
          toggler.style.zIndex = '';
        }
      }

      collapseEl.addEventListener('show.bs.collapse', function () {
        moveToBody();
        document.body.classList.add('nav-open');
        collapseEl.classList.add('show');
      });

      collapseEl.addEventListener('hidden.bs.collapse', function () {
        document.body.classList.remove('nav-open');
        collapseEl.classList.remove('show');
        restoreToNav();
      });

      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();
          document.body.classList.remove('nav-open');
        }
      });
    });
  </script>
</body>
</html>