// ── Shared UI primitives ─────────────────────────────────────────
const { Icon } = window;

// Photo placeholder: a soft, tasteful duotone keyed to the listing hue.
// Honest stand-in for a real photo — drop real imagery here later.
function Photo({ hue = 200, i = 0, kind = 'photo', rounded = 0, style = {}, label = true, dark = false }) {
  const l1 = dark ? 42 : 86, l2 = dark ? 22 : 70;
  const a = 120 + (i * 37) % 80; // vary gradient angle per photo
  const bg = `linear-gradient(${a}deg,
      oklch(${l1/100} 0.05 ${hue}) 0%,
      oklch(${(l1-14)/100} 0.06 ${hue}) 48%,
      oklch(${l2/100} 0.07 ${hue}) 100%)`;
  return (
    <div style={{
      position: 'relative', width: '100%', height: '100%',
      borderRadius: rounded, overflow: 'hidden', background: bg,
      ...style,
    }}>
      {/* horizon band — soft architectural abstraction */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '63%', bottom: 0,
        background: `oklch(${(l2-6)/100} 0.06 ${hue})`, opacity: 0.55 }} />
      <div style={{ position: 'absolute', left: 0, right: 0, top: '63%', height: 1,
        background: `oklch(${(l2+10)/100} 0.04 ${hue} / 0.5)` }} />
      {/* light wash */}
      <div style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(120% 80% at 78% 8%, rgba(255,255,255,0.5), transparent 55%)' }} />
      {label && (
        <div className="ph-label" style={{ position: 'absolute', left: 10, bottom: 9, display: 'flex', alignItems: 'center', gap: 5,
          fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: 0.5, textTransform: 'uppercase',
          color: dark ? 'rgba(255,255,255,0.7)' : 'rgba(40,40,38,0.5)' }}>
          <span style={{ width: 4, height: 4, borderRadius: 9, background: 'currentColor' }} />
          {kind}
        </div>
      )}
    </div>
  );
}

// Favorite heart button
function HeartBtn({ active, onClick, size = 38, light = false }) {
  return (
    <button onClick={(e) => { e.stopPropagation(); onClick && onClick(); }}
      style={{
        width: size, height: size, borderRadius: 999, border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        background: light ? 'rgba(255,255,255,0.92)' : 'var(--surface)',
        boxShadow: light ? '0 2px 8px rgba(0,0,0,0.18)' : '0 1px 4px rgba(0,0,0,0.10)',
        transition: 'transform .15s ease',
      }}
      onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.88)'}
      onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
      <Icon name="heart" size={size * 0.5}
        s={active ? 'var(--accent)' : 'var(--ink)'}
        fill={active ? 'var(--accent)' : 'none'} sw={1.9} />
    </button>
  );
}

// Small pill / chip
function Chip({ children, active, onClick, leading, style = {} }) {
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0,
      height: 38, padding: '0 15px', borderRadius: 999, cursor: 'pointer',
      fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500, letterSpacing: -0.1,
      whiteSpace: 'nowrap', transition: 'all .15s ease',
      border: active ? '1.5px solid var(--ink)' : '1.5px solid var(--line)',
      background: active ? 'var(--ink)' : 'var(--surface)',
      color: active ? 'var(--bg)' : 'var(--ink)',
      ...style,
    }}>
      {leading}
      {children}
    </button>
  );
}

// Deal tag (For sale / For rent)
function DealTag({ deal, style = {} }) {
  const rent = deal === 'rent';
  return (
    <span style={{
      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: 0.6, textTransform: 'uppercase',
      fontWeight: 500, padding: '4px 8px', borderRadius: 6,
      color: rent ? 'var(--accent)' : 'var(--ink)',
      background: rent ? 'var(--accent-soft)' : 'oklch(0.93 0.004 95)',
      ...style,
    }}>{rent ? 'For rent' : 'For sale'}</span>
  );
}

// Badge (New / Price cut / Open house)
function Badge({ children, style = {} }) {
  return (
    <span style={{
      fontFamily: 'var(--sans)', fontSize: 11.5, fontWeight: 600, letterSpacing: -0.1,
      padding: '5px 10px', borderRadius: 999, color: 'var(--surface)',
      background: 'var(--ink)', ...style,
    }}>{children}</span>
  );
}

// Inline bed/bath/sqft stats
function Stats({ l, gap = 14, size = 17, color = 'var(--muted)' }) {
  const item = (icon, val) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
      <Icon name={icon} size={size} s={color} sw={1.7} />
      <span style={{ fontFamily: 'var(--sans)', fontSize: size * 0.82, fontWeight: 500, color: 'var(--ink)' }}>{val}</span>
    </span>
  );
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap }}>
      {item('bed', l.beds)}
      {item('bath', l.baths)}
      {item('ruler', l.sqft.toLocaleString())}
    </div>
  );
}

Object.assign(window, { Photo, HeartBtn, Chip, DealTag, Badge, Stats });