/* global React, Reveal, MagneticButton, Footer */
const { useState: useState_p, useMemo: useMemo_p } = React;

const ALL_PRODUCTS = [
  { name: "Sognefjord", sub: "Three-Seat Sofa", price: 4820, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/sognefjord-bone.jpg",
    b: "assets/sognefjord-oxblood.jpg",
    swatches: ["#A8997E", "#5C1F1A", "#161311"], tag: "New" },
  { name: "Lysefjord", sub: "Lounge Chair", price: 2640, cat: "Seating", material: "Walnut", color: "Oxblood", room: "Living",
    a: "assets/lysefjord-lounge.jpg",
    b: "assets/lysefjord-detail.jpg",
    swatches: ["#5C1F1A", "#A8997E", "#1F3A2E"] },
  { name: "Geirangerfjord", sub: "Dining Table, Oval", price: 3980, cat: "Dining", material: "Oak", color: "Bone", room: "Dining",
    a: "assets/geirangerfjord-table.jpg",
    b: "assets/geirangerfjord-detail.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "Made-to-order" },
  { name: "Hardanger", sub: "Sideboard", price: 5420, cat: "Casegoods", material: "Walnut", color: "Walnut", room: "Living",
    a: "assets/hardanger-sideboard.jpg",
    b: "assets/hardanger-detail.jpg",
    swatches: ["#3a2a1a", "#161311"] },
  { name: "Trollfjord", sub: "Reading Chair", price: 2280, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/trollfjord-reading.jpg",
    b: "assets/trollfjord-detail.jpg",
    swatches: ["#A8997E", "#5C1F1A"] },
  { name: "Aurland", sub: "Pendant Lamp", price: 880, cat: "Lighting", material: "Brass", color: "Brass", room: "Dining",
    a: "assets/aurland-pendant.jpg",
    b: "assets/aurland-detail.jpg",
    swatches: ["#8a6a3e", "#161311"], tag: "New" },
  { name: "Nærøyfjord", sub: "Two-Seat Sofa", price: 3640, cat: "Seating", material: "Oak", color: "Walnut", room: "Living",
    a: "assets/naeroyfjord-twosofa.jpg",
    b: "assets/sognefjord-bone.jpg",
    swatches: ["#3a2a1a", "#A8997E", "#5C1F1A"] },
  { name: "Tysfjord", sub: "Dining Chair (set of 2)", price: 1280, cat: "Dining", material: "Oak", color: "Bone", room: "Dining",
    a: "assets/tysfjord-dining.jpg",
    b: "assets/tysfjord-detail.jpg",
    swatches: ["#A8997E", "#5C1F1A", "#1F3A2E"] },
  { name: "Romsdalen", sub: "Bed Frame", price: 4280, cat: "Bedroom", material: "Walnut", color: "Walnut", room: "Bedroom",
    a: "assets/romsdalen-bed.jpg",
    b: "assets/romsdalen-detail.jpg",
    swatches: ["#3a2a1a", "#A8997E"] },
  { name: "Saltstraumen", sub: "Coffee Table", price: 1860, cat: "Living", material: "Oak", color: "Bone", room: "Living",
    a: "assets/saltstraumen-coffee.jpg",
    b: "assets/saltstraumen-detail.jpg",
    swatches: ["#A8997E", "#3a2a1a"] },
  { name: "Vestfjord", sub: "Bookshelf", price: 3240, cat: "Casegoods", material: "Walnut", color: "Walnut", room: "Living",
    a: "assets/vestfjord-shelf.jpg",
    b: "assets/vestfjord-detail.jpg",
    swatches: ["#3a2a1a", "#161311"], tag: "Made-to-order" },
  { name: "Boknafjord", sub: "Ottoman", price: 980, cat: "Seating", material: "Oak", color: "Oxblood", room: "Living",
    a: "assets/boknafjord-ottoman.jpg",
    b: "assets/boknafjord-detail.jpg",
    swatches: ["#5C1F1A", "#A8997E", "#161311"] },
  { name: "Hjørundfjord", sub: "Sectional Sofa, L-shape", price: 6840, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/hjorundfjord-sectional.jpg",
    b: "assets/sognefjord-bone.jpg",
    swatches: ["#A8997E", "#5C1F1A", "#161311"], tag: "New" },
  { name: "Eidfjord", sub: "Armchair", price: 2180, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/eidfjord-armchair.jpg",
    b: "assets/lysefjord-detail.jpg",
    swatches: ["#A8997E", "#5C1F1A", "#1F3A2E"] },
  { name: "Storfjord", sub: "Daybed", price: 3480, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/storfjord-daybed.jpg",
    b: "assets/boknafjord-detail.jpg",
    swatches: ["#A8997E", "#5C1F1A"], tag: "New" },
  { name: "Loen", sub: "Dining Bench", price: 1980, cat: "Dining", material: "Oak", color: "Bone", room: "Dining",
    a: "assets/loen-bench.jpg",
    b: "assets/tysfjord-detail.jpg",
    swatches: ["#A8997E", "#5C1F1A"] },
  { name: "Lustrafjord", sub: "Console Table", price: 2480, cat: "Living", material: "Oak", color: "Bone", room: "Living",
    a: "assets/lustrafjord-console.jpg",
    b: "assets/saltstraumen-detail.jpg",
    swatches: ["#A8997E", "#3a2a1a"] },
  { name: "Lyngenfjord", sub: "Side Table", price: 780, cat: "Living", material: "Oak", color: "Bone", room: "Living",
    a: "assets/lyngenfjord-side.jpg",
    b: "assets/saltstraumen-detail.jpg",
    swatches: ["#A8997E", "#3a2a1a"] },
  { name: "Tafjord", sub: "Floor Lamp", price: 1240, cat: "Lighting", material: "Brass", color: "Brass", room: "Living",
    a: "assets/tafjord-floor-lamp.jpg",
    b: "assets/aurland-detail.jpg",
    swatches: ["#8a6a3e", "#A8997E", "#161311"], tag: "New" },
  { name: "Borgund", sub: "Wall Sconce", price: 540, cat: "Lighting", material: "Brass", color: "Brass", room: "Living",
    a: "assets/borgund-sconce.jpg",
    b: "assets/aurland-pendant.jpg",
    swatches: ["#8a6a3e", "#161311"] },
  { name: "Sunnylvsfjord", sub: "Writing Desk", price: 3240, cat: "Casegoods", material: "Oak", color: "Bone", room: "Living",
    a: "assets/sunnylvsfjord-desk.jpg",
    b: "assets/hardanger-detail.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "Made-to-order" },
  { name: "Glomfjord", sub: "Chest of Drawers", price: 4640, cat: "Bedroom", material: "Walnut", color: "Walnut", room: "Bedroom",
    a: "assets/glomfjord-chest.jpg",
    b: "assets/hardanger-detail.jpg",
    swatches: ["#3a2a1a", "#161311"] },
  { name: "Eikfjord", sub: "Wicker Dining Chair", price: 1640, cat: "Dining", material: "Rattan", color: "Bone", room: "Dining",
    a: "assets/eikfjord-wicker.jpg",
    b: "assets/trollfjord-detail.jpg",
    swatches: ["#C9A878", "#A8997E"], tag: "New" },
  { name: "Røldal", sub: "Woven Pendant Lamp", price: 920, cat: "Lighting", material: "Rattan", color: "Bone", room: "Living",
    a: "assets/aurland-woven.jpg",
    b: "assets/aurland-detail.jpg",
    swatches: ["#C9A878", "#8a6a3e"], tag: "New" },
  { name: "Mosjøen", sub: "Rattan Daybed", price: 3860, cat: "Seating", material: "Rattan", color: "Bone", room: "Living",
    a: "assets/mosjoen-rattan-daybed.jpg",
    b: "assets/boknafjord-detail.jpg",
    swatches: ["#C9A878", "#5C1F1A", "#A8997E"], tag: "New" },
  { name: "Trondheim", sub: "Arched Sideboard", price: 6240, cat: "Casegoods", material: "Plaster", color: "Bone", room: "Living",
    a: "assets/trondheim-arched.jpg",
    b: "assets/hardanger-detail.jpg",
    swatches: ["#F2EBE0", "#A8997E"], tag: "New · Made-to-order" },
  { name: "Vossestrand", sub: "Sculptural Stool", price: 1180, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/vossestrand-stool.jpg",
    b: "assets/detail-tenon.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "New" },
  { name: "Lofoten", sub: "Floor Lounger", price: 1460, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/lofoten-lounger.jpg",
    b: "assets/saltstraumen-detail.jpg",
    swatches: ["#A8997E", "#5C1F1A"], tag: "New" },
  { name: "Folgefonn", sub: "Curved Sofa", price: 5840, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/folgefonn-curved.jpg",
    b: "assets/detail-tenon.jpg",
    swatches: ["#A8997E", "#5C1F1A", "#161311"], tag: "New · Trending" },
  { name: "Senja", sub: "Curved Loveseat", price: 4180, cat: "Seating", material: "Oak", color: "Oxblood", room: "Living",
    a: "assets/senja-loveseat.jpg",
    b: "assets/boknafjord-detail.jpg",
    swatches: ["#5C1F1A", "#A8997E", "#3a4a35"], tag: "New · Trending" },
  { name: "Hardangervidda", sub: "Modular Sectional", price: 7640, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/hardangervidda-sectional.jpg",
    b: "assets/lifestyle-living.jpg",
    swatches: ["#A8997E", "#5C1F1A", "#161311"], tag: "New · Trending" },
  { name: "Ringerike", sub: "Wingback Lounge Chair", price: 2840, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/ringerike-wingback.jpg",
    b: "assets/detail-tenon.jpg",
    swatches: ["#A8997E", "#5C1F1A", "#1a1818"], tag: "New" },
  { name: "Helgeland", sub: "Sculptural Pod Chair", price: 2480, cat: "Seating", material: "Oak", color: "Oxblood", room: "Living",
    a: "assets/helgeland-pod.jpg",
    b: "assets/boknafjord-detail.jpg",
    swatches: ["#5C1F1A", "#A8997E"], tag: "New · Trending" },
  { name: "Vega", sub: "Mushroom Table Lamp", price: 1180, cat: "Lighting", material: "Oak", color: "Bone", room: "Living",
    a: "assets/vega-mushroom.jpg",
    b: "assets/aurland-detail.jpg",
    swatches: ["#A8997E", "#8a6a3e"], tag: "New · Trending" },
  { name: "Andøya", sub: "Sculptural Totem Floor Lamp", price: 1840, cat: "Lighting", material: "Brass", color: "Brass", room: "Living",
    a: "assets/andoya-totem.jpg",
    b: "assets/aurland-detail.jpg",
    swatches: ["#8a6a3e", "#A8997E"], tag: "New · Trending" },
  { name: "Reine", sub: "Banker's Table Lamp", price: 680, cat: "Lighting", material: "Brass", color: "Brass", room: "Living",
    a: "assets/reine-lamp.jpg",
    b: "assets/reine-lamp.jpg",
    swatches: ["#A8997E", "#8a6a3e"], tag: "New" },
  { name: "Borgen", sub: "Fluted Wall Sconce", price: 480, cat: "Lighting", material: "Brass", color: "Brass", room: "Living",
    a: "assets/borgen-sconce.jpg",
    b: "assets/hardanger-detail.jpg",
    swatches: ["#8a6a3e", "#161311"], tag: "New" },
  { name: "Stavanger", sub: "Klismos Dining Chair (set of 2)", price: 1180, cat: "Dining", material: "Oak", color: "Bone", room: "Dining",
    a: "assets/stavanger-klismos.jpg",
    b: "assets/trollfjord-detail.jpg",
    swatches: ["#A8997E", "#5C1F1A"], tag: "New · Trending" },
  { name: "Sotra", sub: "Pedestal Dining Table", price: 4640, cat: "Dining", material: "Oak", color: "Bone", room: "Dining",
    a: "assets/sotra-table.jpg",
    b: "assets/saltstraumen-detail.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "New · Trending" },
  { name: "Lærdal", sub: "Banquette Bench", price: 3240, cat: "Dining", material: "Oak", color: "Oxblood", room: "Dining",
    a: "assets/laerdal-banquette.jpg",
    b: "assets/boknafjord-detail.jpg",
    swatches: ["#5C1F1A", "#A8997E"], tag: "New · Trending" },
  { name: "Førde", sub: "Travertine Coffee Table", price: 3860, cat: "Living", material: "Marble", color: "Bone", room: "Living",
    a: "assets/forde-coffee.jpg",
    b: "assets/saltstraumen-detail.jpg",
    swatches: ["#F2EBE0", "#A8997E"], tag: "New" },
  { name: "Vesterålen", sub: "Channel-Stitched Bed", price: 5240, cat: "Bedroom", material: "Oak", color: "Bone", room: "Bedroom",
    a: "assets/vesteralen-bed.jpg",
    b: "assets/detail-tenon.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "New · Trending" },
  { name: "Bessheim", sub: "Four-Poster Bed", price: 7640, cat: "Bedroom", material: "Oak", color: "Bone", room: "Bedroom",
    a: "assets/bessheim-four-poster.jpg",
    b: "assets/detail-tenon.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "New · Made-to-order" },
  { name: "Skoltevatn", sub: "Fluted Nightstand", price: 1640, cat: "Bedroom", material: "Oak", color: "Bone", room: "Bedroom",
    a: "assets/skoltevatn-nightstand.jpg",
    b: "assets/hardanger-detail.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "New · Trending" },
  { name: "Kjølen", sub: "Fluted Wardrobe", price: 6480, cat: "Casegoods", material: "Walnut", color: "Walnut", room: "Bedroom",
    a: "assets/kjolen-wardrobe.jpg",
    b: "assets/hardanger-detail.jpg",
    swatches: ["#3a2a1a", "#161311"], tag: "New · Trending" },
  { name: "Atløy", sub: "Layered Ottoman", price: 1280, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/atloy-ottoman.jpg",
    b: "assets/atloy-ottoman.jpg",
    swatches: ["#A8997E", "#5C1F1A"], tag: "New" },
  { name: "Sunnmøre", sub: "Arched Floor Mirror", price: 1640, cat: "Living", material: "Oak", color: "Bone", room: "Living",
    a: "assets/sunnmore-mirror.jpg",
    b: "assets/sunnmore-mirror.jpg",
    swatches: ["#A8997E"], tag: "New" },
  { name: "Mølmen", sub: "Bouclé Pouf", price: 640, cat: "Seating", material: "Bouclé", color: "Bone", room: "Living",
    a: "assets/molmen-pouf.jpg",
    b: "assets/boknafjord-detail.jpg",
    swatches: ["#A8997E", "#5C1F1A"], tag: "New" },
  { name: "Hovden", sub: "Stadium-Arched Bookshelf", price: 3640, cat: "Casegoods", material: "Oak", color: "Bone", room: "Living",
    a: "assets/hovden-bookshelf.jpg",
    b: "assets/vestfjord-detail.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "New" },
  /* ============ SIGNATURE COLLECTION ============ */
  { name: "Fjærland", sub: "Cloud Modular Sofa", price: 6840, cat: "Seating", material: "Oak", color: "Bone", room: "Living",
    a: "assets/fjaerland-cloud.jpg",
    b: "assets/sognefjord-bone.jpg",
    swatches: ["#A8997E", "#5C1F1A", "#161311"], tag: "Signature" },
  { name: "Ålesund", sub: "Sleeper Sofa", price: 4840, cat: "Seating", material: "Oak", color: "Ink", room: "Living",
    a: "assets/aalesund-sleeper.jpg",
    b: "assets/sognefjord-ink.jpg",
    swatches: ["#1a1818", "#5C1F1A", "#A8997E"], tag: "Signature" },
  { name: "Mjøsa", sub: "Bouclé Accent Chair", price: 1860, cat: "Seating", material: "Bouclé", color: "Bone", room: "Living",
    a: "assets/mjosa-boucle-chair.jpg",
    b: "assets/boknafjord-detail.jpg",
    swatches: ["#A8997E", "#5C1F1A"], tag: "Signature" },
  { name: "Steinhella", sub: "Travertine Dining Table", price: 4840, cat: "Dining", material: "Travertine", color: "Bone", room: "Dining",
    a: "assets/steinhella-dining.jpg",
    b: "assets/saltstraumen-detail.jpg",
    swatches: ["#F2EBE0", "#A8997E"], tag: "Signature" },
  { name: "Brimnes", sub: "Channel-Stitched Storage Bed", price: 5840, cat: "Bedroom", material: "Oak", color: "Bone", room: "Bedroom",
    a: "assets/brimnes-storage-bed.jpg",
    b: "assets/detail-tenon.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "Signature" },
  { name: "Bryggen", sub: "Modular Wall System", price: 6840, cat: "Casegoods", material: "Oak", color: "Bone", room: "Living",
    a: "assets/bryggen-wall-system.jpg",
    b: "assets/vestfjord-detail.jpg",
    swatches: ["#A8997E", "#3a2a1a"], tag: "Signature · Made-to-order" },
  { name: "Trollstigen", sub: "Drinks Cabinet", price: 1940, cat: "Casegoods", material: "Walnut", color: "Walnut", room: "Living",
    a: "assets/trollstigen-bar-cart.jpg",
    b: "assets/hardanger-detail.jpg",
    swatches: ["#3a2a1a", "#8a6a3e"], tag: "Signature" },
  { name: "Solund", sub: "Outdoor Teak Daybed", price: 3480, cat: "Seating", material: "Teak", color: "Bone", room: "Outdoor",
    a: "assets/solund-outdoor-daybed.jpg",
    b: "assets/boknafjord-detail.jpg",
    swatches: ["#C9A878", "#5C1F1A"], tag: "Signature · Outdoor" },
  { name: "Lyngen", sub: "Travertine Side Table", price: 840, cat: "Living", material: "Travertine", color: "Bone", room: "Living",
    a: "assets/lyngen-side-table.jpg",
    b: "assets/lyngen-side-table.jpg",
    swatches: ["#F2EBE0"], tag: "Signature" },
  { name: "Stadlandet", sub: "Mega Bouclé Floor Pouf", price: 640, cat: "Seating", material: "Bouclé", color: "Bone", room: "Living",
    a: "assets/stadlandet-mega-pouf.jpg",
    b: "assets/molmen-pouf.jpg",
    swatches: ["#A8997E", "#5C1F1A"], tag: "Signature" },
];

const CATEGORIES = ["All", "Seating", "Dining", "Casegoods", "Bedroom", "Lighting"];
const FILTERS = {
  Material: ["Oak", "Walnut", "Brass"],
  Color: ["Bone", "Oxblood", "Walnut", "Brass"],
  Room: ["Living", "Dining", "Bedroom"],
  Price: ["Under $1,000", "$1,000–$3,000", "$3,000+"],
};

function PLPPage({ onNavigate }) {
  const [cat, setCat] = useState_p("All");
  const [active, setActive] = useState_p({}); // {Material: ['Oak']}

  const toggle = (group, val) => {
    setActive((a) => {
      const cur = new Set(a[group] || []);
      if (cur.has(val)) cur.delete(val); else cur.add(val);
      return { ...a, [group]: [...cur] };
    });
  };
  const clear = () => setActive({});

  const items = useMemo_p(() => {
    return ALL_PRODUCTS.filter((p) => {
      if (cat !== "All" && p.cat !== cat) return false;
      if (active.Material && active.Material.length && !active.Material.includes(p.material)) return false;
      if (active.Color && active.Color.length && !active.Color.includes(p.color)) return false;
      if (active.Room && active.Room.length && !active.Room.includes(p.room)) return false;
      if (active.Price && active.Price.length) {
        const bands = active.Price.map((b) => {
          if (b === "Under $1,000") return p.price < 1000;
          if (b === "$1,000–$3,000") return p.price >= 1000 && p.price <= 3000;
          if (b === "$3,000+") return p.price > 3000;
          return true;
        });
        if (!bands.some(Boolean)) return false;
      }
      return true;
    });
  }, [cat, active]);

  const flatActive = Object.entries(active).flatMap(([g, vals]) => vals.map((v) => ({ g, v })));

  return (
    <main className="plp" data-screen-label="PLP">
      <div className="plp-head">
        <h1 className="t-h1">
          <span style={{ fontStyle: "italic" }}>The catalog,</span> twenty-two pieces.
        </h1>
        <div className="count">{items.length} pieces shown / {ALL_PRODUCTS.length} total</div>
      </div>

      {/* Category nav */}
      <div className="plp-cats">
        {CATEGORIES.map((c) => (
          <button
            key={c}
            className={cat === c ? "is-active" : ""}
            onClick={() => setCat(c)}
            data-cursor="Filter"
          >
            {c}
          </button>
        ))}
      </div>

      {/* Toolbar with filter chips and sort */}
      <div className="plp-toolbar">
        <div className="filter-chips">
          {Object.entries(FILTERS).map(([group, vals]) => (
            <FilterDrop key={group} group={group} options={vals} active={active[group] || []} onToggle={(v) => toggle(group, v)} />
          ))}
          {flatActive.length > 0 && (
            <button className="chip is-on" onClick={clear} data-cursor="Clear">
              Clear all <span className="x">×</span>
            </button>
          )}
        </div>
        <div className="sort">
          <span style={{ color: "var(--ink-mute)" }}>Sort —</span>
          <span>Editor's order</span>
          <span style={{ marginLeft: 4 }}>↓</span>
        </div>
      </div>

      <div className="plp-grid">
        {items.map((p, i) => (
          <Reveal key={p.name} delay={(i % 6) * 60} className="plp-card" variant="fade">
            <div onClick={() => onNavigate("pdp")} data-cursor="View" style={{ cursor: "none" }}>
              <div className="imgs">
                <div className="img img-a" style={{ backgroundImage: `url(${p.a})` }}></div>
                <div className="img img-b" style={{ backgroundImage: `url(${p.b})` }}></div>
              </div>
              {p.tag && <div className="tag">{p.tag}</div>}
              <div className="row">
                <div>
                  <div className="name">{p.name}</div>
                  <div className="sub">{p.sub}</div>
                </div>
                <div className="price">${p.price.toLocaleString()}</div>
              </div>
              <div className="swatches">
                {p.swatches.map((c, j) => <span key={j} style={{ background: c }}></span>)}
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      {items.length === 0 && (
        <div style={{ padding: "120px var(--pad-x)", textAlign: "center" }}>
          <p className="t-h3" style={{ fontStyle: "italic", color: "var(--ink-mute)" }}>Nothing matches that. Try fewer filters.</p>
        </div>
      )}

      {/* Footer info strip */}
      <section style={{ padding: "120px var(--pad-x)", background: "var(--bone-warm)", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 48, borderTop: "1px solid var(--line)" }}>
        {[
          { l: "Lead time", v: "Eight weeks, frame to door. We do not warehouse stock." },
          { l: "White-glove delivery", v: "Included in price for the continental United States." },
          { l: "50-year warranty", v: "On every joinery joint. Frame repair, free, for life." },
        ].map((b, i) => (
          <Reveal key={i} delay={i * 100}>
            <div className="t-eyebrow" style={{ color: "var(--accent)" }}>— {b.l}</div>
            <p className="t-body t-body-lg" style={{ marginTop: 16, maxWidth: "30ch", color: "var(--ink-soft)" }}>{b.v}</p>
          </Reveal>
        ))}
      </section>

      <Footer onNavigate={onNavigate} />
    </main>
  );
}

/* Compact chip with dropdown of multi-select options */
function FilterDrop({ group, options, active, onToggle }) {
  const [open, setOpen] = useState_p(false);
  const count = active.length;
  return (
    <div style={{ position: "relative" }}>
      <button
        className={`chip ${count > 0 ? "is-on" : ""}`}
        onClick={() => setOpen((o) => !o)}
        data-cursor="Filter"
      >
        {group} {count > 0 ? `(${count})` : ""}
        <span style={{ opacity: 0.6 }}>{open ? "−" : "+"}</span>
      </button>
      {open && (
        <div style={{
          position: "absolute", top: "calc(100% + 8px)", left: 0, zIndex: 20,
          background: "var(--bone)", border: "1px solid var(--line-strong)", borderRadius: 4,
          padding: "10px 0", minWidth: 220, boxShadow: "0 20px 50px -20px rgba(0,0,0,0.18)",
        }}>
          {options.map((o) => (
            <button
              key={o}
              onClick={() => onToggle(o)}
              data-cursor={active.includes(o) ? "Remove" : "Add"}
              style={{
                width: "100%", textAlign: "left", padding: "8px 16px",
                display: "flex", justifyContent: "space-between", alignItems: "center",
                fontSize: 13,
              }}
            >
              <span>{o}</span>
              <span style={{ width: 14, height: 14, border: "1px solid var(--line-strong)",
                background: active.includes(o) ? "var(--ink)" : "transparent",
                display: "inline-block",
              }}></span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

window.PLPPage = PLPPage;