// Eva — Collections page

function PageCollections({ initialCat, go, openConsult }) {
  const { useState, useMemo } = React;
  const products = window.EVA_PRODUCTS;
  const [cat, setCat] = useState(initialCat || "all");
  const [stone, setStone] = useState("all"); // all, natural, lab
  const [metal, setMetal] = useState("all"); // all, yellow, white, rose, mixed
  const [sort, setSort] = useState("featured");

  const filtered = useMemo(() => {
    let r = products.slice();
    if (cat !== "all") r = r.filter(p => p.cat === cat);
    if (stone !== "all") r = r.filter(p => p.stone === stone);
    if (metal !== "all") r = r.filter(p => p.metal === metal);
    if (sort === "asc") r.sort((a, b) => a.price - b.price);
    if (sort === "desc") r.sort((a, b) => b.price - a.price);
    return r;
  }, [cat, stone, metal, sort]);

  const cats = [["all", "All pieces"], ...window.EVA_COLLECTIONS.map(c => [c.slug, c.label])];

  return (
    <main className="evaPage evaCollPage">
      {/* Header */}
      <section className="evaSection evaCollPage__head">
        <SectionEyebrow>The collection</SectionEyebrow>
        <h1 className="evaH1">{cat === "all" ? "Every piece, all in one velvet tray." : (window.EVA_COLLECTIONS.find(c => c.slug === cat)?.label || "Collection")}</h1>
        <p className="evaLede">
          The Eva catalogue runs from a 2-carat lab-grown solitaire at AED 4,999 to high-jewellery commissions north of AED 275,000. Below are the pieces currently on the velvet — natural and lab-grown, GIA/IGI/HRD-certified.
        </p>
      </section>

      {/* Filter bar */}
      <section className="evaCollFilters">
        <div className="evaCollFilters__cats">
          {cats.map(([slug, label]) => (
            <button key={slug} className={"evaCollFilters__cat " + (cat === slug ? "is-on" : "")} onClick={() => setCat(slug)}>
              {label}
            </button>
          ))}
        </div>
        <div className="evaCollFilters__row">
          <div className="evaSeg">
            <span className="evaSeg__label">Diamond</span>
            <button className={stone === "all" ? "is-on" : ""} onClick={() => setStone("all")}>All</button>
            <button className={stone === "natural" ? "is-on" : ""} onClick={() => setStone("natural")}>Natural</button>
            <button className={stone === "lab" ? "is-on" : ""} onClick={() => setStone("lab")}>Lab-grown</button>
          </div>
          <div className="evaSeg">
            <span className="evaSeg__label">Metal</span>
            <button className={metal === "all" ? "is-on" : ""} onClick={() => setMetal("all")}>All</button>
            <button className={metal === "yellow" ? "is-on" : ""} onClick={() => setMetal("yellow")}><span className="evaSwatch evaSwatch--yellow" />Yellow</button>
            <button className={metal === "white" ? "is-on" : ""} onClick={() => setMetal("white")}><span className="evaSwatch evaSwatch--white" />White</button>
            <button className={metal === "rose" ? "is-on" : ""} onClick={() => setMetal("rose")}><span className="evaSwatch evaSwatch--rose" />Rose</button>
          </div>
          <div className="evaSeg evaSeg--right">
            <span className="evaSeg__label">Sort</span>
            <select value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="featured">Featured</option>
              <option value="asc">Price · low to high</option>
              <option value="desc">Price · high to low</option>
            </select>
          </div>
        </div>
        <div className="evaCollFilters__count">{filtered.length} pieces shown · prices indicative, in AED · re-confirmed in-store</div>
      </section>

      {/* Grid */}
      <section className="evaSection evaSection--tight">
        {filtered.length === 0 ? (
          <div className="evaEmpty">
            <p>No pieces match this combination on the velvet today.</p>
            <p className="evaEmpty__sub">Eva makes most settings to order. Tell us what you have in mind — most bespoke pieces are ready in under 24 hours.</p>
            <button className="evaBtn evaBtn--gold" onClick={() => go("bespoke")}>Start a bespoke piece</button>
          </div>
        ) : (
          <div className="evaProdGrid">
            {filtered.map((p) => (
              <ProductTile key={p.id} p={p} onEnquire={openConsult} />
            ))}
          </div>
        )}
      </section>

      {/* Bespoke nudge */}
      <section className="evaSection evaSection--champagne">
        <div className="evaNudge">
          <div>
            <SectionEyebrow>Not quite right?</SectionEyebrow>
            <h2 className="evaH2">Bring us a sketch, a photo, a story — we'll make the rest.</h2>
            <p className="evaLede">Every Eva piece can be tuned: change the metal, swap the stone, scale it up, scale it down. Or start from a blank velvet tray.</p>
          </div>
          <div className="evaNudge__cta">
            <button className="evaBtn evaBtn--gold evaBtn--lg" onClick={() => go("bespoke")}>Request a custom design</button>
            <a className="evaBtn evaBtn--ghost" href={"https://wa.me/" + window.EVA_FACTS.whatsapp} target="_blank" rel="noreferrer">WhatsApp us a reference</a>
          </div>
        </div>
      </section>
    </main>
  );
}

function ProductTile({ p, onEnquire }) {
  const { useState } = React;
  const [hover, setHover] = useState(false);
  const discount = p.wasPrice ? Math.round((1 - p.price / p.wasPrice) * 100) : 0;
  return (
    <article className="evaProd" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div className="evaProd__media">
        {discount > 0 && <div className="evaProd__chip">−{discount}%</div>}
        <img src={p.image} alt={p.name} />
        <div className={"evaProd__hover " + (hover ? "is-on" : "")}>
          <button className="evaBtn evaBtn--gold" onClick={onEnquire}>Enquire</button>
          <a className="evaBtn evaBtn--dark" href={"https://wa.me/" + window.EVA_FACTS.whatsapp + "?text=Hi%20Eva%2C%20I%27m%20interested%20in%20the%20" + encodeURIComponent(p.name) + "."} target="_blank" rel="noreferrer">WhatsApp</a>
        </div>
      </div>
      <div className="evaProd__meta">
        <div className="evaProd__cat">{p.catLabel} · {p.stone === "lab" ? "Lab-grown" : "Natural"}</div>
        <h3 className="evaProd__name">{p.name}</h3>
        <div className="evaProd__tags">
          {p.tags.map(t => <span key={t}>{t}</span>)}
        </div>
        <div className="evaProd__price">
          <strong>{window.aed(p.price)}</strong>
          {p.wasPrice && <em>was {window.aed(p.wasPrice)}</em>}
        </div>
      </div>
    </article>
  );
}

window.PageCollections = PageCollections;