<script>
  import '../app.css';
  import { onMount } from 'svelte';
  import FeedbackModal from '$lib/components/FeedbackModal.svelte';
  import { fb, openFeedback, closeFeedback } from '$lib/feedback.svelte.js';
  import { trackVisit } from '$lib/analytics.js';
  let { children } = $props();
  // Tell the boot-failure seatbelt (app.html) the app mounted — clears the
  // recovery card + timeout as soon as the shell hydrates.
  onMount(() => {
    window.__ubBooted?.();
    // Count the daily visit at the LAYOUT level so every landing page counts —
    // direct /play and /a/ arrivals included, not just the news homepage.
    trackVisit();
  });
</script>

{@render children()}

{#if fb.open}<FeedbackModal onclose={closeFeedback} />{/if}

<footer class="site">
  <div class="container">
    <button class="fb" onclick={openFeedback}>Send feedback</button>
    <span class="dot">·</span>
    Upbeat Bytes · metadata &amp; links only, no stored articles · <a href="/docs">API</a>
  </div>
</footer>

<style>
  footer.site {
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    padding: 26px 0 34px;
    border-top: 1px solid var(--line);
  }
  footer.site a { color: var(--accent-deep); }
  footer.site .fb { background: none; border: none; color: var(--accent-deep); font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 0; }
  footer.site .dot { margin: 0 4px; }
  /* room for the mobile bottom tab bar */
  @media (max-width: 720px) {
    footer.site { padding-bottom: calc(34px + 64px + env(safe-area-inset-bottom)); }
  }
</style>
