/* global React, O499 */
const {
  useState: useStateP, useEffect: useEffectP, useRef: useRefP, useMemo: useMemoP
} = React;

/* =========================================================
   HOME
   ========================================================= */
function HomePage() {
  const { lang, hero: heroVariant, addToCart, introQuote } = useApp();
  const data = window.O499;

  const heroProducts = data.products.filter(p => p.hero);
  const featured = data.products.filter(p => ["maya-blush-set", "kanz-brass-box", "yafa-green-set", "beirut-lightbulbs", "kawthar-burgundy-dress", "tales-coffee-table"].includes(p.id));
  const fashionFeatured = data.products.filter(p => p.category === "fashion").slice(0, 4);
  const decorFeatured = data.products.filter(p => p.category === "decor").slice(0, 4);

  const hero = heroVariant || "maker";
  const heroImg = hero === "garment"
    ? "media/product-03-dress.webp"
    : hero === "decor"
    ? "media/product-07-wall-decor.webp"
    : null;

  return (
    <main>
      {/* Hero — variant-switchable via Tweaks */}
      <section className="hero">
        <div className="hero-text">
          <span className="chapter">i · {lang === "ar" ? "البداية" : "the opening chapter"}</span>
          <h1 className="display-xl">
            Slow-made<br/>
            Lebanese craft<br/>
            <span style={{ fontStyle: "italic", color: "var(--primary)" }}>collectible</span> fashion<br/>
            & handmade décor.
          </h1>
          <p className="lead">
            Since 2006, Orient 499 keeps Lebanon's artisanal traditions alive — coppersmiths, glassblowers and embroiderers hand-make every piece. Now at Alserkal Avenue, Dubai.
          </p>
          <div className="hero-cta-row">
            <a href="#/story" className="btn">Discover the craft</a>
            <a href="#/fashion" className="btn btn-ghost">Shop the collection</a>
          </div>
          <div className="hero-meta">
            <span>Est. Beirut 2006</span>
            <span>Now · Dubai · WH 48a</span>
            <span>876 pieces · 1,751 variants</span>
          </div>
        </div>
        <div className="hero-image">
          {hero === "maker" ? (
            <Placeholder stockSeed="o499-maker-hero-7" stockTags="Stock stand-in · maker portrait to replace" aspect="auto" style={{ height: "100%", aspectRatio: "auto" }} />
          ) : (
            <img src={heroImg} alt="Featured collectible piece" />
          )}
          <div className="stamp">
            <span>SINCE</span>
            <strong>2006</strong>
            <span>BEIRUT</span>
          </div>
        </div>
      </section>

      {/* Brand strip */}
      <div className="strip">
        <div className="strip-inner">
          <span><span className="strip-dot"></span>Sustainable Luxury</span>
          <span><span className="strip-dot"></span>Slow-Made</span>
          <span><span className="strip-dot"></span>Handcrafted in Lebanon</span>
          <span><span className="strip-dot"></span>Co-created with Master Artisans</span>
          <span><span className="strip-dot"></span>Currency · USD</span>
        </div>
      </div>

      {/* The Story teaser */}
      <section className="section wrap">
        <div className="split-2" style={{ gridTemplateColumns: "0.9fr 1.1fr", gap: "clamp(40px, 6vw, 96px)", alignItems: "stretch" }}>
          <div style={{ position: "relative" }}>
            <Placeholder stockSeed="o499-craft-journey-4" stockTags="Stock stand-in · craft journey film" aspect="3/4" />
            <div className="vcap" style={{ position: "absolute", left: -28, top: 0, height: "100%", display: "flex", alignItems: "center" }}>
              chapter ii · the makers
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingLeft: 24 }}>
            <span className="chapter">ii · the makers</span>
            <h2 className="display-l" style={{ marginTop: 18 }}>
              The piece begins<br/>
              at the bench.
            </h2>
            <p className="body-lg" style={{ marginTop: 24, maxWidth: "42ch", color: "var(--muted)" }}>
              Coppersmiths in Tripoli. Glassblowers in Sarafand. Embroiderers in Mount Lebanon. We design <em style={{ color: "var(--text)" }}>hand in hand</em> with the masters, accompanying each artisan from sketch to finished piece — so traditional techniques pass to the next generation.
            </p>
            <div className="quote-block" style={{ padding: "32px 0 24px" }}>
              <div className="q" style={{ fontSize: 32 }}>"{introQuote}"</div>
              <div className="by">Frank Luca · co-founder · The National</div>
            </div>
            <div>
              <a href="#/story" className="btn-link">Meet the artisans <span className="arrow"></span></a>
            </div>
          </div>
        </div>
      </section>

      <SparrowDivider />

      {/* Collectible collections — unified narrative */}
      <section className="section wrap">
        <SectionHeader
          chapter="iii · the catalogue"
          eyebrow="One narrative · 876 collectible pieces"
          title={<span>The collection,<br/><em style={{ color: "var(--primary)" }}>unsiloed.</em></span>}
          right={<>Fashion, accessories and home décor presented as one collectible house — not as separate retail aisles. Named pieces, named materials, named makers.</>}
        />
        <div className="pgrid">
          {featured.slice(0, 6).map((p, i) => (
            <ProductCard key={p.id} p={p} eager={i < 3} />
          ))}
        </div>
        <div style={{ marginTop: 56, display: "flex", justifyContent: "center", gap: 24 }}>
          <a href="#/fashion" className="btn-link">Fashion <span className="arrow"></span></a>
          <a href="#/home-decor" className="btn-link">Home & Décor <span className="arrow"></span></a>
        </div>
      </section>

      {/* Marquee */}
      <Marquee items={["Hand-hammered brass", "Mouth-blown Levantine glass", "Hand-stitched linen", "Olive-oil soap", "Marquetry & mother-of-pearl", "Embroidered cotton silk", "Hand-crocheted scarves"]} />

      {/* Beirut → Dubai arrival */}
      <section className="section wrap">
        <div className="split-2" style={{ gridTemplateColumns: "1.1fr 0.9fr" }}>
          <div>
            <Placeholder stockSeed="o499-alserkal-2" stockTags="Stock stand-in · boutique to replace" aspect="4/3" />
          </div>
          <div>
            <span className="chapter">iv · arrival</span>
            <h2 className="display-l" style={{ marginTop: 18 }}>
              Beirut to Dubai —<br/>
              <em>The Yard, 48a.</em>
            </h2>
            <p className="body-lg muted" style={{ marginTop: 24, maxWidth: "42ch" }}>
              In December 2024, Orient 499 opened its first international outpost at Alserkal Avenue, Al Quoz 3 — interior by <strong style={{ color: "var(--text)", fontWeight: 500 }}>MariaGroup</strong>, designed around the interplay of light and shadow. The boutique pairs Beirut's atelier with Dubai's craft district.
            </p>
            <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, borderTop: "1px solid var(--border)", paddingTop: 24 }}>
              <div>
                <div className="eyebrow">Where</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 18, marginTop: 6, lineHeight: 1.35 }}>The Yard, Warehouse 48a<br/>Alserkal Avenue, Al Quoz 3</div>
              </div>
              <div>
                <div className="eyebrow">Opened</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 18, marginTop: 6 }}>December 2024</div>
              </div>
            </div>
            <div style={{ marginTop: 32 }}>
              <a href="#/boutique" className="btn-link">Plan your visit <span className="arrow"></span></a>
            </div>
          </div>
        </div>
      </section>

      {/* Sustainability teaser */}
      <section className="section-tight" style={{ background: "var(--surface)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <div className="key-numbers">
            <div className="kn">
              <div className="big">20<span style={{ fontSize: "0.5em", verticalAlign: "super", color: "var(--muted)" }}>+</span></div>
              <div className="lbl">Years preserving Lebanese craft</div>
            </div>
            <div className="kn">
              <div className="big">4</div>
              <div className="lbl">Master craft families · coppersmiths · glassblowers · embroiderers · soap-makers</div>
            </div>
            <div className="kn">
              <div className="big">100<span style={{ fontSize: "0.5em", color: "var(--muted)" }}>%</span></div>
              <div className="lbl">Hand-made · ethically produced · slow-made</div>
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 56, flexWrap: "wrap", gap: 24 }}>
            <h3 className="display-m" style={{ maxWidth: "22ch" }}>
              Heritage as luxury — <em style={{ color: "var(--primary)" }}>not heritage as nostalgia.</em>
            </h3>
            <a href="#/sustainability" className="btn-link">The slow-made ethos <span className="arrow"></span></a>
          </div>
        </div>
      </section>

      {/* Journal teaser */}
      <section className="section wrap">
        <SectionHeader
          chapter="v · the journal"
          eyebrow="Stories from the house"
          title={<span>Field notes.</span>}
          right={"Long-form reading from the workshop, the boutique and the Beirut → Dubai bridge."}
        />
        <div className="jgrid">
          {data.journal.slice(0, 2).map((j) => (
            <a key={j.slug} className="jcard" href={"#/journal/" + j.slug}>
              <div className="jimg"><img src={j.img} alt={j.title} loading="lazy" /></div>
              <span className="meta">{j.meta}</span>
              <h3>{j.title}</h3>
              <p className="muted" style={{ maxWidth: "44ch" }}>{j.dek}</p>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 48, textAlign: "center" }}>
          <a href="#/journal" className="btn-link">All journal entries <span className="arrow"></span></a>
        </div>
      </section>
    </main>
  );
}

/* =========================================================
   STORY / ARTISANS
   ========================================================= */
function StoryPage() {
  const data = window.O499;
  return (
    <main>
      <section className="section wrap">
        <div style={{ maxWidth: 980 }}>
          <span className="chapter">i · the soul</span>
          <h1 className="display-xl" style={{ marginTop: 14 }}>
            A house built<br/>
            <em style={{ color: "var(--primary)" }}>hand in hand</em><br/>
            with master artisans.
          </h1>
          <p className="lead" style={{ marginTop: 32, maxWidth: "44ch" }}>
            Aida Kawas and Frank Luca opened Orient 499 in Beirut, on Omar Daouk Street, in 2006. Twenty years on, the house has become a pillar of the city's cultural scene — a quiet, deliberate effort to preserve Lebanon's artisanal traditions through slow-made products.
          </p>
        </div>
      </section>

      <section className="wrap" style={{ paddingBottom: 96 }}>
        <div className="split-2" style={{ gridTemplateColumns: "1fr 1fr", gap: 0, alignItems: "stretch" }}>
          <Placeholder stockSeed="o499-founders-9" stockTags="Stock stand-in · founders portrait" aspect="4/5" style={{ borderRight: "1px solid var(--border)" }}/>
          <div style={{ padding: "48px clamp(24px, 4vw, 64px)", background: "var(--surface)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <span className="chapter">ii · the founders</span>
            <h2 className="display-m" style={{ marginTop: 14 }}>Aida Kawas <span style={{ color: "var(--muted)", fontStyle: "italic", fontSize: "0.7em" }}>&</span> Frank Luca</h2>
            <p style={{ marginTop: 24, color: "var(--muted)", lineHeight: 1.7, maxWidth: "40ch" }}>
              Co-founders of Orient 499. Patrons of Lebanese craft. They've spent two decades building a network of master artisans — coppersmiths, glassblowers, embroiderers, soap-makers, carpenters, couturiers — and accompany each maker from sketch to finished piece.
            </p>
            <div className="quote-block">
              <div className="q">"This is luxury now. The handmade and unique."</div>
              <div className="by">Frank Luca · The National</div>
            </div>
          </div>
        </div>
      </section>

      {/* Artisans grid */}
      <section className="wrap" id="artisans">
        <SectionHeader
          chapter="iii · the masters"
          eyebrow="Four craft families · all Lebanese"
          title="Meet the makers."
          right="Every piece begins at a bench in Tripoli, Sarafand, Mount Lebanon or Beit Mery. We design hand-in-hand with the master and accompany them through the slow-made process."
        />
      </section>
      <section className="wrap" style={{ marginBottom: 96 }}>
        <div className="artisans">
          {data.artisans.map((a) => (
            <div className="artisan" key={a.num}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span className="num">{a.num}</span>
                <SparrowMark size={16} color="var(--primary)" />
              </div>
              <Placeholder stockSeed={"o499-artisan-" + a.num + "-3"} stockTags="Stock stand-in · maker" aspect="4/5" />
              <h3>{a.title}</h3>
              <span className="eyebrow gold">{a.craft}</span>
              <p>{a.note}</p>
              <span className="where">{a.where}</span>
            </div>
          ))}
        </div>
      </section>

      {/* The slow-made process */}
      <section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <SectionHeader
            chapter="iv · the process"
            eyebrow="Slow-made, by design"
            title="From sketch to finished piece."
            right="Six unhurried stages, often over weeks. Many pieces are one-of-a-kind because the maker decided so at the bench."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 0, borderTop: "1px solid var(--border)" }}>
            {[
              { n: "01", t: "Sketch", d: "Aida + the master agree on form, material, name." },
              { n: "02", t: "Source", d: "Belgian linen, Italian silk, Tripoli copper — chosen for the piece." },
              { n: "03", t: "Cut · raise", d: "Cut by hand or raised from a sheet at the bench." },
              { n: "04", t: "Stitch · hammer", d: "Weeks of stitching, hammering, planishing — patient labour." },
              { n: "05", t: "Finish", d: "Patinated, washed, ironed, signed off by the master." },
              { n: "06", t: "Named", d: "Each piece is given a name — Kawthar, Sabah, Yafa." }
            ].map((s, i) => (
              <div key={s.n} style={{
                padding: "32px 20px",
                borderRight: i < 5 ? "1px solid var(--border)" : "none",
                borderBottom: "1px solid var(--border)",
                background: i % 2 === 0 ? "transparent" : "rgba(191,159,88,0.03)"
              }}>
                <div className="chapter" style={{ fontSize: 14, fontStyle: "normal" }}>{s.n}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 14 }}>{s.t}</div>
                <p style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 10, lineHeight: 1.55 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section wrap">
        <h3 className="display-m" style={{ maxWidth: "22ch", marginBottom: 24 }}>
          Pieces that carry a name — and a maker.
        </h3>
        <p className="body-lg muted" style={{ maxWidth: "56ch", marginBottom: 48 }}>
          Every Orient 499 garment is named after a woman: Kawthar, Sabah, Yafa, Maya, Lina, Amina, Rakia. The name travels with the piece — from the embroiderer's loom to your wardrobe.
        </p>
        <div className="pgrid pgrid-3">
          {data.products.filter(p => ["kawthar-burgundy-dress", "sabah-brocade-blouse", "amina-gold-skirt"].includes(p.id)).map(p => <ProductCard key={p.id} p={p} />)}
        </div>
      </section>
    </main>
  );
}

/* =========================================================
   COLLECTION (Fashion / Décor)
   ========================================================= */
function CollectionPage({ category, title, eyebrow, lede, chapter }) {
  const data = window.O499;
  const route = useRoute();
  const [filter, setFilter] = useStateP(route.params.filter || "all");
  useEffectP(() => { setFilter(route.params.filter || "all"); }, [route.params.filter]);

  const items = data.products.filter(p => p.category === category);
  const types = ["all", ...Array.from(new Set(items.map(p => p.type)))];
  const filtered = filter === "ooak"
    ? items.filter(p => p.ooak)
    : filter === "all"
    ? items
    : items.filter(p => p.type === filter);

  const hero = items[0];

  return (
    <main>
      <section className="section wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(40px, 6vw, 80px)", alignItems: "end" }}>
          <div>
            <span className="chapter">{chapter}</span>
            <h1 className="display-xl" style={{ marginTop: 16 }}>
              {title}
            </h1>
            <p className="lead" style={{ marginTop: 24, maxWidth: "40ch" }}>
              {lede}
            </p>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "end", gap: 24, flexWrap: "wrap" }}>
            <div style={{ borderLeft: "1px solid var(--border)", paddingLeft: 24 }}>
              <div className="eyebrow">In this collection</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 42, lineHeight: 1, marginTop: 6, color: "var(--primary)" }}>{items.length}</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>of {data.catalogue.productsTotal} live in the catalogue</div>
            </div>
            <div style={{ borderLeft: "1px solid var(--border)", paddingLeft: 24 }}>
              <div className="eyebrow">From</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 42, lineHeight: 1, marginTop: 6 }}>
                <span style={{ fontSize: 18, color: "var(--muted)" }}>$</span>{Math.min(...items.map(p => p.price))}
              </div>
              <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>USD · verified</div>
            </div>
          </div>
        </div>

        <div className="chipbar">
          {types.map((t) => (
            <button key={t} className={"chip" + (filter === t ? " active" : "")} onClick={() => setFilter(t)}>
              {t === "all" ? "All pieces" : t}
            </button>
          ))}
          <button className={"chip" + (filter === "ooak" ? " active" : "")} onClick={() => setFilter("ooak")} style={{ borderColor: "var(--primary)", color: filter === "ooak" ? "var(--paper)" : "var(--primary)", background: filter === "ooak" ? "var(--primary)" : "transparent" }}>
            One of a kind
          </button>
        </div>

        <div className="pgrid">
          {filtered.map(p => <ProductCard key={p.id} p={p} />)}
        </div>

        {filtered.length === 0 && (
          <div style={{ padding: "80px 0", textAlign: "center", color: "var(--muted)" }}>
            No pieces in this filter — try "All pieces" or visit the boutique.
          </div>
        )}
      </section>

      <section className="section-tight" style={{ background: "var(--surface)" }}>
        <div className="wrap">
          <Notice>
            <strong>Live catalogue.</strong> The full house holds <strong>{data.catalogue.productsTotal} pieces · {data.catalogue.variantsTotal} variants</strong> across both categories, ranging <strong>${data.catalogue.priceMin}–${data.catalogue.priceMax} USD</strong> as of {data.catalogue.asOf}. Some seasonal pieces are visible only at the Alserkal boutique — <a href="#/boutique" style={{ color: "var(--primary)", textDecoration: "underline" }}>plan a visit</a>.
          </Notice>
        </div>
      </section>
    </main>
  );
}

function FashionPage() {
  return (
    <CollectionPage
      category="fashion"
      chapter="i · the wardrobe"
      title={<span>The wardrobe —<br/><em style={{ color: "var(--primary)" }}>named, embroidered, slow.</em></span>}
      eyebrow="Fashion"
      lede="Jellabas, abayas, embroidered dresses, hand-stitched sets, brocade tops, hand-crocheted scarves. Each piece named after a woman; each one made over weeks."
    />
  );
}

function DecorPage() {
  return (
    <CollectionPage
      category="decor"
      chapter="ii · for the home"
      title={<span>Home & décor —<br/><em style={{ color: "var(--primary)" }}>brass · glass · linen.</em></span>}
      eyebrow="Home & Décor"
      lede="Hand-hammered brass, mouth-blown Levantine glass, marquetry and mother-of-pearl furniture, olive-oil soap, embroidered table linen. Collectible objects, made to last."
    />
  );
}

/* =========================================================
   PRODUCT DETAIL
   ========================================================= */
function ProductPage({ id }) {
  const data = window.O499;
  const p = data.products.find(x => x.id === id);
  const { addToCart } = useApp();
  const [qty, setQty] = useStateP(1);

  if (!p) {
    return (
      <main className="section wrap">
        <h2 className="display-m">Piece not found.</h2>
        <p style={{ marginTop: 16 }}><a href="#/fashion" className="btn-link">Browse the collection <span className="arrow"></span></a></p>
      </main>
    );
  }

  const related = data.products
    .filter(x => x.category === p.category && x.id !== p.id)
    .slice(0, 4);

  return (
    <main>
      <section className="section wrap">
        <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 36 }}>
          <a href={"#/" + (p.category === "fashion" ? "fashion" : "home-decor")}>{p.category === "fashion" ? "Fashion" : "Home & Décor"}</a>
          <span style={{ color: "var(--primary)" }}>·</span>
          <span>{p.type}</span>
        </div>

        <div className="pdp">
          <div className="pdp-gallery">
            <div className="pdp-img-main">
              <img src={p.img} alt={p.name} />
            </div>
            <div className="pdp-thumbs">
              <div className="pdp-thumb active"><img src={p.img} alt="" /></div>
              <div className="pdp-thumb">
                <Placeholder stockSeed={"o499-pdp-" + p.id + "-d"} stockTags="Detail" aspect="1/1" style={{ height: "100%" }} />
              </div>
              <div className="pdp-thumb">
                <Placeholder stockSeed={"o499-pdp-" + p.id + "-s"} stockTags="Styled" aspect="1/1" style={{ height: "100%" }} />
              </div>
              <div className="pdp-thumb">
                <Placeholder stockSeed={"o499-pdp-" + p.id + "-m"} stockTags="Maker" aspect="1/1" style={{ height: "100%" }} />
              </div>
            </div>
          </div>

          <div className="pdp-info">
            <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
              <span className="pill">{p.type}</span>
              {p.ooak && <span className="pill ooak">One of a kind</span>}
            </div>
            <h1 className="display-m">{p.name}</h1>
            <div className="pdp-price"><span className="currency">$</span>{fmtUSD(p.price)} <span style={{ fontFamily: "var(--sans)", fontSize: 12, color: "var(--muted)", letterSpacing: "0.18em", textTransform: "uppercase", verticalAlign: "middle", marginLeft: 8 }}>USD</span></div>

            <dl className="pdp-spec">
              <div>
                <dt>Material</dt>
                <dd>{p.material}</dd>
              </div>
              <div>
                <dt>Technique</dt>
                <dd>{p.material.includes("hammered") ? "Hand-hammered" : p.material.includes("embroidered") ? "Hand-embroidered" : p.material.includes("blown") ? "Mouth-blown" : "Hand-made"}</dd>
              </div>
              <div>
                <dt>Maker</dt>
                <dd>{p.artisan}</dd>
              </div>
              <div>
                <dt>Provenance</dt>
                <dd>Lebanon · slow-made</dd>
              </div>
            </dl>

            <p className="body-lg muted" style={{ maxWidth: "44ch" }}>
              Designed hand-in-hand with the master at the bench. Each piece is patiently made, signed off and named — never identical to the next.
            </p>

            <div className="pdp-add">
              <div className="qty">
                <button onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
                <span className="n">{qty}</span>
                <button onClick={() => setQty(qty + 1)}>+</button>
              </div>
              <button className="btn btn-gold" onClick={() => addToCart(p, qty)} style={{ flex: 1, justifyContent: "center" }}>
                Add to bag · ${fmtUSD(p.price * qty)}
              </button>
            </div>

            <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--border)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div>
                <div className="eyebrow">Shipping</div>
                <div style={{ fontSize: 13, marginTop: 6, color: "var(--muted)" }}>Worldwide · checkout completes on Shopify (USD)</div>
              </div>
              <div>
                <div className="eyebrow">See it in person</div>
                <div style={{ fontSize: 13, marginTop: 6, color: "var(--muted)" }}>The Yard, WH 48a · <a href="#/boutique" style={{ textDecoration: "underline" }}>visit the boutique</a></div>
              </div>
            </div>

            <div className="quote-block">
              <div className="q" style={{ fontSize: 24 }}>"This is luxury now. The handmade and unique."</div>
              <div className="by">Frank Luca · co-founder</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight wrap">
        <SectionHeader
          chapter="·"
          eyebrow={"More from " + p.artisan.split("—")[0].trim()}
          title="Continue the collection."
        />
        <div className="pgrid">
          {related.map(r => <ProductCard key={r.id} p={r} />)}
        </div>
      </section>
    </main>
  );
}

/* =========================================================
   BOUTIQUE
   ========================================================= */
function BoutiquePage() {
  const c = window.O499.contact;
  const mapSrc = "https://www.google.com/maps?q=" + encodeURIComponent(c.dubai.address) + "&output=embed";
  return (
    <main>
      <section className="boutique-hero">
        <div className="info">
          <span className="chapter">i · the boutique</span>
          <h1 className="display-l" style={{ marginTop: 14 }}>
            <em style={{ color: "var(--primary)" }}>Warehouse 48a.</em>
          </h1>
          <p style={{ fontFamily: "var(--serif)", fontSize: "clamp(22px, 2vw, 28px)", lineHeight: 1.3, marginTop: 14, color: "var(--muted)" }}>
            The Yard · Alserkal Avenue · Dubai
          </p>
          <p className="lead" style={{ marginTop: 28, maxWidth: "38ch" }}>
            Orient 499's first international outpost — opened December 2024 inside Alserkal Avenue's craft district. Architecture by <strong style={{ fontWeight: 500 }}>MariaGroup</strong>, designed around the interplay of light and shadow.
          </p>
          <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, borderTop: "1px solid var(--border)", paddingTop: 24 }}>
            <div>
              <div className="eyebrow">Address</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 18, marginTop: 8, lineHeight: 1.4 }}>
                {c.dubai.address}
              </div>
            </div>
            <div>
              <div className="eyebrow">Opened</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 18, marginTop: 8 }}>{c.dubai.opened}</div>
              <div className="eyebrow" style={{ marginTop: 18 }}>Interior</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 18, marginTop: 8 }}>{c.dubai.interior}</div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 16, marginTop: 36, flexWrap: "wrap" }}>
            <a href={"tel:" + c.phoneRaw} className="btn">Call · {c.phone}</a>
            <a href={"mailto:" + c.email} className="btn btn-ghost">{c.email}</a>
          </div>
        </div>
        <div className="img">
          <Placeholder stockSeed="o499-boutique-int-5" stockTags="Stock stand-in · WH 48a interior" aspect="auto" style={{ height: "100%", aspectRatio: "auto" }}/>
        </div>
      </section>

      <section className="section wrap">
        <div className="split-2" style={{ gridTemplateColumns: "1fr 1fr" }}>
          <div>
            <span className="chapter">ii · hours</span>
            <h2 className="display-m" style={{ marginTop: 14 }}>Opening hours</h2>
            <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "auto 1fr", gap: "14px 32px", fontFamily: "var(--serif)", fontSize: 19 }}>
              <div className="eyebrow" style={{ alignSelf: "center", fontFamily: "var(--sans)", fontSize: 11 }}>Sep — May</div>
              <div>Monday – Sunday · 10:30 – 20:00</div>
              <div className="eyebrow" style={{ alignSelf: "center", fontFamily: "var(--sans)", fontSize: 11 }}>Jun — Aug</div>
              <div>Monday – Saturday · 10:30 – 19:00</div>
            </div>
            <div style={{ marginTop: 32 }}>
              <Notice>
                <strong>Confirm before visiting.</strong> Official pages disagree on seasonal hours (boutique · contact · Alserkal directory all list slightly different schedules). We display the brand's seasonal schedule; the Dubai landline is also <strong>client-confirm</strong> — please call <a href={"tel:" + c.phoneRaw} style={{ color: "var(--primary)", textDecoration: "underline" }}>{c.phone}</a> the day-of.
              </Notice>
            </div>
          </div>
          <div>
            <span className="chapter">iii · find us</span>
            <h2 className="display-m" style={{ marginTop: 14 }}>Map</h2>
            <div className="map-frame" style={{ marginTop: 28 }}>
              <iframe
                src={mapSrc}
                title="Orient 499 at Alserkal Avenue, Dubai"
                style={{ width: "100%", height: "100%", border: 0 }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
            </div>
            <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 12 }}>
              Map by address — Warehouse 48a, Alserkal Avenue, Al Quoz 3. Exact unit coordinates not hard-coded.
            </p>
          </div>
        </div>
      </section>

      {/* Beirut heritage */}
      <section className="section-tight" style={{ background: "var(--surface)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="wrap">
          <div className="split-2" style={{ gridTemplateColumns: "1fr 1.2fr" }}>
            <div>
              <span className="chapter">iv · the origin</span>
              <h2 className="display-m" style={{ marginTop: 14 }}>Beirut, since 2006.</h2>
              <p style={{ marginTop: 20, maxWidth: "44ch", color: "var(--muted)", lineHeight: 1.7 }}>
                The house's original boutique sits at <strong style={{ color: "var(--text)", fontWeight: 500 }}>499 Omar Daouk Street</strong>, Mina El Hosn — the address that gives the house its name. It remains open and serves as the atelier.
              </p>
              <div style={{ marginTop: 32, fontSize: 13.5, fontFamily: "var(--serif)", color: "var(--text)", lineHeight: 1.7 }}>
                {c.beirut.address}<br/>
                <span style={{ color: "var(--muted)", fontSize: 12, fontFamily: "var(--sans)", letterSpacing: "0.04em" }}>{c.beirut.hours}</span>
              </div>
            </div>
            <Placeholder stockSeed="o499-beirut-store-1" stockTags="Stock stand-in · Beirut store" aspect="16/10" />
          </div>
        </div>
      </section>
    </main>
  );
}

/* =========================================================
   SUSTAINABILITY
   ========================================================= */
function SustainabilityPage() {
  return (
    <main>
      <section className="section wrap">
        <div style={{ maxWidth: 980 }}>
          <span className="chapter">i · the ethos</span>
          <h1 className="display-xl" style={{ marginTop: 14 }}>
            Sustainability,<br/>
            <em style={{ color: "var(--primary)" }}>the slow way.</em>
          </h1>
          <p className="lead" style={{ marginTop: 32, maxWidth: "44ch" }}>
            We design hand-in-hand with master artisans, accompanying each maker throughout — every piece patiently hand-hammered, hand-stitched or hand-blown. Heritage techniques translated into contemporary forms, rooted in ethical craftsmanship.
          </p>
        </div>
      </section>

      <section className="wrap">
        <div className="key-numbers">
          <div className="kn">
            <div className="big">876</div>
            <div className="lbl">Pieces · {window.O499.catalogue.variantsTotal} variants in live catalogue</div>
          </div>
          <div className="kn">
            <div className="big">0</div>
            <div className="lbl">Mass production · every piece hand-made</div>
          </div>
          <div className="kn">
            <div className="big">20<span style={{ fontSize: "0.5em", color: "var(--muted)" }}>+</span></div>
            <div className="lbl">Years of unbroken artisan partnership</div>
          </div>
        </div>
      </section>

      <section className="section wrap">
        <SectionHeader
          chapter="ii · the four pillars"
          eyebrow="What sustainable luxury means here"
          title="Four commitments."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid var(--border)" }}>
          {[
            { n: "01", t: "Craft preservation", d: "Coppersmiths, glassblowers, embroiderers and soap-makers — Lebanese craft families we've worked with for two decades, ensuring their techniques pass to the next generation." },
            { n: "02", t: "Slow-made by default", d: "No collections to a fashion calendar. Pieces are made over weeks; the maker decides when one is finished." },
            { n: "03", t: "Ethical production", d: "Fair-wage artisan partnerships, transparent provenance, named makers — not anonymous labour." },
            { n: "04", t: "Natural materials", d: "Belgian linen, Italian silk, hand-hammered brass, mouth-blown glass, olive-oil soap. Materials chosen for the piece, not the margin." }
          ].map((s, i) => (
            <div key={s.n} style={{
              padding: "48px 40px",
              borderRight: i % 2 === 0 ? "1px solid var(--border)" : "none",
              borderBottom: i < 2 ? "1px solid var(--border)" : "none",
              background: (i + Math.floor(i / 2)) % 2 === 0 ? "var(--surface)" : "transparent"
            }}>
              <div className="chapter" style={{ fontStyle: "normal" }}>{s.n}</div>
              <h3 className="display-s" style={{ marginTop: 18 }}>{s.t}</h3>
              <p style={{ marginTop: 16, maxWidth: "44ch", color: "var(--muted)", lineHeight: 1.7, fontSize: 14 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="section-tight" style={{ background: "var(--text)", color: "var(--paper)" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <SparrowMark size={36} color="var(--primary)" />
          <h2 className="display-m" style={{ color: "var(--paper)", maxWidth: "26ch", margin: "24px auto", fontStyle: "italic" }}>
            "Playing a pivotal role in preserving Lebanon's artistic legacy."
          </h2>
          <p style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(251, 246, 236, 0.6)" }}>
            On Orient 499 · The National
          </p>
        </div>
      </section>
    </main>
  );
}

/* =========================================================
   JOURNAL
   ========================================================= */
function JournalPage() {
  const data = window.O499;
  return (
    <main>
      <section className="section wrap">
        <span className="chapter">· the journal</span>
        <h1 className="display-xl" style={{ marginTop: 14, maxWidth: "16ch" }}>
          Field notes from the house.
        </h1>
        <p className="lead muted" style={{ marginTop: 24, maxWidth: "44ch" }}>
          Long-form reading from the workshop, the boutique, and the Beirut → Dubai bridge.
        </p>
      </section>
      <section className="wrap" style={{ paddingBottom: 96 }}>
        <div className="jgrid">
          {data.journal.map((j) => (
            <a key={j.slug} className="jcard" href={"#/journal/" + j.slug}>
              <div className="jimg"><img src={j.img} alt={j.title} loading="lazy" /></div>
              <span className="meta">{j.meta}</span>
              <h3>{j.title}</h3>
              <p className="muted" style={{ maxWidth: "44ch" }}>{j.dek}</p>
            </a>
          ))}
        </div>
      </section>
    </main>
  );
}

function JournalDetailPage({ slug }) {
  const data = window.O499;
  const j = data.journal.find(x => x.slug === slug);
  if (!j) return <main className="section wrap"><h2 className="display-m">Not found.</h2></main>;
  return (
    <main>
      <section className="section wrap" style={{ maxWidth: 820, paddingBottom: 0 }}>
        <span className="meta eyebrow gold">{j.meta}</span>
        <h1 className="display-l" style={{ marginTop: 14 }}>{j.title}</h1>
        <p className="lead muted" style={{ marginTop: 20 }}>{j.dek}</p>
      </section>
      <section className="wrap" style={{ paddingTop: 56 }}>
        <div className="jimg" style={{ aspectRatio: "16/9", overflow: "hidden" }}>
          <img src={j.img} alt={j.title} style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
        </div>
      </section>
      <section className="section wrap" style={{ maxWidth: 760, padding: "72px var(--pad-edge)" }}>
        <div style={{ fontFamily: "var(--serif)", fontSize: 19, lineHeight: 1.7, color: "var(--text)" }}>
          <p style={{ marginTop: 0 }}><em>This is a placeholder essay body.</em> The brand's blog at <code>orient499.com/blogs/story</code> includes verified posts on the Dubai opening and the Iwan Maktabi Lab presentation; full copy for these journals is to be supplied by Orient 499.</p>
          <p>Until then, the journal scaffold is wired: index, detail page, reading flow, related links. Plug in long-form copy when ready.</p>
        </div>
        <SparrowDivider />
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginTop: 24 }}>
          <a href="#/journal" className="btn-link">All journal entries <span className="arrow"></span></a>
          <a href={data.journal.find(x => x.slug !== slug).slug ? "#/journal/" + data.journal.find(x => x.slug !== slug).slug : "#/journal"} className="btn-link">Next entry <span className="arrow"></span></a>
        </div>
      </section>
    </main>
  );
}

/* =========================================================
   CONTACT
   ========================================================= */
function ContactPage() {
  const c = window.O499.contact;
  const [form, setForm] = useStateP({ name: "", email: "", phone: "", interest: "shop", message: "" });
  const [sent, setSent] = useStateP(false);
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <main>
      <section className="section wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(40px, 6vw, 96px)" }}>
          <div>
            <span className="chapter">· enquire</span>
            <h1 className="display-xl" style={{ marginTop: 14 }}>
              Write to us.
            </h1>
            <p className="lead muted" style={{ marginTop: 24, maxWidth: "40ch" }}>
              For shop questions, bespoke commissions, press, or to plan a boutique visit. We reply within 48 hours.
            </p>
            <div style={{ marginTop: 48, borderTop: "1px solid var(--border)", paddingTop: 32 }}>
              <div className="eyebrow gold">Direct</div>
              <div style={{ marginTop: 14, fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.5 }}>
                <a href={"tel:" + c.phoneRaw}>{c.phone}</a><br/>
                <a href={"mailto:" + c.email}>{c.email}</a>
              </div>
              <Notice>
                <strong>Landline · client-confirm.</strong> Official Orient 499 pages currently list two different Dubai landlines. We surface only the verified mobile until the client confirms.
              </Notice>
            </div>

            <div style={{ marginTop: 32 }}>
              <div className="eyebrow gold">Social</div>
              <div style={{ marginTop: 14, fontSize: 14, fontFamily: "var(--serif)" }}>
                <a href={c.social.instagram} target="_blank" rel="noopener noreferrer">Instagram · @orient499</a><br/>
                <a href={c.social.facebook} target="_blank" rel="noopener noreferrer">Facebook · Orient499</a>
              </div>
            </div>
          </div>

          <div style={{ background: "var(--surface)", padding: "clamp(32px, 4vw, 56px)" }}>
            {!sent ? (
              <form onSubmit={submit}>
                <div className="eyebrow gold">Enquiry form</div>
                <h3 className="display-s" style={{ marginTop: 8, marginBottom: 28 }}>How can we help?</h3>
                <div className="fld">
                  <label htmlFor="name">Name</label>
                  <input id="name" required value={form.name} onChange={update("name")} />
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <div className="fld">
                    <label htmlFor="email">Email</label>
                    <input id="email" type="email" required value={form.email} onChange={update("email")} />
                  </div>
                  <div className="fld">
                    <label htmlFor="phone">Phone <span style={{ color: "var(--muted)", letterSpacing: 0, textTransform: "none" }}>(optional)</span></label>
                    <input id="phone" value={form.phone} onChange={update("phone")} />
                  </div>
                </div>
                <div className="fld">
                  <label htmlFor="interest">I'm writing about</label>
                  <select id="interest" value={form.interest} onChange={update("interest")}>
                    <option value="shop">A piece in the collection</option>
                    <option value="bespoke">A bespoke commission</option>
                    <option value="visit">Visiting the Alserkal boutique</option>
                    <option value="press">Press / partnerships</option>
                    <option value="other">Other</option>
                  </select>
                </div>
                <div className="fld">
                  <label htmlFor="msg">Message</label>
                  <textarea id="msg" value={form.message} onChange={update("message")} required></textarea>
                </div>
                <button type="submit" className="btn btn-gold" style={{ marginTop: 8 }}>Send enquiry</button>
                <p style={{ marginTop: 18, fontSize: 11.5, color: "var(--muted)", lineHeight: 1.55 }}>
                  Form posts to Formspree / Netlify Forms + CRM webhook in production. Demo only — your message is not stored.
                </p>
              </form>
            ) : (
              <div style={{ padding: "32px 0" }}>
                <SparrowMark size={36} color="var(--primary)" />
                <h3 className="display-s" style={{ marginTop: 20 }}>Thank you, {form.name || "friend"}.</h3>
                <p style={{ color: "var(--muted)", marginTop: 12 }}>
                  Your message is with us. We reply within 48 hours, usually sooner.
                </p>
                <button onClick={() => { setSent(false); setForm({ name: "", email: "", phone: "", interest: "shop", message: "" }); }} className="btn-link" style={{ marginTop: 24 }}>
                  Write another <span className="arrow"></span>
                </button>
              </div>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}

/* Expose pages */
Object.assign(window, {
  HomePage, StoryPage, FashionPage, DecorPage, ProductPage,
  BoutiquePage, SustainabilityPage, JournalPage, JournalDetailPage,
  ContactPage
});