<?php
declare(strict_types=1);
require_once dirname(__DIR__) . '/config.php';
require_once __DIR__ . '/functions.php';
if (!isset($current)) {
    $current = '';
}
$nav = [
    'home' => ['index.php', 'Home'],
    'about' => ['about.php', 'About'],
    'services' => ['services.php', 'Services'],
    'portfolio' => ['portfolio.php', 'Portfolio'],
    'teams' => ['teams.php', 'Teams'],
    'clients' => ['clients.php', 'Clients'],
    'testimonials' => ['testimonials.php', 'Testimonials'],
    'faq' => ['faq.php', 'FAQ'],
    // 'contact' => ['contact.php', 'Contact'],
];
?>
  <header>
    <style>
      .header-pro .ot-header-logo img {
        max-height: 78px;
        width: auto;
        object-fit: contain;
      }

      @media (min-width: 1200px) {
        .header-pro .ot-main-menu > nav > ul > li > a {
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.02em;
          padding-top: 34px !important;
          padding-bottom: 34px !important;
          padding-left: 8px !important;
          padding-right: 8px !important;
        }
      }

      @media (min-width: 1200px) and (max-width: 1399.98px) {
        .header-pro .ot-main-menu > nav > ul > li > a {
          padding-left: 5px !important;
          padding-right: 5px !important;
        }
      }

      .header-pro .ot-main-menu > nav > ul > li.active > a {
        color: var(--ot-theme-color);
      }

      .header-pro .ot-main-menu > nav > ul > li > a:hover {
        color: var(--ot-theme-color);
      }

      .header-pro .ot-header-right .ot-line-style {
        opacity: 0.4;
      }

      .header-pro .ot-header-right-bars {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
      }

      .header-pro .ot-header-right-bars:hover {
        border-color: var(--ot-theme-color);
        background: var(--ot-theme-color);
        color: #ffffff;
      }

      .header-pro .ot-btn-primary {
        border-radius: 999px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.3px;
      }

      @media (max-width: 1199.98px) {
        .header-pro .ot-header-logo img {
          max-height: 68px;
        }
      }

      @media (max-width: 575.98px) {
        .header-pro .ot-header-logo img {
          max-height: 56px;
        }
      }
    </style>
    <div class="ot-header-area ot-header-layout3 header-pro <?= ($current === 'home') ? 'ot-header-transparent' : '' ?>">
      <div class="ot-header-wrapp<?= ($current !== 'home') ? ' header-sticky force-sticky' : '' ?>" id="header-sticky">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-xxl-2 col-xl-2 col-lg-6 col-md-6 col-sm-6 col-6">
              <div class="ot-header-logo">
                <a href="index.php"><img src="<?= asset('assets/img/logo/logo-3.png') ?>" alt="<?= h(setting('company_name', SITE_NAME)) ?>"></a>
              </div>
            </div>
            <div class="col-xxl-7 col-xl-7 d-none d-xl-block">
              <div class="ot-main-menu text-end">
                <nav class="ot-mobile-menu-active">
                  <ul>
                    <?php foreach ($nav as $key => $item): ?>
                      <li<?= $current === $key ? ' class="active"' : '' ?>>
                        <a href="<?= h($item[0]) ?>"><?= h($item[1]) ?></a>
                      </li>
                    <?php endforeach; ?>
                  </ul>
                </nav>
              </div>
            </div>
            <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 col-6">
              <div class="ot-header-right d-flex align-items-center justify-content-end">
                <button class="ot-offcanvas-toogle d-xl-none ot-header-right-bars" aria-label="Open menu">
                  <i class="fa-solid fa-bars"></i>
                </button>
                <span class="ot-line-style d-none d-md-flex"></span>
                <a href="contact.php" class="ot-btn-primary d-none d-md-flex">Get a quote</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
