/* === Collections page === */
function Collections({ setPage, openConsult }) {
  const D = window.MONILI;
  const [cat, setCat] = useState("all");
  const [selected, setSelected] = useState(null);

  const pieces = useMemo(() =>
    cat === "all" ? D.pieces : D.pieces.filter(p => p.category === cat),
    [cat]
  );

  const stats = useMemo(() => {
    const counts = {};
    D.pieces.forEach(p => { counts[p.category] = (counts[p.category] || 0) + 1; });
    return counts;
  }, []);

  return (
    <main data-screen-label="Collections">
      <section className="page-head">
        <div className="container">
          <span className="eyebrow eyebrow-gold">The Collections</span>
          <h1>Certified diamonds. <em>Considered design.</em></h1>
          <p className="lede">
            A working selection from our cases — engagement and eternity rings, gemstone halos,
            tennis bracelets and chains, studs, pendants, bangles. Every piece can be made yours.
          </p>
        </div>
      </section>

      <div className="collection-controls">
        <div className="container collection-controls-inner">
          {D.categories.map(c => (
            <button key={c.id} className={"chip" + (cat === c.id ? " active" : "")} onClick={() => setCat(c.id)}>
              {c.name}
              {c.id !== "all" && (
                <span style={{ marginLeft: 8, opacity: .55, fontSize: 11 }}>· {stats[c.id] || 0}</span>
              )}
            </button>
          ))}
          <div style={{ flex: 1 }}/>
          <span className="gia-badge"><Icon name="check" size={12}/> GIA &amp; IGI certified</span>
        </div>
      </div>

      <section className="section">
        <div className="container">
          <div className="products-grid">
            {pieces.map(p => (
              <div key={p.id} className="product-card" onClick={() => setSelected(p)}>
                <div className="product-card-frame">
                  {p.tag && <span className="tag">{p.tag}</span>}
                  <img src={p.img} alt={p.name}/>
                </div>
                <div className="product-meta">
                  <div className="product-name">{p.name}</div>
                  <div className="product-spec">{p.spec}</div>
                  <div className="product-cta-row">
                    <span className="product-enquire">Enquire · Price on Request</span>
                    <Icon name="arrow" size={14}/>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {pieces.length === 0 && (
            <div style={{ padding: 60, textAlign: "center", color: "var(--charcoal)" }}>
              No pieces yet in this category. <button className="btn-link" onClick={openConsult}>Commission a piece →</button>
            </div>
          )}
        </div>
      </section>

      {/* Why no prices band */}
      <section style={{ background: "var(--pearl)", padding: "72px 0", borderBlock: "1px solid var(--line)" }}>
        <div className="container-narrow" style={{ textAlign: "center" }}>
          <span className="eyebrow eyebrow-gold">Why "Price on Request"?</span>
          <h3 className="serif" style={{ fontSize: 30, fontWeight: 500, lineHeight: 1.2, margin: "12px 0 14px 0" }}>
            Fine jewellery is priced in person.
          </h3>
          <p style={{ fontSize: 15.5, lineHeight: 1.65, color: "var(--charcoal)", maxWidth: 640, margin: "0 auto" }}>
            Two diamonds in the same setting can be worlds apart in value. We show you the certificate,
            walk you through grade and provenance, and provide an itemised, no-obligation quote
            after your first consultation — so the price reflects the piece, not the page.
          </p>
          <div style={{ marginTop: 24, display: "inline-flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <button className="btn btn-gold" onClick={openConsult}>Book a Private Consultation <Icon name="arrow" size={14}/></button>
            <button className="btn btn-ghost" onClick={() => setPage("bespoke")}>Or commission a piece</button>
          </div>
        </div>
      </section>

      {/* Detail drawer */}
      {selected && <PieceDrawer piece={selected} onClose={() => setSelected(null)} openConsult={openConsult}/>}
    </main>
  );
}

function PieceDrawer({ piece, onClose, openConsult }) {
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 90, background: "rgba(20,17,15,0.55)", backdropFilter: "blur(4px)",
      display: "flex", justifyContent: "flex-end",
    }} onClick={onClose}>
      <div style={{
        background: "var(--ivory)", width: "100%", maxWidth: 640, height: "100%", overflow: "auto",
        animation: "slideIn .35s ease both",
      }} onClick={e => e.stopPropagation()}>
        <div style={{ padding: 24, display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--line)" }}>
          <span className="eyebrow">{piece.tag || piece.category}</span>
          <button className="nav-icon-btn" onClick={onClose}><Icon name="close" size={16}/></button>
        </div>
        <div style={{ padding: 36 }}>
          <div style={{ background: "var(--pearl)", aspectRatio: "1/1", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--line)", marginBottom: 28 }}>
            <img src={piece.img} alt={piece.name} style={{ width: "70%", height: "70%", objectFit: "contain" }}/>
          </div>
          <h2 className="serif" style={{ fontSize: 36, lineHeight: 1.1, margin: "0 0 8px 0", fontWeight: 500 }}>{piece.name}</h2>
          <div style={{ fontSize: 14, color: "var(--charcoal)", marginBottom: 24 }}>{piece.spec}</div>
          <div style={{ display: "flex", gap: 10, marginBottom: 24, flexWrap: "wrap" }}>
            <span className="gia-badge"><Icon name="check" size={12}/> GIA / IGI certified</span>
            <span className="review-pip"><Icon name="check" size={12}/> Resize &amp; remodel available</span>
          </div>
          <div style={{ background: "var(--paper)", border: "1px solid var(--line)", padding: 24, marginBottom: 24 }}>
            <div className="eyebrow eyebrow-gold" style={{ marginBottom: 6 }}>Price</div>
            <div className="serif" style={{ fontSize: 26, fontWeight: 500, lineHeight: 1.1, color: "var(--onyx)" }}>On request</div>
            <p style={{ fontSize: 13, color: "var(--charcoal)", margin: "10px 0 0 0", lineHeight: 1.55 }}>
              We provide an itemised quote — diamond grade, metal, setting and labour — after your first consultation, with no obligation to proceed.
            </p>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-gold" onClick={openConsult}>Enquire about this piece <Icon name="arrow" size={14}/></button>
            <button className="btn btn-ghost">Book a viewing</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Collections = Collections;