// ============================================================
// Industry landing page (parametric): restaurante / cafenele / hoteluri
// ============================================================

const { CollectionCard: IndCard, Footer: IndFooter, Reveal: IndReveal, PromiseRow: IndPromise } = window.OwithuComponents;
const { RFQSection: IndRFQ } = window.OwithuRFQ;

function IndustryPage({ slug, navigate }) {
  const { INDUSTRIES, COLLECTIONS, collectionBySlug } = window.OWITHU;
  const meta = INDUSTRIES[slug];
  if (!meta) return null;

  const picks = meta.pickSlugs.map(collectionBySlug).filter(Boolean);

  // Use case headline copy per industry
  const sectionMeta = {
    restaurante: {
      pull: "Service intens — finisaje care țin și după 1000 de cicluri. Catalog stabil, identitate vizuală menținută peste schimburi.",
      sizeBlock: "Recomandăm colecții de 36–60 piese, în finisaje închise pentru a masca uzura naturală.",
    },
    cafenele: {
      pull: "Cești, căni, farfurioare și boluri în finisaje calde — set vizual care arată bine pe orice masă, la orice oră.",
      sizeBlock: "Colecții de 28–42 piese, cu accent pe cești espresso/lungo și farfurii de desert.",
    },
    hoteluri: {
      pull: "Aceeași colecție în breakfast, restaurant și room service. Re-comenzi previzibile, identitate unitară.",
      sizeBlock: "Colecții de 48–60 piese, finisaje neutre care țin la operare zilnică și la oaspeți cu așteptări înalte.",
    },
  }[slug];

  return (
    <main className="page-fade">
      {/* INDUSTRY HERO */}
      <section className="industry-hero">
        <div className="copy">
          <span className="eyebrow">Segment {meta.number} · {meta.label}</span>
          <h1>{meta.title}</h1>
          <p className="lede">{meta.lede}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 40 }}>
            <a
              className="btn btn-gold"
              href="#rfq"
              onClick={(e) => {
                e.preventDefault();
                document.getElementById("rfq")?.scrollIntoView({ behavior: "smooth", block: "start" });
              }}
            >
              {meta.cta} <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 style={{ marginTop: 40, display: "flex", gap: 32, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
            <div>
              <div className="meta">Colecții recomandate</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 36, lineHeight: 1, marginTop: 4 }}>
                {picks.length}
              </div>
            </div>
            <div>
              <div className="meta">Piese / serviciu</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 36, lineHeight: 1, marginTop: 4 }}>
                {Math.min(...picks.map((p) => p.pieces))}<span style={{ color: "var(--silver-500)" }}>–</span>{Math.max(...picks.map((p) => p.pieces))}
              </div>
            </div>
            <div>
              <div className="meta">Persoane</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 36, lineHeight: 1, marginTop: 4 }}>
                {Math.min(...picks.map((p) => p.persons))}<span style={{ color: "var(--silver-500)" }}>–</span>{Math.max(...picks.map((p) => p.persons))}
              </div>
            </div>
          </div>
        </div>
        <div className="image" style={{ backgroundImage: `url(${meta.hero})` }}></div>
      </section>

      {/* USE CASES */}
      <section className="section-tight section-cool">
        <div className="container-wide">
          <IndReveal className="usecase-strip" style={{ padding: 0 }}>
            <div>
              <span className="eyebrow">Use cases</span>
              <h3 style={{ marginTop: 16 }}>{meta.tagline}</h3>
              <p className="body" style={{ marginTop: 16 }}>{sectionMeta.pull}</p>
            </div>
            <div className="usecase-bullets">
              {meta.useCases.map((u, i) => (
                <div className="usecase-bullet" key={i}>
                  <h5>{u.title}</h5>
                  <p>{u.body}</p>
                </div>
              ))}
            </div>
          </IndReveal>
        </div>
      </section>

      {/* RECOMMENDED COLLECTIONS */}
      <section className="section">
        <div className="container-wide">
          <IndReveal className="section-header">
            <div>
              <span className="eyebrow">Colecții recomandate</span>
            </div>
            <div>
              <h2>Selecție potrivită pentru {meta.name.toLowerCase()}.</h2>
              <p className="body" style={{ marginTop: 16 }}>{sectionMeta.sizeBlock}</p>
            </div>
          </IndReveal>

          <div className="collection-grid">
            {picks.map((c, i) => (
              <IndReveal key={c.slug} delay={i * 40}>
                <IndCard collection={c} navigate={navigate} badge={i === 0 ? "Recomandat" : undefined} />
              </IndReveal>
            ))}
          </div>

          <div style={{ marginTop: 64, display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
            <a
              className="btn btn-primary"
              href="#colectii"
              onClick={(e) => { e.preventDefault(); navigate("colectii"); }}
            >
              Toate colecțiile <span className="arrow">→</span>
            </a>
            <a
              className="btn btn-ghost"
              href="#rfq"
              onClick={(e) => {
                e.preventDefault();
                document.getElementById("rfq")?.scrollIntoView({ behavior: "smooth", block: "start" });
              }}
            >
              Primește recomandare pentru locația ta
            </a>
          </div>
        </div>
      </section>

      {/* COMPATIBILITY / PROMISE */}
      <section className="section-tight">
        <div className="container-wide">
          <IndPromise />
        </div>
      </section>

      {/* INDUSTRY EDITORIAL STRIP */}
      <section
        className="section"
        style={{
          backgroundImage: `linear-gradient(rgba(14,14,14,0.6), rgba(14,14,14,0.6)), url(${meta.hero})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          color: "var(--paper)",
        }}
      >
        <div className="container-narrow" style={{ textAlign: "center" }}>
          <IndReveal>
            <p className="pull-quote" style={{ color: "var(--paper)" }}>
              {slug === "restaurante" && (
                <>„Un serviciu coerent înseamnă <span className="em">aceeași referință pe toată masa</span>, nu un compromis făcut din ce-a mai rămas în depozit.”</>
              )}
              {slug === "cafenele" && (
                <>„Pentru un client care vine de trei ori pe săptămână, <span className="em">ceașca aceea pe care o știe</span> spune mai mult decât un meniu nou.”</>
              )}
              {slug === "hoteluri" && (
                <>„Oaspetele nu vede catalogul tău — vede <span className="em">coerența între breakfast și room service</span>. Asta îi spune ce hotel ai construit.”</>
              )}
            </p>
            <span className="pull-quote-cite" style={{ color: "var(--silver-300)" }}>
              Despre {meta.name.toLowerCase()} · Owithu
            </span>
          </IndReveal>
        </div>
      </section>

      {/* RFQ */}
      <IndRFQ industry={slug} />

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

window.OwithuIndustry = { IndustryPage };
