const ScriptsPage = ({ navigate, cardStyle, onAdd }) => {
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("All");
  // Derive chips from the categories that actually exist so we never show an
  // empty filter (e.g. "Admin"/"UI") that yields "0 results".
  const cats = ["All", ...Array.from(new Set(PRODUCTS.map((p) => p.category)))];
  const filtered = PRODUCTS.filter((p) =>
    (cat === "All" || p.category === cat) &&
    (q === "" || p.name.toLowerCase().includes(q.toLowerCase()) || p.tagline.toLowerCase().includes(q.toLowerCase()))
  );
  // The bare "planned" teasers only make sense on the unfiltered, unsearched
  // view — otherwise they dangle under a filter they don't match.
  const showTeasers = cat === "All" && q === "";
  return (
    <div className="route-enter">
      <section className="section" style={{ paddingTop: 56 }}>
        <div className="container">
          <div className="pd-breadcrumbs">/ scripts</div>

          <div className="scripts-banner">
            <img src="assets/screenshots/hero-composite.jpeg" alt="LintError scripts — in-world UI" />
            <div className="scripts-banner-content">
              <div className="scripts-banner-eyebrow">// all_scripts</div>
              <h1>Paid Scripts</h1>
              <p>
                Every paid resource we've released, in one place. Escrow-protected, licensed to your CFX account,
                and supported on Discord within 12 hours.
              </p>
            </div>
          </div>


          <div className="filters">
            <div className="search">
              <Icon.Search size={15} />
              <input
                className="input"
                placeholder="Search scripts…"
                value={q}
                onChange={(e) => setQ(e.target.value)}
              />
            </div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {cats.map((c) => (
                <button
                  key={c}
                  className={`chip ${c === cat ? "active" : ""}`}
                  onClick={() => setCat(c)}
                >
                  {c}
                </button>
              ))}
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
              {filtered.length} result{filtered.length === 1 ? "" : "s"}
            </div>
          </div>

          <div className="card-grid">
            {filtered.map((p) => (
              <ProductCard
                key={p.id}
                product={p}
                style={cardStyle}
                onOpen={() => navigate("product", p.slug)}
                onAdd={(e) => onAdd(p.id, e.currentTarget)}
              />
            ))}
            {showTeasers ? COMING_SOON.map((c) => <ComingSoonCard key={c.id} item={c} />) : null}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { ScriptsPage });