<?php
/*
  Snippets are a great way to store code snippets for reuse
  or to keep your templates clean.

  This header snippet is reused in all templates.
  It fetches information from the `site.txt` content file
  and contains the site navigation.

  More about snippets:
  https://getkirby.com/docs/guide/templates/snippets
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <?php
  /*
    In the title tag we show the title of our
    site and the title of the current page
  */
  ?>
  <title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>

  <?php
  /*
    Stylesheets can be included using the `css()` helper.
    Kirby also provides the `js()` helper to include script file.
    More Kirby helpers: https://getkirby.com/docs/reference/templates/helpers
  */
  ?>
  <?= css([
    'assets/css/prism.css',
    'assets/css/lightbox.css',
    'assets/css/index.css',
    '@auto'
  ]) ?>

  <?php
  /*
    The `url()` helper is a great way to create reliable
    absolute URLs in Kirby that always start with the
    base URL of your site.
  */
  ?>
  <link rel="shortcut icon" type="image/x-icon" href="<?= url('favicon.ico') ?>">
</head>
<body class="<?= $page->isHomePage() ? 'is-home' : 'is-subpage has-top-menu' ?>">

  <?php
  $currentLanguage = kirby()->language();
  $languages = kirby()->languages();
  $languageCode = $currentLanguage?->code() ?? 'en';
  $blackoutText = $languageCode === 'de'
    ? 'Wer hat den Lichtschalter berührt?'
    : 'Who touched the light switch?';
  $languageSwitch = null;
  if ($currentLanguage && $languages->count() > 1) {
    foreach ($languages as $languageOption) {
      if ($languageOption->code() !== $languageCode) {
        $languageSwitch = $languageOption;
        break;
      }
    }
  }
  ?>

  <div class="blackout-overlay" data-blackout-overlay>
    <p><?= esc($blackoutText) ?></p>
  </div>
  <?php if ($languageSwitch): ?>
  <a class="language-toggle" href="<?= $page->url($languageSwitch->code()) ?>" aria-label="Switch language to <?= $languageSwitch->name() ?>">
    <span aria-hidden="true">🌐</span>
    <span><?= strtoupper($languageSwitch->code()) ?></span>
  </a>
  <?php endif ?>

  <?php
  $menuPages = $site->children()->listed()->limit(3);
  $menuImageMap = [
    'home' => 'hugger.png',
    'photography' => 'PXL_20251120_000355748.PORTRAIT.ORIGINAL_1.jpg',
  ];
  $slots = 3;
  ?>
  <section class="magnetic-menu" aria-label="Site navigation">
    <div class="magnetic-menu__inner" data-magnetic-menu>
      <?php for ($i = 0; $i < $slots; $i++): ?>
        <?php
        $item = $menuPages->nth($i);
        $label = $item ? $item->title()->value() : 'Secret Spot ' . ($i + 1);
        $safeLabel = esc($label);
        $repeatText = mb_strtoupper($label) . ' • ';
        $circleText = str_repeat($repeatText, 8);
        $pathId = 'circlePath-' . $i;
        $imageFile = $menuImageMap[$item?->id()] ?? 'hugger.png';
        $imageUrl = url('media/' . $imageFile);
        ?>
        <?php if ($item): ?>
        <a
          class="magnetic-menu__item"
          href="<?= $item->url() ?>"
          data-index="<?= $i ?>"
        >
        <?php else: ?>
        <div class="magnetic-menu__item is-placeholder" data-index="<?= $i ?>" aria-hidden="true">
        <?php endif ?>
          <div class="magnetic-menu__image">
            <img src="<?= $imageUrl ?>" alt="<?= $safeLabel ?>">
          </div>
          <svg class="magnetic-menu__circle" viewBox="0 -5 100 113" preserveAspectRatio="xMidYMid meet" aria-hidden="true" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
              <path id="<?= $pathId ?>" d="M50 50 m -45, 0 a 45,45 0 1,1 90,0 a 45,45 0 1,1 -90,0"></path>
            </defs>
            <text>
              <textPath startOffset="0" xlink:href="#<?= $pathId ?>" href="#<?= $pathId ?>">
                <?= esc($circleText) ?>
              </textPath>
            </text>
          </svg>
        <?php if ($item): ?>
        </a>
        <?php else: ?>
        </div>
        <?php endif ?>
      <?php endfor ?>
    </div>
  </section>

  <main class="main">
