// ============================================================
// Collections grid page — full catalog of complete services
// with industry / finish / piece-count filters.
// ============================================================

const { CollectionCard: CC, Footer: CFooter, Reveal: CReveal } = window.OwithuComponents;
const { useState: cUseState, useMemo: cUseMemo } = React;

function CollectionsPage({ navigate, initialIndustry }) {
  const { COLLECTIONS, INDUSTRIES } = window.OWITHU;
  const [industry, setIndustry] = cUseState(initialIndustry || "toate");
  const [feel, setFeel] = cUseState("toate");
  const [size, setSize] = cUseState("toate");

  const feels = [
    { id: "toate", label: "Toate paletele" },
    { id: "neutral", label: "Neutru" },
    { id: "earth", label: "Pământ" },
    { id: "blue", label: "Albastru" },
    { id: "warm", label: "Cald" },
    { id: "monochrome", label: "Monocrom" },
  ];

  const sizes = [
    { id: "toate", label: "Toate dimensiunile" },
    { id: "s", label: "28–32 piese" },
    { id: "m", label: "36–42 piese" },
    { id: "l", label: "48–60 piese" },
  ];

  const filtered = cUseMemo(() => {
    return COLLECTIONS.filter((c) => {
      if (industry !== "toate" && !c.industries.includes(industry)) return false;
      if (feel !== "toate" && c.feel !== feel) return false;
      if (size === "s" && c.pieces > 32) return false;
      if (size === "m" && (c.pieces < 36 || c.pieces > 42)) return false;
      if (size === "l" && c.pieces < 48) return false;
      return true;
    });
  }, [industry, feel, size]);

  return (
    <main className="page-fade">
      {/* Page header */}
      <section style={{ background: "var(--paper-warm)", paddingTop: 100, paddingBottom: 56 }}>
        <div className="container-wide">
          <span className="eyebrow">Catalog · Service Complet</span>
          <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 64, alignItems: "end", marginTop: 16 }}>
            <h1 style={{ margin: 0 }}>
              32 colecții, livrate ca <span style={{ fontStyle: "italic", color: "var(--mustard-deep)" }}>servicii complete.</span>
            </h1>
            <p className="lede" style={{ maxWidth: 420 }}>
              Catalogul nostru nu listează farfurii izolate. Vezi colecțiile, alege paleta și ne ceri o ofertă pentru cantitatea de care ai nevoie.
            </p>
          </div>
        </div>
      </section>

      {/* Filters */}
      <section style={{ padding: "32px 0", borderBottom: "1px solid var(--line)", background: "var(--paper)", position: "sticky", top: 72, zIndex: 30 }}>
        <div className="container-wide" style={{ display: "flex", gap: 24, flexWrap: "wrap", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, flex: 1, minWidth: 280 }}>
            <span className="meta">Segment</span>
            <div className="chips-row">
              <button className={`chip ${industry === "toate" ? "active" : ""}`} onClick={() => setIndustry("toate")}>
                Toate <span className="count">{COLLECTIONS.length}</span>
              </button>
              {Object.values(INDUSTRIES).map((ind) => {
                const count = COLLECTIONS.filter((c) => c.industries.includes(ind.slug)).length;
                return (
                  <button
                    key={ind.slug}
                    className={`chip ${industry === ind.slug ? "active" : ""}`}
                    onClick={() => setIndustry(ind.slug)}
                  >
                    {ind.name} <span className="count">{count}</span>
                  </button>
                );
              })}
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, flex: 1, minWidth: 280 }}>
            <span className="meta">Paletă</span>
            <div className="chips-row">
              {feels.map((f) => (
                <button
                  key={f.id}
                  className={`chip ${feel === f.id ? "active" : ""}`}
                  onClick={() => setFeel(f.id)}
                >
                  {f.label}
                </button>
              ))}
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, flex: 1, minWidth: 280 }}>
            <span className="meta">Dimensiune set</span>
            <div className="chips-row">
              {sizes.map((s) => (
                <button
                  key={s.id}
                  className={`chip ${size === s.id ? "active" : ""}`}
                  onClick={() => setSize(s.id)}
                >
                  {s.label}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section className="section">
        <div className="container-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
            <h2 style={{ fontSize: 24, fontFamily: "var(--font-body)", fontWeight: 600, textTransform: "none", letterSpacing: 0, margin: 0 }}>
              {filtered.length} {filtered.length === 1 ? "colecție" : "colecții"} disponibile
            </h2>
            <span className="meta">Vezi detalii pentru fiecare</span>
          </div>

          {filtered.length === 0 ? (
            <div style={{ padding: "80px 40px", textAlign: "center", border: "1px dashed var(--line-strong)" }}>
              <p className="body">Nicio colecție nu se potrivește filtrelor curente.</p>
              <button
                className="btn btn-ghost"
                style={{ marginTop: 16 }}
                onClick={() => { setIndustry("toate"); setFeel("toate"); setSize("toate"); }}
              >
                Resetează filtrele
              </button>
            </div>
          ) : (
            <div className="collection-grid">
              {filtered.map((c, i) => (
                <CReveal key={c.slug} delay={Math.min(i * 30, 240)}>
                  <CC collection={c} navigate={navigate} />
                </CReveal>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* End-of-grid CTA */}
      <section className="section section-dark">
        <div className="container-narrow" style={{ textAlign: "center" }}>
          <span className="eyebrow on-dark">Nu ești sigur ce să alegi?</span>
          <h2 style={{ marginTop: 16 }}>Ne spui despre locația ta, îți recomandăm 2–3 colecții.</h2>
          <p className="lede" style={{ color: "rgba(255,255,255,0.8)", marginTop: 16, maxWidth: 580, marginInline: "auto" }}>
            Trimite-ne câteva detalii — tip locație, număr de mese, direcție vizuală — și revenim cu o propunere de set complet și cantitate dimensionată pe operare.
          </p>
          <div style={{ marginTop: 32 }}>
            <a
              className="btn btn-gold"
              href="#oferta"
              onClick={(e) => { e.preventDefault(); navigate("oferta"); }}
            >
              Primește recomandare <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      <CFooter navigate={navigate} />
    </main>
  );
}

window.OwithuCollections = { CollectionsPage };