<?php
declare(strict_types=1);

/**
 * sidebar.php (BOTTOM NAV)
 * Kullanım:
 *   $active = 'home'; // home|boards|scan|analytics|settings
 *   include __DIR__ . '/sidebar.php';
 */

$active = $active ?? ''; // dışarıdan set edilecek

// Linkleri gerekirse düzenle:
$nav = [
  'home'      => ['label' => 'Ana Sayfa',  'href' => 'index.php',       'icon' => 'home'],
  'boards'    => ['label' => 'Tahtalar',   'href' => 'boards.php',      'icon' => 'tv-minimal'],
  'scan'      => ['label' => 'QR Okut',    'href' => 'qrscan.php',      'icon' => 'qr-code'],
  'analytics' => ['label' => 'Analizler',  'href' => 'analizler.php',   'icon' => 'bar-chart-3'],
  'settings'  => ['label' => 'Ayarlar',    'href' => 'ayarlar.php',     'icon' => 'settings'],
];

function is_active(string $key, string $active): bool {
  return $key === $active;
}
?>

<!-- ✅ Bottom Nav -->
<nav class="wn-bottomnav" role="navigation" aria-label="Alt Menü">
  <a class="wn-item <?= is_active('home',$active) ? 'is-active' : '' ?>" href="<?= htmlspecialchars($nav['home']['href']) ?>">
    <span class="wn-ico" data-lucide="<?= htmlspecialchars($nav['home']['icon']) ?>"></span>
    <span class="wn-txt"><?= htmlspecialchars($nav['home']['label']) ?></span>
  </a>

  <a class="wn-item <?= is_active('boards',$active) ? 'is-active' : '' ?>" href="<?= htmlspecialchars($nav['boards']['href']) ?>">
    <span class="wn-ico" data-lucide="<?= htmlspecialchars($nav['boards']['icon']) ?>"></span>
    <span class="wn-txt"><?= htmlspecialchars($nav['boards']['label']) ?></span>
  </a>

  <!-- ✅ Center Floating QR Button -->
  <a class="wn-center <?= is_active('scan',$active) ? 'is-active' : '' ?>" href="<?= htmlspecialchars($nav['scan']['href']) ?>" aria-label="QR Okut">
    <span class="wn-center-ring"></span>
    <span class="wn-center-btn">
      <span class="wn-center-ico" data-lucide="<?= htmlspecialchars($nav['scan']['icon']) ?>"></span>
    </span>
    <span class="wn-center-txt"><?= htmlspecialchars($nav['scan']['label']) ?></span>
  </a>

  <a class="wn-item <?= is_active('analytics',$active) ? 'is-active' : '' ?>" href="<?= htmlspecialchars($nav['analytics']['href']) ?>">
    <span class="wn-ico" data-lucide="<?= htmlspecialchars($nav['analytics']['icon']) ?>"></span>
    <span class="wn-txt"><?= htmlspecialchars($nav['analytics']['label']) ?></span>
  </a>

  <a class="wn-item <?= is_active('settings',$active) ? 'is-active' : '' ?>" href="<?= htmlspecialchars($nav['settings']['href']) ?>">
    <span class="wn-ico" data-lucide="<?= htmlspecialchars($nav['settings']['icon']) ?>"></span>
    <span class="wn-txt"><?= htmlspecialchars($nav['settings']['label']) ?></span>
  </a>
</nav>

<style>
  :root{
    --wn-bg: rgba(10,12,18,.78);
    --wn-line: rgba(255,255,255,.10);
    --wn-text: rgba(255,255,255,.68);
    --wn-text-strong: rgba(255,255,255,.92);
    --wn-accent: #fff;
    --wn-shadow: 0 -14px 60px rgba(0,0,0,.55);
  }

  .wn-bottomnav{
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 50;

    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr;
    align-items: end;

    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.12)) , var(--wn-bg);
    border-top: 1px solid var(--wn-line);
    box-shadow: var(--wn-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .wn-item{
    text-decoration: none;
    color: var(--wn-text);
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 14px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .wn-item:active{ transform: translateY(1px); }

  .wn-ico svg{
    width: 22px; height: 22px;
    stroke-width: 2.2;
  }

  .wn-txt{
    font-size: 11px;
    letter-spacing: .02em;
    font-weight: 700;
    line-height: 1;
  }

  .wn-item.is-active{
    color: var(--wn-text-strong);
  }
  .wn-item.is-active .wn-ico svg{
    stroke: var(--wn-accent);
  }
  .wn-item.is-active .wn-txt{
    color: var(--wn-accent);
  }

  /* ✅ Center floating button */
  .wn-center{
    position: relative;
    text-decoration: none;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding-bottom: 6px;
    color: var(--wn-text);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .wn-center:active .wn-center-btn{ transform: translateY(-9px) scale(.985); }

  .wn-center-ring{
    position:absolute;
    left:50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: 74px; height: 74px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), rgba(255,255,255,.05) 55%, rgba(0,0,0,.0) 70%);
    pointer-events:none;
  }

  .wn-center-btn{
    width: 64px; height: 64px;
    border-radius: 999px;
    display: grid;
    place-items: center;

    transform: translateY(-10px);
    background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(16,185,129,.75));
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.16);
  }

  /* ✅ QR ikon rengi */
  .wn-center-ico svg{
    width: 26px; height: 26px;
    stroke: #0f1114;              /* <-- İSTEDİĞİN RENK */
    stroke-width: 2.2;
  }

  .wn-center-txt{
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    transform: translateY(-6px);
    color: rgba(255,255,255,.84);
  }

  .wn-center.is-active .wn-center-btn{
    background: linear-gradient(135deg, var(--wn-accent), rgba(16,185,129,.85));
  }
  .wn-center.is-active .wn-center-txt{
    color: var(--wn-accent);
  }

  /* Desktop'ta gizlemek istersen */
  @media (min-width: 980px){
    .wn-bottomnav{
      max-width: 520px;
      left: 50%;
      transform: translateX(-50%);
      border: 1px solid var(--wn-line);
      border-bottom: 0;
      border-radius: 18px 18px 0 0;
      margin-bottom: 0;
    }
  }
</style>

<!-- ✅ Lucide Icons (CDN) -->
<script>
(function(){
  // lucide script tek sefer yüklensin
  function loadLucide(cb){
    if (window.lucide && window.lucide.createIcons) return cb();
    const s = document.createElement('script');
    s.src = 'https://unpkg.com/lucide@latest';
    s.defer = true;
    s.onload = cb;
    document.head.appendChild(s);
  }

  loadLucide(function(){
    try { window.lucide.createIcons(); } catch(e){}
  });
})();
</script>
