/* Home page — cinematic craft-led hero + sections */

function HomePage({ navigate, addToCart, toggleFav, favs, openProduct }) {
  return (
    <main>
      <HomeHero navigate={navigate} />
      <HomeHeritageStrip navigate={navigate} />
      <HomeCollections navigate={navigate} />
      <HomeFeatured navigate={navigate} addToCart={addToCart} toggleFav={toggleFav} favs={favs} openProduct={openProduct} />
      <HomeCraftIntro navigate={navigate} />
      <HomeBespoke navigate={navigate} />
      <HomeProjects navigate={navigate} />
      <HomeQuote />
      <HomeShowroom navigate={navigate} />
    </main>
  );
}

// ── Hero ──────────────────────────────────────────────────────────
function HomeHero({ navigate }) {
  return (
    <section className="hero">
      <div className="hero-bg" />
      <div className="hero-marquee">
        <div className="item"><span className="gld">●</span>&nbsp;&nbsp;Hand-knotted since 1881</div>
        <div className="item">·</div>
        <div className="item">Finest New Zealand wool</div>
        <div className="item">·</div>
        <div className="item">Bhadohi · Varanasi · Dubai</div>
        <div className="item">·</div>
        <div className="item"><span className="gld">●</span>&nbsp;&nbsp;Dubai Design District · Building 9</div>
        <div className="item">·</div>
        <div className="item">Bespoke commissions open</div>
      </div>

      <div className="hero-inner">
        <div>
          <div className="eyebrow" style={{ color: "rgba(250,244,234,0.7)", marginBottom: 28 }}>
            <span className="dot"></span>The House of Hands · Est. 1881
          </div>
          <h1 className="hero-title">
            Hand-knotted<br/><em>since</em> 1881.
          </h1>
          <p className="hero-sub">
            Heritage luxury carpets, woven from the finest New&nbsp;Zealand wool — for the world's most exceptional rooms. Bespoke commissions and a curated ready collection at our Dubai&nbsp;Design&nbsp;District atelier.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={() => navigate("bespoke")}>
              Design a bespoke carpet {Icon.arrow}
            </button>
            <button className="btn btn-ghost" onClick={() => navigate("collections")}>
              Explore collections
            </button>
          </div>
        </div>
        <div className="hero-meta">
          <div className="hero-meta-block">
            <div className="num">144<span style={{ fontSize: 24, color: "rgba(237,226,209,0.6)", marginLeft: 6 }}>yrs</span></div>
            <span className="lbl">A house of carpets since 1881</span>
          </div>
          <div className="hero-meta-block">
            <div className="num">4,900<span style={{ fontSize: 18, color: "rgba(237,226,209,0.6)", marginLeft: 8 }}>kn/in²</span></div>
            <span className="lbl">Reported craft achievement, 1999</span>
          </div>
          <div className="hero-meta-block">
            <div className="num">5<span style={{ fontSize: 24, color: "rgba(237,226,209,0.6)", marginLeft: 8 }}>cities</span></div>
            <span className="lbl">Dubai · Delhi · Mumbai · Hyderabad · Singapore</span>
          </div>
        </div>
      </div>

      <div className="hero-scroll">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

// ── Heritage strip ────────────────────────────────────────────────
function HomeHeritageStrip({ navigate }) {
  return (
    <section className="heritage-strip">
      <div className="heritage-strip-inner">
        <div className="since">
          <span style={{ fontSize: 22, letterSpacing: "0.18em", textTransform: "uppercase", fontFamily: "var(--mono)", color: "var(--muted)", fontStyle: "normal" }}>est.</span>
          <span className="yr italic">1881</span>
        </div>
        <p className="line">
          A house of carpets, discovered in the weavers' alleys of <em>Bhadohi&nbsp;·&nbsp;Varanasi</em>, woven from the finest New&nbsp;Zealand wool.
        </p>
        <div className="right">
          <a href="#" className="link-arrow" onClick={(e) => { e.preventDefault(); navigate("craft"); }}>
            The Craft & Heritage <span className="arr">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ── Collections showcase ──────────────────────────────────────────
function HomeCollections({ navigate }) {
  const items = [
    { ...COLLECTIONS_BY_STYLE[0], num: "01" },
    { ...COLLECTIONS_BY_STYLE[1], num: "02" },
    { ...COLLECTIONS_BY_STYLE[2], num: "03" },
    { ...COLLECTIONS_BY_STYLE[3], num: "04" },
    { ...COLLECTIONS_BY_MATERIAL[0], num: "05" },
    { ...COLLECTIONS_BY_MATERIAL[3], num: "06" },
  ];
  return (
    <section className="section surface-ivory">
      <div className="wrap-wide">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>The Collections · A curated selection</div>
            <h2>Six houses<br/>of <em>pattern</em> and weave.</h2>
          </div>
          <div className="right">
            <p className="lede" style={{ maxWidth: 380 }}>From classical Persian medallions to mineral-washed moderns — every piece hand-knotted in our Bhadohi ateliers.</p>
            <a href="#" className="link-arrow" style={{ marginTop: 24, display: "inline-flex" }} onClick={(e) => { e.preventDefault(); navigate("collections"); }}>
              View all collections <span className="arr">→</span>
            </a>
          </div>
        </div>

        <div className="coll-grid">
          <div className="coll-card wide" onClick={() => navigate("collection", { handle: items[0].handle })}>
            <img src={items[0].img} alt={items[0].name} />
            <div className="coll-card-num">{items[0].num}</div>
            <div className="coll-card-body">
              <div>
                <h3>{items[0].name}</h3>
                <div className="cnt">{items[0].count} pieces · The classical archive</div>
              </div>
              <div className="arrow">{Icon.arrow}</div>
            </div>
          </div>
          <div className="coll-card tall" onClick={() => navigate("collection", { handle: items[1].handle })}>
            <img src={items[1].img} alt={items[1].name} />
            <div className="coll-card-num">{items[1].num}</div>
            <div className="coll-card-body">
              <div><h3>{items[1].name}</h3><div className="cnt">{items[1].count} pieces</div></div>
              <div className="arrow">{Icon.arrow}</div>
            </div>
          </div>
          <div className="coll-card h-third" onClick={() => navigate("collection", { handle: items[2].handle })}>
            <img src={items[2].img} alt={items[2].name} />
            <div className="coll-card-num">{items[2].num}</div>
            <div className="coll-card-body">
              <div><h3>{items[2].name}</h3><div className="cnt">{items[2].count} pieces</div></div>
              <div className="arrow">{Icon.arrow}</div>
            </div>
          </div>
          <div className="coll-card h-third" onClick={() => navigate("collection", { handle: items[3].handle })}>
            <img src={items[3].img} alt={items[3].name} />
            <div className="coll-card-num">{items[3].num}</div>
            <div className="coll-card-body">
              <div><h3>{items[3].name}</h3><div className="cnt">{items[3].count} pieces</div></div>
              <div className="arrow">{Icon.arrow}</div>
            </div>
          </div>
          <div className="coll-card h-third" onClick={() => navigate("collection", { handle: items[4].handle })}>
            <img src={items[4].img} alt={items[4].name} />
            <div className="coll-card-num">{items[4].num}</div>
            <div className="coll-card-body">
              <div><h3>{items[4].name}</h3><div className="cnt">By material · {items[4].count} pieces</div></div>
              <div className="arrow">{Icon.arrow}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Featured pieces ───────────────────────────────────────────────
function HomeFeatured({ navigate, addToCart, toggleFav, favs, openProduct }) {
  const featured = [PRODUCTS[0], PRODUCTS[6], PRODUCTS[10], PRODUCTS[5]];
  return (
    <section className="section surface-bone">
      <div className="wrap-wide">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Atelier picks · Hand-knotted</div>
            <h2>Pieces from <em>the floor</em>.</h2>
          </div>
          <div className="right">
            <p className="lede" style={{ maxWidth: 360 }}>Four ready pieces from the d3 boutique — available now. Bespoke sizing on enquiry.</p>
          </div>
        </div>

        <div className="feat-row">
          {featured.map((p, i) => (
            <ProductCard
              key={p.handle} p={p}
              fav={favs.has(p.handle)} toggleFav={toggleFav}
              onOpen={openProduct}
              badge={i === 0 ? "Atelier signature" : p.type}
            />
          ))}
        </div>
        <div style={{ marginTop: 56, textAlign: "center" }}>
          <button className="btn btn-outline" onClick={() => navigate("collections")}>
            All 957 pieces · AED 1,223 – 160,093 {Icon.arrow}
          </button>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", marginTop: 16 }}>
            Live catalogue range · captured 2026-05-24
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Craft intro band ──────────────────────────────────────────────
function HomeCraftIntro({ navigate }) {
  return (
    <section className="section surface-ivory">
      <div className="wrap">
        <div className="craft-grid">
          <div className="craft-detail" />
          <div>
            <div className="eyebrow"><span className="dot"></span>The Craft</div>
            <h2 className="display-l" style={{ margin: "16px 0 24px" }}>One pair of hands.<br/><em>A million</em> knots.</h2>
            <p className="lede" style={{ marginBottom: 20 }}>
              Every Hands carpet begins with the same quiet act — a single weaver pulling wool through a vertical loom, knot by knot. A large piece can take a single weaver more than a year.
            </p>
            <p className="body-l" style={{ color: "var(--ink)", marginBottom: 28 }}>
              We source the finest New Zealand wool for its lustre and length of staple, dye in small lots in Bhadohi, and weave in three constructions — <strong>hand-knotted</strong>, <strong>hand-woven</strong> and <strong>hand-tufted</strong>. The Persian hand-knotted construction is our signature.
            </p>
            <a href="#" className="link-arrow" onClick={(e) => { e.preventDefault(); navigate("craft"); }}>
              Inside the atelier <span className="arr">→</span>
            </a>

            <div className="craft-stat-row">
              <div className="craft-stat">
                <div className="n"><em>4,900</em></div>
                <div className="lbl">Knots per in², 1999</div>
                <div className="src">A publicly reported craft achievement; attribute, do not call Guinness-certified.</div>
              </div>
              <div className="craft-stat">
                <div className="n"><em>12,000</em></div>
                <div className="lbl">m² Grand Mosque, Astana</div>
                <div className="src">One commission, woven across two years for the Astana / Nur-Sultan Grand Mosque.</div>
              </div>
              <div className="craft-stat">
                <div className="n"><em>3</em></div>
                <div className="lbl">Constructions</div>
                <div className="src">Hand-knotted · hand-woven · hand-tufted. All from finest New Zealand wool.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Bespoke band ──────────────────────────────────────────────────
function HomeBespoke({ navigate }) {
  return (
    <section className="bespoke-band">
      <div className="bg" />
      <div className="bespoke-band-inner">
        <div className="bespoke-grid">
          <div>
            <div className="eyebrow" style={{ color: "var(--gold-soft)" }}><span className="dot"></span>The Atelier · Bespoke service</div>
            <h2 className="display-l" style={{ margin: "16px 0 24px" }}>
              Turn your idea — or your room — into a carpet that <em style={{ color: "var(--gold-soft)" }}>exists nowhere else</em>.
            </h2>
            <p className="lede" style={{ color: "rgba(250,244,234,0.82)", marginBottom: 32, maxWidth: 540 }}>
              Our in-house design team works directly with interior designers, architects and homeowners — translating a sketch, a mood, or a single material into a one-of-a-kind hand-knotted carpet, woven to the dimensions of your room.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => navigate("bespoke")}>Begin a bespoke enquiry {Icon.arrow}</button>
              <a className="btn btn-outline-light" href="https://wa.me/971588250451" target="_blank" rel="noopener">WhatsApp the atelier</a>
            </div>
          </div>
          <div>
            <div style={{ borderTop: "1px solid rgba(176,144,63,0.4)", paddingTop: 28, marginBottom: 20 }}>
              <div className="eyebrow" style={{ color: "rgba(250,244,234,0.6)" }}>Four steps · 16–28 weeks <span className="dev-tag" style={{ background: "rgba(250,244,234,0.08)", color: "var(--gold-soft)" }}>lead-times · client-confirm</span></div>
            </div>
            <div className="process-grid">
              <div className="process-step">
                <div className="n">01</div>
                <h4>Consult</h4>
                <p>A conversation about the room, the brief and the materials. In person at d3, or by video.</p>
              </div>
              <div className="process-step">
                <div className="n">02</div>
                <h4>Design & sample</h4>
                <p>Our atelier draws the carpet at scale and weaves a hand-knotted sample for sign-off.</p>
              </div>
              <div className="process-step">
                <div className="n">03</div>
                <h4>Weave</h4>
                <p>The piece is hand-knotted in Bhadohi — months on the loom, knot by knot.</p>
              </div>
              <div className="process-step">
                <div className="n">04</div>
                <h4>Deliver</h4>
                <p>Finished, washed, packed and delivered to the room. White-glove install on request.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Projects teaser ───────────────────────────────────────────────
function HomeProjects({ navigate }) {
  return (
    <section className="section surface-ivory">
      <div className="wrap-wide">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Projects · Hospitality & residences</div>
            <h2>Trusted by the world's <em>landmark</em> interiors.</h2>
          </div>
          <div className="right">
            <p className="lede" style={{ maxWidth: 380 }}>Bespoke carpets for palaces, five-star hotels and private residences across five continents.</p>
            <a href="#" className="link-arrow" style={{ marginTop: 24, display: "inline-flex" }} onClick={(e) => { e.preventDefault(); navigate("projects"); }}>
              Trade & projects <span className="arr">→</span>
            </a>
          </div>
        </div>

        <div className="proj-grid">
          {PROJECTS.map((proj) => (
            <div key={proj.id} className="proj-card" onClick={() => navigate("projects")}>
              {proj.permission === "permission-pending" && (
                <div className="perm-badge">Client to confirm permission</div>
              )}
              {proj.img ? (
                <img src={proj.img} alt={proj.title} />
              ) : (
                <div className="ph">
                  <div className="ph-inner">Project imagery — client to supply</div>
                </div>
              )}
              <div className="proj-card-body">
                <div className="kind">{proj.kind}</div>
                <h3>{proj.title}</h3>
                <div className="scope">{proj.scope}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 80 }}>
        <div className="proj-marq">
          <div className="item italic">Hospitality</div>
          <div className="item dot">·</div>
          <div className="item dim">five-star hotels (Burj-area) <span className="dev-tag">name on permission</span></div>
          <div className="item dot">·</div>
          <div className="item italic">Residences</div>
          <div className="item dot">·</div>
          <div className="item dim">private homes · UAE · UK · India</div>
          <div className="item dot">·</div>
          <div className="item italic">Institutions</div>
          <div className="item dot">·</div>
          <div className="item dim">a Grand Mosque · 12,000+ m²</div>
        </div>
      </div>
    </section>
  );
}

// ── Quote ─────────────────────────────────────────────────────────
function HomeQuote() {
  return (
    <section className="section surface-bone" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="wrap" style={{ maxWidth: 980 }}>
        <div style={{ textAlign: "center" }}>
          <div style={{ fontFamily: "var(--serif)", fontSize: 64, color: "var(--gold)", lineHeight: 0.5, marginBottom: 24 }}>“</div>
          <p className="serif" style={{ fontSize: "clamp(28px, 3vw, 44px)", fontWeight: 400, lineHeight: 1.25, letterSpacing: "-0.005em", margin: 0 }}>
            A Hands carpet is the slowest piece of furniture you'll ever buy — and the one your room will be designed around for the next <em style={{ color: "var(--gold)", fontStyle: "italic" }}>hundred years</em>.
          </p>
          <div style={{ marginTop: 32, fontFamily: "var(--mono)", fontSize: 11.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)" }}>
            The Atelier · A house note <span className="dev-tag" style={{ marginLeft: 8 }}>house line · not a third-party review</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Showroom band ─────────────────────────────────────────────────
function HomeShowroom({ navigate }) {
  return (
    <section className="showroom-band section">
      <div className="wrap-wide">
        <div className="showroom-grid">
          <div className="showroom-img" />
          <div className="showroom-info">
            <div className="eyebrow"><span className="dot"></span>The Showroom · Dubai Design District</div>
            <h2 className="display-l" style={{ margin: "16px 0 20px" }}>Building 9, <em>d3</em>.</h2>
            <p className="lede" style={{ marginBottom: 16 }}>
              Our Dubai boutique opened at Dubai Design Week 2018 — a designer-led space pairing the ready collection with bespoke consultation rooms.
            </p>
            <div className="kv-list">
              <div className="kv-row">
                <div className="k">Address</div>
                <div className="v">#3, Ground Floor, Building 9<br/>Dubai Design District, Dubai, UAE</div>
              </div>
              <div className="kv-row">
                <div className="k">Hours</div>
                <div className="v">Mon — Fri · 10:00 – 19:00<br/>Saturday · 10:00 – 18:00 · Sunday closed
                  <span className="todo">Directory-listed · client to confirm</span>
                </div>
              </div>
              <div className="kv-row">
                <div className="k">Direct</div>
                <div className="v">
                  <a href="tel:+97145898510" style={{ borderBottom: "1px solid var(--line)" }}>+971 4 589 8510</a> · <a href="https://wa.me/971588250451" target="_blank" rel="noopener" style={{ borderBottom: "1px solid var(--line)" }}>WhatsApp</a>
                </div>
              </div>
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <button className="btn btn-dark" onClick={() => navigate("showroom")}>Plan a visit {Icon.arrow}</button>
              <button className="btn btn-outline" onClick={() => navigate("contact")}>Contact the atelier</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });
