<script>
  // Shared editorial top bar for the hub (/home3) and its detail pages (/word, /quote,
  // /onthisday). Full horizontal nav on wide screens; a hamburger + drop panel on phones
  // so the bar stays clean. `active` highlights the current section.
  let { active = '' } = $props();
  let open = $state(false);

  // Close the menu when we cross into desktop width, so it can't linger open and reappear
  // if the viewport shrinks back to mobile (the CSS hide alone left `open` stale).
  $effect(() => {
    const mq = window.matchMedia('(min-width: 721px)');
    const sync = (e) => { if (e.matches) open = false; };
    mq.addEventListener('change', sync);
    return () => mq.removeEventListener('change', sync);
  });

  const LINKS = [
    { key: 'home', href: '/home3', label: 'Home' },
    { key: 'news', href: '/', label: 'News' },
    { key: 'games', href: '/play', label: 'Games' },
    { key: 'art', href: '/art', label: 'Art' },
  ];
</script>

<svelte:window on:keydown={(e) => { if (e.key === 'Escape') open = false; }} />

<header class="bar">
  <a class="brand" href="/home3" aria-label="upbeatBytes home">
    <img src="/logo.svg" alt="upbeatBytes" width="586" height="196" />
  </a>

  <div class="bar-end">
    <nav class="nav">
      {#each LINKS as l}
        <a class:on={active === l.key} href={l.href}>{l.label}</a>
      {/each}
      <span class="nav-soon">Entertainment</span>
    </nav>

    <a class="acct" href="/account" aria-label="Your account">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C98A2E" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" />
      </svg>
    </a>

    <button class="burger" class:open aria-label="Menu" aria-expanded={open} aria-controls="hub-menu"
            onclick={() => (open = !open)}>
      <span></span><span></span><span></span>
    </button>
  </div>
</header>

{#if open}
  <div class="menu-wrap">
    <nav id="hub-menu" class="menu">
      {#each LINKS as l}
        <a class:on={active === l.key} href={l.href} onclick={() => (open = false)}>{l.label}</a>
      {/each}
      <span class="menu-soon">Entertainment <em>soon</em></span>
    </nav>
  </div>
{/if}

<style>
  .bar {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box;
    padding: 26px clamp(18px, 5vw, 44px) 0;
  }
  .brand { display: block; line-height: 0; }
  .brand img { height: 48px; width: auto; display: block; }

  .bar-end { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
  .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font-size: 16.5px; font-weight: 500; }
  .nav a { color: var(--body, #6b6256); text-decoration: none; }
  .nav a.on { color: #23201b; }
  .nav a:hover { color: var(--teal, #0083ad); }
  .nav-soon { color: #b3a890; }
  .acct {
    width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #e6c9a0; background: #FCEFD7;
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .acct:hover { background: #fbe6c4; }

  /* hamburger — phones only */
  .burger {
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 40px; height: 40px; border-radius: 11px; border: 1.5px solid #e6c9a0; background: #FCEFD7;
    cursor: pointer; padding: 0; flex: none;
  }
  .burger:hover { background: #fbe6c4; }
  .burger span { width: 18px; height: 2px; border-radius: 2px; background: #7a6a52; transition: transform 0.2s ease, opacity 0.15s ease; }
  .burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* drop panel */
  .menu-wrap { max-width: 1180px; width: 100%; margin: 10px auto 0; box-sizing: border-box; padding: 0 clamp(18px, 5vw, 44px); }
  .menu {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--news-border, #f2e7d3);
    border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px -20px rgba(60, 50, 30, 0.4);
  }
  .menu a, .menu .menu-soon {
    padding: 14px 18px; font-size: 16px; font-weight: 500; text-decoration: none;
    color: var(--body, #6b6256); border-top: 1px solid #f3ece0;
  }
  .menu a:first-child { border-top: none; }
  .menu a.on { color: #23201b; }
  .menu a:hover { background: var(--canvas, #FFF9EF); color: var(--teal, #0083ad); }
  .menu-soon { display: flex; align-items: center; justify-content: space-between; color: #b3a890; }
  .menu-soon em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c3b69c; }

  @media (max-width: 720px) {
    .nav { display: none; }
    .burger { display: flex; }
  }
  @media (min-width: 721px) {
    .menu-wrap { display: none; }   /* safety: never show the panel once back on desktop */
  }
</style>
