/* Pages other than Home: Collections hub, Collection detail, Product,
   Bespoke, Projects, Craft, Showroom, Contact. */

const { useState: useStateO, useMemo, useEffect: useEffectO } = React;

// ── Collections hub ─────────────────────────────────────────────
function CollectionsPage({ navigate }) {
  const [tab, setTab] = useStateO("style");
  const tabs = [
    { key: "style", label: "By style" },
    { key: "material", label: "By material" },
    { key: "room", label: "By room" },
    { key: "signature", label: "Signature ranges" },
  ];
  const list =
    tab === "style"    ? COLLECTIONS_BY_STYLE :
    tab === "material" ? COLLECTIONS_BY_MATERIAL :
    tab === "room"     ? COLLECTIONS_BY_ROOM :
                         SIGNATURE_RANGES;

  return (
    <>
      <PageHead
        crumb={<><span className="gld">·</span> Hands &nbsp;/&nbsp; The Collections</>}
        title="The <em>Collections</em>."
        sub="957 ready pieces across style, material, room and signature ranges — every one of them hand-knotted in our Bhadohi ateliers."
        bg="media/collection-modern.webp"
      />
      <section className="surface-ivory">
        <div className="wrap">
          <div className="coll-tabs">
            {tabs.map(t => (
              <button key={t.key} className={"coll-tab " + (tab === t.key ? "active" : "")} onClick={() => setTab(t.key)}>
                {t.label}
              </button>
            ))}
            <div style={{ marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", color: "var(--muted)", alignSelf: "center" }}>
              {list.length} collections · 957 priced pieces
            </div>
          </div>

          {tab !== "signature" ? (
            <div className="coll-stack">
              {list.map(c => (
                <div key={c.handle} className="coll-tile" onClick={() => navigate("collection", { handle: c.handle })}>
                  {c.img && <img src={c.img} alt={c.name} loading="lazy" />}
                  {!c.img && <div className="ph" style={{ background: "var(--bone-2)", width: "100%", height: "100%", position: "absolute", inset: 0 }} />}
                  <div className="coll-tile-body">
                    <div className="kind">{tab === "material" ? "Material" : tab === "room" ? "Room" : "Style"}</div>
                    <h3>{c.name}</h3>
                    <div className="cnt">{c.count} pieces · View →</div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, borderTop: "1px solid var(--line)" }}>
              {[...SIGNATURE_RANGES, { handle: "nika", name: "Nika", count: 12 }, { handle: "overlap", name: "Overlap", count: 10 }, { handle: "lost-heritage", name: "Lost Heritage", count: 18 }, { handle: "lithology", name: "Lithology", count: 14 }, { handle: "french-savonneries", name: "French Savonneries", count: 8 }, { handle: "antique-turkish-kilims", name: "Antique Turkish Kilims", count: 22 }].map((r, i) => (
                <div key={r.handle} style={{ padding: "32px 28px", borderBottom: "1px solid var(--line)", borderRight: (i % 3 < 2) ? "1px solid var(--line)" : "none", cursor: "pointer", transition: "background .2s" }}
                     onMouseEnter={(e) => e.currentTarget.style.background = "var(--bone)"}
                     onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
                     onClick={() => navigate("collection", { handle: r.handle })}>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>Signature range</div>
                  <h3 className="display-m" style={{ margin: 0 }}>{r.name}</h3>
                  <div style={{ marginTop: 12, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--muted)", textTransform: "uppercase" }}>{r.count} pieces · {r.handle}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      <section className="section-l surface-bone">
        <div className="wrap" style={{ textAlign: "center" }}>
          <div className="eyebrow"><span className="dot"></span>Don't see it?</div>
          <h2 className="display-l" style={{ margin: "16px 0 20px" }}>Then we'll <em>weave</em> it.</h2>
          <p className="lede" style={{ maxWidth: 600, margin: "0 auto 32px" }}>Any size, palette, pattern or material. Our bespoke service has been turning rooms into one-of-a-kind carpets since 1881.</p>
          <button className="btn btn-dark" onClick={() => navigate("bespoke")}>Begin a bespoke enquiry {Icon.arrow}</button>
        </div>
      </section>
    </>
  );
}

// ── Collection detail (filterable product grid) ─────────────────
function CollectionDetailPage({ navigate, params, openProduct, favs, toggleFav }) {
  const [colorFilter, setColorFilter] = useStateO("all");
  const [sizeFilter, setSizeFilter] = useStateO("all");
  const [constrFilter, setConstrFilter] = useStateO("all");
  const [sort, setSort] = useStateO("featured");

  const all = COLLECTIONS_BY_STYLE.concat(COLLECTIONS_BY_MATERIAL, COLLECTIONS_BY_ROOM, SIGNATURE_RANGES);
  const found = all.find(c => c.handle === params.handle) || { handle: params.handle, name: params.handle, count: 0, img: "media/collection-traditional.webp" };

  // Synthesize a list — duplicate the 14 catalogue pieces with stable seeded order.
  const products = useMemo(() => {
    const pool = PRODUCTS.filter(p => p.collection === params.handle);
    const base = pool.length > 0 ? pool : PRODUCTS;
    // Generate "more" by cycling
    let list = [];
    for (let i = 0; i < 12; i++) list.push(base[i % base.length]);
    return list;
  }, [params.handle]);

  const colorOptions = ["all", "Ivory", "Madder", "Indigo", "Sage", "Charcoal", "Camel"];
  const sizeOptions = ["all", "Small (≤6×9)", "Medium (8×10)", "Large (9×12)", "Oversized (12×18+)", "Bespoke"];
  const constrOptions = ["all", "Hand Knotted", "Hand Woven", "Hand Tufted"];

  return (
    <>
      <PageHead
        crumb={<><span className="gld">·</span> Hands &nbsp;/&nbsp; Collections &nbsp;/&nbsp; <span style={{ color: "var(--gold-soft)" }}>{found.name}</span></>}
        title={`The <em>${found.name}</em><br/>collection.`}
        sub={`${found.count || products.length}+ pieces — every one hand-knotted from finest New Zealand wool in our Bhadohi ateliers.`}
        bg={found.img || "media/collection-persian.webp"}
      />

      <section className="surface-ivory">
        <div className="wrap">
          <div className="filters">
            <div>
              <div style={{ marginBottom: 18 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 10 }}>Construction</div>
                <div className="filter-chips">
                  {constrOptions.map(o => (
                    <button key={o} className={"chip " + (constrFilter === o ? "active" : "")} onClick={() => setConstrFilter(o)}>{o === "all" ? "All" : o}</button>
                  ))}
                </div>
              </div>
              <div style={{ marginBottom: 18 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 10 }}>Colour family</div>
                <div className="filter-chips">
                  {colorOptions.map(o => (
                    <button key={o} className={"chip " + (colorFilter === o ? "active" : "")} onClick={() => setColorFilter(o)}>{o === "all" ? "All" : o}</button>
                  ))}
                </div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 10 }}>Size</div>
                <div className="filter-chips">
                  {sizeOptions.map(o => (
                    <button key={o} className={"chip " + (sizeFilter === o ? "active" : "")} onClick={() => setSizeFilter(o)}>{o === "all" ? "All sizes" : o}</button>
                  ))}
                </div>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 12 }}>
              <div className="filter-meta">{products.length} pieces · AED 7,068 – 70,115</div>
              <select value={sort} onChange={(e) => setSort(e.target.value)} style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", padding: "10px 14px", border: "1px solid var(--line)", background: "white" }}>
                <option value="featured">Sort · Featured</option>
                <option value="lo">Sort · Price low → high</option>
                <option value="hi">Sort · Price high → low</option>
                <option value="new">Sort · Newest</option>
              </select>
            </div>
          </div>

          <div className="section">
            <div className="feat-row">
              {products.map((p, i) => (
                <ProductCard
                  key={p.handle + "-" + i} p={p}
                  fav={favs.has(p.handle)} toggleFav={toggleFav}
                  onOpen={openProduct}
                />
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ── Product detail ──────────────────────────────────────────────
function ProductPage({ navigate, params, addToCart, favs, toggleFav, openProduct }) {
  const p = PRODUCTS.find(x => x.handle === params.handle) || PRODUCTS[0];
  const [thumb, setThumb] = useStateO(0);
  const [size, setSize] = useStateO("8×10 ft");
  const sizes = ["6×9 ft", "8×10 ft", "9×12 ft", "10×14 ft", "Bespoke"];

  const galleryImgs = [p.img, "media/showroom-d3-menu.webp", p.img, p.img];

  const related = PRODUCTS.filter(x => x.handle !== p.handle).slice(0, 4);
  const isFav = favs.has(p.handle);

  return (
    <main className="prod-page surface-ivory">
      <div className="wrap">
        <div className="prod-detail-grid">
          <div>
            <div className="prod-main-img" style={{ backgroundImage: `url(${galleryImgs[thumb]})` }} />
            <div className="prod-thumbs">
              {galleryImgs.map((g, i) => (
                <div key={i} className={"prod-thumb " + (thumb === i ? "active" : "")}
                     style={{ backgroundImage: `url(${g})` }}
                     onClick={() => setThumb(i)} />
              ))}
            </div>
            <div style={{ marginTop: 14, fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)" }}>
              Top-down studio shot · in-situ imagery <span className="dev-tag">client to supply</span>
            </div>
          </div>

          <div className="prod-info">
            <div className="crumb">
              <a href="#" onClick={(e) => { e.preventDefault(); navigate("collections"); }}>Collections</a> /{" "}
              <a href="#" onClick={(e) => { e.preventDefault(); navigate("collection", { handle: p.collection }); }}>{p.collection}</a> / {p.title}
            </div>
            <h1>{p.title}</h1>
            <div className="sub">{p.type} · Finest New Zealand wool</div>

            <div className="price-row">
              <div className="price">{fmtAED(p.price)}<em>incl. VAT</em></div>
              <button onClick={() => toggleFav(p.handle)} style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: isFav ? "var(--madder)" : "var(--muted)" }}>
                {isFav ? Icon.heartF : Icon.heart} {isFav ? "Saved" : "Save"}
              </button>
            </div>

            <p className="body-l" style={{ marginBottom: 20 }}>
              A {p.type.toLowerCase()} piece in a <em style={{ color: "var(--gold)" }}>{p.palette.toLowerCase()}</em> palette. Hand-knotted in Bhadohi from the finest New Zealand wool — each carpet is the work of one weaver, knot by knot, over many months on a vertical loom.
            </p>

            <div className="prod-spec-list">
              <div className="row"><div className="k">Construction</div><div className="v">{p.type}</div></div>
              <div className="row"><div className="k">Material</div><div className="v">Finest New Zealand wool · 100%</div></div>
              <div className="row"><div className="k">Knot density</div><div className="v">Persian hand-knotted · 100–160 knots/in² <span className="todo">exact per SKU</span></div></div>
              <div className="row"><div className="k">Palette</div><div className="v">{p.palette}</div></div>
              <div className="row"><div className="k">Origin</div><div className="v">Bhadohi · Varanasi · India</div></div>
              <div className="row"><div className="k">Lead time</div><div className="v">Ready piece · in d3 stock <span className="todo">verify per SKU</span></div></div>
            </div>

            <div style={{ marginTop: 18, marginBottom: 16 }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 10 }}>Size</div>
              <div className="radio-row">
                {sizes.map(s => (
                  <button key={s} className={"radio-pill " + (size === s ? "active" : "")} onClick={() => setSize(s)}>
                    {s}
                  </button>
                ))}
              </div>
              <div style={{ marginTop: 10, fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.12em", color: "var(--muted)" }}>
                <span className="todo">Exact dimensions per SKU — client to confirm</span>
              </div>
            </div>

            <div className="prod-cta-row">
              <button className="btn btn-dark" onClick={() => addToCart(p)}>Add to bag · {fmtAED(p.price)} {Icon.arrow}</button>
              <button className="btn btn-outline" onClick={() => navigate("contact")}>Enquire about this piece</button>
            </div>
            <div style={{ marginTop: 14, fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.14em", color: "var(--muted)", textTransform: "uppercase" }}>
              Or <a href="https://wa.me/971588250451" target="_blank" rel="noopener" style={{ borderBottom: "1px solid var(--gold)", color: "var(--ink)" }}>WhatsApp the showroom</a> · checkout via Shopify
            </div>

            <div className="note-panel" style={{ marginTop: 36 }}>
              <div className="cap">A note from the atelier</div>
              Every Hands carpet is unique. Subtle variations in dye-lot, knot rhythm and wash patina are the signature of true hand-knotting — and the reason no two pieces of this title are ever <em>quite</em> the same.
            </div>
          </div>
        </div>

        <div style={{ padding: "64px 0 96px", borderTop: "1px solid var(--line)" }}>
          <div className="section-head" style={{ marginBottom: 40 }}>
            <div>
              <div className="eyebrow"><span className="dot"></span>More from the collection</div>
              <h2 className="display-m" style={{ margin: "12px 0 0" }}>Other pieces in <em>{p.collection}</em>.</h2>
            </div>
          </div>
          <div className="feat-row">
            {related.map(rp => (
              <ProductCard key={rp.handle} p={rp} fav={favs.has(rp.handle)} toggleFav={toggleFav} onOpen={openProduct} />
            ))}
          </div>
        </div>
      </div>
    </main>
  );
}

// ── Bespoke page ────────────────────────────────────────────────
function BespokePage({ navigate }) {
  const [interest, setInterest] = useStateO("bespoke");
  const [sent, setSent] = useStateO(false);

  return (
    <>
      <PageHead
        crumb={<><span className="gld">·</span> Hands &nbsp;/&nbsp; The Atelier &nbsp;/&nbsp; Bespoke</>}
        title="A carpet that exists <em>nowhere else</em>."
        sub="The Hands atelier has been weaving bespoke carpets since 1881 — for palaces, hotels and the world's most exceptional rooms. Now, also for yours."
        bg="media/custom-made-thumb.webp"
      />

      <section className="section surface-ivory">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="hide-cols">
            <div>
              <div className="eyebrow"><span className="dot"></span>The bespoke service · Since 1881</div>
              <h2 className="display-l" style={{ margin: "16px 0 24px" }}>From sketch, mood<br/>or room — to <em>loom</em>.</h2>
              <p className="lede" style={{ marginBottom: 20 }}>
                Bring us a brief, a pinboard, a swatch — or simply the dimensions of your floor. Our in-house design team will draw the carpet at scale, weave a hand-knotted sample for your sign-off, and put a single weaver on a vertical loom in Bhadohi for the months it will take to make.
              </p>
              <p className="body-l">
                Bespoke is a consultation — not a checkout. Pricing is project-quoted on materials, dimensions, knot density and complexity. We work directly with designers, architects and homeowners.
              </p>
            </div>
            <div style={{ position: "relative", aspectRatio: "4/5", backgroundImage: "url(media/custom-made-thumb.webp)", backgroundSize: "cover", backgroundPosition: "center" }}>
              <div style={{ position: "absolute", bottom: 20, left: 20, right: 20, background: "rgba(20,16,11,0.85)", color: "var(--ivory)", padding: 18 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gold-soft)", marginBottom: 8 }}>The room above</div>
                <div className="serif" style={{ fontSize: 22 }}>An unbuilt palette, drawn for a south-facing drawing room in Emirates Hills.</div>
              </div>
            </div>
          </div>

          <div className="steps-vert">
            <div className="step-card"><div className="n">01</div><h4>Consult</h4><p>A conversation about the room, the brief, the budget and the materials. In person at d3, or by video.</p></div>
            <div className="step-card"><div className="n">02</div><h4>Design & sample</h4><p>Our atelier draws the carpet at scale and weaves a small hand-knotted sample — to your colour, density and feel — for sign-off.</p></div>
            <div className="step-card"><div className="n">03</div><h4>Weave</h4><p>A single weaver is set to a vertical loom in Bhadohi. Knot by knot, often for months — sometimes more than a year.</p></div>
            <div className="step-card"><div className="n">04</div><h4>Deliver</h4><p>Finished, washed and finished by hand. Packed, shipped and delivered to the room. White-glove install on request.</p></div>
          </div>
        </div>
      </section>

      <section className="section-l surface-noir">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "start" }} className="hide-cols">
            <div>
              <div className="eyebrow" style={{ color: "var(--gold-soft)" }}><span className="dot"></span>Begin a bespoke enquiry</div>
              <h2 className="display-l" style={{ color: "var(--ivory)", margin: "16px 0 24px" }}>Tell us about <em style={{ color: "var(--gold-soft)" }}>the room</em>.</h2>
              <p className="lede" style={{ color: "rgba(250,244,234,0.78)", marginBottom: 32, maxWidth: 460 }}>
                We typically reply within one working day. Designers and trade — please tick the trade option and we'll loop in our trade team.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 14, color: "rgba(250,244,234,0.85)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{Icon.phone} <a href="tel:+97145898510" style={{ borderBottom: "1px solid rgba(250,244,234,0.3)" }}>+971 4 589 8510</a></div>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{Icon.whats} <a href="https://wa.me/971588250451" target="_blank" rel="noopener" style={{ borderBottom: "1px solid rgba(250,244,234,0.3)" }}>WhatsApp · +971 58 825 0451</a></div>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{Icon.mail} <a href="mailto:info@handscarpets.ae" style={{ borderBottom: "1px solid rgba(250,244,234,0.3)" }}>info@handscarpets.ae</a></div>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{Icon.pin} #3, Ground Floor, Building 9 · d3, Dubai</div>
              </div>
            </div>
            <EnquiryForm interest={interest} setInterest={setInterest} sent={sent} setSent={setSent} dark />
          </div>
        </div>
      </section>
    </>
  );
}

// ── Projects page ───────────────────────────────────────────────
function ProjectsPage({ navigate }) {
  return (
    <>
      <PageHead
        crumb={<><span className="gld">·</span> Hands &nbsp;/&nbsp; Projects & Trade</>}
        title="The world's <em>landmark</em><br/>interiors."
        sub="Bespoke carpets for palaces, five-star hotels and private residences. Marquee project names are shown only with the client's written permission — anonymised case studies below."
        bg="media/product-12-dl-1570-grey.webp"
      />

      <section className="section surface-ivory">
        <div className="wrap-wide">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Case studies · A selection</div>
              <h2>Carpets for <em>rooms</em><br/>that don't repeat.</h2>
            </div>
            <div className="right">
              <p className="lede" style={{ maxWidth: 380 }}>Hospitality, palaces, private residences, institutions. A Hands carpet is the slowest specifying decision in any project — and usually the most defining one.</p>
            </div>
          </div>

          <div className="proj-grid">
            {PROJECTS.map((proj) => (
              <div key={proj.id} className="proj-card">
                {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 style={{ marginTop: 64, padding: "32px 40px", border: "1px solid var(--line)", background: "var(--bone)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }} className="hide-cols">
            <div>
              <div className="eyebrow"><span className="dot"></span>For interior designers & architects</div>
              <h3 className="display-m" style={{ margin: "12px 0 12px" }}>The trade programme.</h3>
              <p className="body-l" style={{ marginBottom: 0 }}>Trade pricing, sample libraries, project consultation and dedicated account management for studios and architectural practices.</p>
            </div>
            <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap" }}>
              <button className="btn btn-dark" onClick={() => navigate("contact")}>Request trade catalogue {Icon.arrow}</button>
              <button className="btn btn-outline" onClick={() => navigate("bespoke")}>Open a project</button>
            </div>
          </div>
        </div>
      </section>

      <section className="section surface-bone">
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Publicly reported · attribute</div>
          <h2 className="display-l" style={{ margin: "16px 0 32px" }}>Marquee installations.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }} className="hide-cols">
            {[
              { name: "Armani Hotel · Burj Khalifa", loc: "Dubai", note: "Featured in public partner profiles · permission to display — pending" },
              { name: "Nathan Outlaw at Al Mahara", loc: "Burj Al Arab · Dubai", note: "Featured in public partner profiles · permission to display — pending" },
              { name: "MGM Grand", loc: "Macau", note: "Featured in public partner profiles · permission to display — pending" },
            ].map(m => (
              <div key={m.name} style={{ padding: "28px 28px 28px 0", borderTop: "1px solid var(--line)" }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Hospitality</div>
                <h3 className="display-s" style={{ margin: "0 0 6px" }}>{m.name}</h3>
                <div className="caption" style={{ fontStyle: "italic" }}>{m.loc}</div>
                <div style={{ marginTop: 20 }}>
                  <span className="dev-tag">{m.note}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// ── Craft page ──────────────────────────────────────────────────
function CraftPage({ navigate }) {
  return (
    <>
      <PageHead
        crumb={<><span className="gld">·</span> Hands &nbsp;/&nbsp; The Craft & Heritage</>}
        title="A house of carpets <em>since 1881</em>."
        sub="The Hands story begins not on a sales floor, but in the weavers' alleys of Bhadohi (Varanasi) — and continues today on the same vertical looms, with the same finest New Zealand wool."
        bg="media/product-01-dl-1569-assorted.webp"
      />

      <section className="section surface-ivory">
        <div className="wrap">
          <div className="craft-grid">
            <div className="craft-detail" style={{ backgroundImage: "url(media/product-01-dl-1569-assorted.webp)" }} />
            <div>
              <div className="eyebrow"><span className="dot"></span>The discovery</div>
              <h2 className="display-l" style={{ margin: "16px 0 20px" }}>Bhadohi, <em>1881</em>.</h2>
              <p className="lede" style={{ marginBottom: 20 }}>
                In 1881, the carpet-weaving community of Bhadohi (Varanasi) is discovered by <strong>A. Tellery</strong> — pioneering masterfully hand-knotted carpets that would eventually leave Indian looms for palaces, hotels and residences across five continents.
              </p>
              <p className="body-l">
                A century and forty-four years later, the looms are still vertical, the wool is still drawn from the finest New Zealand flocks, and the carpets are still tied — one knot at a time — by hand.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section surface-noir">
        <div className="wrap">
          <div className="eyebrow" style={{ color: "var(--gold-soft)" }}><span className="dot"></span>The Timeline · 144 years</div>
          <h2 className="display-l" style={{ color: "var(--ivory)", margin: "16px 0 0" }}>From the alleys of <em style={{ color: "var(--gold-soft)" }}>Bhadohi</em><br/>to the world's most exceptional rooms.</h2>
          <div className="timeline" style={{ marginTop: 60 }}>
            {TIMELINE.map((t) => (
              <div key={t.year} className="timeline-item" style={{ color: "var(--ivory)" }}>
                <div className="yr">{t.year}</div>
                <h4 style={{ color: "var(--ivory)" }}>{t.title}</h4>
                <p style={{ color: "rgba(250,244,234,0.78)" }}>{t.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section surface-bone">
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>The wool · The dye · The knot</div>
          <h2 className="display-l" style={{ margin: "16px 0 48px" }}>Three steps, <em>one</em> carpet.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32 }} className="hide-cols">
            {[
              { n: "01", t: "Finest New Zealand wool", p: "Long-staple, lustrous fleece from New Zealand flocks — the standard for fine hand-knotting. Spun in small lots; held to lustre and tensile-strength benchmarks." },
              { n: "02", t: "Bhadohi small-lot dyeing", p: "Yarn is dyed in small lots in Bhadohi — palettes drawn from archive Persian dye-recipes alongside our designers' contemporary colour studies." },
              { n: "03", t: "Hand-knotting on vertical looms", p: "One weaver, one loom, one carpet. Each knot is hand-tied, the pile clipped, and the finished piece washed and finished by hand. A large piece can take a year." },
            ].map(s => (
              <div key={s.n} style={{ padding: "32px 0", borderTop: "1px solid var(--line)" }}>
                <div className="serif italic" style={{ fontSize: 38, color: "var(--gold)" }}>{s.n}</div>
                <h3 className="display-s" style={{ margin: "16px 0 12px" }}>{s.t}</h3>
                <p className="body-l" style={{ margin: 0 }}>{s.p}</p>
              </div>
            ))}
          </div>

          <div className="craft-stat-row" style={{ marginTop: 64, borderTop: "1px solid var(--line)" }}>
            <div className="craft-stat">
              <div className="n"><em>4,900</em></div>
              <div className="lbl">Knots per square inch · 1999</div>
              <div className="src">Publicly reported craft achievement. Attribute openly; not presented as a Guinness-certified record without documented proof.</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">A single handmade carpet commissioned for the Astana / Nur-Sultan Grand Mosque — among the largest the atelier has woven.</div>
            </div>
            <div className="craft-stat">
              <div className="n"><em>144</em></div>
              <div className="lbl">Years on the loom</div>
              <div className="src">Continuous operation since 1881 (independently corroborated by the d3 listing).</div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ── Showroom page ───────────────────────────────────────────────
function ShowroomPage({ navigate }) {
  const stores = [
    { city: "Dubai · d3", addr: "#3 Building 9, Dubai Design District, Dubai, UAE", flag: "primary" },
    { city: "New Delhi",  addr: "Exclusive boutique · India" },
    { city: "Mumbai",     addr: "Exclusive boutique · India" },
    { city: "Hyderabad",  addr: "Exclusive boutique · India" },
    { city: "Singapore",  addr: "Exclusive boutique · Singapore" },
  ];

  return (
    <>
      <PageHead
        crumb={<><span className="gld">·</span> Hands &nbsp;/&nbsp; The Showroom</>}
        title="The Dubai <em>atelier</em>."
        sub="Our designer-led boutique opened at Dubai Design Week 2018 in Building 9, d3 — a place to walk the floor, draft a bespoke carpet over a coffee, or simply see what 4,900 knots per square inch looks like under the light."
        bg="media/showroom-d3-menu.webp"
      />

      <section className="section surface-ivory">
        <div className="wrap-wide">
          <div className="showroom-grid">
            <div className="showroom-img" style={{ aspectRatio: "16/12" }} />
            <div className="showroom-info">
              <div className="eyebrow"><span className="dot"></span>The d3 boutique · Open by appointment & walk-in</div>
              <h2 className="display-l" style={{ margin: "16px 0 20px" }}>Building 9.</h2>
              <p className="lede" style={{ marginBottom: 8 }}>
                #3, Ground Floor, Building 9, Dubai Design District, Dubai.
              </p>
              <div className="kv-list">
                <div className="kv-row">
                  <div className="k">Hours</div>
                  <div className="v">Mon — Fri · 10:00 – 19:00<br/>Saturday · 10:00 – 18:00<br/>Sunday · closed
                    <div style={{ marginTop: 8 }}><span className="todo">Directory-listed — client to confirm before publishing as schema</span></div>
                  </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></div>
                </div>
                <div className="kv-row">
                  <div className="k">Mobile</div>
                  <div className="v"><a href="tel:+971588250574" style={{ borderBottom: "1px solid var(--line)" }}>+971 58 825 0574</a></div>
                </div>
                <div className="kv-row">
                  <div className="k">WhatsApp</div>
                  <div className="v"><a href="https://wa.me/971588250451" target="_blank" rel="noopener" style={{ borderBottom: "1px solid var(--line)" }}>+971 58 825 0451</a> <span className="todo">official site · 2GIS lists 0464 — confirm</span></div>
                </div>
                <div className="kv-row">
                  <div className="k">Email</div>
                  <div className="v"><a href="mailto:info@handscarpets.ae" style={{ borderBottom: "1px solid var(--line)" }}>info@handscarpets.ae</a></div>
                </div>
                <div className="kv-row">
                  <div className="k">PO Box</div>
                  <div className="v">333015</div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                <button className="btn btn-dark" onClick={() => navigate("contact")}>Plan a visit {Icon.arrow}</button>
                <a className="btn btn-outline" href="https://wa.me/971588250451" target="_blank" rel="noopener">WhatsApp the showroom</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section surface-bone">
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Find us · Dubai Design District</div>
          <h2 className="display-l" style={{ margin: "16px 0 32px" }}>The map.</h2>
          <div style={{ position: "relative", aspectRatio: "16/8", background: "var(--noir-2)", overflow: "hidden", border: "1px solid var(--line)" }}>
            <iframe
              title="Hands Carpets — d3 Building 9"
              src="https://www.openstreetmap.org/export/embed.html?bbox=55.2989%2C25.1838%2C55.3119%2C25.1908&layer=mapnik&marker=25.1873%2C55.3054"
              style={{ width: "100%", height: "100%", border: 0, filter: "grayscale(0.4) contrast(1.05)" }}
              loading="lazy"
            />
            <div style={{ position: "absolute", left: 24, bottom: 24, background: "var(--ivory)", padding: "16px 20px", border: "1px solid var(--line)", maxWidth: 360 }}>
              <div className="eyebrow">Dubai Design District</div>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.2, marginTop: 6 }}>#3 Building 9</div>
              <div style={{ marginTop: 4, fontSize: 13.5 }}>Za'abeel 2, Za'abeel, Dubai, UAE</div>
              <div style={{ marginTop: 10, fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.14em", color: "var(--muted)" }}>
                <span className="dev-tag">Precise pin — client to confirm</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section surface-ivory">
        <div className="wrap">
          <div className="eyebrow"><span className="dot"></span>Five exclusive boutiques worldwide</div>
          <h2 className="display-l" style={{ margin: "16px 0 32px" }}>Around the <em>world</em>.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr", gap: 0, borderTop: "1px solid var(--line)" }} className="hide-cols-mid">
            {stores.map((s, i) => (
              <div key={s.city} style={{ padding: "32px 24px", borderBottom: "1px solid var(--line)", borderRight: i < stores.length - 1 ? "1px solid var(--line)" : "none", position: "relative" }}>
                {s.flag === "primary" && (
                  <div style={{ position: "absolute", top: 12, right: 12, fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gold)", background: "rgba(176,144,63,0.12)", padding: "3px 8px" }}>Primary</div>
                )}
                <div className="eyebrow">Exclusive boutique</div>
                <h3 className="display-s" style={{ margin: "10px 0 8px" }}>{s.city}</h3>
                <div className="caption" style={{ maxWidth: 220 }}>{s.addr}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// ── Contact page ────────────────────────────────────────────────
function ContactPage({ navigate }) {
  const [interest, setInterest] = useStateO("shop");
  const [sent, setSent] = useStateO(false);

  return (
    <>
      <PageHead
        crumb={<><span className="gld">·</span> Hands &nbsp;/&nbsp; Contact</>}
        title="Talk to the <em>atelier</em>."
        sub="A direct line into the d3 boutique. We typically reply within one working day."
        bg="media/product-10-mirae-antique-red.webp"
      />

      <section className="section surface-ivory">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80 }} className="hide-cols">
            <div>
              <div className="eyebrow"><span className="dot"></span>Direct lines</div>
              <h2 className="display-m" style={{ margin: "16px 0 28px" }}>The atelier, <em>directly</em>.</h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
                <ContactRow icon={Icon.phone} label="Landline · Dubai showroom"     value={<a href="tel:+97145898510" style={{ borderBottom: "1px solid var(--line)" }}>+971 4 589 8510</a>} />
                <ContactRow icon={Icon.phone} label="Mobile"                        value={<a href="tel:+971588250574" style={{ borderBottom: "1px solid var(--line)" }}>+971 58 825 0574</a>} />
                <ContactRow icon={Icon.whats} label="WhatsApp (official site)"      value={<><a href="https://wa.me/971588250451" target="_blank" rel="noopener" style={{ borderBottom: "1px solid var(--line)" }}>+971 58 825 0451</a> <span className="todo">2GIS lists 0464 — confirm</span></>} />
                <ContactRow icon={Icon.mail}  label="General enquiries"             value={<a href="mailto:info@handscarpets.ae" style={{ borderBottom: "1px solid var(--line)" }}>info@handscarpets.ae</a>} />
                <ContactRow icon={Icon.mail}  label="Collaborations"                value={<a href="mailto:marketing@hands-carpets.com" style={{ borderBottom: "1px solid var(--line)" }}>marketing@hands-carpets.com</a>} />
                <ContactRow icon={Icon.pin}   label="Dubai showroom"                value={<>#3, Ground Floor, Building 9<br/>Dubai Design District<br/>Dubai, UAE · PO Box 333015</>} />
              </div>
              <div style={{ marginTop: 36 }}>
                <div className="eyebrow" style={{ marginBottom: 14 }}>Hours · Dubai</div>
                <div className="body-l">Mon — Fri · 10:00 – 19:00 · Sat · 10:00 – 18:00 · Sun closed</div>
                <div style={{ marginTop: 8 }}><span className="todo">Directory-listed — client to confirm</span></div>
              </div>
            </div>
            <EnquiryForm interest={interest} setInterest={setInterest} sent={sent} setSent={setSent} />
          </div>
        </div>
      </section>
    </>
  );
}

function ContactRow({ icon, label, value }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "28px 1fr", gap: 16, alignItems: "start", paddingBottom: 20, borderBottom: "1px solid var(--line)" }}>
      <div style={{ color: "var(--gold)", paddingTop: 4 }}>{icon}</div>
      <div>
        <div className="eyebrow" style={{ marginBottom: 6 }}>{label}</div>
        <div className="body-l">{value}</div>
      </div>
    </div>
  );
}

// ── Enquiry form ────────────────────────────────────────────────
function EnquiryForm({ interest, setInterest, sent, setSent, dark }) {
  const interests = [
    { key: "shop",    label: "Buy a piece" },
    { key: "bespoke", label: "Bespoke" },
    { key: "trade",   label: "Trade / project" },
    { key: "visit",   label: "Showroom visit" },
  ];
  const fieldDark = dark ? { background: "rgba(250,244,234,0.04)", color: "var(--ivory)", borderColor: "rgba(250,244,234,0.18)" } : {};
  return (
    <div className={"form-card"} style={dark ? { background: "rgba(250,244,234,0.04)", borderColor: "rgba(250,244,234,0.15)", color: "var(--ivory)" } : {}}>
      {sent ? (
        <div style={{ padding: "32px 16px", textAlign: "center" }}>
          <div style={{ fontFamily: "var(--serif)", fontSize: 56, color: "var(--gold)", lineHeight: 1, marginBottom: 16 }}>✓</div>
          <h3 className="display-m" style={{ margin: "0 0 12px" }}>Thank you — your enquiry is with the atelier.</h3>
          <p className="body-l" style={{ maxWidth: 380, margin: "0 auto", color: dark ? "rgba(250,244,234,0.78)" : "var(--ink)" }}>
            We'll reply within one working day. For urgent matters, WhatsApp the showroom directly on <a href="https://wa.me/971588250451" target="_blank" rel="noopener" style={{ borderBottom: "1px solid currentColor" }}>+971 58 825 0451</a>.
          </p>
          <button className={"btn " + (dark ? "btn-outline-light" : "btn-outline")} style={{ marginTop: 28 }} onClick={() => setSent(false)}>Send another</button>
        </div>
      ) : (
        <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          <div style={{ marginBottom: 28 }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: dark ? "var(--gold-soft)" : "var(--muted)", marginBottom: 10 }}>I'm interested in</div>
            <div className="radio-row">
              {interests.map(i => (
                <button type="button" key={i.key} className={"radio-pill " + (interest === i.key ? "active" : "")} onClick={() => setInterest(i.key)} style={dark ? { background: "transparent", color: "var(--ivory)", borderColor: "rgba(250,244,234,0.25)" } : {}}>
                  {i.label}
                </button>
              ))}
            </div>
          </div>
          <div className="form-row">
            <div className="field">
              <label style={dark ? { color: "var(--gold-soft)" } : {}}>Name</label>
              <input type="text" required placeholder="Your full name" style={fieldDark} />
            </div>
            <div className="field">
              <label style={dark ? { color: "var(--gold-soft)" } : {}}>Email</label>
              <input type="email" required placeholder="you@studio.com" style={fieldDark} />
            </div>
          </div>
          <div className="form-row">
            <div className="field">
              <label style={dark ? { color: "var(--gold-soft)" } : {}}>Phone</label>
              <input type="tel" placeholder="+971 …" style={fieldDark} />
            </div>
            <div className="field">
              <label style={dark ? { color: "var(--gold-soft)" } : {}}>Studio / company (optional)</label>
              <input type="text" placeholder="e.g. Yabu Pushelberg" style={fieldDark} />
            </div>
          </div>
          <div className="field">
            <label style={dark ? { color: "var(--gold-soft)" } : {}}>Tell us about the room or the brief</label>
            <textarea rows="4" placeholder="A few lines about the room, the piece, the dimensions, the mood, the timeline…" style={fieldDark} />
          </div>
          <button type="submit" className={"btn " + (dark ? "btn-primary" : "btn-dark")} style={{ width: "100%", justifyContent: "center", marginTop: 8 }}>
            Send to the atelier {Icon.arrow}
          </button>
          <div style={{ marginTop: 14, fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: dark ? "rgba(250,244,234,0.55)" : "var(--muted)", textAlign: "center" }}>
            Or <a href="https://wa.me/971588250451" target="_blank" rel="noopener" style={{ borderBottom: "1px solid currentColor" }}>WhatsApp the atelier</a> · we typically reply within one working day
          </div>
        </form>
      )}
    </div>
  );
}

Object.assign(window, {
  CollectionsPage, CollectionDetailPage, ProductPage, BespokePage, ProjectsPage,
  CraftPage, ShowroomPage, ContactPage,
});