<script>
  // Mobile-only primary navigation. Highlights = the brief, Latest = the
  // chronological feed, Browse = mood/topic discovery, You = account.
  import Avatar from './Avatar.svelte';
  let { active = 'today', onToday, onLatest, onPlay, onYou, user = null } = $props();
</script>

<nav class="bottomnav" aria-label="Primary">
  <button class:active={active === 'today'} onclick={onToday}>
    <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
    <span>Highlights</span>
  </button>
  <button class:active={active === 'latest'} onclick={onLatest}>
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h10" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
    <span>Latest</span>
  </button>
  <button class:active={active === 'play'} onclick={onPlay}>
    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><rect x="13" y="4" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><rect x="4" y="13" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><rect x="13" y="13" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/></svg>
    <span>Play</span>
  </button>
  <button class:active={active === 'you'} onclick={onYou}>
    {#if user}
      <Avatar {user} size={23} />
    {:else}
      <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8.5" r="3.6" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M5 20c0-3.6 3.1-5.5 7-5.5s7 1.9 7 5.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
    {/if}
    <span>You</span>
  </button>
</nav>

<style>
  .bottomnav { display: none; }
  @media (max-width: 720px) {
    .bottomnav {
      display: flex;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 30;
      background: var(--surface);
      border-top: 1px solid var(--line);
      padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
      box-shadow: 0 -2px 14px rgba(40, 38, 28, 0.05);
    }
    .bottomnav button {
      flex: 1;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      background: none; border: none; padding: 6px 0; cursor: pointer;
      color: var(--muted); font-size: 0.7rem; letter-spacing: 0.02em;
    }
    .bottomnav button svg { width: 23px; height: 23px; }
    .bottomnav button.active { color: var(--accent-deep); }
    .bottomnav button.active svg { stroke: var(--accent); }
  }
</style>
