// Item feed — tier selector, cards (grid), table (list)

const feedStyles = `
  .feed-wrap {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    display: flex; flex-direction: column;
  }

  /* ===== Tier selector bar ===== */
  .tierbar {
    display: flex; align-items: stretch;
    gap: 0;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    overflow-x: auto;
  }
  .tier-tab {
    position: relative;
    display: flex; flex-direction: column;
    gap: 2px;
    flex: none;
    padding: 11px 16px 10px;
    border: 0; background: transparent;
    cursor: pointer;
    text-align: left;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: background .12s;
    min-width: 0;
  }
  .tier-tab:hover { background: var(--bg-soft); }
  .tier-tab.active { border-bottom-color: var(--accent); }
  .tier-tab .tt-name {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600;
    color: var(--muted);
  }
  .tier-tab.active .tt-name { color: var(--ink); }
  .tier-tab .tt-thresh {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--faint);
    letter-spacing: 0.02em;
  }
  .tier-tab.active .tt-thresh { color: var(--accent-deep); }
  .tier-tab .tt-count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    padding: 0 5px; height: 16px;
    display: inline-flex; align-items: center;
    border-radius: 8px;
  }
  .tier-tab.active .tt-count { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-soft); }
  .tier-tab .tt-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
  .tier-dot-offer { background: var(--accent-deep); }
  .tier-dot-deal { background: var(--accent); }
  .tier-dot-steal { background: var(--muted-2); }
  .tier-dot-near { background: var(--info); border-radius: 50%; }
  .tier-dot-nw { background: var(--hot); border-radius: 50%; }
  .tierbar-spacer { flex: 1; }
  .tierbar-aside {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0 8px 12px;
    flex: none;
  }
  .tier-note {
    font-size: 11px; color: var(--muted);
    display: flex; align-items: center; gap: 6px;
    max-width: 230px; line-height: 1.3;
  }
  .tier-note .ic { color: var(--accent); flex: none; }

  .feed-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px 10px;
    gap: 16px;
  }
  .feed-title h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 27px; font-weight: 400;
    letter-spacing: -0.015em; line-height: 1.15;
    color: var(--ink);
  }
  .feed-title h1 em { font-style: italic; color: var(--accent-deep); margin-left: 6px; }
  .feed-title .sub {
    margin-top: 3px;
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; color: var(--muted);
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
  }
  .feed-title .sub .dot { width:4px; height:4px; border-radius:50%; background: var(--faint); }
  .feed-ctrls { display: flex; gap: 10px; align-items: center; }

  .feed-body { padding: 8px 22px 40px; flex: 1; min-width: 0; overflow-y: auto; }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
    gap: var(--gap-feed, 14px);
  }

  /* ===== Card ===== */
  .item {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    display: flex; flex-direction: column;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s;
  }
  .item:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-2); }
  .item.t-offer { border-color: rgba(139,101,32,0.45); }
  .item.t-offer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 50%, var(--accent) 100%);
    z-index: 3;
  }
  .item.review { border-color: rgba(194,74,44,0.35); }
  .item.just-in::after {
    content: "JUST IN"; position: absolute; top: 9px; left: 9px;
    background: var(--live); color: #fff;
    font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
    padding: 3px 6px; border-radius: 3px; z-index: 4;
    box-shadow: 0 2px 6px rgba(47,143,94,0.3);
    animation: blink-soft 1.6s ease-in-out 2;
  }

  .item-thumb {
    aspect-ratio: 5 / 3;
    position: relative;
    overflow: hidden;
    flex: none;
    background: var(--bg-sunken);
  }
  .item-thumb > .thumb-img,
  .item-thumb > .thumb-ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .item-badges {
    position: absolute; right: 8px; top: 8px;
    display: flex; flex-direction: column; gap: 4px; align-items: flex-end; z-index: 2;
  }
  .item-count {
    position: absolute; left: 8px; bottom: 8px;
    background: rgba(26,24,20,0.72); color: #fff;
    font-family: var(--font-mono); font-size: 10px;
    padding: 2px 6px; border-radius: 3px; z-index: 2;
    display: flex; align-items: center; gap: 3px;
  }

  /* ratio hero strip */
  .ratio-strip {
    position: absolute; right: 8px; bottom: 8px; z-index: 2;
    display: flex; align-items: flex-end; gap: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 5px 8px 4px;
    box-shadow: var(--shadow-1);
  }
  .ratio-strip .rv {
    font-family: var(--font-mono); font-weight: 600;
    font-size: 19px; line-height: 0.9; font-feature-settings: "tnum";
    color: var(--ink);
  }
  .ratio-strip .rv .x { font-size: 11px; color: var(--muted); font-weight: 500; }
  .ratio-strip.below .rv { color: var(--accent-deep); }
  .ratio-strip .rk { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 2px; }
  .ratio-strip.nw { padding: 5px 9px; }
  .ratio-strip.nw .rv { font-size: 12px; color: var(--hot); }

  .item-body { padding: var(--pad-card, 14px); flex: 1; display: flex; flex-direction: column; gap: 9px; }
  .item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .item-title {
    font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.35;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 1;
  }
  .item-price { text-align: right; flex: none; }
  .item-price .px {
    font-family: var(--font-mono); font-size: 16px; font-weight: 600;
    font-feature-settings: "tnum"; color: var(--ink); line-height: 1;
  }
  .item-price .ship { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 3px; }

  .item-attrs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 8px;
    padding: 8px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
  }
  .item-attrs .a { display: flex; flex-direction: column; min-width: 0; }
  .item-attrs .a .k { font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .item-attrs .a .v { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-feature-settings: "tnum"; margin-top: 2px; white-space: nowrap; }
  .item-attrs .a .v.gold { color: var(--accent-deep); font-weight: 600; }
  .item-attrs .a .v .est { color: var(--muted); font-size: 9px; }

  /* honesty signal row */
  .signal-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .sig {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 500;
    padding: 2px 6px; border-radius: 3px;
    border: 1px solid var(--line); background: var(--surface-2);
    color: var(--muted); white-space: nowrap;
  }
  .sig .sd { width: 5px; height: 5px; border-radius: 50%; }
  .sig.conf-high { color: var(--live); border-color: rgba(47,143,94,0.25); background: var(--live-soft); }
  .sig.conf-high .sd { background: var(--live); }
  .sig.conf-medium { color: var(--accent-deep); border-color: var(--accent-soft); background: var(--accent-tint); }
  .sig.conf-medium .sd { background: var(--accent); }
  .sig.conf-low { color: var(--hot); border-color: rgba(194,74,44,0.25); background: var(--hot-soft); }
  .sig.conf-low .sd { background: var(--hot); }
  .sig.review { color: var(--hot); border-color: rgba(194,74,44,0.3); background: var(--hot-soft); }
  .sig.wb-image, .sig.wb-none { color: var(--accent-deep); border-color: var(--accent-soft); background: var(--accent-tint); }

  .item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
  .item-foot .meta { display: flex; align-items: center; gap: 8px; color: var(--muted); min-width: 0; }
  .item-foot .seller { color: var(--ink-2); font-family: var(--font-mono); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .item-foot .age { flex: none; padding-left: 8px; border-left: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
  .item-foot .save-btn {
    flex: none; width: 26px; height: 26px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted-2); cursor: pointer; transition: all .12s;
  }
  .item-foot .save-btn:hover { border-color: var(--accent); color: var(--accent); }
  .item-foot .save-btn.saved { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent-deep); }
  .item-foot .save-btn.locked { color: var(--faint); }
  .item-foot .save-btn.locked:hover { border-color: var(--line-strong); color: var(--muted); }

  /* score pip */
  .score-pip {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  }
  .score-pip .sb { width: 26px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; position: relative; }
  .score-pip .sb > i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }

  /* ===== LIST view ===== */
  .list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
  .list-grid {
    display: grid;
    grid-template-columns: 48px minmax(0,2.4fr) 70px 86px 92px 84px 78px 96px 64px;
    gap: 12px; align-items: center;
  }
  .list-hdr {
    padding: 9px 14px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-2);
  }
  .list-hdr .sortable { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
  .list-hdr .sortable:hover { color: var(--ink-2); }
  .list-row {
    padding: 9px 14px; border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
    cursor: pointer; transition: background .12s;
  }
  .list-row:last-child { border-bottom: 0; }
  .list-row:hover { background: var(--bg-soft); }
  .list-row.t-offer { background: color-mix(in oklab, var(--accent-tint) 40%, var(--surface)); }
  .list-row.t-offer:hover { background: var(--accent-tint); }
  .list-row .lt { font-family: var(--font-ui); font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list-row .lt .lsub { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); display: flex; gap: 6px; margin-top: 2px; align-items: center; }
  .list-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    flex: none;
    background: var(--bg-sunken);
  }
  .list-thumb > .thumb-img,
  .list-thumb > .thumb-ph {
    width: 100%;
    height: 100%;
  }
  .list-ratio { font-weight: 600; }
  .list-ratio.below { color: var(--accent-deep); }

  .feed-end { display: flex; align-items: center; justify-content: center; padding: 22px; color: var(--muted); font-size: 12px; gap: 10px; }
  .feed-end .rule { height: 1px; background: var(--line); flex: 1; }
  .feed-end button { color: var(--accent-deep); }

  /* empty / loading / error states */
  .feed-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 20px; text-align: center; gap: 12px;
  }
  .feed-state .icon-wrap {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-sunken); display: flex; align-items: center; justify-content: center;
    color: var(--muted-2);
  }
  .feed-state h3 { margin: 0; font-family: var(--font-serif); font-size: 21px; font-weight: 400; color: var(--ink); }
  .feed-state p { margin: 0; font-size: 13px; color: var(--muted); max-width: 360px; line-height: 1.5; }
  .skel-card { height: 290px; border-radius: var(--r); }
`;

if (!document.getElementById("feed-styles")) {
  const s = document.createElement("style");
  s.id = "feed-styles"; s.textContent = feedStyles;
  document.head.appendChild(s);
}

const money = (n) => n == null ? "—" : "$" + Number(n).toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 0});
const moneyC = (n) => n == null ? "—" : "$" + Number(n).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
const ageStr = (min) => {
  if (min < 1) return "<1m"; if (min < 60) return `${Math.round(min)}m`;
  if (min < 24*60) return `${Math.round(min/60)}h`; return `${Math.round(min/60/24)}d`;
};
const TIER_LABEL = { offer:"Offer", deal:"Deal", steal:"Steal" };
const WB_LABEL = { text:"Stated wt", image:"Photo est.", none:"No weight" };
const CONF_SHORT = { high:"High conf", medium:"Med conf", low:"Low conf" };

const ThumbPh = ({ item, src, alt }) => {
  // Real listing photo when the API gave us one (proxied_url); else placeholder.
  const imageSrc = src || item.imageUrl;
  if (imageSrc) {
    return (
      <img
        className="thumb-img"
        src={imageSrc}
        alt={alt || item.title}
        loading="lazy"
        onError={(e) => { e.currentTarget.replaceWith(Object.assign(document.createElement("div"), { className: "thumb-ph" })); }}
      />
    );
  }
  const priced = item.pricingStatus === "priced" || item.pricingStatus === "priced_review_required";
  const isGold = item.primaryMetal === "gold" && item.karat >= 14 && priced;
  return (
    <div className={`thumb-ph ${isGold ? "accent" : ""}`} style={{height:"100%", width:"100%"}}>
      <span className="tag">{(item.itemType || "item").toUpperCase()}{item.karat ? ` · ${item.karat}K` : ""}</span>
    </div>
  );
};

const TierBadge = ({ tier }) => {
  if (!tier) return null;
  return <Badge tone={tier === "offer" ? "gold" : tier === "deal" ? "gold" : "neutral"}>{TIER_LABEL[tier]}</Badge>;
};

const RatioStrip = ({ item }) => {
  if (item.ratio == null) {
    return <div className="ratio-strip nw"><span className="rv">Needs weight</span></div>;
  }
  const below = item.ratio < 1.0;
  return (
    <div className={`ratio-strip ${below ? "below" : ""}`}>
      <span className="rk">price ÷ melt</span>
      <span className="rv">{item.ratio.toFixed(2)}<span className="x">×</span></span>
    </div>
  );
};

const ConfSig = ({ level }) => (
  <span className={`sig conf-${level}`}><span className="sd"/>{CONF_SHORT[level]}</span>
);

const SaveBtn = ({ item, signedIn, onSave }) => {
  return (
    <button className="save-btn locked" title="Save coming soon" onClick={(e)=>{e.stopPropagation(); onSave?.(item, e);}}>
      <I.star size={13}/>
    </button>
  );
};

const ItemCard = ({ item, justIn, onOpen, signedIn, onSave }) => {
  const priced = item.meltValue != null;
  return (
    <article className={`item t-${item.tier || "none"} ${item.requiresReview ? "review" : ""} ${justIn ? "just-in" : ""}`} onClick={() => onOpen?.(item)}>
      <div className="item-thumb">
        <ThumbPh item={item}/>
        <div className="item-badges">
          <TierBadge tier={item.tier}/>
          {item.nearMiss && <Badge tone="info">Near-miss</Badge>}
          {item.requiresReview && <Badge tone="hot" icon={<I.eye size={9}/>}>Review</Badge>}
          {item.authenticityGuarantee && <Badge tone="info" icon={<I.check size={9}/>}>Authenticity</Badge>}
        </div>
        <div className="item-count"><I.eye size={9}/> {item.images}</div>
        <RatioStrip item={item}/>
      </div>
      <div className="item-body">
        <div className="item-head">
          <div className="item-title">{item.title}</div>
          <div className="item-price">
            <div className="px">{money(item.allIn)}</div>
            <div className="ship">{item.shipping ? `+${moneyC(item.shipping)} ship` : "free ship"}</div>
          </div>
        </div>

        <div className="item-attrs">
          <div className="a"><span className="k">Karat</span><span className="v gold">{item.karat ? `${item.karat}K` : "—"}</span></div>
          <div className="a"><span className="k">Gold wt</span><span className="v">{item.goldWeight != null ? `${item.goldWeight}g` : "—"}</span></div>
          <div className="a"><span className="k">Melt est.</span><span className="v">{priced ? money(item.meltValue) : "—"}</span></div>
          <div className="a"><span className="k">Deal score</span><span className="v">{item.dealScore != null ? item.dealScore : "—"}</span></div>
        </div>

        <div className="signal-row">
          <ConfSig level={item.overallConfidence}/>
          <span className={`sig wb-${item.weightBasis}`} title={`Weight basis: ${item.weightBasis}`}>
            {item.weightBasis === "text" ? <I.check size={9}/> : <I.spark size={9}/>}{WB_LABEL[item.weightBasis]}
          </span>
          <span className="sig" title={`Coverage: ${item.coverage}`}>{item.coverage}</span>
        </div>

        <div className="item-foot">
          <div className="meta">
            <span className="seller">{item.seller ? `@${item.seller}` : "eBay listing"}</span>
            <span className="age">{ageStr(item.ageMin)}</span>
          </div>
          <SaveBtn item={item} signedIn={signedIn} onSave={onSave}/>
        </div>
      </div>
    </article>
  );
};

const ListView = ({ items, justInIds, onOpen, signedIn }) => (
  <div className="list">
    <div className="list-grid list-hdr">
      <div></div>
      <div>Listing</div>
      <div>Karat</div>
      <div>Gold wt</div>
      <div>Melt est.</div>
      <div className="sortable">Price ÷ melt <I.chev size={10}/></div>
      <div>All-in</div>
      <div>Seller</div>
      <div style={{textAlign:"right"}}>Age</div>
    </div>
    {items.map(it => (
      <div key={it.id} className={`list-grid list-row t-${it.tier || "none"}`} onClick={() => onOpen?.(it)}>
        <div className="list-thumb"><ThumbPh item={it}/></div>
        <div className="lt">
          {it.title}
          <span className="lsub">
            {it.tier && <Badge tone={it.tier === "steal" ? "neutral" : "gold"}>{TIER_LABEL[it.tier]}</Badge>}
            <span>{it.itemType}</span>
            <span className={`sig conf-${it.overallConfidence}`} style={{padding:"1px 5px"}}><span className="sd"/>{it.overallConfidence}</span>
            {it.requiresReview && <span style={{color:"var(--hot)"}}>review</span>}
            {justInIds.has(it.id) && <span style={{color:"var(--live)", fontWeight:600}}>JUST IN</span>}
          </span>
        </div>
        <div style={{color:"var(--accent-deep)", fontWeight:600}}>{it.karat ? `${it.karat}K` : "—"}</div>
        <div>{it.goldWeight != null ? `${it.goldWeight}g` : "—"}</div>
        <div>{money(it.meltValue)}</div>
        <div className={`list-ratio ${it.ratio != null && it.ratio < 1 ? "below" : ""}`}>{it.ratio != null ? `${it.ratio.toFixed(2)}×` : "—"}</div>
        <div style={{color:"var(--ink)", fontWeight:600}}>{money(it.allIn)}</div>
        <div style={{overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{it.seller ? `@${it.seller}` : "\u2014"}</div>
        <div style={{textAlign:"right", color:"var(--muted)"}}>{ageStr(it.ageMin)}</div>
      </div>
    ))}
  </div>
);

// Tier feed selector
const FEEDS = [
  { key:"offer", name:"Offer", thresh:"≤ 0.80× melt", dot:"tier-dot-offer" },
  { key:"deal", name:"Deal", thresh:"≤ 0.90× melt", dot:"tier-dot-deal" },
  { key:"steal", name:"Steal", thresh:"≤ 1.10× melt", dot:"tier-dot-steal" },
  { key:"near", name:"Near-miss", thresh:"within +5%", dot:"tier-dot-near" },
  { key:"needs", name:"Needs weight", thresh:"unpriced", dot:"tier-dot-nw" },
  { key:"all", name:"All items", thresh:"full catalog", dot:"" },
];

const TierBar = ({ feed, setFeed, counts, includeReview, setIncludeReview, nearTier, setNearTier }) => (
  <div className="tierbar">
    {FEEDS.map(f => (
      <button key={f.key} className={`tier-tab ${feed === f.key ? "active" : ""}`} onClick={() => setFeed(f.key)}>
        <span className="tt-name">
          {f.dot && <span className={`tt-dot ${f.dot}`}/>}
          {f.name}
          <span className="tt-count">{counts[f.key] != null ? counts[f.key] : "—"}</span>
        </span>
        <span className="tt-thresh">{f.thresh}</span>
      </button>
    ))}
    <div className="tierbar-spacer"/>
    <div className="tierbar-aside">
      {feed === "near" && (
        <div className="seg" title="Near-miss requires a base tier">
          {["offer","deal","steal"].map(t => (
            <button key={t} className={nearTier === t ? "active" : ""} onClick={() => setNearTier(t)}>{TIER_LABEL[t]}</button>
          ))}
        </div>
      )}
      {(feed === "offer" || feed === "deal" || feed === "steal" || feed === "near") && (
        <label className="sig" style={{cursor:"pointer", height:26, padding:"0 9px"}} onClick={() => setIncludeReview(v => !v)}>
          <Toggle on={includeReview} onChange={setIncludeReview}/>
          <span style={{marginLeft:2}}>Include review-required</span>
        </label>
      )}
    </div>
  </div>
);

const FEED_COPY = {
  offer:  { h:<>Offer <em>· best deals</em></>, d:"Asking price ≤ 80% of estimated gold melt value — the deepest discounts." },
  deal:   { h:<>Deal <em>· strong value</em></>, d:"Asking price ≤ 90% of melt. Every Offer is also a Deal." },
  steal:  { h:<>Steal <em>· widest band</em></>, d:"Priced at or near melt (≤ 1.10×). Loosest tier — most items, least selective." },
  near:   { h:<>Near-miss <em>· almost a deal</em></>, d:"Just outside the threshold (within +5%). Watch these — a small price drop tips them in." },
  needs:  { h:<>Needs weight <em>· hidden value</em></>, d:"Items we couldn't price because weight is unknown. Dig here for overlooked gold." },
  all:    { h:<>Browse <em>· all items</em></>, d:"The full analyzed catalog across every tier and coverage state." },
};

const FeedHeader = ({ feed, sort, setSort, count, liveOn, view, setView, searchTerm, searchMeta }) => {
  const total = searchMeta && searchMeta.totalCount != null ? searchMeta.totalCount : count;
  const copy = searchTerm
    ? { h:<>Search <em>"{searchTerm}"</em></>, d:`${total} live result${total === 1 ? "" : "s"} from the public catalog.` }
    : (FEED_COPY[feed] || FEED_COPY.all);
  return (
    <div className="feed-top">
      <div className="feed-title">
        <h1>{copy.h}</h1>
        <div className="sub" style={{fontFamily:"var(--font-ui)"}}>{copy.d}</div>
      </div>
      <div className="feed-ctrls">
        <select className="select" style={{width:"auto", height:30}} value={sort} onChange={e => setSort(e.target.value)}>
          {SORT_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
        </select>
        <Segmented value={view} onChange={setView} options={[
          { value: "grid", icon: <I.grid size={13} style={{marginRight:3}}/>, label: "Grid" },
          { value: "list", icon: <I.list size={13} style={{marginRight:3}}/>, label: "List" },
        ]}/>
      </div>
    </div>
  );
};

// states
const EmptyState = ({ feed }) => (
  <div className="feed-state">
    <div className="icon-wrap"><I.search size={20}/></div>
    <h3>No items in this band right now</h3>
    <p>{feed === "needs" ? "Every recent item had a usable weight — nothing unpriced at the moment." : "Nothing matches these thresholds yet. The live stream will drop new matches in as they're analyzed."}</p>
  </div>
);

Object.assign(window, { ItemCard, ListView, FeedHeader, TierBar, EmptyState, FEEDS, FEED_COPY, ageStr, money, moneyC, TIER_LABEL, WB_LABEL });