// Reusable media cards (sermons, galleries, events) — real thumbnails when the
// sermon/gallery has one, typographic SeriesArt as the brand fallback.
(function () {
  const { Icon } = window;
  const { SeriesArt, Chip, Progress, art } = window.NLUI;

  // Sermon artwork: real thumbnail or typographic brand art.
  function SermonArt({ s, radius = 14, compact, showTitle = true }) {
    if (s.thumbnail) {
      return (
        <div style={{ position: 'relative', width: '100%', height: '100%', borderRadius: radius, overflow: 'hidden', background: 'var(--nl-navy-900)' }}>
          <img src={s.thumbnail} alt="" loading="lazy"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
            onError={e => { e.target.style.display = 'none'; }} />
        </div>
      );
    }
    return <SeriesArt theme={s.theme} kicker={compact ? s.part : [s.seriesName, s.part].filter(Boolean).join(' · ')}
      title={showTitle ? s.title : ''} radius={radius} compact={compact} />;
  }

  // Big hero sermon card (16:9 art + play) ----------------------------------
  function SermonHero({ s, onClick, label = 'Latest message' }) {
    return (
      <button onClick={onClick} style={{ display: 'block', width: '100%', textAlign: 'left',
        background: 'none', border: 0, padding: 0, cursor: 'pointer' }}>
        <div style={{ position: 'relative', width: '100%', aspectRatio: '16/9', borderRadius: 18, overflow: 'hidden',
          boxShadow: 'var(--nl-shadow-md)' }}>
          <SermonArt s={s} radius={18} />
          <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
            width: 58, height: 58, borderRadius: 999, background: 'rgba(251,250,246,0.92)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--nl-shadow-md)' }}>
            <Icon name="play" size={26} fill="currentColor" style={{ color: 'var(--nl-navy-800)', marginLeft: 3 }} />
          </div>
          {label && <div style={{ position: 'absolute', top: 14, left: 14 }}>
            <Chip solid style={{ background: 'var(--nl-leaf-600)', color: 'var(--nl-navy-900)' }}>{label}</Chip>
          </div>}
          {s.length && <div style={{ position: 'absolute', bottom: 14, right: 14, fontFamily: 'var(--nl-font-sans)',
            fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.92)',
            background: 'rgba(5,31,46,0.55)', borderRadius: 8, padding: '3px 8px' }}>{s.length}</div>}
          {s.progress > 0 && s.progress < 1 && (
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}>
              <Progress value={s.progress} />
            </div>)}
        </div>
        <div style={{ padding: '12px 2px 0' }}>
          {s.thumbnail && <div style={{ fontFamily: 'var(--nl-font-serif)', fontWeight: 600, fontSize: 19,
            lineHeight: 1.2, color: 'var(--nl-navy-900)', marginBottom: 3 }}>{s.title}</div>}
          <div style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 13, color: 'var(--nl-ink-500)' }}>
            {[s.speaker, s.date].filter(Boolean).join(' · ')}
          </div>
        </div>
      </button>
    );
  }

  // Horizontal-scroll compact sermon card ----------------------------------
  function SermonMini({ s, onClick }) {
    return (
      <button onClick={onClick} style={{ width: 168, flexShrink: 0, textAlign: 'left',
        background: 'none', border: 0, padding: 0, cursor: 'pointer' }}>
        <div style={{ width: '100%', aspectRatio: '16/10', borderRadius: 14, overflow: 'hidden' }}>
          <SermonArt s={s} radius={14} compact />
        </div>
        <div style={{ fontFamily: 'var(--nl-font-sans)', fontWeight: 600, fontSize: 14, color: 'var(--nl-navy-900)',
          marginTop: 8, lineHeight: 1.25 }}>{s.title}</div>
        <div style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 12, color: 'var(--nl-ink-500)', marginTop: 2 }}>
          {[s.length, s.topic].filter(Boolean).join(' · ')}
        </div>
      </button>
    );
  }

  // List row sermon ---------------------------------------------------------
  function SermonRow({ s, onClick }) {
    return (
      <button onClick={onClick} style={{ display: 'flex', gap: 14, width: '100%', textAlign: 'left',
        background: 'none', border: 0, padding: '12px 0', cursor: 'pointer', alignItems: 'center' }}>
        <div style={{ width: 116, height: 74, flexShrink: 0, borderRadius: 12, overflow: 'hidden', position: 'relative' }}>
          <SermonArt s={s} radius={12} compact showTitle={!s.thumbnail} />
          {s.progress > 0 && s.progress < 1 && (
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 4 }}>
              <Progress value={s.progress} />
            </div>)}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          {s.seriesName && <div style={{ fontFamily: 'var(--nl-font-sans)', fontWeight: 700, fontSize: 11, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--nl-leaf-700)' }}>{s.seriesName}</div>}
          <div style={{ fontFamily: 'var(--nl-font-sans)', fontWeight: 600, fontSize: 15.5, color: 'var(--nl-navy-900)',
            margin: '2px 0', lineHeight: 1.25 }}>{s.title}</div>
          <div style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 12.5, color: 'var(--nl-ink-500)' }}>
            {[s.date, s.length].filter(Boolean).join(' · ')}{s.progress >= 1 ? ' · Watched' : ''}
          </div>
        </div>
      </button>
    );
  }

  // Gallery cover (real cover photo with brand fallback) ---------------------
  function GalleryCover({ g, onClick, w }) {
    const t = art(g.theme);
    return (
      <button onClick={onClick} style={{ width: w || '100%', flexShrink: 0, textAlign: 'left',
        background: 'none', border: 0, padding: 0, cursor: 'pointer' }}>
        <div style={{ position: 'relative', width: '100%', aspectRatio: '1/1', borderRadius: 14, overflow: 'hidden',
          background: t.bg, display: 'flex', alignItems: 'flex-end', padding: 13, boxSizing: 'border-box' }}>
          {g.coverUrl && <img src={g.coverUrl} alt="" loading="lazy"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
            onError={e => { e.target.style.display = 'none'; }} />}
          {g.coverUrl && <div style={{ position: 'absolute', inset: 0,
            background: 'linear-gradient(transparent 45%, rgba(5,31,46,0.72))' }} />}
          {!g.coverUrl && <Icon name="image" size={26} style={{ color: t.fg, opacity: 0.55, position: 'absolute', top: 12, left: 12 }} />}
          <div style={{ position: 'absolute', top: 12, right: 12, fontFamily: 'var(--nl-font-sans)', fontSize: 11,
            fontWeight: 700, color: '#fff', background: 'rgba(5,31,46,0.45)', borderRadius: 8, padding: '2px 7px' }}>{g.count}</div>
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: 'var(--nl-font-serif)', fontWeight: 600, fontSize: 17,
              color: g.coverUrl ? '#fff' : t.fg, lineHeight: 1.1 }}>{g.title}</div>
            <div style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 11.5,
              color: g.coverUrl ? 'rgba(255,255,255,0.85)' : t.fg, opacity: 0.85, marginTop: 3 }}>{g.date}</div>
          </div>
        </div>
      </button>
    );
  }

  // Event card --------------------------------------------------------------
  function EventCard({ e, onClick, horizontal }) {
    const t = art(e.theme);
    return (
      <button onClick={onClick} style={{ width: horizontal ? 230 : '100%', flexShrink: 0, textAlign: 'left',
        background: 'var(--nl-white)', border: '1px solid var(--nl-border)', borderRadius: 14, padding: 14,
        cursor: 'pointer', display: 'flex', gap: 13, alignItems: 'center', boxShadow: 'var(--nl-shadow-sm)' }}>
        <div style={{ width: 52, height: 56, borderRadius: 10, flexShrink: 0, background: t.bg, color: t.fg,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em', opacity: 0.85 }}>{e.mo}</span>
          <span style={{ fontFamily: 'var(--nl-font-serif)', fontSize: 24, fontWeight: 600, lineHeight: 1 }}>{e.day}</span>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--nl-font-sans)', fontWeight: 600, fontSize: 15, color: 'var(--nl-navy-900)', lineHeight: 1.2 }}>{e.title}</div>
          <div style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 12.5, color: 'var(--nl-ink-500)', marginTop: 3,
            display: 'flex', alignItems: 'center', gap: 5 }}>
            <Icon name="clock" size={13} /> {e.when}
          </div>
          <div style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 12.5, color: 'var(--nl-ink-500)', marginTop: 2,
            display: 'flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            <Icon name="mapPin" size={13} /> {e.loc}
          </div>
        </div>
      </button>
    );
  }

  window.NLCards = { SermonArt, SermonHero, SermonMini, SermonRow, GalleryCover, EventCard };
})();