function FbPreview({ title, caption, count, slots, productImg }) {
  return (
    <div className="card" style={{ overflow: 'hidden', boxShadow: 'var(--shadow-pop)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 14 }}>
        <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent-strong)', display: 'grid', placeItems: 'center', overflow: 'hidden' }}>
          {productImg ? <img src={productImg} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <IconGlobe size={18} />}
        </div>
        <div>
          <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--ink)' }}>{title}</div>
          <div className="eyebrow" style={{ textTransform: 'none' }}>Sponsored · 🌍</div>
        </div>
      </div>
      <div style={{ padding: '0 14px 12px', fontSize: 13, color: 'var(--ink)', whiteSpace: 'pre-wrap', lineHeight: 1.55 }}>{caption}</div>
      <div style={{ display: 'grid', gap: 2, gridTemplateColumns: count === 1 ? '1fr' : '1fr 1fr', background: 'var(--border)' }}>
        {slots.map((s, idx) => {
          const span = count === 3 && idx === 0;
          const imgSrc = s.url || productImg;
          return (
            <div key={s.id} style={{ gridColumn: span ? '1 / -1' : 'auto', aspectRatio: span ? '2 / 1' : '1 / 1', background: 'var(--surface-3)', display: 'grid', placeItems: 'center', overflow: 'hidden', position: 'relative' }}>
              {imgSrc
                ? <img src={imgSrc} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                : <span className="mono" style={{ color: 'var(--ink-4)', fontSize: 12 }}>IMG {idx + 1}</span>
              }
              {imgSrc && !s.url && (
                <div style={{ position: 'absolute', bottom: 4, right: 4, background: 'rgba(0,0,0,0.55)', borderRadius: 4, padding: '2px 6px' }}>
                  <span style={{ color: '#fff', fontSize: 10, fontWeight: 600, fontFamily: 'var(--font-mono)' }}>REF</span>
                </div>
              )}
            </div>
          );
        })}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 16px', fontSize: 12.5, color: 'var(--ink-3)', borderBottom: '1px solid var(--border)' }}>
        <span>👍 1.2K</span><span>45 ความคิดเห็น</span>
      </div>
      <div style={{ display: 'flex', padding: 6 }}>
        {['👍 ถูกใจ', '💬 แสดงความคิดเห็น', '↗ แชร์'].map(t => (
          <button key={t} style={{ flex: 1, padding: '9px 0', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink-2)', fontWeight: 600, fontSize: 12.5, borderRadius: 8 }}>{t}</button>
        ))}
      </div>
    </div>
  );
}

/* ============================ ANALYTICS ============================ */