// Shared atoms — header, footer, marks, placeholders, embeds.

const NAV = [
  // "Home" gives visitors an explicit return path. The wordmark in the
  // top-left also navigates home, but without an affordance to signal it,
  // visitors on inner pages weren't discovering that.
  ['latest',   'Home'],
  ['releases', 'Label'],
  ['mixes',    'Podcast'],
  ['events',   'Events'],
  ['about',    'About'],
];

// Simple ring + dot mark (original, not a recreation of the label's logo).
const Mark = ({ size = 22, onClick }) => (
  <img
    className="mark"
    src={window.assetUrl('mysteries-logo-mark.png')}
    alt="Mysteries of the Deep"
    width={size}
    height={size}
    style={{ width: size, height: size, cursor: onClick ? 'pointer' : 'default' }}
    draggable="false"
    onClick={onClick}
  />
);

const TopBar = ({ go, page }) => (
  <>
    {/* The utility bar's only job now is to host the main nav row below it;
        the social links that used to live up here moved to the footer to
        avoid duplicating them on every page. */}
    <nav className="main-nav">
      <div className="brand" onClick={() => go('latest')}>
        <span>Mysteries of the Deep</span>
      </div>
      <ul className="nav-links">
        {NAV.map(([key, label]) => (
          <li
            key={key}
            className={page === key || (page === 'release' && key === 'releases') ? 'active' : ''}
            onClick={() => go(key)}
          >{label}</li>
        ))}
      </ul>
    </nav>
  </>
);

// Atmospheric placeholder — abstract dark imagery for "deep / water / texture".
// `corner` shows the catalog number, `caption` describes what imagery the user
// should drop in.
const Atmo = ({ caption, corner, tint, style, className = '' }) => (
  <div className={`atmo ${tint || ''} ${className}`} style={style}>
    {corner  && <div className="corner">{corner}</div>}
    {caption && <div className="caption">{caption}</div>}
  </div>
);

// Square cover, used in catalog grid. Uses the real archive cover photo
// when `r.image` is set, falling back to the procedurally-generated SVG
// artwork. The catalog ribbon (cat#) overlays the bottom-left in either
// case so the visual rhythm of the grid is preserved.
const Cover = ({ r, onClick }) => {
  const { Artwork } = window.MOTD_ART;
  if (r.image) {
    return (
      <div className="cover artwork" style={{ position: 'relative', aspectRatio: '1 / 1', overflow: 'hidden', background: '#06080a' }} onClick={onClick}>
        <img
          src={window.assetUrl(r.image)}
          alt={`${r.title} — ${r.artist}`}
          loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      </div>
    );
  }
  return (
    <Artwork
      className="cover"
      seed={r.id}
      style={{ cursor: onClick ? 'pointer' : 'default' }}
    />
  );
};

// Chapter artwork — the podcast pattern. The artwork IS the link: a single
// click opens the episode on Soundcloud in a new tab. A subtle hover overlay
// makes the destination explicit. Use anywhere a chapter is rendered.
const ChapterCover = ({ c, square = true, style, className = '' }) => {
  const { Artwork } = window.MOTD_ART;
  return (
    <a
      href={c.url}
      target="_blank"
      rel="noreferrer"
      className={`chapter-cover ${className}`}
      style={{
        display: 'block', position: 'relative',
        aspectRatio: square ? '1 / 1' : 'auto',
        ...style,
      }}
      aria-label={`Listen to Chapter ${c.num} · ${c.title} on Soundcloud`}
    >
      {/* Procedural artwork sits underneath as a fallback for items whose
          feed entry didn't include `<itunes:image>` (rare, but possible). */}
      <Artwork
        seed={'chapter-' + c.num}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      />
      {/* Real episode artwork from the Soundcloud RSS feed. Rendered on top
          of the procedural so we never flash a placeholder. */}
      {c.image && (
        <img
          src={c.image}
          alt=""
          loading="lazy"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', display: 'block',
          }}
        />
      )}
      {/* Hover overlay — only visible on the chapter cover, makes the
          external destination explicit without permanently competing
          with the artwork. No chapter-number tag — the surrounding card
          / row caption carries that. */}
      <div className="chapter-cover-over">
        <span className="play-ring" />
        <span className="chapter-cover-cap">
          Listen on Soundcloud ↗︎
        </span>
      </div>
    </a>
  );
};

// Soundcloud-style embed placeholder.
const Embed = ({ label, dur, tall = false, source = 'Soundcloud' }) => (
  <div className={`embed ${tall ? 'tall' : ''}`}>
    {!tall && (
      <>
        <div className="play-ring" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
          <div style={{ color: 'var(--fg)', fontFamily: 'var(--motd-mono)', fontSize: 11 }}>{label}</div>
          <div className="waveform" />
        </div>
        <div style={{ flex: '0 0 auto' }}>{dur} · {source} ↗︎</div>
      </>
    )}
    {tall && (
      <>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ color: 'var(--fg)', fontFamily: 'var(--motd-mono)', fontSize: 11 }}>{label}</span>
          <span>{source} ↗︎</span>
        </div>
        <div className="waveform" />
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div className="play-ring" />
            <span style={{ color: 'var(--fg)', fontFamily: 'var(--motd-mono)' }}>00:00 / {dur}</span>
          </div>
          <span>↻  ⤓  ♡</span>
        </div>
      </>
    )}
  </div>
);

// Footer — minimal: social + copy on one strip. The wordmark used to live
// on the left but the © line already says "Mysteries of the Deep", so we
// removed the duplicate.
const Footer = ({ go }) => (
  <footer className="footer footer-minimal">
    <div className="copy">
      <div style={{ display: 'flex', gap: 22 }}>
        <a href="https://mysteriesofthedeep.bandcamp.com" target="_blank" rel="noreferrer">Bandcamp ↗︎</a>
        <a href="https://soundcloud.com/mysteriesofthedeep" target="_blank" rel="noreferrer">Soundcloud ↗︎</a>
        <a href="https://www.instagram.com/mystofthedeep/" target="_blank" rel="noopener noreferrer">Instagram ↗︎</a>
        <a onClick={() => go('about')} style={{ cursor: 'pointer' }}>Contact</a>
      </div>
      <span>© Mysteries of the Deep</span>
    </div>
  </footer>
);

// Breadcrumb
const Breadcrumb = ({ children, onClick }) => (
  <div className="breadcrumb" onClick={onClick}>← {children}</div>
);

window.MOTD_ATOMS = { TopBar, Footer, Mark, Atmo, Cover, ChapterCover, Embed, Breadcrumb, NAV };

// Accent hex lookup — used by SVG artwork (which needs a real color value,
// not the CSS variable). Kept in sync with ACCENT_OPTIONS in proto-app.jsx.
window.MOTD_ACCENTS = {
  none:   null,
  cobalt: '#3b78d6',
  sea:    '#26a3a3',
  rust:   '#c46a3a',
};