// Home (Latest) + Releases catalog + Release detail.

const { TopBar, Footer, Mark, Atmo, Cover, ChapterCover, Embed, Breadcrumb } = window.MOTD_ATOMS;
const { RELEASES, RELEASE_DETAILS, RELEASE_EXTRAS, CHAPTERS } = window.MOTD_DATA;

// =============================================================
// HOME / LATEST — supports 4 hero variants via t.hero
// =============================================================
const HomePage = ({ go, t }) => {
  const { Artwork } = window.MOTD_ART;
  const { Sigil, SigilDivider, SigilWatermark, CornerMark } = window.MOTD_SIGILS;
  const r = RELEASES[0];
  const accent = window.MOTD_ACCENTS[t.accent];

  // Use the SAME live SoundCloud feed the Podcast page uses, so the "Latest
  // mix" block on the home page gets the real cover artwork and metadata.
  // Falls back to the static CHAPTERS until the fetch resolves.
  const [chapters, setChapters] = React.useState(CHAPTERS);
  React.useEffect(() => {
    let cancelled = false;
    if (window.fetchMotdChapters) {
      window.fetchMotdChapters().then(
        (live) => { if (!cancelled && live.length) setChapters(live); },
        ()     => { /* keep static fallback */ }
      );
    }
    return () => { cancelled = true; };
  }, []);
  const chapter = chapters[0];

  // ---- Hero variants ----
  let hero;
  if (t.hero === 'A · Cinematic') {
    // Cinematic hero — composition led by a LARGE cover image positioned
    // slightly off-center to the left. The release title sits just above
    // the artwork, and the artist + format + CTA live to the right of the
    // artwork (vertically centered) so the eye reads: meta → title →
    // artwork → details.
    hero = (
      <section style={{
        position: 'relative',
        marginTop: 12,
        marginInline: 'calc(var(--motd-margin) * -1)',
        paddingInline: 'var(--motd-margin)',
        paddingTop: 32,
        paddingBottom: 24,
        display: 'grid',
        // Left column tracks the cover's viewport-relative max-width so
        // the right column always sits flush against the artwork edge,
        // no matter the viewport.
        gridTemplateColumns: 'min(62vh, 34vw) minmax(0, 1fr)',
        columnGap: 'clamp(28px, 3.5vw, 56px)',
        alignItems: 'end',
      }}>
        {/* Faint concentric-rings watermark sitting roughly where the
            right column meets the page edge. Decorative only, hidden
            when graphics are off. Uses sigil #7 (one of the simpler
            concentric/divided marks from the source sheet) so the
            watermark stays quiet behind the artist name. Translated
            mostly off-canvas so only the inner arcs bleed in. */}
        <div data-graphics-only style={{
          position: 'absolute', top: 0, right: 'var(--motd-margin)',
          pointerEvents: 'none', zIndex: 0,
        }}>
          {/* Watermark sigil — starting index n is offset from the About page's
              starting n so Home and About never display the same sigil in the
              same week, even though both rotate weekly through the full set. */}
          <SigilWatermark n={7} size={520} opacity={0.06}
            style={{ position: 'static', transform: 'translate(45%, -22%)' }} />
        </div>
        {/* LEFT — "Now playing" label sits directly above the artwork.
            Title used to live here too but moved to the right column per
            feedback so the artwork can sit immediately under its caption
            and read as the dominant visual. */}
        <div>
          <div className="h3" style={{ marginBottom: 22 }}>Latest release · {r.cat}</div>

          {/* Big cover. Square, capped at min(62vh, 34vw) so it scales
              with both viewport height (won't push past the fold on
              short screens) and width (grows on ultra-wide monitors so
              it stays proportional to the catalog row below). */}
          {r.image && (
            <div
              onClick={() => go('release', r.id)}
              style={{
                width: '100%',
                aspectRatio: '1 / 1',
                maxHeight: 'min(62vh, 34vw)',
                maxWidth: 'min(62vh, 34vw)',
                cursor: 'pointer',
                background: '#06080a',
                overflow: 'hidden',
                boxShadow: '0 40px 100px rgba(0,0,0,.55)',
              }}
              title={`${r.cat} — view release`}
            >
              <img
                src={window.assetUrl(r.image)}
                alt={`${r.title} cover artwork`}
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              />
            </div>
          )}
        </div>

        {/* RIGHT — artist (large), title (italic), view-release CTA.
            Anchored toward the bottom of the artwork so the right column
            balances the visual weight of the cover. */}
        <div style={{ paddingBottom: 12, position: 'relative', zIndex: 1 }}>
          <div className="h1" style={{
            fontSize: 'clamp(40px, 4.5vw, 72px)',
            lineHeight: '0.98em',
            fontWeight: 200,
            letterSpacing: '-0.01em',
          }}>{r.artist}</div>

          <div className="italic" style={{
            marginTop: 18,
            fontFamily: 'var(--motd-head)',
            fontWeight: 300,
            fontSize: 'clamp(24px, 2.3vw, 38px)',
            lineHeight: '1.1em',
            color: 'var(--fg-soft)',
            maxWidth: 500,
          }}>{r.title}</div>

          <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn-primary" onClick={() => go('release', r.id)}>View release</button>
            {/* Direct purchase link — opens the release's Bandcamp page in a
                new tab. r.bandcamp comes from RELEASES in proto-data.jsx. */}
            {r.bandcamp && (
              <a
                href={r.bandcamp}
                target="_blank"
                rel="noreferrer"
                className="btn-primary"
                style={{ textDecoration: 'none' }}
              >
                Purchase on Bandcamp ↗︎
              </a>
            )}
          </div>
        </div>
      </section>
    );
    // "From the catalog" — three release cards sit IN the top frame, directly
    // beneath the featured-release composition (per design feedback). The
    // bottom frame then carries Latest mix + recent chapters together.
    // No divider between the hero and the catalog row — the large faint
    // watermark sigil already does the visual work of separating the
    // top frame from itself; an explicit hairline would feel doubled up.
    hero = (
      <>
        {hero}
        <section style={{ paddingBottom: 60, paddingTop: 8 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 22 }}>
            <div className="h3">From the catalog</div>
            <span className="mono"
              style={{ cursor: 'pointer', color: 'var(--fg)' }}
              onClick={() => go('releases')}>
              Browse all releases ↗︎
            </span>
          </div>
          {/* Three catalog covers — full-width 3-column row that scales
              with the viewport. Each cell tracks the latest-release
              cover proportions above (it's also viewport-relative) so
              the catalog reads as visually subordinate without the
              fixed 380px cap leaving a dead zone on wide screens. */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
            gap: 'clamp(14px, 1.4vw, 24px)',
          }}>
            {RELEASES.slice(1, 4).map((rr) => (
              <div key={rr.id} className="release-card" onClick={() => go('release', rr.id)}>
                <Cover r={rr} />
                <div className="meta">
                  <div className="cat">{rr.cat}</div>
                  <div className="title" style={{ fontSize: 15 }}>{rr.title}</div>
                  <div className="artist" style={{ fontSize: 13 }}>{rr.artist}</div>
                </div>
              </div>
            ))}
          </div>
        </section>
      </>
    );
  } else if (t.hero === 'B · Split') {
    hero = (
      <section style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60, marginTop: 30, paddingBottom: 40 }}>
        {r.image ? (
          <img
            src={window.assetUrl(r.image)}
            alt={`${r.title} — ${r.artist}`}
            style={{ width: '100%', aspectRatio: '1 / 1', objectFit: 'cover', display: 'block', background: '#06080a' }}
          />
        ) : (
          <Artwork seed={r.id} accent={accent} style={{ aspectRatio: '4/5' }} />
        )}        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 20 }}>
          <div className="h3">New · {r.cat}</div>
          <h1 className="h1" style={{ marginTop: 22, fontSize: 'clamp(56px, 6vw, 108px)' }}>{r.title}</h1>
          <div className="h4 italic" style={{ marginTop: 18, color: 'var(--fg-soft)' }}>{r.artist}</div>
          <div style={{ marginTop: 36, display: 'flex', gap: 12 }}>
            <button className="btn-primary" onClick={() => go('release', r.id)}>View release</button>
            <button className="btn-primary">Listen ↗︎</button>
          </div>
        </div>
      </section>
    );
  } else if (t.hero === 'C · Typographic') {
    hero = (
      <section style={{ padding: '120px 0 80px' }}>
        <h1 className="h1" style={{ fontSize: 'clamp(72px, 11vw, 200px)', lineHeight: '0.95em' }}>
          Mysteries<br/>of the Deep.
        </h1>
      </section>
    );
  } else { // D · Wall
    hero = (
      <section style={{ marginTop: 24, paddingBottom: 50 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gridAutoRows: '120px', gap: 10 }}>
          {RELEASES.slice(0, 12).map((rr, i) => {
            const big = i === 0;
            const cellStyle = big
              ? { gridColumn: 'span 3', gridRow: 'span 3', cursor: 'pointer', overflow: 'hidden', background: '#06080a', position: 'relative' }
              : { gridColumn: 'span 1', gridRow: 'span 1', cursor: 'pointer', overflow: 'hidden', background: '#06080a', position: 'relative' };
            return (
              <div
                key={rr.id}
                style={cellStyle}
                onClick={() => go('release', rr.id)}
                title={`${rr.cat} · ${rr.artist} — ${rr.title}`}
              >
                {rr.image
                  ? <img src={window.assetUrl(rr.image)} alt={`${rr.title} — ${rr.artist}`} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  : <Artwork seed={rr.id} accent={accent} style={{ width: '100%', height: '100%' }} />}
              </div>
            );
          })}
        </div>
      </section>
    );
  }

  return (
    <div className="page-fade">
      {hero}

      {/* Below-the-fold composition depends on hero variant.
          Cinematic gets the mix-forward layout from the sketch:
          large "Latest mix" block on the left, 3 recent chapter covers
          on the right.
          Other variants keep the original two-up (release + podcast).        */}
      {t.hero === 'A · Cinematic' ? (
        <>
        <div data-graphics-only>
          <SigilDivider
            ns={[18, 23, 7]}
            size={64}
            stroke={3}
            faint={true}
            margin="32px 0 50px"
          />
        </div>
        <section style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 80,
          padding: '20px 0 110px',
          borderTop: t.graphics === 'on' ? 'none' : '1px solid var(--rule)',
          alignItems: 'start',
        }}>
          {/* LEFT — Latest mix */}
          <div>
            <div className="h3">Latest mix · Chapter {chapter.num}</div>
            <h2 className="h2" style={{
              marginTop: 18,
              fontSize: 'clamp(36px, 4.2vw, 60px)',
              lineHeight: '1.04em',
            }}>
              {chapter.artist}<br />
              <span className="italic" style={{ color: 'var(--fg-soft)' }}>
                — {chapter.where || chapter.title}
              </span>
            </h2>
            <div className="mono" style={{ marginTop: 22, color: 'var(--fg-soft)' }}>
              {chapter.dur} · {chapter.date}
            </div>
            <div style={{ marginTop: 30 }}>
              <ChapterCover c={chapter} style={{ maxWidth: 460 }} />
            </div>
            <div style={{ marginTop: 18 }}>
              <a href={chapter.url} target="_blank" rel="noreferrer"
                className="mono" style={{ color: 'var(--fg)' }}>
                Listen on Soundcloud ↗︎
              </a>
            </div>
          </div>

          {/* RIGHT — three most recent podcast chapters as compact cards.
              Each cover links to Soundcloud via the existing ChapterCover
              wrapper. Layout mirrors the catalog row used above the fold. */}
          <div>
            <div className="h3" style={{ marginBottom: 20 }}>Recent chapters</div>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
              gap: 'clamp(14px, 1.4vw, 24px)',
            }}>
              {chapters.slice(1, 4).map((c) => (
                <div key={c.num + ':' + c.url} className="release-card">
                  <ChapterCover c={c} />
                  <div className="meta">
                    <div className="cat">Chapter {c.num}</div>
                    <div className="title" style={{ fontSize: 15 }}>{c.title}</div>
                    <div className="artist" style={{ fontSize: 13 }}>
                      {c.where || c.date}
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 28, textAlign: 'right' }}>
              <span className="mono"
                style={{ cursor: 'pointer', color: 'var(--fg)' }}
                onClick={() => go('mixes')}>
                All chapters ↗︎
              </span>
            </div>
          </div>
        </section>
        </>
      ) : (
        <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, padding: '90px 0 110px', borderTop: '1px solid var(--rule)' }}>
          {/* Latest LABEL release */}
          <div style={{ cursor: 'pointer' }} onClick={() => go('release', r.id)}>
            <div className="h3">Latest release</div>
            <div style={{ marginTop: 24 }}>
              <Cover r={r} />
            </div>
            <h2 className="h2" style={{ marginTop: 28, fontSize: 'clamp(28px, 3vw, 44px)' }}>{r.title}</h2>
            <div className="h4 italic" style={{ marginTop: 8, color: 'var(--fg-soft)' }}>{r.artist}</div>
          </div>

          {/* Latest PODCAST chapter — image placeholder is the external link */}
          <div>
            <div className="h3">Latest podcast</div>
            <div style={{ marginTop: 24 }}>
              <ChapterCover c={chapter} />
            </div>
            <h2 className="h2" style={{ marginTop: 28, fontSize: 'clamp(28px, 3vw, 44px)' }}>
              Chapter {chapter.num} — {chapter.title}
            </h2>
            <div className="h4 italic" style={{ marginTop: 8, color: 'var(--fg-soft)' }}>{chapter.artist}</div>
            <div style={{ marginTop: 18 }}>
              <a href={chapter.url} target="_blank" rel="noreferrer"
                className="mono" style={{ color: 'var(--fg)' }}>
                Listen on Soundcloud ↗︎
              </a>
            </div>
          </div>
        </section>
      )}
    </div>
  );
};

// =============================================================
// RELEASES — full catalog
// =============================================================
const ReleasesPage = ({ go, t }) => {
  const filtered = RELEASES;
  const { SigilDivider } = window.MOTD_SIGILS;

  return (
    <div className="page-fade">
      <div data-graphics-only>
        <SigilDivider
          ns={[4, 1, 27]}
          size={64}
          stroke={3}
          faint={true}
          label={`${filtered.length} releases \u00b7 2018 \u2014 present`}
          margin="50px 0 50px"
        />
      </div>

      <section style={{ paddingTop: 0, paddingBottom: 40 }}>
        <div className={`releases-grid density-${t.density}`}>
          {filtered.map(r => (
            <div key={r.id} className="release-card" onClick={() => go('release', r.id)}>
              <Cover r={r} />
              <div className="meta">
                <div className="title">{r.title}</div>
                <div className="artist">{r.artist}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

const FilterDropdown = ({ label, value, options, onChange }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ position: 'relative' }}>
      <div className="mono" style={{ display: 'flex', gap: 10, alignItems: 'center', cursor: 'pointer', color: 'var(--fg)' }} onClick={() => setOpen(o => !o)}>
        <span style={{ color: 'var(--fg-soft)' }}>{label}</span>
        <span>·</span>
        <span>{value}</span>
        <span style={{ opacity: .6 }}>▾</span>
      </div>
      {open && (
        <div style={{ position: 'absolute', top: '100%', left: 0, marginTop: 8, background: 'var(--bg-soft)', border: '1px solid var(--rule)', padding: 6, minWidth: 160, zIndex: 5 }}>
          {options.map(o => (
            <div key={o} className="mono" style={{ padding: '8px 10px', cursor: 'pointer', color: o === value ? 'var(--fg)' : 'var(--fg-soft)' }}
              onClick={() => { onChange(o); setOpen(false); }}>{o}</div>
          ))}
        </div>
      )}
    </div>
  );
};

// =============================================================
// RELEASE DETAIL — mirrors the reference screenshot's structure
// =============================================================
const ReleasePage = ({ go, id }) => {
  const r = RELEASES.find(x => x.id === id) || RELEASES[0];
  const idx = RELEASES.findIndex(x => x.id === r.id);
  // Real prev/next — undefined when we're at the edge of the list so the
  // nav doesn't render a link pointing back at the current release. RELEASES
  // is ordered newest→oldest, so "previous" (older) is idx + 1, "next"
  // (newer) is idx - 1.
  const prev = idx < RELEASES.length - 1 ? RELEASES[idx + 1] : null;
  const next = idx > 0                    ? RELEASES[idx - 1] : null;
  const ownDetail = RELEASE_DETAILS[r.id];
  // Detail is now strict: only render notes/tracklist/credits when this
  // release has its own data. The previous behaviour (fall back to Locust's
  // detail) was leaking Locust's tracklist onto every release without an
  // entry — clearly wrong on Vanishing Point and friends.
  const detail = ownDetail || null;
  const extras = (ownDetail && ownDetail.extras) || RELEASE_EXTRAS[r.id] || [];
  // Which thumbnail is shown in the main cover slot. Defaults to the primary
  // cover; clicking a thumb in the secondary grid swaps it here.
  const [shownImg, setShownImg] = React.useState(r.image);
  React.useEffect(() => { setShownImg(r.image); }, [r.id, r.image]);

  return (
    <div className="page-fade">
      <Breadcrumb onClick={() => go('releases')}>Releases</Breadcrumb>

      <section style={{ paddingTop: 40, paddingBottom: 50, display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 80, alignItems: 'start' }}>
        {/* Cover + secondary thumbs.
            When the release has additional archive images (back cover, vinyl
            shots, photo set), render those instead of the procedural SVG
            placeholders. Clicking a thumb swaps the main cover image with it. */}
        <div>
          <Cover r={r.image && shownImg !== r.image ? { ...r, image: shownImg } : r} onClick={() => setShownImg(r.image)} />
          {(extras && extras.length > 0) && (
            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(4, extras.length + 1)}, 1fr)`, gap: 10, marginTop: 10 }}>
              {[r.image, ...extras].slice(0, 4).map((src, i) => (
                <div
                  key={src + i}
                  onClick={() => setShownImg(src)}
                  style={{
                    aspectRatio: '1/1', overflow: 'hidden', background: '#06080a',
                    cursor: 'pointer',
                    outline: shownImg === src ? '1px solid var(--fg-soft)' : '1px solid transparent',
                    outlineOffset: -1,
                    opacity: shownImg === src ? 1 : 0.78,
                    transition: 'opacity .15s ease, outline-color .15s ease',
                  }}
                >
                  <img
                    src={window.assetUrl(src)}
                    alt=""
                    loading="lazy"
                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                  />
                </div>
              ))}
            </div>
          )}
          {/* No extras + no real cover → keep the original procedural set so
              the layout doesn't go bare. */}
          {(!extras || extras.length === 0) && !r.image && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 10 }}>
              {(() => {
                const { Artwork } = window.MOTD_ART;
                return ['back', 'vinyl-a', 'vinyl-b'].map((suffix) => (
                  <Artwork key={suffix} seed={r.id + '-' + suffix} style={{ aspectRatio: '1/1' }} />
                ));
              })()}
            </div>
          )}
        </div>

        {/* Detail column */}
        <div>
          <div className="h3">{r.cat}</div>
          <h1 className="h1" style={{ marginTop: 18, fontSize: 'clamp(48px, 5.5vw, 96px)' }}>{r.title}</h1>
          <div className="h4 italic" style={{ marginTop: 16, color: 'var(--fg-soft)' }}>{r.artist}</div>

          {/* Metadata strip — mono labels. "Edition" was dropped because it
              repeats info already in Format (LP/CD vs Digital implies
              limited-pressed vs unlimited). Two columns now. */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', columnGap: 60, rowGap: 8, marginTop: 40 }}>
            <div className="h3">Format</div>
            <div className="h3">Released</div>
            <div className="mono" style={{ color: 'var(--fg)' }}>{r.format}</div>
            <div className="mono" style={{ color: 'var(--fg)' }}>{r.released}</div>
          </div>

          <div className="rule" style={{ margin: '40px 0 36px' }} />

          {/* Primary CTA: filled rect — Purchase the release on Bandcamp.
              Anchor (not button + window.open) so the preview iframe's
              popup behaviour matches a vanilla external link. */}
          <a
            href={r.bandcamp || 'https://mysteriesofthedeep.bandcamp.com'}
            target="_blank"
            rel="noopener noreferrer"
            className="btn-primary"
            style={{ textDecoration: 'none', display: 'inline-flex' }}
          >
            Purchase on Bandcamp ↗︎
          </a>
          {/* Optional secondary CTA — wired only when a release has an
              associated YouTube video on the @MysteriesOfTheDeep channel.
              Set `youtube: 'https://www.youtube.com/watch?v=…'` on the
              release row in proto-data.jsx to enable it. */}
          {r.youtube && (
            <a
              href={r.youtube}
              target="_blank"
              rel="noopener noreferrer"
              className="btn-primary"
              style={{ textDecoration: 'none', display: 'inline-flex', marginLeft: 10 }}
            >
              Watch on YouTube ↗︎
            </a>
          )}

          {/* Tracklist — only when this release has its own detail data.
              Releases without RELEASE_DETAILS skip this block entirely (and
              the release-notes block below) rather than borrowing another
              release's writeup.

              Vinyl/CD releases render two columns (Side A / Side B). Digital-
              only releases combine the two arrays into a single "Tracklist"
              column since there's no physical side division. */}
          {detail && detail.sideA && (() => {
            const isPhysical = /\b(LP|CD|Vinyl)\b/i.test(r.format || '');
            if (isPhysical) {
              return (
                <div className="tracklist" style={{ marginTop: 56 }}>
                  <div className="side">
                    <div className="h3">Side A</div>
                    {detail.sideA.map(([n, t]) => (
                      <div className="row" key={n}>
                        <div className="n">{n}</div>
                        <div className="t">{t}</div>
                      </div>
                    ))}
                  </div>
                  <div className="side">
                    <div className="h3">Side B</div>
                    {detail.sideB.map(([n, t]) => (
                      <div className="row" key={n}>
                        <div className="n">{n}</div>
                        <div className="t">{t}</div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            }
            const all = [...detail.sideA, ...(detail.sideB || [])];
            const pad = (i) => String(i + 1).padStart(2, '0');
            return (
              <div className="tracklist tracklist--digital" style={{ marginTop: 56 }}>
                <div className="side">
                  <div className="h3">Tracklist</div>
                  {all.map(([, t], i) => (
                    <div className="row" key={i}>
                      <div className="n">{pad(i)}</div>
                      <div className="t">{t}</div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })()}
        </div>
      </section>

      {/* Release notes — only when this release has its own writeup.
          Cat./Fmt + the Bandcamp preview embed are always shown (in a small
          standalone block below) since they're derived from the release row,
          not from the detail data. */}
      {detail ? (
      <section className="release-notes" style={{ padding: '50px 0 70px', borderTop: '1px solid var(--rule)' }}>
        <div className="h3" style={{ marginBottom: 36 }}>Release notes</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            {detail.notes.map((n, i) => (
              <p key={i} className="p1 italic" style={{ marginTop: i === 0 ? 0 : 24, maxWidth: 640 }}>{n}</p>
            ))}
          </div>
          <div>
            {/* Credits — two-column key/value, tightened from the previous
                spacing. Mono label stays small; value sits on its own line
                underneath, so long values (multiple names, studio + city)
                don't get squeezed by a fixed-width label column. */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', columnGap: 28, rowGap: 18 }}>
              {detail.credits.map(([k, v]) => (
                <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div className="mono" style={{ color: 'var(--fg-faint)' }}>{k}</div>
                  <div className="italic" style={{
                    color: 'var(--fg)',
                    fontFamily: 'var(--motd-head)',
                    fontWeight: 300,
                    fontSize: 15,
                    lineHeight: 1.35,
                  }}>{v}</div>
                </div>
              ))}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div className="mono" style={{ color: 'var(--fg-faint)' }}>Cat. · Fmt</div>
                <div className="mono" style={{ color: 'var(--fg)' }}>{r.cat} · {r.format}</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      ) : (
        <section style={{ padding: '50px 0 70px', borderTop: '1px solid var(--rule)' }}>
          <div className="h3" style={{ marginBottom: 28 }}>Listen</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
            <p className="p1 italic" style={{ color: 'var(--fg-soft)', maxWidth: 560 }}>
              Full release notes, credits, and tracklist for this title aren't
              imported yet. Head to Bandcamp for the complete writeup.
            </p>
            <div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div className="mono" style={{ color: 'var(--fg-faint)' }}>Cat. · Fmt</div>
                <div className="mono" style={{ color: 'var(--fg)' }}>{r.cat} · {r.format}</div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Prev/Next — links omitted at list edges so we don't render a
          self-link on the latest (or oldest) release. */}
      <div className="prev-next">
        {prev
          ? <a onClick={() => go('release', prev.id)}>← Previous · {prev.cat} · {prev.title}</a>
          : <span />}
        {next
          ? <a onClick={() => go('release', next.id)}>Next · {next.cat} · {next.title} →</a>
          : <span />}
      </div>
    </div>
  );
};

window.MOTD_PAGES_A = { HomePage, ReleasesPage, ReleasePage };