<!DOCTYPE html>
<html lang="<?= $kirby->language()?->code() ?? 'fr' ?>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title><?= $page->meta_title()->or($page->title() . ' - ' . $site->site_title()) ?></title>
  <meta name="description" content="<?= $page->meta_description()->or($site->site_description()) ?>">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="<?= url('assets/favicon.png') ?>">

  <!-- Styles -->
  <?= css('assets/css/main.css') ?>

  <!-- Open Graph -->
  <meta property="og:title" content="<?= $page->meta_title()->or($page->title()) ?>">
  <meta property="og:description" content="<?= $page->meta_description()->or($site->site_description()) ?>">
  <meta property="og:type" content="website">
  <meta property="og:url" content="<?= $page->url() ?>">
  <?php if ($cover = $page->cover()->toFile()): ?>
    <meta property="og:image" content="<?= $cover->url() ?>">
  <?php endif ?>
</head>
<body class="template-<?= $page->template() ?>">
  <!-- Header -->
  <header class="site-header">
    <div class="site-header__container">
      <!-- Logo -->
      <a href="<?= $site->url() ?>" class="site-header__logo">
        <?php if ($logo = $site->logo()->toFile()): ?>
          <img src="<?= $logo->url() ?>" alt="<?= $site->site_title() ?>">
        <?php else: ?>
          <span class="site-header__logo-text"><?= $site->site_title() ?></span>
        <?php endif ?>
      </a>

      <!-- Navigation -->
      <nav class="site-header__nav">
        <ul class="site-nav">
          <?php foreach ($site->main_navigation()->toStructure() as $item): ?>
            <?php $linkedPage = $item->link()->toPages()->first() ?>
            <?php if ($linkedPage): ?>
              <li class="site-nav__item <?= $linkedPage->isOpen() ? 'is-active' : '' ?>">
                <a href="<?= $linkedPage->url() ?>">
                  <?= $kirby->language()?->code() === 'en' ? $item->label_en() : $item->label_fr() ?>
                </a>
              </li>
            <?php endif ?>
          <?php endforeach ?>
        </ul>
      </nav>

      <!-- Language Switcher -->
      <?php if ($kirby->languages()->count() > 1): ?>
        <div class="site-header__lang">
          <?php foreach ($kirby->languages() as $lang): ?>
            <a href="<?= $page->url($lang->code()) ?>"
               class="site-lang__link <?= $lang->code() === $kirby->language()?->code() ? 'is-active' : '' ?>">
              <?= strtoupper($lang->code()) ?>
            </a>
          <?php endforeach ?>
        </div>
      <?php endif ?>

      <!-- Mobile Menu Toggle -->
      <button class="site-header__toggle" aria-label="Menu">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </header>
