// Page-level views for Marushika

// ============================================================
// HOME
// ============================================================
function HomePage({ go, tweaks }) {
  const heroPid = tweaks.hero || "p14";
  const heroP = productById(heroPid) || PRODUCTS[0];

  // Featured pieces — pick a mixed set
  const featured = ["p09", "p14", "p06", "p07", "p11", "p03"].map(productById);

  return (
    <main>
      {/* HERO */}
      <section data-screen-label="home/hero" style={{ position: "relative", minHeight: "100vh", color: "var(--ivory)", overflow: "hidden", background: "var(--noir)" }}>
        <div style={{ position: "absolute", inset: 0 }}>
          <img src={heroP.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 20%", opacity: .92 }} />
          <div className="scrim-bl" style={{ position: "absolute", inset: 0 }}></div>
        </div>

        <div className="wrap" style={{ position: "relative", paddingTop: 130, paddingBottom: 80, minHeight: "100vh", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          {/* Top eyebrow strip */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 60 }}>
            <div className="eyebrow" style={{ color: "rgba(250,245,239,.85)" }}>Ma · 24 · Wearable Art Series · Dubai</div>
            <div className="eyebrow" style={{ color: "rgba(250,245,239,.65)" }}>Volume I · {new Date().getFullYear()}</div>
          </div>

          {/* Headline */}
          <div style={{ maxWidth: 1100, marginTop: 80 }}>
            <h1 className="display" style={{ fontSize: "clamp(64px, 9.5vw, 156px)", lineHeight: 0.96, margin: 0, letterSpacing: "-0.012em" }}>
              Wearable art,<br/>
              <span className="display-i" style={{ color: "var(--gold-light)" }}>made to be remembered.</span>
            </h1>
            <p className="lede" style={{ maxWidth: 560, marginTop: 36, color: "rgba(250,245,239,.85)" }}>
              {VERBATIM.thesis}
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginTop: 38 }}>
              <a href={BOOK_LINK} target="_blank" rel="noreferrer" className="btn btn-gold">Book a showroom appointment <span className="arr">→</span></a>
              <a href="#/collections" onClick={(e)=>{e.preventDefault(); go({name:"collections"});}} className="btn btn-ghost">Explore the collections <span className="arr">→</span></a>
            </div>
          </div>

          {/* Bottom credit */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginTop: 80, color: "rgba(250,245,239,.7)", fontSize: 11.5, letterSpacing: "0.22em", textTransform: "uppercase" }}>
            <div>
              <div style={{ marginBottom: 4 }}>Featured</div>
              <div style={{ color: "var(--gold-light)", fontFamily: "var(--serif)", fontSize: 17, letterSpacing: "0.02em", textTransform: "none" }}>
                {heroP.name} · <span className="num">{fmtAED(heroP.price)}</span>
              </div>
            </div>
            <div>Scroll ↓</div>
          </div>
        </div>
      </section>

      {/* WHISPER BAND */}
      <section style={{ background: "var(--bone)", padding: "80px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap-narrow" style={{ textAlign: "center" }}>
          <LotusMark size={28} color="var(--gold)" className="" />
          <p className="display-i" style={{ fontSize: "clamp(28px, 3.4vw, 44px)", margin: "20px auto 0", maxWidth: 880, lineHeight: 1.25, color: "var(--ink)" }}>
            "{VERBATIM.whisper}"
          </p>
          <div className="caption" style={{ marginTop: 22, color: "var(--ink-soft)" }}>— The Marushika thesis</div>
        </div>
      </section>

      {/* COLLECTIONS AS ART SERIES */}
      <section data-screen-label="home/collections" style={{ padding: "120px 0 100px" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "end", marginBottom: 64 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>The Art Series</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", margin: 0 }}>
                Six narratives,<br/>
                <span className="display-i" style={{ color: "var(--gold-deep)" }}>one atelier.</span>
              </h2>
            </div>
            <p style={{ fontFamily: "var(--serif)", fontSize: 19, lineHeight: 1.5, color: "var(--ink-soft)", margin: 0, maxWidth: 460, justifySelf: "end" }}>
              Each collection is its own study — folk geometry, hand-painted Madhubani, embroidered tailoring — read it as a series, wear it as one piece.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 24 }}>
            {COLLECTIONS.map((c, i) => {
              // Asymmetric grid: rows of (8/4), (4/8), (6/6)
              const layouts = [
                { cols: "span 8", h: 540 },
                { cols: "span 4", h: 540 },
                { cols: "span 5", h: 480 },
                { cols: "span 7", h: 480 },
                { cols: "span 7", h: 480 },
                { cols: "span 5", h: 480 },
              ];
              const L = layouts[i];
              return (
                <a key={c.slug} href={`#/collection/${c.slug}`} onClick={(e)=>{e.preventDefault(); go({name:"collection", slug:c.slug});}} style={{ gridColumn: L.cols, display:"block" }}>
                  <div className="img-tile img-zoom" style={{ height: L.h, position: "relative" }}>
                    <img src={c.hero} alt={c.name} loading="lazy" />
                    <div className="scrim-b" style={{ position: "absolute", inset: 0 }}></div>
                    <div style={{ position: "absolute", left: 28, right: 28, bottom: 24, color: "var(--ivory)", display: "flex", justifyContent: "space-between", alignItems: "end", gap: 16 }}>
                      <div>
                        <div className="eyebrow" style={{ color: "rgba(250,245,239,.78)" }}>{c.eyebrow}</div>
                        <div className="display" style={{ fontSize: 48, lineHeight: 1, marginTop: 8 }}>{c.name}</div>
                        <div style={{ marginTop: 8, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 17, opacity: .85 }}>{c.tagline}</div>
                      </div>
                      <span className="tile-arr" style={{ color: "var(--ivory)", flex: "0 0 auto" }}>
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M3 7h8M7 3l4 4-4 4"/></svg>
                      </span>
                    </div>
                    <div style={{ position: "absolute", top: 22, left: 22, width: 16, height: 16, borderRadius: 999, background: c.color, boxShadow: "0 0 0 4px rgba(250,245,239,.25)" }}></div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* FOUNDER / CRAFT TEASER */}
      <section data-screen-label="home/founder" style={{ background: "var(--noir)", color: "var(--ivory)", padding: "120px 0" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 80, alignItems: "center" }}>
            <div>
              <div className="img-tile" style={{ aspectRatio: "4/5", background: "linear-gradient(140deg,#2a221d 0%, #1a1413 100%)", border: "1px solid rgba(226,200,150,.22)", position: "relative" }}>
                {/* Founder portrait placeholder */}
                <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", color: "rgba(250,245,239,.45)", padding: 40 }}>
                  <LotusMark size={64} color="#E2C896" />
                  <div className="caption" style={{ marginTop: 24, textAlign: "center" }}>Portrait of the Founder<br/>Manisha Verma · placeholder</div>
                </div>
                <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: .14 }} aria-hidden="true">
                  <defs><pattern id="diag" width="14" height="14" patternUnits="userSpaceOnUse"><path d="M-4,4 l8,-8 M0,14 l14,-14 M10,18 l8,-8" stroke="#E2C896" strokeWidth="0.6"/></pattern></defs>
                  <rect width="100%" height="100%" fill="url(#diag)" />
                </svg>
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ color: "var(--gold-light)", marginBottom: 22 }}>The Artist</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: 0, lineHeight: 1.04 }}>
                Manisha Verma.<br/>
                <span className="display-i" style={{ color: "var(--gold-light)" }}>A textile designer<br/>turned art-house.</span>
              </h2>
              <p style={{ fontSize: 18, lineHeight: 1.6, color: "rgba(250,245,239,.78)", maxWidth: 520, marginTop: 32 }}>
                India → Japan → Saudi Arabia → Kuwait → Dubai. Three years to bring Marushika from a sketchbook to a working atelier — built in deliberate collaboration with Madhubani artists from the founder's home state.
              </p>
              <blockquote style={{ margin: "32px 0 0", padding: "16px 0 16px 22px", borderLeft: "1px solid var(--gold)", fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, color: "var(--ivory)" }}>
                "{VERBATIM.founder}"
                <span style={{ display: "block", marginTop: 10, fontStyle: "normal", fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gold-light)" }}>— Manisha Verma, Founder & Creative Director</span>
              </blockquote>
              <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
                <a href="#/the-artist" onClick={(e)=>{e.preventDefault(); go({name:"artist"});}} className="btn btn-gold">Read the founder's story <span className="arr">→</span></a>
                <a href="#/the-craft" onClick={(e)=>{e.preventDefault(); go({name:"craft"});}} className="btn btn-ghost">The Madhubani craft <span className="arr">→</span></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED PIECES */}
      <section data-screen-label="home/featured" style={{ padding: "120px 0" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Featured · This Volume</div>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", margin: 0 }}>Six pieces, hand-finished.</h2>
            </div>
            <a href="#/collections" onClick={(e)=>{e.preventDefault(); go({name:"collections"});}} className="underline-link">View 201 pieces →</a>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, rowGap: 56 }}>
            {featured.map(p => <ProductCard key={p.id} p={p} go={go} />)}
          </div>
        </div>
      </section>

      {/* PRESS STRIP */}
      <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "60px 0", background: "var(--bone)" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ textAlign: "center", marginBottom: 36 }}>As seen in</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 32, alignItems: "center" }}>
            {PRESS.map(p => (
              <div key={p.name} style={{ textAlign: "center" }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 19, fontStyle: "italic", color: "var(--ink)", letterSpacing: "0.01em", lineHeight: 1.15 }}>{p.name}</div>
                <div className="caption" style={{ marginTop: 10, color: "var(--ink-soft)", fontSize: 9.5 }}>{p.year}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 32 }}>
            {PRESS.map(p => (
              <p key={p.name+"q"} style={{ margin: 0, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 15, lineHeight: 1.5, color: "var(--ink-soft)" }}>
                "{p.quote}"
              </p>
            ))}
          </div>
        </div>
      </section>

      {/* SHOWROOM BAND */}
      <section data-screen-label="home/showroom" style={{ padding: "120px 0", background: "var(--ivory)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Showroom</div>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4.2vw, 60px)", margin: 0, lineHeight: 1.04 }}>
                Two rooms in Dubai,<br/>
                <span className="display-i" style={{ color: "var(--accent)" }}>one quiet welcome.</span>
              </h2>
              <p className="lede" style={{ color: "var(--ink-soft)", marginTop: 28, maxWidth: 480 }}>
                Walk in on Al Wasl Road any day of the week, or book a one-hour private styling session at d3 — in person or virtually.
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
                <a href={BOOK_LINK} target="_blank" rel="noreferrer" className="btn btn-ink">Book appointment <span className="arr">→</span></a>
                <a href={WA_LINK} target="_blank" rel="noreferrer" className="btn btn-ghost-dark">WhatsApp · +971 52 745 2161 <span className="arr">→</span></a>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
              {SHOWROOMS.map(s => (
                <div key={s.name} style={{ border: "1px solid var(--line)", padding: 28, background: "var(--bone)", aspectRatio: "1/1.05", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                  <div>
                    <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 18 }}>{s.kind}</div>
                    <div className="display" style={{ fontSize: 30, lineHeight: 1.05 }}>{s.name}</div>
                  </div>
                  <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-soft)" }}>
                    {s.line1}<br/>{s.line2}<br/>
                    <span style={{ display: "block", marginTop: 12, color: "var(--ink)", fontWeight: 500 }}>{s.hours}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

    </main>
  );
}

// ============================================================
// COLLECTIONS HUB
// ============================================================
function CollectionsHubPage({ go }) {
  return (
    <main>
      <PageMast eyebrow="The Art Series · Vol. I" title={<>Collections,<br/><span className="display-i" style={{color:"var(--gold-deep)"}}>as art series.</span></>} sub="Six self-contained narratives. Each one a study in folklore, geometry, or quiet tailoring — built with Madhubani artists from Manisha Verma's home state." />

      <section style={{ padding: "80px 0 100px" }}>
        <div className="wrap">
          {COLLECTIONS.map((c, i) => (
            <a key={c.slug} href={`#/collection/${c.slug}`} onClick={(e)=>{e.preventDefault(); go({name:"collection", slug:c.slug});}} style={{ display:"grid", gridTemplateColumns: i % 2 === 0 ? "1fr 1.2fr" : "1.2fr 1fr", gap: 64, padding: "60px 0", borderBottom: i < COLLECTIONS.length - 1 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
              <div className="img-tile img-zoom" style={{ aspectRatio: "5/6", order: i % 2 === 0 ? 0 : 1 }}>
                <img src={c.hero} alt={c.name} loading="lazy" />
              </div>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
                  <span style={{ width: 36, height: 4, background: c.color }}></span>
                  <div className="eyebrow">{c.eyebrow}</div>
                </div>
                <h2 className="display" style={{ fontSize: "clamp(48px, 6.5vw, 96px)", margin: 0, lineHeight: 0.95 }}>{c.name}</h2>
                <div className="display-i" style={{ fontSize: 28, color: c.color, marginTop: 18 }}>{c.tagline}</div>
                <p className="lede" style={{ color: "var(--ink-soft)", marginTop: 22, maxWidth: 540 }}>{c.story}</p>
                <div style={{ display: "flex", alignItems: "center", gap: 24, marginTop: 28 }}>
                  <span className="underline-link" style={{ color: c.color }}>Enter the series →</span>
                  <span className="caption" style={{ color: "var(--ink-soft)" }}>Featured in {c.pressFrom}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>
    </main>
  );
}

// ============================================================
// COLLECTION DETAIL
// ============================================================
function CollectionPage({ slug, go }) {
  const c = COLLECTIONS.find(x => x.slug === slug);
  if (!c) return <main style={{ paddingTop: 200 }}><div className="wrap">Series not found.</div></main>;
  const pieces = productsByCollection(slug);

  return (
    <main>
      {/* Editorial mast */}
      <section style={{ position: "relative", minHeight: "80vh", background: "var(--noir)", color: "var(--ivory)", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0 }}>
          <img src={c.hero} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 18%", opacity: .82 }} />
          <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, rgba(16,12,11,.5) 0%, rgba(16,12,11,.18) 40%, rgba(16,12,11,.78) 100%)` }}></div>
          <div style={{ position: "absolute", inset: 0, background: `radial-gradient(120% 80% at 30% 110%, ${c.color}40 0%, transparent 60%)` }}></div>
        </div>
        <div className="wrap" style={{ position: "relative", paddingTop: 180, paddingBottom: 100, minHeight: "80vh", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div className="eyebrow" style={{ color: "rgba(250,245,239,.7)" }}>{c.eyebrow} · The Art Series</div>
          <div>
            <h1 className="display" style={{ fontSize: "clamp(72px, 11vw, 180px)", margin: 0, lineHeight: 0.92 }}>{c.name}</h1>
            <div className="display-i" style={{ fontSize: "clamp(24px, 2.6vw, 36px)", color: "var(--gold-light)", marginTop: 18 }}>{c.tagline}</div>
            <p style={{ maxWidth: 620, marginTop: 28, fontSize: 17, lineHeight: 1.6, color: "rgba(250,245,239,.85)" }}>{c.story}</p>
            <div className="caption" style={{ color: "rgba(250,245,239,.6)", marginTop: 22 }}>Press · {c.pressFrom}</div>
          </div>
        </div>
      </section>

      {/* Pieces */}
      <section style={{ padding: "100px 0 60px" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48 }}>
            <div className="eyebrow">The Pieces · {pieces.length} in series</div>
            <a href={WA_LINK} target="_blank" rel="noreferrer" className="underline-link">Enquire about the full series →</a>
          </div>
          {pieces.length === 0 ? (
            <div style={{ padding: "80px 0", textAlign: "center", color: "var(--ink-soft)", border: "1px dashed var(--line)" }}>
              <LotusMark size={28} color="var(--gold)" />
              <p className="display-i" style={{ fontSize: 28, marginTop: 18 }}>The Silk Scarf series is in arrival.</p>
              <p style={{ maxWidth: 460, margin: "8px auto 0", fontSize: 14 }}>Hand-painted on pure silk · from AED 300 · request a preview at the boutique.</p>
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, rowGap: 52 }}>
              {pieces.map(p => <ProductCard key={p.id} p={p} go={go} />)}
            </div>
          )}
        </div>
      </section>

      {/* Cross-series */}
      <section style={{ background: "var(--bone)", padding: "100px 0", borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40 }}>
            <h2 className="display" style={{ fontSize: 44, margin: 0 }}>Other series</h2>
            <a href="#/collections" onClick={(e)=>{e.preventDefault(); go({name:"collections"});}} className="underline-link">All collections →</a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 18 }}>
            {COLLECTIONS.filter(x => x.slug !== slug).map(o => (
              <a key={o.slug} href={`#/collection/${o.slug}`} onClick={(e)=>{e.preventDefault(); go({name:"collection", slug:o.slug});}} style={{ display:"block" }}>
                <div className="img-tile img-zoom" style={{ aspectRatio: "3/4", marginBottom: 14 }}>
                  <img src={o.hero} alt={o.name} loading="lazy" />
                </div>
                <div className="eyebrow" style={{ color: "var(--ink-soft)", fontSize: 9.5, marginBottom: 4 }}>{o.eyebrow}</div>
                <div className="display" style={{ fontSize: 26 }}>{o.name}</div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ============================================================
// PRODUCT
// ============================================================
function ProductPage({ id, go }) {
  const p = productById(id) || PRODUCTS[0];
  const col = COLLECTIONS.find(c => c.name === p.collection);
  const related = PRODUCTS.filter(x => x.collection === p.collection && x.id !== p.id).slice(0, 3);
  return (
    <main>
      <div style={{ paddingTop: 110, paddingBottom: 0 }}>
        <div className="wrap">
          {/* Breadcrumb */}
          <div className="caption" style={{ display: "flex", gap: 12, padding: "12px 0 28px", color: "var(--ink-soft)" }}>
            <a href="#/" onClick={(e)=>{e.preventDefault(); go({name:"home"});}}>Maison</a> ·
            <a href="#/collections" onClick={(e)=>{e.preventDefault(); go({name:"collections"});}}>Collections</a> ·
            {col && <><a href={`#/collection/${col.slug}`} onClick={(e)=>{e.preventDefault(); go({name:"collection", slug:col.slug});}}>{p.collection}</a> ·</>}
            <span style={{ color: "var(--ink)" }}>{p.name}</span>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 64, alignItems: "start" }}>
            {/* Gallery: 2-up stacked, large + detail */}
            <div>
              <div className="img-tile" style={{ aspectRatio: "4/5", marginBottom: 16 }}>
                <img src={p.img} alt={p.name} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div className="img-tile" style={{ aspectRatio: "1/1", background: col ? col.color : "var(--bone)", overflow: "hidden" }}>
                  <img src={p.img} alt="" style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition: "60% 30%", mixBlendMode: "luminosity", opacity: .9 }} />
                </div>
                <div className="img-tile" style={{ aspectRatio: "1/1", background: "var(--bone)" }}>
                  <img src={p.img} alt="" style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition: "50% 70%" }} />
                </div>
              </div>
              <div className="caption" style={{ marginTop: 14, color: "var(--ink-soft)" }}>
                {p.collection} · Editorial Vol. I · Photographed in studio, Dubai
              </div>
            </div>

            {/* Detail panel */}
            <div style={{ position: "sticky", top: 110 }}>
              <div className="eyebrow" style={{ marginBottom: 18, color: col?.color || "var(--gold-deep)" }}>{p.collection} · {p.tag}</div>
              <h1 className="display" style={{ fontSize: "clamp(40px, 4.6vw, 64px)", margin: 0, lineHeight: 1.02 }}>{p.name}</h1>
              <div style={{ marginTop: 24, display: "flex", alignItems: "baseline", gap: 16 }}>
                <div className="num" style={{ fontFamily: "var(--sans)", fontSize: 22, letterSpacing: "0.03em" }}>{fmtAED(p.price)}</div>
                <div className="caption" style={{ color: "var(--ink-soft)" }}>Inclusive · taxes calculated at checkout</div>
              </div>

              <div className="hr" style={{ margin: "32px 0" }}></div>

              <div>
                <div className="label" style={{ marginBottom: 12 }}>Craft notes</div>
                <p style={{ margin: 0, fontFamily: "var(--serif)", fontSize: 19, lineHeight: 1.55, color: "var(--ink)" }}>{p.craft}</p>
              </div>

              {/* Spec list */}
              <div style={{ marginTop: 28, border: "1px solid var(--line)" }}>
                {[
                  ["Made in", "Dubai, UAE"],
                  ["Atelier", "Marushika studio + Madhubani artisans, Bihar"],
                  ["Composition", "Silk · satin · embroidery threads · beadwork"],
                  ["Sizing", "XS — XL · made-to-fit on request"],
                  ["Delivery", "Worldwide · 7 — 12 working days"],
                ].map(([k, v], i) => (
                  <div key={k} style={{ display: "grid", gridTemplateColumns: "140px 1fr", padding: "12px 18px", borderBottom: i < 4 ? "1px solid var(--line)" : "none", fontSize: 13 }}>
                    <span className="caption" style={{ color: "var(--ink-soft)" }}>{k}</span>
                    <span>{v}</span>
                  </div>
                ))}
              </div>

              {/* Size buttons */}
              <div style={{ marginTop: 28 }}>
                <div className="label" style={{ marginBottom: 14 }}>Size</div>
                <div style={{ display:"flex", gap: 10, flexWrap: "wrap" }}>
                  {["XS","S","M","L","XL"].map((s, i) => (
                    <button key={s} className="num" style={{ width: 56, height: 48, border: "1px solid var(--line)", background: i === 2 ? "var(--ink)" : "transparent", color: i === 2 ? "var(--ivory)" : "var(--ink)", fontSize: 13, letterSpacing: "0.08em" }}>{s}</button>
                  ))}
                  <button style={{ height: 48, padding: "0 16px", border: "1px dashed var(--line)", color: "var(--ink-soft)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>Made-to-fit</button>
                </div>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 32 }}>
                <button className="btn btn-ink" style={{ width: "100%", justifyContent: "space-between" }}>
                  <span>Add to bag · <span className="num">{fmtAED(p.price)}</span></span>
                  <span className="arr">→</span>
                </button>
                <a href={WA_LINK} target="_blank" rel="noreferrer" className="btn btn-ghost-dark" style={{ width: "100%", justifyContent: "space-between" }}>
                  <span>Enquire · book a fitting</span>
                  <span className="arr">→</span>
                </a>
              </div>

              <div className="hr" style={{ margin: "32px 0" }}></div>

              {/* Showroom note */}
              <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 18, alignItems: "start" }}>
                <LotusMark size={26} color="var(--gold)" />
                <div>
                  <div className="label" style={{ marginBottom: 6 }}>See it on Al Wasl Road</div>
                  <p style={{ margin: 0, fontSize: 13.5, color: "var(--ink-soft)", lineHeight: 1.55 }}>
                    Available in the Villa 15 boutique · open daily 10am–10pm. Or book a private styling session at d3 for a 1-hour fitting.
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Editorial paragraph */}
          <div style={{ padding: "120px 0", borderTop: "1px solid var(--line)", marginTop: 100 }}>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 80, alignItems: "center" }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 18 }}>The story behind the piece</div>
                <h3 className="display-i" style={{ fontSize: 44, margin: 0, color: col?.color || "var(--accent)" }}>{col?.tagline}</h3>
                <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: "var(--ink-soft)" }}>
                  {col?.story} The {p.name.split("—")[0].trim().toLowerCase()} below carries that same atelier discipline — every motif placed by the Madhubani artist before the silk is cut.
                </p>
              </div>
              <div className="img-tile" style={{ aspectRatio: "5/4" }}>
                <img src={col?.hero} alt={col?.name} />
              </div>
            </div>
          </div>
        </div>

        {/* You may also like */}
        {related.length > 0 && (
          <section style={{ background: "var(--bone)", padding: "100px 0", borderTop: "1px solid var(--line)" }}>
            <div className="wrap">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40 }}>
                <h2 className="display" style={{ fontSize: 44, margin: 0 }}>From the same series</h2>
                {col && <a href={`#/collection/${col.slug}`} onClick={(e)=>{e.preventDefault(); go({name:"collection", slug:col.slug});}} className="underline-link">All of {col.name} →</a>}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.max(related.length, 3)}, 1fr)`, gap: 28 }}>
                {related.map(r => <ProductCard key={r.id} p={r} go={go} />)}
              </div>
            </div>
          </section>
        )}
      </div>
    </main>
  );
}

// ============================================================
// THE ARTIST
// ============================================================
function ArtistPage({ go }) {
  return (
    <main>
      <PageMast eyebrow="The Artist · Founder & Creative Director" title={<>Manisha Verma.</>} sub="Indian textile designer · MA Apparel Production & Merchandising · founder of Marushika." />

      <section style={{ padding: "80px 0 60px" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
            <div className="img-tile" style={{ aspectRatio: "4/5", background: "linear-gradient(140deg,#efe6d9 0%, #d8c5a8 100%)", border: "1px solid var(--line)", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 40 }}>
                <LotusMark size={68} color="var(--gold-deep)" />
                <div className="caption" style={{ marginTop: 22, color: "var(--ink-soft)", textAlign: "center" }}>Founder portrait<br/>image to come</div>
              </div>
            </div>
            <div>
              <p className="lede" style={{ marginTop: 0, color: "var(--ink)" }}>
                Manisha grew up steeped in the textile vocabulary of her home state in India — Madhubani folk painting, hand-loomed weaves, ceremonial embroidery. A masters in apparel production took her into the operational side of clothing; a life lived across Japan, Saudi Arabia (a decade), and Kuwait gave her the eye of a cultural collector.
              </p>
              <p style={{ marginTop: 22, fontSize: 16.5, lineHeight: 1.7, color: "var(--ink-soft)" }}>
                She moved to Dubai during the pandemic, and spent <em>three quiet years</em> bringing Marushika from a sketchbook concept to a working atelier. The house launched in the Middle East in <strong className="num">2024</strong>, with one principle holding the whole house together: clothing should be made by hand, with story, and worn for a generation.
              </p>

              <blockquote style={{ margin: "40px 0", padding: "20px 0 20px 24px", borderLeft: "2px solid var(--gold)", fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, lineHeight: 1.3, color: "var(--ink)" }}>
                "{VERBATIM.art}"
              </blockquote>

              {/* Journey timeline */}
              <div className="label" style={{ marginBottom: 18, color: "var(--gold-deep)" }}>The Journey</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
                {[
                  { place: "India", note: "Home — Madhubani, textile training" },
                  { place: "Japan", note: "Material discipline, restraint" },
                  { place: "Saudi Arabia", note: "Ten years · ceremony, drape" },
                  { place: "Kuwait", note: "Studio sketches" },
                  { place: "Dubai", note: "Atelier · since 2024" },
                ].map((s, i) => (
                  <div key={s.place} style={{ padding: 16, background: "var(--bone)", border: "1px solid var(--line)", aspectRatio: "1/1.1", display:"flex", flexDirection:"column", justifyContent:"space-between" }}>
                    <div className="num" style={{ fontFamily: "var(--serif)", fontSize: 30, color: "var(--gold-deep)" }}>0{i+1}</div>
                    <div>
                      <div className="display" style={{ fontSize: 22, lineHeight: 1.1 }}>{s.place}</div>
                      <div style={{ marginTop: 8, fontSize: 12, color: "var(--ink-soft)" }}>{s.note}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Press belt */}
      <section style={{ background: "var(--noir)", color: "var(--ivory)", padding: "100px 0" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ color: "var(--gold-light)", marginBottom: 22 }}>Said about the house</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 40 }}>
            {PRESS.slice(0,4).map(p => (
              <blockquote key={p.name} style={{ margin: 0, padding: "20px 0 20px 24px", borderLeft: "1px solid var(--gold)" }}>
                <div className="display-i" style={{ fontSize: 24, lineHeight: 1.4, color: "var(--ivory)" }}>"{p.quote}"</div>
                <div className="caption" style={{ marginTop: 14, color: "var(--gold-light)" }}>— {p.name} · {p.year}</div>
              </blockquote>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "120px 0", textAlign: "center" }}>
        <div className="wrap-narrow">
          <LotusMark size={36} color="var(--gold)" />
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", margin: "24px 0 18px" }}>Meet Manisha in the atelier.</h2>
          <p className="lede" style={{ color: "var(--ink-soft)", margin: "0 auto 32px", maxWidth: 580 }}>
            One-hour private styling sessions are available at the d3 styling showroom, in person or virtually. Pieces are presented, fittings booked, and the next collection previewed.
          </p>
          <a href={BOOK_LINK} target="_blank" rel="noreferrer" className="btn btn-ink">Book a session <span className="arr">→</span></a>
        </div>
      </section>
    </main>
  );
}

// ============================================================
// THE CRAFT
// ============================================================
function CraftPage({ go }) {
  const techniques = [
    { n: "Hand-painted Madhubani", note: "Painted on silk by artisans from Bihar before the panel is cut." },
    { n: "Hand embroidery", note: "Chain stitch, satin stitch, threadwork — by hand, every motif." },
    { n: "Beadwork & sequins", note: "Each placed by hand, finished in the Dubai atelier." },
    { n: "Precision tailoring", note: "Machine work in service of the hand, never replacing it." },
  ];
  return (
    <main>
      <PageMast eyebrow="The Craft · Madhubani Folk Art" title={<>The art that<br/><span className="display-i" style={{color:"var(--accent)"}}>walks the room.</span></>} sub="Madhubani is a 14th-century folk-painting tradition from Bihar — fish, lotuses, peacocks, mythic figures. Marushika commissions Madhubani artists to paint and embroider directly onto its couture silks." />

      <section style={{ padding: "80px 0" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "center" }}>
            <div className="img-tile" style={{ aspectRatio: "5/6" }}>
              <img src="media/p07.webp" alt="Hand-painted Madhubani dress" />
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>What is Madhubani</div>
              <h2 className="display" style={{ fontSize: 52, margin: 0, lineHeight: 1.04 }}>
                Folk painting,<br/><span className="display-i" style={{color:"var(--gold-deep)"}}>worn as clothing.</span>
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.65, color: "var(--ink-soft)" }}>
                Madhubani (sometimes Mithila) is one of India's oldest folk-painting traditions — historically painted on the walls of homes in the Mithila region of Bihar by women, to mark weddings, harvests, gods. Its vocabulary is unmistakable: bordered scenes, symmetrical lotus mandalas, fish, peacocks, mythological figures rendered in single fluid lines.
              </p>
              <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.65, color: "var(--ink-soft)" }}>
                Marushika commissions these artists — by name, from Manisha's home region — to paint motifs <em>directly onto pure silk</em> before the panels are cut. What you wear has been hand-painted before it was hand-sewn.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Techniques grid */}
      <section style={{ background: "var(--bone)", padding: "100px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 36, color: "var(--gold-deep)" }}>Four hands per piece</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "1px solid var(--line)", background: "var(--ivory)" }}>
            {techniques.map((t, i) => (
              <div key={t.n} style={{ padding: 32, borderRight: i < 3 ? "1px solid var(--line)" : "none", minHeight: 280, display: "flex", flexDirection: "column" }}>
                <div className="num" style={{ fontFamily: "var(--serif)", fontSize: 32, color: "var(--gold-deep)" }}>0{i+1}</div>
                <h3 className="display" style={{ fontSize: 26, margin: "32px 0 12px", lineHeight: 1.1 }}>{t.n}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-soft)", margin: 0 }}>{t.note}</p>
                <div style={{ marginTop: "auto", width: 28, height: 1, background: "var(--gold)" }}></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process numbers */}
      <section style={{ padding: "120px 0", background: "var(--noir)", color: "var(--ivory)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 56, textAlign: "center" }}>
            {[
              ["~120", "Hours per signature piece"],
              ["1 of 1", "Each hand-painted motif"],
              ["6", "Madhubani artists · Bihar"],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="display" style={{ fontSize: "clamp(64px, 9vw, 120px)", lineHeight: 1, color: "var(--gold-light)" }}>{n}</div>
                <div className="caption" style={{ marginTop: 14, color: "rgba(250,245,239,.7)" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ============================================================
// SHOWROOM
// ============================================================
function ShowroomPage({ go }) {
  return (
    <main>
      <PageMast eyebrow="Showrooms · Dubai" title={<>Visit, or be<br/><span className="display-i" style={{color:"var(--accent)"}}>privately styled.</span></>} sub="Two rooms — one a public boutique on Al Wasl Road, the other a by-appointment styling showroom in Dubai Design District." />

      <section style={{ padding: "60px 0 40px" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
            {SHOWROOMS.map((s, i) => (
              <div key={s.name} style={{ border: "1px solid var(--line)", background: "var(--ivory)" }}>
                {/* Map placeholder */}
                <div style={{ position: "relative", aspectRatio: "5/3", background: i === 0 ? "linear-gradient(135deg,#EFE6D9 0%, #d8c5a8 100%)" : "linear-gradient(135deg,#E7D6CC 0%, #b8a290 100%)", overflow: "hidden" }}>
                  <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }} aria-hidden="true">
                    <defs>
                      <pattern id={`grid${i}`} width="48" height="48" patternUnits="userSpaceOnUse">
                        <path d="M 48 0 L 0 0 0 48" fill="none" stroke="rgba(33,27,25,.12)" strokeWidth="0.5"/>
                      </pattern>
                    </defs>
                    <rect width="100%" height="100%" fill={`url(#grid${i})`} />
                    {/* Fake roads */}
                    <path d={i === 0 ? "M0,140 Q300,60 700,180 T1200,120" : "M0,200 L600,80 L1200,260"} stroke="rgba(33,27,25,.22)" strokeWidth="14" fill="none" />
                    <path d={i === 0 ? "M0,140 Q300,60 700,180 T1200,120" : "M0,200 L600,80 L1200,260"} stroke="var(--ivory)" strokeWidth="2" fill="none" strokeDasharray="6 8" />
                  </svg>
                  {/* Pin */}
                  <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-100%)", display:"flex", flexDirection:"column", alignItems:"center", gap: 4 }}>
                    <div style={{ width: 32, height: 32, borderRadius: 999, background: "var(--accent)", display:"flex", alignItems:"center", justifyContent:"center", boxShadow: "0 4px 14px rgba(0,0,0,.2)" }}>
                      <LotusMark size={16} color="var(--ivory)" />
                    </div>
                    <div style={{ width: 2, height: 18, background: "var(--accent)" }}></div>
                  </div>
                  <div className="caption" style={{ position: "absolute", left: 16, top: 14, color: "var(--ink-soft)" }}>Map · coordinates to confirm</div>
                </div>

                <div style={{ padding: 32 }}>
                  <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 14 }}>{s.kind}</div>
                  <h3 className="display" style={{ fontSize: 36, margin: 0 }}>{s.name}</h3>
                  <div style={{ marginTop: 16, fontSize: 15, lineHeight: 1.6 }}>
                    {s.line1}<br/>{s.line2}
                  </div>
                  <div className="hr" style={{ margin: "20px 0" }}></div>
                  <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 14, fontSize: 13.5 }}>
                    <span className="caption" style={{ color:"var(--ink-soft)" }}>Hours</span>
                    <span>{s.hours}</span>
                    <span className="caption" style={{ color:"var(--ink-soft)" }}>Phone</span>
                    <a href="tel:+971527452161" className="num">+971 52 745 2161</a>
                    <span className="caption" style={{ color:"var(--ink-soft)" }}>Email</span>
                    <a href={`mailto:${EMAIL}`}>{EMAIL}</a>
                  </div>
                  <p style={{ marginTop: 22, fontFamily: "var(--serif)", fontSize: 17, lineHeight: 1.5, color: "var(--ink-soft)" }}>{s.note}</p>
                  <div style={{ display: "flex", gap: 10, marginTop: 22, flexWrap: "wrap" }}>
                    {i === 1 && <a href={BOOK_LINK} target="_blank" rel="noreferrer" className="btn btn-ink btn-sm">Book session <span className="arr">→</span></a>}
                    <a href={WA_LINK} target="_blank" rel="noreferrer" className="btn btn-ghost-dark btn-sm">WhatsApp <span className="arr">→</span></a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Booking iframe placeholder */}
      <section style={{ padding: "80px 0", background: "var(--bone)" }}>
        <div className="wrap-narrow" style={{ textAlign: "center" }}>
          <div className="eyebrow" style={{ marginBottom: 18, color: "var(--gold-deep)" }}>Live booking</div>
          <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", margin: 0 }}>One-hour private styling.</h2>
          <p className="lede" style={{ color: "var(--ink-soft)", margin: "20px auto 30px", maxWidth: 540 }}>
            Available in person at the d3 styling showroom, or virtually from anywhere. Walk through the current series, try pieces, and meet the team.
          </p>
          <div style={{ border: "1px solid var(--line)", background: "var(--ivory)", padding: 40 }}>
            <div className="caption" style={{ color: "var(--ink-soft)", marginBottom: 14 }}>booking.marushikaofficial.com (embedded)</div>
            <a href={BOOK_LINK} target="_blank" rel="noreferrer" className="btn btn-ink">Open booking →</a>
          </div>
        </div>
      </section>
    </main>
  );
}

// ============================================================
// CONTACT
// ============================================================
function ContactPage({ go }) {
  return (
    <main>
      <PageMast eyebrow="Contact · Atelier in Dubai" title={<>Speak to<br/><span className="display-i" style={{color:"var(--gold-deep)"}}>the atelier.</span></>} sub="WhatsApp, email, or come walk the floor — the team replies within a working day." />

      <section style={{ padding: "60px 0 100px" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
            {/* Form */}
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Enquire</div>
              <form onSubmit={(e)=>{e.preventDefault(); alert("Thank you — the atelier will be in touch.");}} style={{ display: "grid", gap: 22 }}>
                <Field label="Your name" placeholder="Maya Rashid" />
                <Field label="Email" placeholder="you@example.com" type="email" />
                <Field label="Phone (optional)" placeholder="+971…" />
                <FieldArea label="What can we help with?" placeholder="I'd like to view the Idaya series at the Al Wasl boutique on Saturday afternoon." />
                <SelectField label="I'm enquiring about" options={["A piece I've seen", "A made-to-fit commission", "A by-appointment styling session", "Press / editorial", "Other"]} />
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8 }}>
                  <div className="caption" style={{ color: "var(--ink-soft)" }}>We reply within 1 working day.</div>
                  <button type="submit" className="btn btn-ink">Send message <span className="arr">→</span></button>
                </div>
              </form>
            </div>

            {/* Side: direct lines */}
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Direct lines</div>
              <div style={{ display: "grid", gap: 16 }}>
                <ContactRow label="WhatsApp" value="+971 52 745 2161" href={WA_LINK} />
                <ContactRow label="Phone" value="+971 52 745 2161" href="tel:+971527452161" />
                <ContactRow label="Main email" value={EMAIL} href={`mailto:${EMAIL}`} />
                <ContactRow label="Orders / support" value="support@marushikaofficial.com" href="mailto:support@marushikaofficial.com" />
                <ContactRow label="Book appointment" value="booking.marushikaofficial.com" href={BOOK_LINK} ext />
              </div>

              <div className="hr" style={{ margin: "36px 0" }}></div>

              <div className="eyebrow" style={{ marginBottom: 16 }}>Visit</div>
              <div style={{ display: "grid", gap: 22 }}>
                {SHOWROOMS.map(s => (
                  <div key={s.name}>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--ink)" }}>{s.name}</div>
                    <div style={{ fontSize: 13.5, color: "var(--ink-soft)", marginTop: 4 }}>{s.line1} · {s.line2} · {s.hours}</div>
                  </div>
                ))}
              </div>

              <div className="hr" style={{ margin: "36px 0" }}></div>

              <div className="eyebrow" style={{ marginBottom: 16 }}>Find us online</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
                {["instagram","facebook","linkedin","youtube"].map(s => (
                  <a key={s} href={`https://${s}.com/${s==="linkedin"?"company/":""}marushikaofficial${s==="youtube"?"":""}`} target="_blank" rel="noreferrer" className="btn btn-ghost-dark btn-sm">@marushikaofficial · {s} <span className="arr">→</span></a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function Field({ label, ...props }) {
  return (
    <label style={{ display: "block" }}>
      <span className="caption" style={{ display: "block", marginBottom: 8, color: "var(--ink-soft)" }}>{label}</span>
      <input {...props} style={{ width: "100%", padding: "14px 16px", border: "1px solid var(--line)", background: "var(--ivory)", fontFamily: "var(--sans)", fontSize: 15, color: "var(--ink)", outline: "none" }} onFocus={(e)=>{e.target.style.borderColor="var(--gold)";}} onBlur={(e)=>{e.target.style.borderColor="var(--line)";}} />
    </label>
  );
}
function FieldArea({ label, ...props }) {
  return (
    <label style={{ display: "block" }}>
      <span className="caption" style={{ display: "block", marginBottom: 8, color: "var(--ink-soft)" }}>{label}</span>
      <textarea {...props} rows={4} style={{ width: "100%", padding: "14px 16px", border: "1px solid var(--line)", background: "var(--ivory)", fontFamily: "var(--sans)", fontSize: 15, color: "var(--ink)", outline: "none", resize: "vertical" }} onFocus={(e)=>{e.target.style.borderColor="var(--gold)";}} onBlur={(e)=>{e.target.style.borderColor="var(--line)";}} />
    </label>
  );
}
function SelectField({ label, options }) {
  return (
    <label style={{ display: "block" }}>
      <span className="caption" style={{ display: "block", marginBottom: 8, color: "var(--ink-soft)" }}>{label}</span>
      <select style={{ width: "100%", padding: "14px 16px", border: "1px solid var(--line)", background: "var(--ivory)", fontFamily: "var(--sans)", fontSize: 15, color: "var(--ink)", outline: "none" }}>
        {options.map(o => <option key={o}>{o}</option>)}
      </select>
    </label>
  );
}
function ContactRow({ label, value, href, ext }) {
  return (
    <a href={href} target={ext ? "_blank" : "_self"} rel={ext ? "noreferrer" : ""} style={{ display: "grid", gridTemplateColumns: "140px 1fr auto", padding: "18px 0", borderBottom: "1px solid var(--line)", alignItems: "center" }}>
      <span className="caption" style={{ color:"var(--ink-soft)" }}>{label}</span>
      <span style={{ fontFamily: "var(--serif)", fontSize: 19 }}>{value}</span>
      <span style={{ color: "var(--gold-deep)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>→</span>
    </a>
  );
}

Object.assign(window, { HomePage, CollectionsHubPage, CollectionPage, ProductPage, ArtistPage, CraftPage, ShowroomPage, ContactPage });
