// Page components for each route

// ============ HOME ============
const HomePage = ({ setPage, openProduct }) => {
  const ss26 = PRODUCTS.filter(p => p.line && p.line.includes("SS26")).slice(0, 4);
  return (
    <main className="mo-page mo-page--home">
      {/* HERO */}
      <section className="mo-hero">
        <div className="mo-hero__media">
          <img src="media/lookbook-01-ss26011.webp" alt="Maryam Omaira SS26 — crepe corset gown" />
        </div>
        <div className="mo-hero__overlay">
          <div className="mo-hero__inner">
            <div className="mo-eyebrow mo-eyebrow--on-dark">
              <span className="mo-eyebrow__num">01</span>
              <span>Spring / Summer 2026  ·  Maison Maryam Omaira</span>
            </div>
            <h1 className="mo-display mo-display--hero">
              Haute couture, <em>intricately</em> simple.
            </h1>
            <p className="mo-hero__sub">
              An Emirati couture house in Dubai Design District — heritage motifs reimagined as
              contemporary luxury, in the finest fabrics from Europe and beyond.
            </p>
            <div className="mo-hero__actions">
              <button className="mo-btn mo-btn--blush" onClick={() => setPage("appointments")}>Book an appointment</button>
              <button className="mo-btn mo-btn--ghost" onClick={() => setPage("shop")}>Shop ready-to-wear →</button>
            </div>
          </div>
          <div className="mo-hero__meta">
            <div><span>Est.</span><strong>2010</strong></div>
            <div><span>Atelier</span><strong>Dubai Design District</strong></div>
            <div><span>By</span><strong>Maryam Al Omaira</strong></div>
          </div>
        </div>
        <div className="mo-hero__scroll">scroll  ·  explore the house</div>
      </section>

      {/* TIER ENTRIES */}
      <section className="mo-sec mo-tiers">
        <div className="mo-tiers__grid">
          <article className="mo-tier" onClick={() => setPage("bridal")}>
            <div className="mo-tier__img">
              <img src="media/lookbook-03-ss2606-bridal.webp" alt="Bridal couture" />
            </div>
            <div className="mo-tier__body">
              <div className="mo-eyebrow"><span className="mo-eyebrow__num">I</span><span>The Bride</span></div>
              <h3 className="mo-display">Bridal &amp; Couture</h3>
              <p>By appointment. A personal consultation at our Dubai atelier — sketch, fabric, fitting, and a one-of-a-kind silhouette built for your day.</p>
              <span className="mo-link mo-link--arrow">Begin your bridal journey →</span>
            </div>
          </article>
          <article className="mo-tier" onClick={() => setPage("shop")}>
            <div className="mo-tier__img">
              <img src="media/lookbook-04-ss2609.webp" alt="Ready-to-wear" />
            </div>
            <div className="mo-tier__body">
              <div className="mo-eyebrow"><span className="mo-eyebrow__num">II</span><span>The Wardrobe</span></div>
              <h3 className="mo-display">Ready-to-Wear</h3>
              <p>Shop the seasons. Dresses, kaftans, evening pieces and the kids&apos; line — every garment in real prices, every garment dispatched from Dubai.</p>
              <span className="mo-link mo-link--arrow">Browse SS26 →</span>
            </div>
          </article>
        </div>
      </section>

      {/* DESIGNER TEASER */}
      <section className="mo-sec mo-designer">
        <div className="mo-designer__inner">
          <div className="mo-designer__media">
            <div className="mo-placeholder mo-placeholder--portrait">
              <div className="mo-placeholder__stripes" />
              <div className="mo-placeholder__label">
                <span className="mo-eyebrow">Founder portrait — to supply</span>
                <em>Maryam Al Omaira — atelier, d3</em>
              </div>
            </div>
          </div>
          <div className="mo-designer__copy">
            <Eyebrow num="02">The Designer</Eyebrow>
            <h2 className="mo-display">A house with one signature.</h2>
            <p className="mo-lede">
              For over a decade — and since 2010 — designer Maryam Al Omaira has built a couture
              house rooted in Dubai Design District, drawing on Middle-Eastern heritage and
              translating it into intricately simple, grandly luxurious silhouettes.
            </p>
            <p className="mo-body">
              The house operates two lines under one hand: <em>Maryam Omaira New Couture</em> and
              <em> Maryam Omaira Jewellery</em>. Every gown is cut, draped and finished at our d3
              atelier — only the finest fabrics, sourced and imported from Europe and beyond.
            </p>
            <div className="mo-designer__facts">
              <div><strong>12+</strong><span>years in the UAE</span></div>
              <div><strong>7</strong><span>years in d3</span></div>
              <div><strong>199</strong><span>pieces in catalogue</span></div>
            </div>
            <button className="mo-btn mo-btn--outline" onClick={() => setPage("designer")}>Meet the designer →</button>
          </div>
        </div>
      </section>

      {/* SS26 STRIP */}
      <section className="mo-sec mo-strip">
        <div className="mo-strip__head">
          <div>
            <Eyebrow num="03">SS26 ·  In store now</Eyebrow>
            <h2 className="mo-display">The Spring collection.</h2>
          </div>
          <button className="mo-link mo-link--arrow" onClick={() => setPage("shop")}>View all  ·  {PRODUCTS.length} pieces →</button>
        </div>
        <div className="mo-strip__grid">
          {ss26.map(p => <ProductCard key={p.code} p={p} onOpen={openProduct} />)}
        </div>
      </section>

      {/* PRESS */}
      <section className="mo-sec mo-press">
        <Eyebrow num="04">As featured in</Eyebrow>
        <div className="mo-press__row">
          <div className="mo-press__logo">VOGUE  ·  FASHION DUBAI EXPERIENCE</div>
          <div className="mo-press__logo">ARAB NEWS</div>
          <div className="mo-press__logo">FLAIR</div>
        </div>
        <p className="mo-press__quote">
          <span>“</span>Pushing the boundaries of silhouette experimentation — crafting designs that
          embody both intricate simplicity and grand luxury.<span>”</span>
          <em>— The House of Maryam Omaira</em>
        </p>
      </section>

      {/* APPOINTMENT BAND */}
      <section className="mo-band">
        <div className="mo-band__inner">
          <div>
            <div className="mo-eyebrow mo-eyebrow--on-dark">The Atelier  ·  Building 7, d3</div>
            <h2 className="mo-display mo-display--light">Begin with a personal consultation.</h2>
            <p className="mo-band__sub">Bridal, couture and styling appointments at our Dubai Design District atelier.<br/>Monday to Saturday, 09:00–18:00.</p>
          </div>
          <div className="mo-band__cta">
            <button className="mo-btn mo-btn--blush" onClick={() => setPage("appointments")}>Book an appointment</button>
            <a className="mo-btn mo-btn--ghost-light" href={waUrl()} target="_blank" rel="noopener noreferrer">WhatsApp  ·  {CONTACT.whatsappPretty}</a>
          </div>
        </div>
      </section>
    </main>
  );
};

// ============ THE DESIGNER ============
const DesignerPage = ({ setPage }) => (
  <main className="mo-page">
    <section className="mo-sub-hero">
      <div className="mo-sub-hero__inner">
        <Eyebrow num="01">The Designer  ·  Est. 2010</Eyebrow>
        <h1 className="mo-display mo-display--xl">Maryam Al Omaira.</h1>
        <p className="mo-lede mo-lede--center">An Emirati designer who has, since 2010, built a couture house in Dubai — translating Middle-Eastern heritage into intricately simple, grandly luxurious silhouettes.</p>
      </div>
    </section>

    <section className="mo-editorial">
      <div className="mo-editorial__col">
        <div className="mo-placeholder mo-placeholder--portrait mo-placeholder--tall">
          <div className="mo-placeholder__stripes" />
          <div className="mo-placeholder__label">
            <span className="mo-eyebrow">Founder portrait — to supply</span>
            <em>Maryam Al Omaira</em>
          </div>
        </div>
      </div>
      <div className="mo-editorial__col">
        <Eyebrow>Philosophy</Eyebrow>
        <h2 className="mo-display">Intricate simplicity, grand luxury.</h2>
        <p className="mo-body">
          A Haute Couture luxury fashion brand pushing the boundaries of silhouette experimentation —
          this is the language the house has spoken since its founding. Every collection begins
          with a single line, then accumulates the weight of fabric, embroidery and an Emirati eye.
        </p>
        <p className="mo-body">
          The atelier sits inside Dubai Design District&apos;s Building 7 — its seventh year on
          the same address. Two brands operate under one hand: <em>Maryam Omaira New Couture</em> for
          haute-couture and ready-to-wear, and <em>Maryam Omaira Jewellery</em>, a sister line of
          heirloom designs meant to be handed from mother to daughter.
        </p>
        <ul className="mo-stats">
          <li><strong>2010</strong><span>House founded</span></li>
          <li><strong>12+</strong><span>years in the UAE</span></li>
          <li><strong>7</strong><span>years in d3</span></li>
          <li><strong>2</strong><span>brands  ·  Couture, Jewellery</span></li>
        </ul>
      </div>
    </section>

    <section className="mo-band mo-band--alt">
      <div className="mo-band__inner mo-band__inner--narrow">
        <Eyebrow num="II">A Note from Maryam</Eyebrow>
        <p className="mo-pull">
          “Only the finest fabrics, sourced and imported from Europe and various parts across the
          globe. We push the boundaries of silhouette experimentation — crafting designs that
          embody both intricate simplicity and grand luxury.”
        </p>
        <div className="mo-sig">— Maryam Al Omaira, Founder &amp; Creative Director</div>
      </div>
    </section>

    <section className="mo-timeline">
      <Eyebrow num="03">The House, by years</Eyebrow>
      <h2 className="mo-display">A quiet, deliberate timeline.</h2>
      <ol className="mo-timeline__list">
        <li><strong>2010</strong><span>The house is founded in Dubai. First atelier opens.</span></li>
        <li><strong>2016</strong><span>Featured in Vogue Fashion Dubai Experience.</span></li>
        <li><strong>2019</strong><span>Atelier moves to Building 7, Dubai Design District.</span></li>
        <li><strong>2022</strong><span><em>Maryam Omaira Jewellery</em> sister line launches.</span></li>
        <li><strong>2026</strong><span>SS26 — &ldquo;intricately simple, grandly luxurious.&rdquo;</span></li>
      </ol>
      <div style={{marginTop:48}}>
        <button className="mo-btn mo-btn--ink" onClick={() => setPage("appointments")}>Visit the atelier →</button>
      </div>
    </section>
  </main>
);

// ============ BRIDAL ============
const BridalPage = ({ setPage, openProduct }) => {
  const bridalPieces = PRODUCTS.filter(p => p.category === "bridal" || p.category === "couture");
  return (
    <main className="mo-page">
      <section className="mo-hero mo-hero--sub">
        <div className="mo-hero__media">
          <img src="media/lookbook-03-ss2606-bridal.webp" alt="Bridal couture" />
        </div>
        <div className="mo-hero__overlay">
          <div className="mo-hero__inner">
            <Eyebrow num="01">Bridal Couture  ·  By appointment</Eyebrow>
            <h1 className="mo-display mo-display--hero">Your dress, drawn for you.</h1>
            <p className="mo-hero__sub">A personalised bridal journey at Maryam Omaira — sketch, fabric, three fittings, one quietly extraordinary gown.</p>
            <div className="mo-hero__actions">
              <button className="mo-btn mo-btn--blush" onClick={() => setPage("appointments")}>Book a bridal appointment</button>
              <a className="mo-btn mo-btn--ghost" href={waUrl("Hi Maryam Omaira, I'd like to enquire about a bridal appointment.")} target="_blank" rel="noopener noreferrer">Enquire on WhatsApp</a>
            </div>
          </div>
        </div>
      </section>

      <section className="mo-sec mo-process">
        <SectionHead eyebrow="The Journey" title="Four quiet steps to one extraordinary gown." align="center" />
        <ol className="mo-process__list">
          <li>
            <span className="mo-process__num">01</span>
            <h3>Consultation</h3>
            <p>A private session at our d3 atelier. We listen — to the day, the venue, the family, the dress in your imagination.</p>
          </li>
          <li>
            <span className="mo-process__num">02</span>
            <h3>Sketch &amp; fabric</h3>
            <p>Maryam draws your silhouette and we curate fabrics — Europe&apos;s finest mikado, crepe, organza, French lace.</p>
          </li>
          <li>
            <span className="mo-process__num">03</span>
            <h3>Three fittings</h3>
            <p>Toile, muslin, finished gown. Every seam, every dart, fitted by the atelier&apos;s petites mains.</p>
          </li>
          <li>
            <span className="mo-process__num">04</span>
            <h3>The day</h3>
            <p>Final pressing and dressing. Your gown is delivered — and a member of the team is on call until the moment you walk.</p>
          </li>
        </ol>
      </section>

      <section className="mo-sec mo-gallery">
        <SectionHead eyebrow="Bridal &amp; couture" title="A small lookbook." sub="Couture is built to commission. The pieces below are guides to silhouette and fabric — your gown will be drawn for you." />
        <div className="mo-gallery__grid">
          {bridalPieces.map(p => <ProductCard key={p.code} p={p} onOpen={openProduct} />)}
        </div>
        <p className="mo-gallery__foot">Couture prices are quoted on request, after consultation. The figures shown reflect comparable pieces in our public catalogue.</p>
      </section>

      <section className="mo-band">
        <div className="mo-band__inner">
          <div>
            <Eyebrow>The next step</Eyebrow>
            <h2 className="mo-display mo-display--light">Reserve your bridal consultation.</h2>
            <p className="mo-band__sub">Allow 4–6 months for a couture gown; 8–10 months for a fully embroidered bridal silhouette.</p>
          </div>
          <div className="mo-band__cta">
            <button className="mo-btn mo-btn--blush" onClick={() => setPage("appointments")}>Book an appointment</button>
            <a className="mo-btn mo-btn--ghost-light" href={waUrl()} target="_blank" rel="noopener noreferrer">WhatsApp the atelier</a>
          </div>
        </div>
      </section>
    </main>
  );
};

// ============ COUTURE ============
const CouturePage = ({ setPage, openProduct }) => {
  const couture = PRODUCTS.filter(p => p.line && p.line.includes("Couture"));
  const rtwSs26 = PRODUCTS.filter(p => p.line === "RTW SS26");
  return (
    <main className="mo-page">
      <section className="mo-sub-hero mo-sub-hero--couture">
        <Eyebrow num="01">Couture  ·  Spring / Summer 2026</Eyebrow>
        <h1 className="mo-display mo-display--xl">Silhouette experiments,<br/>drawn slowly.</h1>
        <p className="mo-lede mo-lede--center">The SS26 collection — eight pieces in mikado, lamé, fil coupé and silk crepe. Photographed in the d3 atelier.</p>
      </section>

      <section className="mo-runway">
        <div className="mo-runway__big">
          <img src="media/lookbook-02-ss26010.webp" alt="SS26 lamé gown" />
          <div className="mo-runway__caption">
            <div className="mo-eyebrow">Look 02</div>
            <div className="mo-runway__name">SS26010  ·  Crinkle Lamé Off-Shoulder</div>
            <div className="mo-runway__price">{aed(11900)}</div>
          </div>
        </div>
        <div className="mo-runway__sides">
          <div className="mo-runway__side">
            <img src="media/lookbook-01-ss26011.webp" alt="" />
            <div>
              <div className="mo-eyebrow">Look 01</div>
              <div className="mo-runway__name">SS26011  ·  Crepe Corset Mermaid</div>
              <div className="mo-runway__price">{aed(13900)}</div>
            </div>
          </div>
          <div className="mo-runway__side">
            <img src="media/lookbook-04-ss2609.webp" alt="" />
            <div>
              <div className="mo-eyebrow">Look 04</div>
              <div className="mo-runway__name">SS2609  ·  Pleated Chiffon Corset</div>
              <div className="mo-runway__price">{aed(8600)}</div>
            </div>
          </div>
        </div>
      </section>

      <section className="mo-sec mo-gallery">
        <SectionHead eyebrow="The Collection" title="Couture pieces, in detail." />
        <div className="mo-gallery__grid">
          {couture.map(p => <ProductCard key={p.code} p={p} onOpen={openProduct} />)}
        </div>
      </section>

      <section className="mo-sec mo-gallery">
        <SectionHead eyebrow="Ready to wear" title="SS26 RTW." sub="Cut from the same patterns, finished by the same hands — available off-the-rack from the atelier." />
        <div className="mo-gallery__grid">
          {rtwSs26.map(p => <ProductCard key={p.code} p={p} onOpen={openProduct} />)}
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { HomePage, DesignerPage, BridalPage, CouturePage });