/* Quote Connect — category browser (shared) + Browse screen */

const QC = () => window.QC_DATA;

// Grouped, searchable category grid. Used compact on Home, full on Browse.
function CategorySection({ iconStyle, onQuote, limit, compact }) {
  const { CATEGORIES, GROUPS } = QC();
  const [q, setQ] = React.useState("");
  const [group, setGroup] = React.useState("All");

  const ql = q.trim().toLowerCase();
  let list = CATEGORIES.filter((c) => {
    const inGroup = group === "All" || c.group === group;
    const inQ = !ql || c.name.toLowerCase().includes(ql) || c.blurb.toLowerCase().includes(ql) ||
      c.subs.some((s) => s.toLowerCase().includes(ql)) || c.group.toLowerCase().includes(ql);
    return inGroup && inQ;
  });
  if (limit && !ql && group === "All") list = list.slice(0, limit);

  return (
    <div className="cat-section">
      <div className="cat-controls">
        <div className="cat-search">
          <Icon name="search" size={17} />
          <input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search 20 categories — “tractor”, “poly tank”, “HiLux”…"
          />
          {q && <button className="cat-search-clear" onClick={() => setQ("")}><Icon name="x" size={15} /></button>}
        </div>
        {!compact && (
          <div className="cat-groups">
            {["All", ...GROUPS].map((g) => (
              <button key={g} className={"cat-gchip" + (group === g ? " on" : "")} onClick={() => setGroup(g)}>
                {g === "All" ? "All" : g}
              </button>
            ))}
          </div>
        )}
      </div>

      <div className="cat-grid">
        {list.map((cat) => (
          <button key={cat.id} className="cat-card" onClick={() => onQuote(cat.id)}>
            <div className="cat-card-top">
              <CatVisual cat={cat} iconStyle={iconStyle} size={46} radius={9} />
              <Icon name="arrow-up-right" size={16} className="cat-card-arrow" />
            </div>
            <div className="cat-card-name display">{cat.name}</div>
            <div className="cat-card-blurb">{cat.blurb}</div>
            <div className="cat-card-foot">
              <span className="mono">{cat.suppliers} suppliers</span>
              <span className="cat-card-eta mono"><Icon name="clock" size={12} /> {cat.eta}</span>
            </div>
          </button>
        ))}
      </div>

      {list.length === 0 && (
        <div className="cat-empty">
          <Icon name="search-x" size={22} />
          <p>No categories match “{q}”. Try a broader term.</p>
        </div>
      )}
    </div>
  );
}

function BrowseScreen({ nav, t }) {
  const { STATS } = QC();
  return (
    <div className="screen browse-screen">
      <div className="qc-wrap">
        <header className="page-head">
          <div>
            <div className="eyebrow">Catalogue</div>
            <h1 className="display page-title">Pick a category. We do the chasing.</h1>
            <p className="page-sub">
              One request goes to every verified supplier in that category. They compete — you compare. No phone tag, no spam.
            </p>
          </div>
          <div className="page-head-stat card">
            <Spec k="Live suppliers" v={STATS.suppliers.toLocaleString()} />
            <hr className="rule-dot" />
            <Spec k="Quotes this month" v={STATS.quotesMonth.toLocaleString()} accent />
            <hr className="rule-dot" />
            <Spec k="Avg first response" v={STATS.avgResponse} />
          </div>
        </header>

        <CategorySection iconStyle={t.icons} onQuote={nav.startQuote} />
      </div>
    </div>
  );
}

Object.assign(window, { CategorySection, BrowseScreen });