// ============================================================
// Home page — supplier intro + industry routing
// ============================================================

const { Header: H_Header, Footer: H_Footer, CollectionCard: H_CollCard, PromiseRow, CollectionMarquee, Reveal } = window.OwithuComponents;

function HomePage({ navigate }) {
  const { COLLECTIONS, INDUSTRIES } = window.OWITHU;
  const featured = [
    COLLECTIONS.find((c) => c.slug === "genesis-basalte"),
    COLLECTIONS.find((c) => c.slug === "iris-marron-sauvage"),
    COLLECTIONS.find((c) => c.slug === "magma-cobalt"),
    COLLECTIONS.find((c) => c.slug === "oxygen-rose-poudre"),
    COLLECTIONS.find((c) => c.slug === "scandi-olive"),
    COLLECTIONS.find((c) => c.slug === "iris-ivoire"),
  ].filter(Boolean);

  return (
    <main className="page-fade">
      {/* HERO */}
      <section className="hero">
        <div
          className="hero-bg"
          style={{ backgroundImage: "url(images/iris-marron-1.jpg)" }}
        ></div>
        <div className="hero-corner">
          Demo · Faza 1 · Lead-gen
          <br />
          Pentru Owithu Management
        </div>
        <div className="container-wide hero-content">
          <span className="eyebrow on-dark">Owithu · Table Solutions B2B</span>
          <h1>
            Servicii complete de masă,<br />
            <span style={{ fontStyle: "italic", color: "var(--mustard)" }}>livrate ca un set.</span>
          </h1>
          <p className="lede">
            Owithu furnizează colecții complete de vesela pentru restaurante, cafenele și hoteluri din România. Alegi colecția, noi îți propunem cantitatea — totul pe bază de ofertă personalizată.
          </p>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
            <a
              className="btn btn-gold"
              href="#colectii"
              onClick={(e) => { e.preventDefault(); navigate("colectii"); }}
            >
              Vezi colecțiile <span className="arrow">→</span>
            </a>
            <a
              className="btn btn-ghost on-dark"
              href="#oferta"
              onClick={(e) => { e.preventDefault(); navigate("oferta"); }}
            >
              Primește recomandare
            </a>
          </div>
        </div>
        <div className="hero-meta">
          <span className="count">32</span>
          Colecții
          <br />
          Service Complet
        </div>
      </section>

      <CollectionMarquee />

      {/* INDUSTRY ROUTING */}
      <section className="section" id="segmente">
        <div className="container-wide">
          <Reveal className="section-header">
            <div>
              <span className="eyebrow">Pentru cine lucrăm</span>
            </div>
            <div>
              <h2>Trei moduri de a folosi aceeași masă.</h2>
              <p className="body" style={{ marginTop: 16, maxWidth: 560 }}>
                Restaurante, cafenele și hoteluri au nevoi diferite, dar logica e aceeași: un set complet, coerent vizual și ușor de re-aprovizionat. Alege segmentul tău pentru o selecție potrivită.
              </p>
            </div>
          </Reveal>

          <div className="industry-grid">
            {Object.values(INDUSTRIES).map((ind) => (
              <a
                key={ind.slug}
                className="industry-card"
                href={`#${ind.slug}`}
                onClick={(e) => { e.preventDefault(); navigate(ind.slug); }}
              >
                <div className="image">
                  <div
                    className="image-inner"
                    style={{ backgroundImage: `url(${ind.homepageImage})`, width: "100%", height: "100%" }}
                  ></div>
                </div>
                <span className="number">{ind.number} / Segment</span>
                <h3>{ind.name}</h3>
                <p className="summary">{ind.tagline} {ind.lede.split(".")[0]}.</p>
                <span className="industry-cta">
                  Vezi soluții pentru {ind.name.toLowerCase()} <span className="arrow">→</span>
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>

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

      {/* FEATURED COLLECTIONS */}
      <section className="section section-warm">
        <div className="container-wide">
          <Reveal className="section-header">
            <div>
              <span className="eyebrow">Colecții selecționate</span>
            </div>
            <div>
              <h2>Colecții complete, gata de comandă prin cerere de ofertă.</h2>
              <p className="body" style={{ marginTop: 16 }}>
                Fiecare colecție este un serviciu complet pentru 4–6 persoane: farfurii, boluri, căni și cești în aceeași referință. Vezi colecțiile complete sau cere o recomandare pentru locația ta.
              </p>
            </div>
          </Reveal>

          <div className="collection-grid">
            {featured.map((c) => (
              <Reveal key={c.slug} delay={0}>
                <H_CollCard collection={c} navigate={navigate} />
              </Reveal>
            ))}
          </div>

          <div style={{ marginTop: 64, display: "flex", justifyContent: "center" }}>
            <a
              className="btn btn-primary"
              href="#colectii"
              onClick={(e) => { e.preventDefault(); navigate("colectii"); }}
            >
              Vezi toate cele 32 de colecții <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      {/* FEATURED MOSAIC */}
      <section className="section">
        <div className="container-wide">
          <Reveal>
            <div className="featured-mosaic">
              <div className="imgs">
                <div className="big" style={{ backgroundImage: "url(images/iris-bleu-nuit-2.jpg)" }}></div>
                <div className="small" style={{ backgroundImage: "url(images/iris-bleu-nuit-1.jpg)" }}></div>
                <div className="small" style={{ backgroundImage: "url(images/iris-bleu-nuit-3.jpg)" }}></div>
              </div>
              <div className="copy">
                <span className="eyebrow">Colecție în lumină</span>
                <h2>IRIS Bleu nuit.</h2>
                <p className="body" style={{ marginBottom: 24 }}>
                  48 de piese în trei dimensiuni de farfurii, boluri, căni și cești — un degrade de albastru închis pe gres ceramic cu email reactiv. Compatibilă cu mașina de spălat vase, microunde și cuptor.
                </p>
                <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <a
                    className="btn btn-primary"
                    href="#colectie/iris-bleu-nuit"
                    onClick={(e) => { e.preventDefault(); navigate("colectie/iris-bleu-nuit"); }}
                  >
                    Vezi colecția <span className="arrow">→</span>
                  </a>
                  <a
                    className="btn btn-ghost"
                    href="#oferta"
                    onClick={(e) => { e.preventDefault(); navigate("oferta"); }}
                  >
                    Cere oferta pentru această colecție
                  </a>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* PULL QUOTE */}
      <section className="section section-dark">
        <div className="container-narrow">
          <Reveal>
            <p className="pull-quote" style={{ color: "var(--paper)" }}>
              „Pentru o locație HoReCa, masa nu e despre piese izolate — e despre <span className="em">coerență de serviciu</span>. De aceea vorbim despre colecții, nu despre cataloage de 500 de produse.”
            </p>
            <span className="pull-quote-cite" style={{ color: "var(--silver-400)" }}>
              Owithu · principiul de lucru
            </span>
          </Reveal>
        </div>
      </section>

      {/* HOW WE WORK */}
      <section className="section">
        <div className="container-wide">
          <Reveal className="section-header">
            <div>
              <span className="eyebrow">Cum lucrăm</span>
            </div>
            <div>
              <h2>Patru pași până la masă.</h2>
            </div>
          </Reveal>

          <div className="feature-row">
            {[
              { num: "01 / Cerere", title: "Cerere de ofertă", body: "Ne spui cu ce locație lucrezi, ce volume estimezi și ce direcție vizuală vrei." },
              { num: "02 / Recomandare", title: "Selecție colecție", body: "Îți propunem 1–3 colecții potrivite și cantitatea calculată pe locuri / mese." },
              { num: "03 / Ofertă", title: "Ofertă personalizată", body: "Primesti propunerea cu specificații, finisaje și termen — fără preț listat public." },
            ].map((f, i) => (
              <Reveal key={i} className="feature" delay={i * 80}>
                <span className="num">{f.num}</span>
                <h4>{f.title}</h4>
                <p>{f.body}</p>
              </Reveal>
            ))}
          </div>

          <div style={{ marginTop: 56, paddingTop: 32, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <div className="body" style={{ maxWidth: 480 }}>
              Pentru proiecte de lansare sau renovare, putem propune și o variantă alternativă de colecție pentru rotație sezonieră.
            </div>
            <a
              className="btn-link"
              href="#despre"
              onClick={(e) => { e.preventDefault(); navigate("despre"); }}
            >
              Despre Owithu <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>

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

window.OwithuHome = { HomePage };