// ============================================================
// Collection detail page + About/Contact page + standalone RFQ
// ============================================================

const { CollectionCard: DCard, Footer: DFooter, Reveal: DReveal } = window.OwithuComponents;
const { RFQSection: DRFQ } = window.OwithuRFQ;
const { useState: dUseState } = React;

// -------------------- COLLECTION DETAIL --------------------
function PiecesShowcase({ collection, navigate }) {
  const { piecesFor, groupPieces } = window.OWITHU;
  const pieces = piecesFor(collection);
  const groups = groupPieces(pieces);
  if (groups.length === 0) return null;

  // Running counter across groups for the techno "01 / 02 / ..." labels
  let counter = 0;

  return (
    <section className="pieces-section">
      <div className="container-wide">
        <div className="pieces-intro">
          <div>
            <span className="eyebrow">Piesele setului</span>
          </div>
          <div>
            <h2>
              {pieces.length} piese unice care alcătuiesc <span style={{ fontStyle: "italic", color: "var(--mustard-deep)" }}>{collection.name}</span> · {collection.finish}.
            </h2>
            <p className="body" style={{ marginTop: 16 }}>
              Setul complet conține {collection.pieces} piese, repartizate în {pieces.length} tipuri distincte. Fiecare piesă poate fi solicitată și separat — pentru completarea unui set existent sau pentru o configurație personalizată pentru locația ta.
            </p>
          </div>
        </div>

        {groups.map((group) => (
          <div className="pieces-group" key={group.name}>
            <div className="pieces-group-header">
              <h3>{group.name}</h3>
              <span className="count">{group.items.length} {group.items.length === 1 ? "tip" : "tipuri"} · colecția {collection.name}</span>
            </div>

            {group.items.map((p, idx) => {
              counter++;
              const reverse = counter % 2 === 0;
              const num = String(counter).padStart(2, "0");
              return (
                <DReveal key={p.id} className={`piece-card ${reverse ? "reverse" : ""}`}>
                  <div className="piece-image">
                    <img
                      src={p.image}
                      alt={`${p.label} ${collection.name} ${collection.finish}`}
                      loading="lazy"
                      onError={(e) => {
                        // graceful fallback if a piece image is missing — use the main collection hero
                        e.target.src = collection.images[0];
                      }}
                    />
                  </div>
                  <div className="piece-body">
                    <span className="piece-num">
                      <span className="divider"></span>
                      Piesa {num} · {group.name}
                    </span>
                    <h4>{p.label}</h4>
                    <div className="piece-collection">
                      {collection.name} · {collection.finish}
                    </div>
                    <div className="piece-specs">
                      <div className="piece-spec">
                        <span className="spec-label">Dimensiune</span>
                        <span className="spec-value">{p.size}</span>
                      </div>
                      <div className="piece-spec">
                        <span className="spec-label">Set</span>
                        <span className="spec-value">{p.qty} {p.qty === 1 ? "piesă" : "piese"}</span>
                      </div>
                      <div className="piece-spec">
                        <span className="spec-label">Material</span>
                        <span className="spec-value" style={{ fontFamily: "var(--font-body)", fontSize: 13 }}>
                          {collection.material.split(" ")[0]}
                        </span>
                      </div>
                    </div>
                    <p className="piece-desc">{p.desc}</p>
                    <div className="piece-actions">
                      <a
                        className="btn-link"
                        href="#rfq"
                        onClick={(e) => {
                          e.preventDefault();
                          document.getElementById("rfq")?.scrollIntoView({ behavior: "smooth", block: "start" });
                        }}
                      >
                        Cere ofertă pentru {p.label.toLowerCase()} <span className="arrow">→</span>
                      </a>
                    </div>
                  </div>
                </DReveal>
              );
            })}
          </div>
        ))}

        <div style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid var(--line)", display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center" }}>
          <p className="body" style={{ maxWidth: 560, margin: 0 }}>
            Vrei să combini piese din mai multe colecții sau să stabilești cantități diferite pentru fiecare tip? Trimite-ne o cerere personalizată.
          </p>
          <a
            className="btn btn-gold"
            href="#rfq"
            onClick={(e) => {
              e.preventDefault();
              document.getElementById("rfq")?.scrollIntoView({ behavior: "smooth", block: "start" });
            }}
          >
            Cere ofertă personalizată <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function CollectionDetailPage({ slug, navigate }) {
  const { collectionBySlug, COLLECTIONS } = window.OWITHU;
  const c = collectionBySlug(slug);
  const [activeImg, setActiveImg] = dUseState(0);

  if (!c) {
    return (
      <main className="page-fade" style={{ padding: "120px 0" }}>
        <div className="container-narrow" style={{ textAlign: "center" }}>
          <span className="eyebrow">Colecție inexistentă</span>
          <h2 style={{ margin: "16px 0 24px" }}>Nu am găsit colecția.</h2>
          <a className="btn btn-primary" href="#colectii" onClick={(e) => { e.preventDefault(); navigate("colectii"); }}>
            Vezi toate colecțiile <span className="arrow">→</span>
          </a>
        </div>
        <DFooter navigate={navigate} />
      </main>
    );
  }

  const related = COLLECTIONS.filter((o) => o.name === c.name && o.slug !== c.slug).slice(0, 3);
  const more = related.length < 3
    ? [...related, ...COLLECTIONS.filter((o) => o.feel === c.feel && o.slug !== c.slug && !related.includes(o))].slice(0, 3)
    : related;

  return (
    <main className="page-fade">
      <div className="container-wide">
        <a
          className="detail-back"
          href="#colectii"
          onClick={(e) => { e.preventDefault(); navigate("colectii"); }}
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6" /></svg>
          Înapoi la colecții
        </a>

        <div className="detail-grid">
          <div className="detail-gallery">
            <div className="hero-img" style={{ backgroundImage: `url(${c.images[activeImg]})` }}></div>
            <div className="row">
              {c.images.map((img, i) => (
                <button
                  key={i}
                  className="thumb"
                  style={{ backgroundImage: `url(${img})`, border: i === activeImg ? "2px solid var(--ink)" : "2px solid transparent" }}
                  onClick={() => setActiveImg(i)}
                  aria-label={`Imagine ${i + 1}`}
                ></button>
              ))}
            </div>
          </div>

          <div className="detail-meta">
            <span className="eyebrow">Colecție · Service Complet</span>
            <h1>{c.name}</h1>
            <div className="finish-label">{c.finish}</div>

            <p className="body" style={{ fontSize: 16, marginBottom: 24 }}>{c.composition}</p>

            <div className="detail-tags">
              {c.compat.map((t) => (
                <span key={t} className="detail-tag">{t}</span>
              ))}
            </div>

            <div className="detail-specs">
              <div className="row">
                <span className="label">Piese</span>
                <span className="value">{c.pieces} piese · {c.persons} persoane</span>
              </div>
              <div className="row">
                <span className="label">Material</span>
                <span className="value">{c.material}</span>
              </div>
              <div className="row">
                <span className="label">Paletă</span>
                <span className="value" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                  <span className="swatch" style={{ background: c.swatch, width: 14, height: 14 }}></span>
                  {c.palette}
                </span>
              </div>
              <div className="row">
                <span className="label">Compatibilitate</span>
                <span className="value">{c.compat.join(" · ")}</span>
              </div>
              <div className="row">
                <span className="label">Garanție</span>
                <span className="value">{c.warranty}</span>
              </div>
              <div className="row">
                <span className="label">Potrivit pentru</span>
                <span className="value">{c.industries.map((s) => window.OWITHU.INDUSTRIES[s]?.name).filter(Boolean).join(" · ")}</span>
              </div>
            </div>

            <div className="detail-actions">
              <a
                className="btn btn-gold"
                href="#oferta"
                onClick={(e) => {
                  e.preventDefault();
                  document.getElementById("rfq")?.scrollIntoView({ behavior: "smooth", block: "start" });
                }}
              >
                Cere ofertă pentru această colecție <span className="arrow">→</span>
              </a>
              <a
                className="btn btn-ghost"
                href="#colectii"
                onClick={(e) => { e.preventDefault(); navigate("colectii"); }}
              >
                Vezi toate colecțiile
              </a>
            </div>
          </div>
        </div>
      </div>

      <PiecesShowcase collection={c} navigate={navigate} />

      {more.length > 0 && (
        <section className="section section-warm">
          <div className="container-wide">
            <DReveal className="section-header">
              <div>
                <span className="eyebrow">Asemănătoare</span>
              </div>
              <div>
                <h2>Alte colecții care merg împreună cu {c.name}.</h2>
              </div>
            </DReveal>

            <div className="collection-grid">
              {more.map((m) => (
                <DCard key={m.slug} collection={m} navigate={navigate} />
              ))}
            </div>
          </div>
        </section>
      )}

      <DRFQ prefillCollection={`${c.name} · ${c.finish} (${c.pieces} piese)`} />

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

// -------------------- ABOUT/CONTACT --------------------
function AboutPage({ navigate }) {
  return (
    <main className="page-fade">
      <section style={{ background: "var(--paper-warm)", padding: "120px 0 100px" }}>
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
            <div>
              <span className="eyebrow">Despre Owithu</span>
              <h1 style={{ marginTop: 16 }}>
                Furnizor de soluții complete de masă, pentru locații HoReCa.
              </h1>
            </div>
            <p className="lede" style={{ maxWidth: 460 }}>
              Lucrăm cu restaurante, cafenele și hoteluri din România pentru a livra colecții complete de vesela — gândite ca seturi coerente, nu ca piese izolate de catalog.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container-wide">
          <div className="about-grid">
            <DReveal>
              <span className="eyebrow">Modelul nostru</span>
              <h2 style={{ marginTop: 16 }}>Colecții, nu cataloage.</h2>
              <p className="body" style={{ marginTop: 16 }}>
                Owithu nu vinde online piese individuale. Lucrăm pe principiul colecției: alegi un set complet, noi îți dimensionăm cantitatea după operare și îți facem o ofertă personalizată.
              </p>
              <p className="body" style={{ marginTop: 12 }}>
                Acest model dă două avantaje concrete pentru clienții HoReCa: <strong>identitate vizuală unitară</strong> (toată masa în aceeași referință) și <strong>re-comenzi previzibile</strong> (același set rămâne disponibil pentru înlocuiri).
              </p>
              <a
                className="btn btn-link"
                href="#oferta"
                onClick={(e) => { e.preventDefault(); navigate("oferta"); }}
                style={{ marginTop: 32 }}
              >
                Cerere de ofertă <span className="arrow">→</span>
              </a>
            </DReveal>

            <div className="about-stats">
              <div className="about-stat">
                <div className="num">32</div>
                <div className="label">Colecții în catalog</div>
              </div>
              <div className="about-stat">
                <div className="num">3</div>
                <div className="label">Segmente HoReCa</div>
              </div>
              <div className="about-stat">
                <div className="num">28–60</div>
                <div className="label">Piese / serviciu</div>
              </div>
              <div className="about-stat">
                <div className="num">24h</div>
                <div className="label">Răspuns la cerere</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-cool">
        <div className="container-wide">
          <DReveal className="section-header">
            <div><span className="eyebrow">Cu cine lucrăm</span></div>
            <div>
              <h2>Locațiile HoReCa care vor coerență, nu compromisuri.</h2>
              <p className="body" style={{ marginTop: 16 }}>
                Restaurante mid-range și fine-dining, cafenele de specialitate, hoteluri 3–5 stele, cantine și catering pentru evenimente. Volumele variază — modelul rămâne același.
              </p>
            </div>
          </DReveal>

          <div className="feature-row">
            <DReveal className="feature">
              <span className="num">/ Restaurante</span>
              <h4>De la 12 la 200 de locuri</h4>
              <p>Service complet pentru un restaurant cu carte și buchetiere; colecții închise la culoare pentru service intens.</p>
            </DReveal>
            <DReveal className="feature" delay={80}>
              <span className="num">/ Cafenele</span>
              <h4>Specialty și brunch</h4>
              <p>Set vizual de cești, căni și farfurii de desert; finisaje calde sau pastelate care țin la fotografie.</p>
            </DReveal>
            <DReveal className="feature" delay={160}>
              <span className="num">/ Hoteluri</span>
              <h4>3–5 stele · breakfast, restaurant, room service</h4>
              <p>Colecții mari (48–60 piese), neutre, care țin la operare zilnică și la oaspeți cu așteptări înalte.</p>
            </DReveal>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }}>
            <DReveal>
              <span className="eyebrow">Contact</span>
              <h2 style={{ marginTop: 16, marginBottom: 24 }}>Cum ne găsești.</h2>
              <p className="body">
                Telefonul rămâne cel mai rapid canal pentru cereri cu termen scurt. Pentru cereri detaliate (locație nouă, schimbare colecție), formularul de ofertă e cel mai eficient.
              </p>

              <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr", gap: 16 }}>
                <div style={{ paddingBottom: 16, borderBottom: "1px solid var(--line)" }}>
                  <div className="meta">Email</div>
                  <div style={{ fontSize: 18, marginTop: 6 }}>office@<span style={{ color: "var(--mustard-deep)" }}>owithu</span>.placeholder</div>
                </div>
                <div style={{ paddingBottom: 16, borderBottom: "1px solid var(--line)" }}>
                  <div className="meta">Telefon</div>
                  <div style={{ fontSize: 18, marginTop: 6 }}>+40 7XX XXX XXX</div>
                </div>
                <div style={{ paddingBottom: 16, borderBottom: "1px solid var(--line)" }}>
                  <div className="meta">Locație</div>
                  <div style={{ fontSize: 18, marginTop: 6 }}>București · România</div>
                </div>
                <div>
                  <div className="meta">Program</div>
                  <div style={{ fontSize: 18, marginTop: 6 }}>L–V · 09:00–18:00</div>
                </div>
              </div>
              <p className="body-sm" style={{ marginTop: 24, color: "var(--silver-600)" }}>
                Datele de contact sunt provizorii — domeniul și emailul final se stabilesc înainte de lansare.
              </p>
            </DReveal>

            <DReveal delay={120}>
              <div style={{ aspectRatio: "5 / 4", backgroundImage: "url(images/genesis-basalte-2.jpg)", backgroundSize: "cover", backgroundPosition: "center" }}></div>
              <div style={{ marginTop: 24, fontSize: 13, color: "var(--silver-600)", letterSpacing: "0.04em" }}>
                Genesis · Basalte — colecție frecvent solicitată în 2026.
              </div>
            </DReveal>
          </div>
        </div>
      </section>

      <section style={{ background: "var(--paper-warm)", padding: "32px 0", borderTop: "1px solid var(--line)" }}>
        <div className="container-wide">
          <div className="meta" style={{ marginBottom: 16 }}>Faza următoare · roadmap</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
            {[
              "Catalog extins de produse individuale",
              "Pagini de produs și filtre detaliate",
              "Coș și plăți pentru clienți recurenți",
              "Cont B2B cu istoric și re-comenzi",
            ].map((t, i) => (
              <div key={i} style={{ padding: "16px 0", borderTop: "1px solid var(--line)" }}>
                <div className="meta" style={{ color: "var(--mustard-deep)" }}>0{i + 1}</div>
                <div style={{ marginTop: 8, fontSize: 14, color: "var(--ink)" }}>{t}</div>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 24, color: "var(--silver-600)", fontSize: 13 }}>
            Demo Faza 1: lead-gen + colecții. Faza 2 (post-validare): catalog complet, pagini de produs, coș și plăți.
          </p>
        </div>
      </section>

      <DRFQ />

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

// -------------------- STANDALONE RFQ PAGE --------------------
function OfertaPage({ navigate }) {
  return (
    <main className="page-fade">
      <section style={{ background: "var(--paper-warm)", padding: "120px 0 60px" }}>
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "end" }}>
            <div>
              <span className="eyebrow">Cerere de ofertă</span>
              <h1 style={{ marginTop: 16 }}>
                Spune-ne despre locația ta. <br />
                <span style={{ fontStyle: "italic", color: "var(--mustard-deep)" }}>Revenim cu o propunere.</span>
              </h1>
            </div>
            <p className="lede" style={{ maxWidth: 460 }}>
              Răspundem în 24–48h cu o propunere de colecție și o cantitate dimensionată pe operarea ta. Nu publicăm prețuri public — ofertăm individual.
            </p>
          </div>
        </div>
      </section>

      <DRFQ light />

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

window.OwithuPages = { CollectionDetailPage, AboutPage, OfertaPage };