// TownPost — Marketplace item detail

function ScreenMarketDetail({ item, onNav = () => {}, onBack = () => {}, onMessage = () => {}, onMakeOffer = () => {} }) {
  const m = item || MARKET[0];
  const [saved, setSaved] = React.useState(false);

  // Build gallery images from the photo count
  const photoCount = m.photos || 3;
  const images = Array.from({ length: photoCount }, (_, i) => ({
    label: i === 0 ? m.title.split('·')[0].trim() : `${m.title.split('·')[0].trim()} · ${i + 1}`,
    hue: (m.hue + i) % 6,
  }));

  const isFree = m.price === 'FREE';

  // Suggested similar items (exclude self)
  const similar = MARKET.filter(x => x.id !== m.id).slice(0, 4);

  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Top floating chrome — sits over the image */}
      <div style={{ position: 'relative', flexShrink: 0 }}>
        <div style={{ position: 'absolute', top: 12, left: 12, right: 12, zIndex: 10, display: 'flex', justifyContent: 'space-between' }}>
          <button onClick={onBack} style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(28, 22, 18, 0.55)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backdropFilter: 'blur(6px)' }}>
            <TPIcon name="chevronLeft" size={18} color="#fff" />
          </button>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(28, 22, 18, 0.55)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backdropFilter: 'blur(6px)' }}>
              <TPIcon name="share" size={16} color="#fff" stroke={2} />
            </button>
            <button onClick={() => setSaved(s => !s)} style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(28, 22, 18, 0.55)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backdropFilter: 'blur(6px)' }}>
              <TPIcon name={saved ? 'bookmark' : 'bookmark'} size={16} color={saved ? TP.ochre : '#fff'} stroke={2} />
            </button>
          </div>
        </div>
        <TPImageGallery images={images} height={280} radius={0} />
        {isFree && (
          <div style={{ position: 'absolute', bottom: 14, left: 14, background: TP.forest, color: TP.cream, padding: '5px 11px', borderRadius: TP.r.pill, fontFamily: TP.mono, fontSize: 11, fontWeight: 700, letterSpacing: 0.8 }}>FREE</div>
        )}
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Title block */}
        <div style={{ padding: '16px 16px 14px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
            <span style={{ fontFamily: TP.serif, fontSize: 30, color: TP.ink, lineHeight: 1, letterSpacing: -0.6, fontWeight: 600 }}>{m.price}</span>
            <span style={{
              padding: '3px 8px', borderRadius: TP.r.pill,
              background: TP.greenTint, color: TP.forest,
              fontFamily: TP.mono, fontSize: 9.5, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase',
              flexShrink: 0, position: 'relative', zIndex: 1,
            }}>{m.cond}</span>
          </div>
          <div style={{ fontFamily: TP.serif, fontSize: 20, color: TP.ink, lineHeight: 1.2, letterSpacing: -0.3, marginBottom: 8, textWrap: 'pretty' }}>{m.title}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: TP.sans, fontSize: 12, color: TP.muted }}>
            <TPIcon name="location" size={12} color={TP.muted} stroke={2} />
            <span>{m.loc}</span>
            <span>·</span>
            <span>Posted {m.time} ago</span>
          </div>
        </div>

        {/* Quick facts */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: TP.hairline, borderBottom: `1px solid ${TP.hairline}` }}>
          <Fact icon="ruler" label="Details" value={m.dims} />
          <Fact icon="truck" label="Delivery" value={m.delivery} />
        </div>

        {/* Description */}
        <div style={{ padding: '16px 16px 18px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 8 }}>About this item</div>
          <p style={{ fontFamily: TP.sans, fontSize: 14, color: TP.ink, lineHeight: 1.55, margin: 0, textWrap: 'pretty' }}>{m.desc}</p>
        </div>

        {/* Seller card */}
        <div style={{ padding: '14px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10 }}>Seller</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ position: 'relative' }}>
              <TPAvatar name={m.seller.name} hue={m.seller.hue} size={48} />
              {m.seller.verified && (
                <div style={{ position: 'absolute', bottom: -2, right: -2, width: 18, height: 18, borderRadius: '50%', background: TP.forest, border: `2px solid ${TP.paper}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <TPIcon name="check" size={10} color="#fff" stroke={3} />
                </div>
              )}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }}>
                <span style={{ fontFamily: TP.sans, fontSize: 14, fontWeight: 700, color: TP.ink }}>{m.seller.name}</span>
                {m.seller.verified && (
                  <span style={{ fontFamily: TP.mono, fontSize: 9, fontWeight: 700, color: TP.forest, letterSpacing: 0.8, textTransform: 'uppercase', padding: '1px 6px', borderRadius: TP.r.pill, background: TP.greenTint }}>Verified</span>
                )}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: TP.sans, fontSize: 11.5, color: TP.muted }}>
                <span style={{ color: TP.ochre, fontWeight: 700 }}>★ {m.seller.rating.toFixed(1)}</span>
                <span>· {m.seller.sales} sales</span>
                <span>· {m.seller.joined}</span>
              </div>
            </div>
            <button style={{ padding: '7px 14px', borderRadius: TP.r.pill, background: 'transparent', border: `1px solid ${TP.hairlineStrong}`, fontFamily: TP.sans, fontSize: 12, fontWeight: 600, color: TP.ink, cursor: 'pointer' }}>View</button>
          </div>
        </div>

        {/* Safety tip */}
        <div style={{ margin: '12px 16px', padding: '12px 14px', background: TP.amberTint, borderRadius: TP.r.md, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: TP.ochre, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <TPIcon name="shield" size={14} color="#fff" stroke={2.4} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: TP.sans, fontSize: 12.5, fontWeight: 700, color: TP.ink, marginBottom: 2 }}>Meet safely</div>
            <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.inkSoft, lineHeight: 1.4 }}>Meet in a public spot during daylight. Inspect the item before paying. TownPost never holds payment.</div>
          </div>
        </div>

        {/* Map snippet */}
        <div style={{ padding: '6px 16px 14px' }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 8 }}>Pickup area</div>
          <div style={{ position: 'relative', height: 130, borderRadius: TP.r.md, overflow: 'hidden', border: `1px solid ${TP.hairline}` }}>
            <MapBackdrop />
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ width: 36, height: 36, borderRadius: '50%', background: TP.terracotta, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 12px rgba(0,0,0,0.25)', border: '3px solid #fff' }}>
                <TPIcon name="location" size={16} color="#fff" stroke={2.4} />
              </div>
            </div>
            <div style={{ position: 'absolute', bottom: 8, left: 8, background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(6px)', padding: '5px 10px', borderRadius: TP.r.pill, fontFamily: TP.sans, fontSize: 11, fontWeight: 600, color: TP.ink }}>
              Approx. {m.loc}
            </div>
          </div>
        </div>

        {/* Similar items */}
        <div style={{ paddingBottom: 100 }}>
          <div style={{ padding: '6px 16px 8px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: TP.mono, fontSize: 9.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase' }}>You might also like</div>
            <span style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.terracotta, fontWeight: 600 }}>See more</span>
          </div>
          <div style={{ display: 'flex', gap: 10, padding: '0 16px', overflowX: 'auto' }}>
            {similar.map(s => (
              <div key={s.id} style={{
                flexShrink: 0, width: 150, background: TP.paper, border: `1px solid ${TP.hairline}`, borderRadius: TP.r.md, overflow: 'hidden',
              }}>
                <TPImage label={s.title.split('·')[0].trim()} height={100} hue={s.hue} radius={0} />
                <div style={{ padding: '8px 10px 10px' }}>
                  <div style={{ fontFamily: TP.serif, fontSize: 16, color: TP.ink, lineHeight: 1, letterSpacing: -0.2, marginBottom: 3 }}>{s.price}</div>
                  <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.inkSoft, lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{s.title}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Sticky action bar — single primary CTA with inline price + secondary "Offer" link */}
      <div style={{
        flexShrink: 0,
        padding: '14px 16px 16px',
        background: TP.paper,
        borderTop: `1px solid ${TP.hairline}`,
        boxShadow: '0 -10px 20px -12px rgba(58, 49, 40, 0.10)',
      }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'stretch' }}>
          {/* Price block — restates the asking price compactly so users always see it */}
          <div style={{
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
            paddingRight: 12, borderRight: `1px solid ${TP.hairline}`,
            minWidth: 64,
          }}>
            <div style={{ fontFamily: TP.mono, fontSize: 8.5, color: TP.muted, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', lineHeight: 1 }}>
              {isFree ? 'Free' : 'Asking'}
            </div>
            <div style={{ fontFamily: TP.serif, fontSize: 22, color: TP.ink, fontWeight: 600, letterSpacing: -0.4, lineHeight: 1.05, marginTop: 4 }}>
              {m.price}
            </div>
          </div>

          {/* Primary CTA — single warm-forest pill with avatar of the seller, asking message */}
          <button onClick={onMessage} style={{
            flex: 1, height: 52, borderRadius: 14,
            background: TP.forest, border: 'none',
            color: TP.cream, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            fontFamily: TP.sans, fontSize: 14.5, fontWeight: 600, letterSpacing: 0.1,
            boxShadow: '0 2px 0 rgba(38, 60, 44, 0.18), inset 0 1px 0 rgba(255,255,255,0.10)',
          }}>
            <TPIcon name="mail" size={16} color={TP.cream} stroke={2.2} />
            Message {m.seller.name.split(' ')[0]}
          </button>
        </div>

        {/* Secondary row — make-offer as a quiet text link, not a competing button */}
        {!isFree && (
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 10 }}>
            <button onClick={onMakeOffer} style={{
              padding: '4px 10px', background: 'transparent', border: 'none', cursor: 'pointer',
              fontFamily: TP.sans, fontSize: 12.5, color: TP.inkSoft, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              <span style={{ textDecoration: 'underline', textDecorationColor: TP.hairlineStrong, textUnderlineOffset: 3 }}>
                or make an offer
              </span>
              <TPIcon name="chevronRight" size={11} color={TP.muted} stroke={2.2} />
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

function Fact({ icon, label, value }) {
  return (
    <div style={{ background: TP.paper, padding: '12px 14px', display: 'flex', gap: 10, alignItems: 'center' }}>
      <div style={{ width: 30, height: 30, borderRadius: 8, background: TP.cream, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <TPIcon name={icon === 'ruler' ? 'shield' : 'location'} size={14} color={TP.inkSoft} stroke={2} />
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontFamily: TP.mono, fontSize: 9, color: TP.muted, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>{label}</div>
        <div style={{ fontFamily: TP.sans, fontSize: 12, color: TP.ink, fontWeight: 500, marginTop: 1, lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenMarketDetail });