// pages.jsx — page components for Montroi
const { Navbar, Footer, ProductCard, SectionHeading, CTA, Ic, Logo } = window.MONTROI_COMP;
const { PRODUCTS, ATELIERS, WORKSHOPS, BOUTIQUES } = window.MONTROI_DATA;

const byCategory = (cat) => PRODUCTS.filter(p => p.category === cat);
const find = (handle) => PRODUCTS.find(p => p.handle === handle);

// ═════════════════════════════════════════════════════════════
//  HOME
// ═════════════════════════════════════════════════════════════
function PageHome({ navigate, addToCart, hero }) {
  return (
    <main className="m-home">
      <Hero hero={hero} navigate={navigate}/>
      <MarqueeStrip/>
      <StoryPreview navigate={navigate}/>
      <ProvenanceFeature navigate={navigate}/>
      <DropsBlock navigate={navigate} addToCart={addToCart}/>
      <WorkshopsTeaser navigate={navigate}/>
      <OneOnlyStrip navigate={navigate}/>
      <ConciergeBand navigate={navigate}/>
      <BoutiqueInvite navigate={navigate}/>
      <JournalPreview/>
    </main>
  );
}

// ── Hero (3 layouts via Tweaks: editorial / split / quiet) ─────────
function Hero({ hero, navigate }) {
  if (hero === "split") return <HeroSplit navigate={navigate}/>;
  if (hero === "quiet") return <HeroQuiet navigate={navigate}/>;
  return <HeroEditorial navigate={navigate}/>;
}

function HeroEditorial({ navigate }) {
  return (
    <section className="m-hero m-hero--editorial">
      <div className="m-hero__plate">
        <span className="m-eyebrow m-hero__eye">Vol. XII — Spring/Summer · Dubai</span>
        <h1 className="m-hero__title">
          The most valuable<br/>
          <em>possessions</em> are those<br/>
          with stories to tell.
        </h1>
        <p className="m-hero__lede">
          Soft leather goods, perfumery and artisanal objects, made with master artisans across
          the world. A philosophy of modern nomadism, set down in Dubai since 2014.
        </p>
        <div className="m-hero__ctas">
          <CTA kind="primary" onClick={() => navigate("/shop")}>Explore the collections</CTA>
          <CTA kind="ghost" onClick={() => navigate("/workshops")}>Book a workshop</CTA>
        </div>
        <div className="m-hero__meta">
          <span><b>20+</b> Workshops worldwide</span>
          <span><b>14</b> Grasse-made scents · One&Only</span>
          <span><b>WH 49</b> Alserkal Avenue · Dubai</span>
        </div>
      </div>
      <div className="m-hero__art">
        <figure className="m-hero__shot m-hero__shot--lead">
          <img src="media/product-leather-travel-box-beige.webp" alt="Sand-coloured travel box"/>
          <figcaption>Travel Box, Sand — Bergamo workshop, vegetable-tanned hide.</figcaption>
        </figure>
        <figure className="m-hero__shot m-hero__shot--side">
          <img src="media/product-tribal-oud-diffuser.webp" alt="Tribal Oud travertine diffuser"/>
          <figcaption>Tribal Oud XL · travertine, 500ml.</figcaption>
        </figure>
        <div className="m-hero__stamp">
          <span>MONTROI</span><i></i><span>EST. MMXIV</span><i></i><span>DUBAI</span>
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ navigate }) {
  return (
    <section className="m-hero m-hero--split">
      <div className="m-hero__half m-hero__half--art">
        <img src="media/product-leather-carthage-backpack-brown.webp" alt="Tobacco backpack"/>
      </div>
      <div className="m-hero__half m-hero__half--copy">
        <span className="m-eyebrow">A house of modern nomadism</span>
        <h1 className="m-hero__title m-hero__title--big">
          Made slowly,<br/>made everywhere,<br/><em>brought home</em>.
        </h1>
        <p className="m-hero__lede">
          A luxury house with 20+ workshops worldwide — from Grasse to Jebel Akhdar to Jaipur to
          Ubrique. Travel journals, leather, fragrance and objects, each one with a place behind it.
        </p>
        <div className="m-hero__ctas">
          <CTA kind="primary" onClick={() => navigate("/shop")}>Shop the collection</CTA>
          <CTA kind="ghost" onClick={() => navigate("/provenance")}>Visit the ateliers</CTA>
        </div>
      </div>
    </section>
  );
}

function HeroQuiet({ navigate }) {
  return (
    <section className="m-hero m-hero--quiet">
      <span className="m-eyebrow">Montroi — Dubai · est. 2014</span>
      <h1 className="m-hero__title m-hero__title--quiet">
        The most valuable<br/>possessions are those<br/>with <em>stories to tell</em>.
      </h1>
      <div className="m-hero__ctas">
        <CTA kind="primary" onClick={() => navigate("/shop")}>Enter the collection</CTA>
        <CTA kind="ghost" onClick={() => navigate("/story")}>The Montroi story</CTA>
      </div>
      <div className="m-hero__quietRow">
        <figure><img src="media/product-leather-pouch.webp" alt=""/><figcaption>Suede pouch · Ubrique</figcaption></figure>
        <figure><img src="media/product-mughal-jade-diffuser.webp" alt=""/><figcaption>Mughal Jade · Carrara</figcaption></figure>
        <figure><img src="media/product-nomad-craft-pot.webp" alt=""/><figcaption>Lotus papermache · Jaipur</figcaption></figure>
        <figure><img src="media/product-mughal-incense-edp.webp" alt=""/><figcaption>Mughal Incense · Grasse</figcaption></figure>
      </div>
    </section>
  );
}

// ── Marquee of places (slow, decorative) ───────────────────────────
function MarqueeStrip() {
  const places = ["Grasse", "Jebel Akhdar", "Jaipur", "Ubrique", "Marrakech", "Bergamo", "Dubai",
                  "Valencia", "Tivoli", "Carrara"];
  const row = places.concat(places);
  return (
    <div className="m-marq" aria-hidden="true">
      <div className="m-marq__track">
        {row.map((p, i) => <span key={i} className="m-marq__item">— {p}</span>)}
      </div>
    </div>
  );
}

// ── Story preview ──────────────────────────────────────────────────
function StoryPreview({ navigate }) {
  return (
    <section className="m-story">
      <div className="m-story__l">
        <span className="m-eyebrow">I. The Montroi Story</span>
        <h2 className="m-h2">
          A return to the <em>old ways</em> —<br/>
          craft, provenance, longevity.
        </h2>
      </div>
      <div className="m-story__r">
        <p className="m-lede">
          Montroi was founded in Dubai in 2014 by Enrique Hormigo and Samir Aghera, and named
          after the small Valencian town that once sat on the Silk Road. It is a house of
          modern nomadism: a slow, story-led answer to fast consumption.
        </p>
        <p className="m-lede">
          We work with more than twenty workshops across the world — chosen for excellence,
          authenticity and cultural roots. Every piece is a small travel journal of its own.
        </p>
        <CTA kind="ghost" onClick={() => navigate("/story")}>Read the story</CTA>
      </div>
    </section>
  );
}

// ── Provenance feature (4 atelier cards in editorial layout) ───────
function ProvenanceFeature({ navigate }) {
  return (
    <section className="m-prov">
      <SectionHeading
        eyebrow="II. Provenance"
        title={<>Four journeys. <em>One thread.</em></>}
        lede="The journal is written across continents — by perfumers, distillers, leather masters and metalsmiths. Each Montroi piece is signed, in some quiet way, by the place it came from."
      />
      <div className="m-prov__grid">
        {ATELIERS.map((a, i) => (
          <article key={a.id} className={`m-prov__card m-prov__card--${i}`}>
            <span className="m-prov__no">{String(i + 1).padStart(2, "0")}</span>
            <span className="m-prov__discipline">{a.discipline}</span>
            <h3 className="m-prov__place">
              {a.place}
              <small>{a.country}</small>
            </h3>
            <p>{a.summary}</p>
            <button className="m-prov__more" onClick={() => navigate("/provenance")}>
              Visit the workshop <Ic.arrow/>
            </button>
          </article>
        ))}
      </div>
    </section>
  );
}

// ── Drops block (three editorial collections) ──────────────────────
function DropsBlock({ navigate, addToCart }) {
  const drops = [
    {
      key: "leather",
      eyebrow: "III · Leather",
      title: "The Travel Library",
      copy: "Soft leather goods made in Ubrique, Marrakech and Bergamo. Bags made in Italy. Hand-cut, saddle-stitched, made to age.",
      picks: ["leather-travel-box-beige", "leather-carthage-backpack-brown", "leather-pouch-suede"],
      bg: "var(--surface)",
    },
    {
      key: "fragrance",
      eyebrow: "IV · Fragrance",
      title: "Composed in Grasse",
      copy: "Fragrances made by master perfumers in the world capital of perfumery — including fourteen scents for One&Only.",
      picks: ["mughal-incense-edp", "tribal-oud-diffuser", "per-fumum-ritual"],
      bg: "color-mix(in oklch, var(--surface) 50%, var(--bg))",
    },
    {
      key: "home",
      eyebrow: "V · Home & Objects",
      title: "Nomad Craft",
      copy: "Hand-shaped clay, brass and papermache from Jaipur. Marble vessels from Carrara. Quiet rituals for the table.",
      picks: ["nomad-craft-pot", "mughal-jade-diffuser", "nomad-brass-pot"],
      bg: "color-mix(in oklch, var(--bg) 70%, var(--surface))",
    },
  ];
  return (
    <section className="m-drops">
      <SectionHeading
        eyebrow="The collection — Vol. XII"
        title={<>Three drops. <em>One journal.</em></>}
        lede="Read each chapter, or wander between them. Prices are listed in USD, exactly as they appear in the live catalogue."
      />
      <div className="m-drops__stack">
        {drops.map((d) => (
          <article key={d.key} className="m-drop" style={{ background: d.bg }}>
            <div className="m-drop__copy">
              <span className="m-eyebrow">{d.eyebrow}</span>
              <h3 className="m-h3">{d.title}</h3>
              <p>{d.copy}</p>
              <CTA kind="ghost" onClick={() => navigate(`/shop/${d.key}`)}>Open the chapter</CTA>
            </div>
            <div className="m-drop__rail">
              {d.picks.map(handle => {
                const p = find(handle); if (!p) return null;
                return <ProductCard key={handle} product={p} onAdd={addToCart} navigate={navigate} size="S"/>;
              })}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ── Workshops teaser ───────────────────────────────────────────────
function WorkshopsTeaser({ navigate }) {
  return (
    <section className="m-wks">
      <div className="m-wks__hd">
        <span className="m-eyebrow">VI · The Atelier</span>
        <h2 className="m-h2">
          Spend an afternoon <em>making something</em><br/>at the Alserkal flagship.
        </h2>
      </div>
      <div className="m-wks__grid">
        {WORKSHOPS.map((w, i) => (
          <article key={w.id} className="m-wk">
            <div className="m-wk__shot"><img src={w.image} alt=""/></div>
            <span className="m-wk__no">No. {String(i + 1).padStart(2, "0")}</span>
            <h3 className="m-h4">{w.title}</h3>
            <dl className="m-wk__dl">
              <dt>Duration</dt><dd>{w.duration}</dd>
              <dt>Seats</dt><dd>{w.seats}</dd>
            </dl>
            <p>{w.summary}</p>
            <button className="m-wk__book" onClick={() => navigate("/workshops")}>
              Request a session <Ic.arrow/>
            </button>
          </article>
        ))}
      </div>
    </section>
  );
}

// ── One&Only strip ─────────────────────────────────────────────────
function OneOnlyStrip({ navigate }) {
  return (
    <section className="m-oo">
      <div className="m-oo__art">
        <img src="media/product-mughal-incense-edp.webp" alt=""/>
      </div>
      <div className="m-oo__copy">
        <span className="m-eyebrow">A partnership</span>
        <h2 className="m-h2 m-h2--light">One&Only <em>×</em> Montroi</h2>
        <p>
          Fourteen fresh, unique scents — hand-crafted in Grasse — composed for the resorts of
          One&Only. Each fragrance is a small portrait of a place: an island, a desert, a coast.
        </p>
        <ul className="m-oo__list">
          <li><b>14</b> Signature scents</li>
          <li><b>100ml</b> Eau de parfum — $180</li>
          <li><b>10ml</b> Travel format — $32</li>
        </ul>
        <CTA kind="onLight" onClick={() => navigate("/shop/fragrance")}>Browse the collection</CTA>
      </div>
    </section>
  );
}

// ── Concierge band ─────────────────────────────────────────────────
function ConciergeBand({ navigate }) {
  return (
    <section className="m-conc">
      <div className="m-conc__l">
        <span className="m-eyebrow">VII · Concierge</span>
        <h2 className="m-h2">Gifts <em>commissioned,</em><br/>not chosen.</h2>
        <p>
          For occasions that ask for more: monogrammed leathers, bespoke fragrance, curated sets
          delivered worldwide. Tell us the recipient, the occasion and the budget — our concierge
          will write back, by hand, within one working day.
        </p>
        <CTA kind="primary" onClick={() => navigate("/gifting")}>Open a gifting enquiry</CTA>
      </div>
      <ul className="m-conc__chips">
        <li><span>01</span><b>Monogram</b><i>Foil or blind, three letters.</i></li>
        <li><span>02</span><b>Bespoke fragrance</b><i>A nose, a brief, a 50ml bottle.</i></li>
        <li><span>03</span><b>Hand-painted leather</b><i>One-of-one art on card or wallet.</i></li>
        <li><span>04</span><b>Curated set</b><i>A library of objects, written for them.</i></li>
      </ul>
    </section>
  );
}

// ── Boutique invite ────────────────────────────────────────────────
function BoutiqueInvite({ navigate }) {
  return (
    <section className="m-binv">
      <SectionHeading
        eyebrow="VIII · The Boutiques"
        title={<>Come <em>visit</em>.</>}
        lede="The Alserkal flagship opened in early 2025: a working atelier as much as a shop — perfume blending, scent workshops, leather hand-painting, weekly."
        align="center"
      />
      <div className="m-binv__grid">
        {BOUTIQUES.map((b) => (
          <article key={b.id} className="m-binv__card">
            <div className="m-binv__shot"><img src={b.image} alt=""/></div>
            <div className="m-binv__meta">
              <h3 className="m-h4">{b.name}</h3>
              <p className="m-binv__addr">{b.address}<br/>{b.city}</p>
              <p className="m-binv__hours"><b>Hours.</b> {b.hours}</p>
              <p className="m-binv__note">{b.note}</p>
              <button className="m-prov__more" onClick={() => navigate("/boutiques")}>
                Plan your visit <Ic.arrow/>
              </button>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ── Journal preview ────────────────────────────────────────────────
function JournalPreview() {
  const entries = [
    { tag: "Letter from Grasse", date: "May 2026", title: "Composing the third One&Only chapter.",
      img: "media/product-bosphorus-room-scent.webp" },
    { tag: "Letter from Oman", date: "April 2026", title: "Twelve days at the Damask-rose harvest.",
      img: "media/product-himalayan-orchid-reed-oil.webp" },
    { tag: "Letter from Jaipur", date: "March 2026", title: "Five hands on a single iron pot.",
      img: "media/product-nomad-handpainted-iron-pot-set.webp" },
  ];
  return (
    <section className="m-jrn">
      <header className="m-jrn__hd">
        <span className="m-eyebrow">IX · The Journal</span>
        <h2 className="m-h2">Letters from the workshops.</h2>
      </header>
      <div className="m-jrn__grid">
        {entries.map((e, i) => (
          <article key={i} className="m-jrn__card">
            <div className="m-jrn__shot"><img src={e.img} alt=""/></div>
            <span className="m-eyebrow">{e.tag} · {e.date}</span>
            <h3 className="m-h4">{e.title}</h3>
          </article>
        ))}
      </div>
    </section>
  );
}

window.MONTROI_PAGES_HOME = { PageHome };