upbeatBytes/frontend/src/routes/word/+page.svelte

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

  let w = $state(null);
  let state = $state('loading');   // loading | ready | empty

  const cap = (s) => (s ? s[0].toUpperCase() + s.slice(1) : '');
  const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  let dateLabel = $derived.by(() => {
    if (!w?.date) return '';
    const [, m, d] = w.date.split('-').map(Number);
    return MONTHS[m - 1] ? `${MONTHS[m - 1]} ${d}` : '';
  });

  onMount(async () => {
    try {
      w = await getJSON('/api/word/today');
      state = w ? 'ready' : 'empty';
    } catch {
      state = 'empty';
    }
  });

  function speak() {
    if (w?.audio_url) {
      const a = new Audio(w.audio_url);
      a.play().catch(ttsFallback);
    } else {
      ttsFallback();
    }
  }
  function ttsFallback() {
    try {
      const u = new SpeechSynthesisUtterance(w.word);
      u.rate = 0.9;
      speechSynthesis.cancel();
      speechSynthesis.speak(u);
    } catch { /* no speech support — silent */ }
  }
</script>

<svelte:head>
  <title>{w ? cap(w.word) : 'Word of the Day'} · upbeatBytes</title>
  <meta name="description" content="A new uplifting word every day — with pronunciation, meaning, and how to use it." />
</svelte:head>

<HubShell active="">
  <article class="word-page">
    {#if state === 'ready'}
      <!-- "Editorial Asymmetric" (CD): faded oversized initial, vertical part-of-speech rail,
           big serif word, airy definition, left-ruled example sentences. -->
      <div class="wcard">
        <span class="wm" aria-hidden="true">{cap(w.word)[0]}</span>

        <div class="wtop">
          <span class="eyebrow">Word of the day</span>
          {#if dateLabel}<span class="edition">{dateLabel}</span>{/if}
        </div>

        <div class="whead">
          {#if w.part_of_speech}<span class="vpos">{w.part_of_speech}</span>{/if}
          <div class="whead-main">
            <h1 class="word">{cap(w.word)}</h1>
            <div class="pron-row">
              {#if w.phonetic}<span class="pron">{w.phonetic}</span>{/if}
              <button class="listen" onclick={speak} aria-label="Hear it spoken">
                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M11 5 6 9H3v6h3l5 4z" /><path d="M15.5 8.5a5 5 0 0 1 0 7" /><path d="M18.5 6a8 8 0 0 1 0 12" />
                </svg>
                Listen
              </button>
            </div>
          </div>
        </div>

        <p class="definition">{w.definition}</p>

        {#if w.examples?.length}
          <section class="examples">
            <div class="ex-label">In a sentence</div>
            {#each w.examples as ex}<p class="ex">{ex}</p>{/each}
          </section>
        {/if}
      </div>
    {:else if state === 'empty'}
      <p class="note">Today's word is on its way. Check back soon.</p>
    {:else}
      <p class="note">Finding today's word…</p>
    {/if}
  </article>
</HubShell>

<style>
  .word-page { max-width: 760px; margin: 0 auto; }

  .wcard {
    position: relative; overflow: hidden; background: #FBF2E1; border: 1px solid #efe2c6;
    border-radius: 18px; padding: clamp(32px, 6vw, 56px) clamp(26px, 5vw, 56px);
    box-shadow: 0 18px 50px -34px rgba(80, 60, 25, 0.55);
  }
  /* faded oversized initial bleeding off the right edge */
  /* sits JUST below the date in the top-right corner — clear it, don't drop far beneath */
  .wm {
    position: absolute; right: clamp(-60px, -4vw, -28px); top: clamp(45px, 7vw, 62px);
    font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400;
    font-size: clamp(220px, 42vw, 380px); line-height: 1; color: rgba(62, 110, 151, 0.06);
    pointer-events: none; user-select: none;
  }

  .wtop { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #3E6E97; }
  .edition { font-family: 'Newsreader', Georgia, serif; font-size: 15px; color: #a99a80; white-space: nowrap; }

  .whead { position: relative; display: flex; align-items: flex-start; gap: clamp(14px, 2.5vw, 22px); margin-top: clamp(28px, 5vw, 46px); }
  .vpos {
    writing-mode: vertical-rl; transform: rotate(180deg); flex: none; padding-top: 6px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #5f86a6;
  }
  .whead-main { min-width: 0; }
  .word {
    font-family: 'Newsreader', Georgia, serif; font-weight: 400; letter-spacing: -0.02em;
    font-size: clamp(3.4rem, 13vw, 108px); line-height: 0.92; color: #1c1a16; margin: 0; overflow-wrap: anywhere;
  }
  .pron-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
  .pron { font-family: 'Newsreader', Georgia, serif; font-size: 23px; color: #8a8478; }
  /* Always filled blue — a little warmth of colour on a laid-back page. Hover is gated to
     true pointer devices so it can't "stick" lit after a tap on a phone, and the tap
     highlight box is suppressed (that grey/blue flash mobile draws on tap). */
  .listen {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: #fdf7ec;
    background: #3E6E97; border: 1px solid #3E6E97; border-radius: 999px; padding: 7px 15px;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  }
  @media (hover: hover) { .listen:hover { background: #34608a; border-color: #34608a; } }
  .listen:active { background: #2c557d; border-color: #2c557d; }

  .definition {
    position: relative; font-family: 'Newsreader', Georgia, serif; font-weight: 400;
    font-size: clamp(1.4rem, 4vw, 1.95rem); line-height: 1.32; color: #2c3640;
    margin: clamp(30px, 5vw, 44px) 0 0; max-width: 30em;
  }

  .examples { position: relative; margin-top: clamp(28px, 5vw, 40px); max-width: 34em; }
  .ex-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #b3a487; margin-bottom: 16px; }
  .ex {
    font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.08rem; line-height: 1.5;
    color: #4a4439; padding-left: 16px; border-left: 2px solid #9bb6cf; margin: 0 0 14px;
  }
  .ex:last-child { margin-bottom: 0; }

  .note { text-align: center; color: var(--muted); font-size: 1.05rem; margin-top: 60px; }
</style>