// pages-other.jsx — Story, Provenance, Shop, Product, Workshops, Gifting, Boutiques, Contact, Journal
const { Navbar: _Nv, Footer: _Ft, ProductCard, SectionHeading, CTA, Ic, Logo } = window.MONTROI_COMP;
const { PRODUCTS, ATELIERS, WORKSHOPS, BOUTIQUES } = window.MONTROI_DATA;
const byCategory_o = (cat) => PRODUCTS.filter(p => p.category === cat);
const find_o = (handle) => PRODUCTS.find(p => p.handle === handle);
const { useState: useS, useEffect: useE, useMemo: useM } = React;

// ═══════════════════════════════════════════════════════════════════
// STORY
// ═══════════════════════════════════════════════════════════════════
function PageStory({ navigate }) {
  return (
    <main className="m-page m-page--story">
      <header className="m-page__hd">
        <span className="m-eyebrow">Chapter I</span>
        <h1 className="m-page__title">The Montroi <em>Story</em>.</h1>
        <p className="m-page__lede">
          A philosophy of modern nomadism, written in Dubai since 2014 — and stitched, distilled
          and carved across the world.
        </p>
      </header>
      <section className="m-story2">
        <aside className="m-story2__rail">
          <ol>
            <li><a href="#name">The Name</a></li>
            <li><a href="#founders">The Founders</a></li>
            <li><a href="#ethos">The Ethos</a></li>
            <li><a href="#today">Today</a></li>
          </ol>
        </aside>
        <article className="m-story2__body">
          <h2 id="name" className="m-h2">The Name</h2>
          <p>
            Montroi takes its name from a small town in the province of Valencia. Valencia sat on
            one of the western terminals of the Silk Road — a place where things from very far
            away were unloaded, examined, valued, and re-told. That economy of stories — what
            travelled, what survived, what could be passed on — is the lineage we wanted.
          </p>

          <figure className="m-pullquote">
            <blockquote>
              "The most valuable possessions are those with stories to tell."
            </blockquote>
          </figure>

          <h2 id="founders" className="m-h2">The Founders</h2>
          <p>
            In 2014, Enrique Hormigo (Spain) and Samir Aghera (India) opened Montroi in Dubai —
            a city that, like Valencia before it, sits between continents. Enrique had spent his
            life in leather and perfume; Samir, in craft and trade. They began with one rule:
            every object had to come from somewhere — really, traceably, somewhere.
          </p>

          <div className="m-bigfacts">
            <div><b>2014</b><span>Founded in Dubai</span></div>
            <div><b>20+</b><span>Workshops worldwide</span></div>
            <div><b>4</b><span>Founding disciplines</span></div>
            <div><b>342</b><span>Pieces in current catalogue</span></div>
          </div>

          <h2 id="ethos" className="m-h2">The Ethos</h2>
          <p>
            Slow luxury, before the term was a marketing line. Soft leathers tanned to age, not
            to gleam. Fragrances composed in Grasse over months, not days. Objects shaped by hand
            in Jaipur, where the slight asymmetries are evidence — not error.
          </p>
          <p>
            We do not believe in season-on-season turnover. The Montroi journal grows in
            chapters: a new fragrance, a new collaboration, a new workshop opened in a town we
            had to fly to twice before we understood it.
          </p>

          <h2 id="today" className="m-h2">Today</h2>
          <p>
            The Alserkal flagship — Warehouse 49 — opened in early 2025: half boutique, half
            atelier. Visitors blend their own perfume, learn the bakhoor ritual, paint a card
            holder by hand. A second boutique sits in The Dubai EDITION. The fourteen-scent
            collection for One&Only is composed in Grasse and shipped worldwide.
          </p>

          <div className="m-story2__cta">
            <CTA kind="primary" onClick={() => navigate("/provenance")}>Walk the workshops</CTA>
            <CTA kind="ghost" onClick={() => navigate("/shop")}>See the collection</CTA>
          </div>
        </article>
      </section>
    </main>
  );
}

// ═══════════════════════════════════════════════════════════════════
// PROVENANCE
// ═══════════════════════════════════════════════════════════════════
function PageProvenance({ navigate }) {
  const detail = {
    grasse: {
      facts: [
        ["Composition", "By hand, in Grasse"],
        ["Library", "180+ raw materials"],
        ["Lead time", "8–14 months per scent"],
        ["Signature", "One&Only — 14 scents"],
      ],
      lead: "media/product-bosphorus-room-scent.webp",
      side: "media/product-mughal-incense-edp.webp",
    },
    oman: {
      facts: [
        ["Origin", "Jebel Akhdar, 2,000m"],
        ["Season", "Two weeks in spring"],
        ["Yield", "1kg petals → 1ml rose oil"],
        ["Method", "Copper alembic distillation"],
      ],
      lead: "media/product-orange-blossom-hand-cream.webp",
      side: "media/product-himalayan-orchid-reed-oil.webp",
    },
    jaipur: {
      facts: [
        ["Workshop", "A short walk from Hawa Mahal"],
        ["Range", "Bakhoor · clay · brass · iron"],
        ["Tradition", "Architecture-inspired incense"],
        ["Pieces", "Nomad Craft, 25+ objects"],
      ],
      lead: "media/product-nomad-handpainted-iron-pot-set.webp",
      side: "media/product-arabian-hideaway-incense.webp",
    },
    ubrique: {
      facts: [
        ["Ubrique", "Master cutters, hand-stitch"],
        ["Marrakech", "Edge-painted travel goods"],
        ["Bergamo", "Bags made in Italy"],
        ["Materials", "Vegetable-tanned · suede · nubuck"],
      ],
      lead: "media/product-leather-nubuck-briefcase.webp",
      side: "media/product-leather-pouch.webp",
    },
  };
  return (
    <main className="m-page m-page--prov">
      <header className="m-page__hd">
        <span className="m-eyebrow">Chapter II</span>
        <h1 className="m-page__title">Provenance &mdash; <em>the Atelier Map</em>.</h1>
        <p className="m-page__lede">
          Each Montroi line begins as a journey to a workshop. These are the four that anchor the
          journal — perfume, rose, incense, leather.
        </p>
      </header>

      {ATELIERS.map((a, i) => {
        const d = detail[a.id] || { facts: [], lead: "", side: "" };
        const reverse = i % 2 === 1;
        return (
          <section key={a.id} id={a.id} className={`m-prov2 ${reverse ? "is-reverse" : ""}`}>
            <div className="m-prov2__art">
              <figure className="m-prov2__lead"><img src={d.lead} alt=""/></figure>
              <figure className="m-prov2__side"><img src={d.side} alt=""/></figure>
              <span className="m-prov2__coords">{a.coords}</span>
            </div>
            <div className="m-prov2__copy">
              <span className="m-prov__no">{String(i + 1).padStart(2, "0")}</span>
              <span className="m-eyebrow">{a.discipline}</span>
              <h2 className="m-h2 m-prov2__place">{a.place} <small>{a.country}</small></h2>
              <p className="m-lede">{a.summary}</p>
              <dl className="m-prov2__facts">
                {d.facts.map(([k, v]) => (
                  <React.Fragment key={k}><dt>{k}</dt><dd>{v}</dd></React.Fragment>
                ))}
              </dl>
              <CTA kind="ghost" onClick={() => navigate("/shop")}>See what comes from here</CTA>
            </div>
          </section>
        );
      })}

      <section className="m-prov2__cta">
        <h2 className="m-h2">A film, when the rights allow.</h2>
        <p>
          We are stitching together a short film for each atelier — quiet, observational, no
          voiceover. Subscribe to the journal and we'll send the first one when it lands.
        </p>
      </section>
    </main>
  );
}

// ═══════════════════════════════════════════════════════════════════
// SHOP
// ═══════════════════════════════════════════════════════════════════
function PageShop({ navigate, addToCart, sub }) {
  const cats = [
    { key: "leather",   label: "Leather",            count: byCategory_o("leather").length,
      blurb: "Soft leathers — Ubrique, Marrakech, Bergamo." },
    { key: "fragrance", label: "Fragrance",          count: byCategory_o("fragrance").length,
      blurb: "EDP, incense, room scent — composed in Grasse." },
    { key: "home",      label: "Home & Objects",     count: byCategory_o("home").length,
      blurb: "Reed diffusers, Nomad Craft, prints." },
  ];

  const [active, setActive] = useS(sub || "all");
  useE(() => setActive(sub || "all"), [sub]);

  const list = active === "all" ? PRODUCTS : byCategory_o(active);

  return (
    <main className="m-page m-page--shop">
      <header className="m-page__hd">
        <span className="m-eyebrow">Chapter III</span>
        <h1 className="m-page__title">The <em>Collection</em>.</h1>
        <p className="m-page__lede">
          342 pieces in the live journal, $22–$1,770. Every price in US dollars, exactly as it
          appears at checkout.
        </p>
      </header>

      <nav className="m-shopnav" aria-label="Categories">
        <button className={`m-shopnav__tab ${active === "all" ? "is-active" : ""}`}
                onClick={() => { setActive("all"); navigate("/shop"); }}>
          <span>All</span><i>{PRODUCTS.length}</i>
        </button>
        {cats.map(c => (
          <button key={c.key} className={`m-shopnav__tab ${active === c.key ? "is-active" : ""}`}
                  onClick={() => { setActive(c.key); navigate(`/shop/${c.key}`); }}>
            <span>{c.label}</span><i>{c.count}</i>
          </button>
        ))}
      </nav>

      {active !== "all" ? (
        <p className="m-shopnav__blurb">{cats.find(c => c.key === active)?.blurb}</p>
      ) : (
        <p className="m-shopnav__blurb">Wander the whole journal — or read by chapter.</p>
      )}

      <section className="m-shop__grid">
        {list.map(p => (
          <ProductCard key={p.handle} product={p} onAdd={addToCart} navigate={navigate}/>
        ))}
      </section>
    </main>
  );
}

// ═══════════════════════════════════════════════════════════════════
// PRODUCT
// ═══════════════════════════════════════════════════════════════════
function PageProduct({ navigate, addToCart, handle }) {
  const p = find_o(handle);
  const [qty, setQty] = useS(1);
  const [added, setAdded] = useS(false);
  if (!p) {
    return (
      <main className="m-page">
        <header className="m-page__hd">
          <h1 className="m-page__title">Not in the journal.</h1>
          <p className="m-page__lede">That piece has either sold out or moved chapters.</p>
          <CTA kind="primary" onClick={() => navigate("/shop")}>Browse the collection</CTA>
        </header>
      </main>
    );
  }
  const others = PRODUCTS.filter(x => x.category === p.category && x.handle !== p.handle).slice(0, 4);
  return (
    <main className="m-page m-page--product">
      <div className="m-crumb">
        <button onClick={() => navigate("/shop")}>Shop</button>
        <span>·</span>
        <button onClick={() => navigate(`/shop/${p.category}`)}>{p.category}</button>
        <span>·</span>
        <span>{p.title}</span>
      </div>
      <section className="m-pdp">
        <div className="m-pdp__art">
          <figure className="m-pdp__lead"><img src={p.image} alt={p.title}/></figure>
          <figure className="m-pdp__alt"><img src={p.image} alt=""/></figure>
        </div>
        <div className="m-pdp__copy">
          <span className="m-eyebrow">{p.atelier}</span>
          <h1 className="m-h1">{p.title}</h1>
          <p className="m-pdp__price">${p.price.toFixed(2)} <em>USD</em></p>
          <p className="m-pdp__short">{p.short}</p>

          <dl className="m-pdp__dl">
            <dt>Atelier</dt><dd>{p.atelier}</dd>
            <dt>Vendor</dt><dd>MONTROI</dd>
            <dt>SKU</dt><dd>{p.handle.toUpperCase().slice(0, 12)}</dd>
            <dt>Shipping</dt><dd>Worldwide. Complimentary over $200.</dd>
          </dl>

          <div className="m-pdp__buy">
            <div className="m-pdp__qty">
              <button onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
              <span>{qty}</span>
              <button onClick={() => setQty(qty + 1)}>+</button>
            </div>
            <button className="m-cta m-cta--primary m-pdp__add" onClick={() => {
              for (let i = 0; i < qty; i++) addToCart(p);
              setAdded(true); setTimeout(() => setAdded(false), 1400);
            }}>
              <span>{added ? "Added to bag" : "Add to bag"}</span>
              <Ic.arrowLong/>
            </button>
          </div>

          <div className="m-pdp__notes">
            <h4>From the journal</h4>
            <p>
              Crafted in {p.atelier}. Variations in tone, grain or finish are signs of the
              hand — not flaws. Each Montroi piece is meant to live alongside you and gather a
              little more story.
            </p>
          </div>
        </div>
      </section>
      <section className="m-pdp__rel">
        <SectionHeading eyebrow="From the same chapter" title="You may also enjoy."/>
        <div className="m-shop__grid">
          {others.map(o => (
            <ProductCard key={o.handle} product={o} onAdd={addToCart} navigate={navigate}/>
          ))}
        </div>
      </section>
    </main>
  );
}

// ═══════════════════════════════════════════════════════════════════
// WORKSHOPS
// ═══════════════════════════════════════════════════════════════════
function PageWorkshops({ navigate }) {
  const [picked, setPicked] = useS("perfume-blending");
  const w = WORKSHOPS.find(x => x.id === picked) || WORKSHOPS[0];
  const [sent, setSent] = useS(false);
  return (
    <main className="m-page m-page--wk">
      <header className="m-page__hd">
        <span className="m-eyebrow">Chapter IV</span>
        <h1 className="m-page__title">Workshops &amp; <em>Experiences</em>.</h1>
        <p className="m-page__lede">
          Three afternoons at the Alserkal flagship: a perfume, a ritual, a small leather you
          painted yourself. Weekly sessions, by request — schedule confirmed with our concierge.
        </p>
      </header>

      <section className="m-wk2">
        <nav className="m-wk2__nav">
          {WORKSHOPS.map((x, i) => (
            <button key={x.id} className={`m-wk2__tab ${picked === x.id ? "is-active" : ""}`}
                    onClick={() => setPicked(x.id)}>
              <span className="m-wk2__no">No. {String(i + 1).padStart(2, "0")}</span>
              <span className="m-wk2__name">{x.title}</span>
              <span className="m-wk2__dur">{x.duration}</span>
            </button>
          ))}
        </nav>

        <div className="m-wk2__detail">
          <div className="m-wk2__art"><img src={w.image} alt={w.title}/></div>
          <div className="m-wk2__copy">
            <h2 className="m-h2">{w.title}</h2>
            <p className="m-lede">{w.summary}</p>
            <dl className="m-wk2__dl">
              <dt>Duration</dt><dd>{w.duration}</dd>
              <dt>Seats</dt><dd>{w.seats}</dd>
              <dt>Materials</dt><dd>{w.materials}</dd>
              <dt>Where</dt><dd>WH 49, Alserkal Avenue</dd>
            </dl>

            <form className="m-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <h3>Request a session</h3>
              <div className="m-form__row">
                <label>Name<input required type="text" placeholder="Your full name"/></label>
                <label>Party<select><option>1 guest</option><option>2 guests</option>
                  <option>3 guests</option><option>4 guests</option><option>5+ guests</option></select></label>
              </div>
              <div className="m-form__row">
                <label>Email<input required type="email" placeholder="you@email"/></label>
                <label>Phone<input type="tel" placeholder="+971 …"/></label>
              </div>
              <div className="m-form__row">
                <label>Preferred date<input type="date"/></label>
                <label>Time<select><option>Morning</option><option>Afternoon</option><option>Evening</option></select></label>
              </div>
              <label className="m-form__full">Notes (allergies, occasion, language)
                <textarea rows="3" placeholder="Anything we should know."></textarea></label>
              <button className="m-cta m-cta--primary" type="submit">
                <span>{sent ? "Request received — our concierge will write back." : "Send request"}</span><Ic.arrowLong/>
              </button>
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}

// ═══════════════════════════════════════════════════════════════════
// GIFTING
// ═══════════════════════════════════════════════════════════════════
function PageGifting({ navigate }) {
  const [sent, setSent] = useS(false);
  return (
    <main className="m-page m-page--gift">
      <header className="m-page__hd">
        <span className="m-eyebrow">Chapter V</span>
        <h1 className="m-page__title">Concierge <em>Gifting</em>.</h1>
        <p className="m-page__lede">
          For weddings, mileages, milestones and quiet thank-yous. Tell us about the recipient;
          our concierge will compose the gift and reply within one working day.
        </p>
      </header>

      <section className="m-gift">
        <ul className="m-gift__opts">
          <li><span>01</span>
            <h3>Monogram</h3>
            <p>Three letters, foil or blind. Card holders, wallets, journals, leather travel boxes.</p>
            <small>From $110</small></li>
          <li><span>02</span>
            <h3>Bespoke fragrance</h3>
            <p>A brief, a nose, a 50ml extrait — composed in Grasse, delivered in a hand-painted box.</p>
            <small>From $620</small></li>
          <li><span>03</span>
            <h3>Hand-painted leather</h3>
            <p>A one-of-one motif painted on a card holder, wallet or journal by a Ubrique master.</p>
            <small>From $145</small></li>
          <li><span>04</span>
            <h3>Curated sets</h3>
            <p>A small library of objects — a journal, a candle, a scent — assembled for them.</p>
            <small>From $280</small></li>
        </ul>

        <form className="m-form m-form--inline" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          <h3>Open a gifting enquiry</h3>
          <div className="m-form__row">
            <label>Occasion<select>
              <option>Wedding</option><option>Anniversary</option><option>Corporate</option>
              <option>Birthday</option><option>VIP guest</option><option>Other</option></select></label>
            <label>Recipient
              <select><option>One person</option><option>Couple</option><option>Family</option>
                <option>Group of 5–20</option><option>Group of 21+</option></select></label>
          </div>
          <div className="m-form__row">
            <label>Budget per gift<select>
              <option>$100 – $250</option><option>$250 – $500</option>
              <option>$500 – $1,000</option><option>$1,000 – $2,500</option>
              <option>$2,500+</option></select></label>
            <label>Delivery
              <select><option>Dubai (same day)</option><option>UAE / GCC</option>
                <option>International</option></select></label>
          </div>
          <div className="m-form__row">
            <label>Your name<input required type="text" placeholder="Full name"/></label>
            <label>Email<input required type="email" placeholder="you@email"/></label>
          </div>
          <label className="m-form__full">Brief
            <textarea rows="4" placeholder="Tell us about the occasion and the person."></textarea></label>
          <button className="m-cta m-cta--primary" type="submit">
            <span>{sent ? "Enquiry received — we'll reply within a working day." : "Send enquiry"}</span><Ic.arrowLong/>
          </button>
        </form>
      </section>
    </main>
  );
}

// ═══════════════════════════════════════════════════════════════════
// BOUTIQUES
// ═══════════════════════════════════════════════════════════════════
function PageBoutiques({ navigate }) {
  return (
    <main className="m-page m-page--bout">
      <header className="m-page__hd">
        <span className="m-eyebrow">Chapter VI</span>
        <h1 className="m-page__title">The <em>Boutiques</em>.</h1>
        <p className="m-page__lede">
          Come and see what a paper-mache pot weighs in the hand. The flagship sits inside
          Alserkal Avenue, Dubai — half boutique, half working atelier.
        </p>
      </header>

      <section className="m-bout">
        {BOUTIQUES.map((b, i) => (
          <article key={b.id} className={`m-bout__card ${i % 2 ? "is-reverse" : ""}`}>
            <div className="m-bout__art">
              <img src={b.image} alt=""/>
              <div className="m-bout__map">
                <span className="m-eyebrow">Map</span>
                <small>Embed loads on visit · output=embed iframe</small>
                <i className="m-bout__mappin"></i>
              </div>
            </div>
            <div className="m-bout__copy">
              <span className="m-eyebrow">{i === 0 ? "Flagship" : "Boutique"}</span>
              <h2 className="m-h2">{b.name}</h2>
              <p className="m-bout__addr">{b.address}<br/>{b.city}</p>
              <dl className="m-bout__dl">
                <dt>Hours</dt><dd>{b.hours}</dd>
                <dt>Phone</dt><dd><a href="tel:+971507490210">+971 50 749 0210</a></dd>
                <dt>Email</dt><dd><a href="mailto:info@montroi.com">info@montroi.com</a></dd>
                <dt>Programme</dt><dd>{b.note}</dd>
              </dl>
              <div className="m-bout__ctas">
                <CTA kind="primary" onClick={() => navigate("/workshops")}>Book a workshop</CTA>
                <CTA kind="ghost" onClick={() => navigate("/contact")}>Get in touch</CTA>
              </div>
            </div>
          </article>
        ))}
      </section>

      <aside className="m-bout__historical">
        <span className="m-eyebrow">Historical</span>
        <p>
          Montroi held a boutique inside <b>Louvre Abu Dhabi</b> in 2018. Current trading at that
          location is to confirm; please call ahead.
        </p>
      </aside>
    </main>
  );
}

// ═══════════════════════════════════════════════════════════════════
// CONTACT
// ═══════════════════════════════════════════════════════════════════
function PageContact({ navigate }) {
  const [sent, setSent] = useS(false);
  return (
    <main className="m-page m-page--contact">
      <header className="m-page__hd">
        <span className="m-eyebrow">Chapter VII</span>
        <h1 className="m-page__title"><em>Contact</em>.</h1>
        <p className="m-page__lede">
          The fastest way to reach us is the phone. The most useful way is the form —
          a member of our concierge will write back within one working day.
        </p>
      </header>

      <section className="m-contact">
        <aside className="m-contact__rail">
          <dl>
            <dt>Phone</dt><dd><a href="tel:+971507490210">+971 50 749 0210</a></dd>
            <dt>Email</dt><dd><a href="mailto:info@montroi.com">info@montroi.com</a></dd>
            <dt>Flagship</dt>
            <dd>WH 49, Alserkal Avenue<br/>Al Quoz Creative Zone<br/>Dubai, UAE</dd>
            <dt>Hours</dt><dd>Every day · 10AM – 8PM</dd>
            <dt>Press</dt><dd>press@montroi.com</dd>
            <dt>Concierge gifting</dt><dd>concierge@montroi.com</dd>
          </dl>
          <div className="m-contact__socials">
            <a href="https://instagram.com/montroi" target="_blank" rel="noreferrer"><Ic.ig/> @montroi</a>
            <a href="https://facebook.com/montroi" target="_blank" rel="noreferrer"><Ic.fb/> facebook.com/montroi</a>
            <a href="https://vimeo.com/716720227" target="_blank" rel="noreferrer"><Ic.vimeo/> vimeo.com/716720227</a>
          </div>
        </aside>

        <form className="m-form m-form--card" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          <h3>Write to us</h3>
          <div className="m-form__row">
            <label>Subject<select>
              <option>General enquiry</option><option>Workshops</option>
              <option>Concierge gifting</option><option>Press</option>
              <option>Wholesale</option><option>Other</option></select></label>
            <label>Locale<select><option>English</option><option>العربية</option>
              <option>Français</option><option>Русский</option><option>中文</option></select></label>
          </div>
          <div className="m-form__row">
            <label>Name<input required type="text" placeholder="Full name"/></label>
            <label>Email<input required type="email" placeholder="you@email"/></label>
          </div>
          <label className="m-form__full">Message
            <textarea rows="6" placeholder="In as much or as little detail as you like."></textarea></label>
          <button className="m-cta m-cta--primary" type="submit">
            <span>{sent ? "Sent. We'll be in touch." : "Send message"}</span><Ic.arrowLong/>
          </button>
          <p className="m-form__small">
            By writing in you agree to our privacy notice. We do not share your details.
          </p>
        </form>
      </section>
    </main>
  );
}

// ═══════════════════════════════════════════════════════════════════
// JOURNAL (light)
// ═══════════════════════════════════════════════════════════════════
function PageJournal({ navigate }) {
  const issues = [
    { tag: "Letter from Grasse", date: "May 2026", title: "Composing the third One&Only chapter.",
      excerpt: "Two days in the studio of one of our perfumers. A workbench of 180 raw materials, and the slow business of making something that smells the way a hotel feels.",
      img: "media/product-bosphorus-room-scent.webp" },
    { tag: "Letter from Oman", date: "April 2026", title: "Twelve days at the Damask-rose harvest.",
      excerpt: "Up at four. Pick by six. Distil by nine. A field report from Jebel Akhdar — and what a kilo of petals actually yields in copper.",
      img: "media/product-himalayan-orchid-reed-oil.webp" },
    { tag: "Letter from Jaipur", date: "March 2026", title: "Five hands on a single iron pot.",
      excerpt: "Behind the Hidden Desires set: a forging master, a painter, two apprentices and a finisher. The week we spent watching, and what it took home with us.",
      img: "media/product-nomad-handpainted-iron-pot-set.webp" },
    { tag: "Letter from Ubrique", date: "February 2026", title: "On the bevel: the cut that takes a year.",
      excerpt: "The first thing they teach you in Ubrique is how to skive an edge. The second is how long it will be before you can do it.",
      img: "media/product-leather-warfield-wallet-burgundy.webp" },
    { tag: "Letter from Bergamo", date: "January 2026", title: "Made in Italy, in the older sense.",
      excerpt: "How a single bag travels four workshops before it's finished — and why the seam at the strap is the bit we worry about most.",
      img: "media/product-leather-nubuck-briefcase.webp" },
    { tag: "From the boutique", date: "December 2025", title: "A weekend at Warehouse 49.",
      excerpt: "Notes from the first six months of the flagship — the workshops that sold out, the ones that surprised us, and the smell of the place at 10am.",
      img: "media/product-mughal-jade-diffuser.webp" },
  ];
  return (
    <main className="m-page m-page--jrn">
      <header className="m-page__hd">
        <span className="m-eyebrow">Chapter VIII</span>
        <h1 className="m-page__title">The <em>Journal</em>.</h1>
        <p className="m-page__lede">
          Letters from the workshops, and from inside the boutique. Quiet dispatches, sent
          when there is something to say.
        </p>
      </header>
      <section className="m-jrn2">
        {issues.map((e, i) => (
          <article key={i} className={`m-jrn2__card ${i === 0 ? "is-lead" : ""}`}>
            <div className="m-jrn2__shot"><img src={e.img} alt=""/></div>
            <div className="m-jrn2__meta">
              <span className="m-eyebrow">{e.tag} · {e.date}</span>
              <h2 className="m-h3">{e.title}</h2>
              <p>{e.excerpt}</p>
              <button className="m-prov__more">Read the letter <Ic.arrow/></button>
            </div>
          </article>
        ))}
      </section>
    </main>
  );
}

window.MONTROI_PAGES_OTHER = {
  PageStory, PageProvenance, PageShop, PageProduct,
  PageWorkshops, PageGifting, PageBoutiques, PageContact, PageJournal,
};