<script>
  import { onMount } from 'svelte';
  import { getJSON } from '$lib/api.js';
  import { ROOMS } from '$lib/rooms.js';
  import RoomCard from '$lib/components/RoomCard.svelte';

  // Hidden prototype of the new homepage hub (/home2). Iterate the look here, then
  // promote to / and remove this clone — same approach we used for /art.
  let artImg = $state(null);
  let newsHeadline = $state('');
  let newsImg = $state(null);

  onMount(async () => {
    try { artImg = (await getJSON('/api/art/today'))?.image_url ?? null; } catch { /* card falls back to blurb */ }
    // Respect the reader's saved Closer-to-Home filter so the headline matches their Brief.
    let homeq = '';
    try {
      const hv = localStorage.getItem('goodnews:home') || '';
      const hs = localStorage.getItem('goodnews:homeScope') || 'nearby';
      if (hv && hs !== 'world') homeq = `&home=${encodeURIComponent(hv)}&scope=${hs}`;
    } catch { /* default global brief */ }
    try {
      const it = (await getJSON(`/api/brief?limit=1${homeq}`))?.items?.[0];
      newsHeadline = it?.title ?? '';
      newsImg = it?.image_url ?? null;
    } catch { /* card falls back to blurb */ }
  });
</script>

<svelte:head>
  <title>upbeatBytes — a calmer corner of the internet</title>
  <meta name="robots" content="noindex" />
  <meta name="description" content="A calmer corner of the internet: good news, daily art, small games, and little resets." />
</svelte:head>

<div class="room">
  <header class="bar">
    <a class="brand" href="/home2" aria-label="upbeatBytes home">
      <img src="/logo.svg" alt="upbeatBytes" width="586" height="196" />
    </a>
    <nav class="nav">
      <a href="/">News</a>
      <a href="/play">Games</a>
      <a href="/art">Art</a>
      <a class="acct" href="/account" aria-label="Your account">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor"
             stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="12" cy="8" r="3.3" />
          <path d="M5.5 19.2a6.5 6.5 0 0 1 13 0" />
        </svg>
      </a>
    </nav>
  </header>

  <main class="hub">
    <div class="intro">
      <h1>A calmer corner of the internet.</h1>
      <p>Good news, daily art, small games, and little resets.</p>
    </div>

    <div class="grid">
      {#each ROOMS as r (r.id)}
        <RoomCard room={r} {artImg} {newsImg} {newsHeadline} />
      {/each}
    </div>
  </main>

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

<style>
  /* Self-hosted modern sans (OFL) — privacy-friendly, no Google hotlink. */
  @font-face {
    font-family: 'Manrope';
    src: url('/fonts/manrope-var.woff2') format('woff2');
    font-weight: 200 800; font-style: normal; font-display: swap;
  }

  .room {
    --canvas: #faf6ee; --surface: #ffffff; --ink: #232a31; --muted: #707b86;
    --line: #ece5d8; --accent: #0a93c0; --accent-deep: #066c8e;
    --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh; background: var(--canvas); color: var(--ink);
    font-family: var(--sans);
    display: flex; flex-direction: column;
  }

  /* Bigger, more present top bar — logo + lighter, modern nav labels. */
  .bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px clamp(18px, 5vw, 64px);
    max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box;
  }
  .brand { display: block; line-height: 0; }
  .brand img { height: 58px; width: auto; display: block; }
  .nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
  .nav a {
    font-family: var(--sans); color: #4a525c; text-decoration: none;
    font-weight: 500; font-size: 1.1rem; letter-spacing: 0.01em;
    transition: color 0.15s ease;
  }
  .nav a:hover { color: var(--accent); }
  .acct {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; color: var(--muted);
  }
  .acct:hover { color: var(--accent); background: #eef6f9; }

  .hub {
    flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; box-sizing: border-box;
    padding: clamp(12px, 2.4vw, 30px) clamp(18px, 5vw, 64px) clamp(40px, 6vw, 72px);
  }
  .intro { text-align: center; margin: clamp(6px, 1.2vw, 14px) 0 clamp(40px, 6vw, 64px); }
  .intro h1 {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 0; letter-spacing: -0.015em; line-height: 1.08;
  }
  .intro p { color: var(--muted); margin: 12px 0 0; font-size: clamp(1rem, 2vw, 1.2rem); }

  .grid {
    display: grid; gap: clamp(14px, 1.8vw, 22px);
    grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense;
  }
  /* size variants → grid spans (RoomCard owns min-heights) */
  :global(.grid .card--large) { grid-column: span 2; grid-row: span 2; }
  :global(.grid .card--wide) { grid-column: span 2; }
  :global(.grid .card--tall) { grid-row: span 2; }

  @media (max-width: 860px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    :global(.grid .card--large), :global(.grid .card--wide) { grid-column: span 2; }
    :global(.grid .card--large), :global(.grid .card--tall) { grid-row: auto; }
  }
  @media (max-width: 540px) {
    .grid { grid-template-columns: 1fr; }
    :global(.grid .card--large), :global(.grid .card--wide), :global(.grid .card--tall) { grid-column: span 1; }
  }

  .foot {
    text-align: center; color: var(--muted); font-size: 0.86rem;
    padding: 28px 16px 40px; border-top: 1px solid var(--line); margin-top: auto;
  }
</style>
