// ── Listing cards + Explore + Saved screens ──────────────────────
const { Icon, Photo, HeartBtn, Chip, DealTag, Badge, Stats, fmtPrice } = window;

// Swipeable photo carousel for cards
function CardCarousel({ hue, photos = 5, rounded = 0 }) {
  const n = Math.min(photos || 5, 6);
  const ref = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const onScroll = () => { const el = ref.current; if (el) setIdx(Math.round(el.scrollLeft / el.clientWidth)); };
  return (
    <>
      <div ref={ref} onScroll={onScroll} className="no-scrollbar" style={{ position: 'absolute', inset: 0,
        display: 'flex', overflowX: 'auto', scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch' }}>
        {Array.from({ length: n }).map((_, i) => (
          <div key={i} style={{ flex: '0 0 100%', scrollSnapAlign: 'start' }}>
            <Photo hue={hue} i={i} label={false} rounded={rounded} />
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: 13, left: 0, right: 0, display: 'flex', justifyContent: 'center',
        gap: 5, pointerEvents: 'none' }}>
        {Array.from({ length: n }).map((_, i) => (
          <span key={i} style={{ width: i === idx ? 16 : 6, height: 6, borderRadius: 9, transition: 'all .2s',
            background: i === idx ? '#fff' : 'rgba(255,255,255,0.55)', boxShadow: '0 1px 2px rgba(0,0,0,0.25)' }} />
        ))}
      </div>
    </>
  );
}

// Full-width listing card
function ListingCard({ l, saved, onOpen, onToggleSave, onOpenReel }) {
  return (
    <div data-tour="re-card" onClick={() => onOpen(l.id)} style={{ cursor: 'pointer' }}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: '4 / 3',
        borderRadius: 'var(--r-img, 18px)', overflow: 'hidden' }}>
        <CardCarousel hue={l.hue} photos={l.photos} />
        {/* top row */}
        <div style={{ position: 'absolute', top: 12, left: 12, right: 12, display: 'flex',
          alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', gap: 6 }}>
            {l.badge && <Badge>{l.badge}</Badge>}
          </div>
          <HeartBtn active={saved} onClick={() => onToggleSave(l.id)} light />
        </div>
        {/* bottom row */}
        <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12, display: 'flex',
          alignItems: 'flex-end', justifyContent: 'space-between' }}>
          {l.video ? (
            <button onClick={(e) => { e.stopPropagation(); onOpenReel(l.id); }}
              style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 34,
                padding: '0 13px 0 11px', borderRadius: 999, border: 'none', cursor: 'pointer',
                background: 'rgba(20,20,18,0.62)', backdropFilter: 'blur(8px)',
                color: '#fff', fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600 }}>
              <Icon name="play" size={13} s="#fff" fill="#fff" /> Reel
            </button>
          ) : <span />}
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, height: 28,
            padding: '0 10px', borderRadius: 999, background: 'rgba(20,20,18,0.55)',
            backdropFilter: 'blur(8px)', color: '#fff', fontFamily: 'var(--mono)', fontSize: 11 }}>
            <Icon name="grid" size={11} s="#fff" sw={2} /> {l.photos}
          </span>
        </div>
      </div>
      {/* meta */}
      <div style={{ padding: '13px 2px 0' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 21, fontWeight: 700, letterSpacing: -0.5,
            color: 'var(--ink)' }}>{fmtPrice(l)}</div>
          <DealTag deal={l.deal} />
        </div>
        <div style={{ marginTop: 8 }}><Stats l={l} /></div>
        <div style={{ marginTop: 9, fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500,
          color: 'var(--ink)', letterSpacing: -0.2 }}>{l.address}</div>
        <div style={{ marginTop: 2, fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--muted)' }}>
          {l.hood} · {l.city}</div>
      </div>
    </div>
  );
}

// Compact 2-up card
function ListingCardMini({ l, saved, onOpen, onToggleSave }) {
  return (
    <div data-tour="re-card" onClick={() => onOpen(l.id)} style={{ cursor: 'pointer' }}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: '1 / 1',
        borderRadius: 14, overflow: 'hidden' }}>
        <Photo hue={l.hue} kind={l.type} label={false} />
        <div style={{ position: 'absolute', top: 8, right: 8 }}>
          <HeartBtn active={saved} onClick={() => onToggleSave(l.id)} light size={32} />
        </div>
        {l.video && (
          <div style={{ position: 'absolute', bottom: 8, left: 8, width: 26, height: 26, borderRadius: 999,
            background: 'rgba(20,20,18,0.6)', backdropFilter: 'blur(8px)', display: 'flex',
            alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="play" size={12} s="#fff" fill="#fff" />
          </div>
        )}
      </div>
      <div style={{ padding: '9px 1px 0' }}>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 700, letterSpacing: -0.4,
          color: 'var(--ink)' }}>{fmtPrice(l)}</div>
        <div style={{ marginTop: 3, fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink)',
          fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{l.address}</div>
        <div style={{ marginTop: 1, fontFamily: 'var(--sans)', fontSize: 11.5, color: 'var(--muted)' }}>
          {l.beds} bd · {l.baths} ba · {l.sqft.toLocaleString()}</div>
      </div>
    </div>
  );
}

// Image-overlay (editorial) card — info sits on the photo
function ListingCardOverlay({ l, saved, onOpen, onToggleSave, onOpenReel }) {
  return (
    <div data-tour="re-card" onClick={() => onOpen(l.id)} style={{ cursor: 'pointer', position: 'relative', width: '100%',
      aspectRatio: '4 / 5', borderRadius: 'var(--r-img, 18px)', overflow: 'hidden' }}>
      <CardCarousel hue={l.hue} photos={l.photos} />
      {/* legibility gradient */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background:
        'linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, transparent 26%, transparent 46%, rgba(0,0,0,0.72) 100%)' }} />
      {/* top row */}
      <div style={{ position: 'absolute', top: 12, left: 12, right: 12, display: 'flex',
        alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', gap: 6 }}>{l.badge && <Badge>{l.badge}</Badge>}</div>
        <HeartBtn active={saved} onClick={() => onToggleSave(l.id)} light />
      </div>
      {/* bottom info overlaid */}
      <div style={{ position: 'absolute', left: 16, right: 16, bottom: 28, zIndex: 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: 0.6, textTransform: 'uppercase',
            fontWeight: 500, color: '#fff', background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(6px)',
            padding: '4px 8px', borderRadius: 6 }}>{l.deal === 'rent' ? 'For rent' : 'For sale'}</span>
          {l.video && (
            <button onClick={(e) => { e.stopPropagation(); onOpenReel(l.id); }} style={{ display: 'inline-flex',
              alignItems: 'center', gap: 6, height: 28, padding: '0 11px 0 9px', borderRadius: 999, border: 'none',
              cursor: 'pointer', background: 'rgba(255,255,255,0.2)', backdropFilter: 'blur(6px)', color: '#fff',
              fontFamily: 'var(--sans)', fontSize: 12, fontWeight: 600 }}>
              <Icon name="play" size={12} s="#fff" fill="#fff" /> Reel</button>
          )}
        </div>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 26, fontWeight: 700, letterSpacing: -0.6, color: '#fff',
          textShadow: '0 1px 10px rgba(0,0,0,0.35)' }}>{fmtPrice(l)}</div>
        <div style={{ marginTop: 3, fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 500, color: '#fff' }}>
          {l.address}</div>
        <div style={{ marginTop: 1, fontFamily: 'var(--sans)', fontSize: 13, color: 'rgba(255,255,255,0.85)' }}>
          {l.beds} bd · {l.baths} ba · {l.sqft.toLocaleString()} sqft · {l.hood}</div>
      </div>
    </div>
  );
}

// Compact horizontal card — image left, details right
function ListingCardCompact({ l, saved, onOpen, onToggleSave, onOpenReel }) {
  return (
    <div data-tour="re-card" onClick={() => onOpen(l.id)} style={{ cursor: 'pointer', display: 'flex', gap: 14 }}>
      <div style={{ position: 'relative', width: 132, height: 132, flexShrink: 0,
        borderRadius: 'var(--r-img, 18px)', overflow: 'hidden' }}>
        <CardCarousel hue={l.hue} photos={l.photos} />
        {l.badge && <span style={{ position: 'absolute', top: 8, left: 8 }}><Badge>{l.badge}</Badge></span>}
      </div>
      <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
          <span style={{ fontFamily: 'var(--sans)', fontSize: 20, fontWeight: 700, letterSpacing: -0.5,
            color: 'var(--ink)' }}>{fmtPrice(l)}</span>
          <HeartBtn active={saved} onClick={() => onToggleSave(l.id)} size={34} />
        </div>
        <div style={{ marginTop: 5 }}><DealTag deal={l.deal} /></div>
        <div style={{ marginTop: 8, fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 500, color: 'var(--ink)',
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{l.address}</div>
        <div style={{ marginTop: 1, fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--muted)' }}>
          {l.beds} bd · {l.baths} ba · {l.sqft.toLocaleString()} · {l.hood}</div>
      </div>
    </div>
  );
}

Object.assign(window, { ListingCard, ListingCardMini, ListingCardOverlay, ListingCardCompact });