<script>
  // Shared shell for the hub + its detail pages (/word, /quote, /onthisday): the editorial
  // top bar, footer, fonts, and design tokens. Content goes in the default slot.
  import { afterNavigate, goto } from '$app/navigation';
  import HubBar from './HubBar.svelte';
  let { active = '', back = true, backLabel = 'Back', children } = $props();

  // Same single-history rule as the News reader's in-page Back: if we arrived here by an
  // in-app navigation, history.back() returns to wherever (the hub) with state intact; a
  // direct deep-link has no app history, so fall back to the hub.
  let cameFromApp = $state(false);
  afterNavigate(({ from }) => { if (from) cameFromApp = true; });
  function goBack() {
    if (cameFromApp && typeof history !== 'undefined') history.back();
    // Cold deep-link: no in-app origin. REPLACE this entry rather than pushing one, so the
    // browser Back from the hub doesn't bounce the reader straight back into the detail page.
    else goto('/home3', { replaceState: true });
  }
</script>

<div class="page">
  <HubBar {active} />

  <main class="shell-main">
    {#if back}
      <button class="back" onclick={goBack} aria-label="Go back">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M15 18l-6-6 6-6" />
        </svg>
        {backLabel}
      </button>
    {/if}
    {@render children?.()}
  </main>

  <footer class="foot">upbeatBytes — no ads, no paywalls, no doomscrolling.</footer>
</div>

<style>
  @font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-var.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
  @font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-italic-var.woff2') format('woff2'); font-weight: 400 500; font-style: italic; font-display: swap; }

  .page {
    --ink: #1c1916; --body: #6b6256; --muted: #a89e8c; --teal: #0083ad;
    --canvas: #FFF9EF; --news-border: #f2e7d3;
    min-height: 100vh; background: var(--canvas); color: #23201b;
    font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
    display: flex; flex-direction: column;
  }
  .page :global(*) { box-sizing: border-box; }

  .shell-main {
    flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; box-sizing: border-box;
    padding: clamp(20px, 4vw, 40px) clamp(18px, 5vw, 44px) clamp(40px, 6vw, 72px);
  }

  /* top-left Back — returns to the hub (or wherever you came from), preserving history */
  .back {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 clamp(14px, 3vw, 24px);
    background: none; border: none; cursor: pointer; padding: 6px 10px 6px 0;
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--body);
    transition: color 0.15s ease;
  }
  .back:hover { color: var(--teal); }
  .back svg { transition: transform 0.15s ease; }
  .back:hover svg { transform: translateX(-2px); }

  .foot {
    text-align: center; max-width: 1180px; width: 100%; margin: 14px auto 0; box-sizing: border-box;
    padding: 20px clamp(18px, 5vw, 44px) 30px; font-size: 13px; color: var(--muted);
    border-top: 1px solid var(--news-border);
  }
</style>
