// More pages: Shop, Jewellery, Appointments, Visit, Contact

// ============ SHOP ============
const ShopPage = ({ openProduct }) => {
  const [cat, setCat] = React.useState("all");
  const [sort, setSort] = React.useState("featured");
  const filtered = React.useMemo(() => {
    let list = cat === "all" ? PRODUCTS : PRODUCTS.filter(p => p.category === cat);
    list = [...list];
    if (sort === "asc") list.sort((a,b) => a.price - b.price);
    else if (sort === "desc") list.sort((a,b) => b.price - a.price);
    return list;
  }, [cat, sort]);

  return (
    <main className="mo-page">
      <section className="mo-shop-hero">
        <div>
          <Eyebrow num="01">Shop  ·  {PRODUCTS.length} pieces</Eyebrow>
          <h1 className="mo-display mo-display--xl">Ready-to-Wear.</h1>
          <p className="mo-lede">Dresses, kaftans, evening pieces and the kids&apos; line. Dispatched from our Dubai atelier — every price in AED.</p>
        </div>
        <div className="mo-shop-hero__note">
          <strong>How couture differs</strong>
          <p>Couture and bridal pieces are made to commission at the atelier. The pieces here are ready to wear, with optional alterations on site.</p>
        </div>
      </section>

      <section className="mo-shop-bar">
        <div className="mo-cats">
          {SHOP_CATEGORIES.map(c => (
            <button key={c.key} onClick={() => setCat(c.key)}
              className={"mo-cat " + (cat === c.key ? "is-on" : "")}>
              <span>{c.label}</span>
              <em>{c.count}</em>
            </button>
          ))}
        </div>
        <label className="mo-sort">
          <span>Sort</span>
          <select value={sort} onChange={e => setSort(e.target.value)}>
            <option value="featured">Featured</option>
            <option value="asc">Price — low to high</option>
            <option value="desc">Price — high to low</option>
          </select>
        </label>
      </section>

      <section className="mo-sec mo-shop-grid-wrap">
        <div className="mo-shop-grid">
          {filtered.map(p => <ProductCard key={p.code} p={p} onOpen={openProduct} />)}
        </div>
        {filtered.length === 0 && <p style={{textAlign:"center", padding:40}}>No pieces in this category yet.</p>}
      </section>
    </main>
  );
};

// ============ JEWELLERY ============
const JewelleryPage = ({ setPage }) => (
  <main className="mo-page">
    <section className="mo-sub-hero mo-sub-hero--jewel">
      <Eyebrow num="01">Maryam Omaira Jewellery  ·  Sister line</Eyebrow>
      <h1 className="mo-display mo-display--xl">Heirlooms,<br/>by hand.</h1>
      <p className="mo-lede mo-lede--center">Timeless designs to be handed down — from mother to daughter, from daughter to granddaughter.</p>
    </section>

    <section className="mo-jewel">
      <div className="mo-jewel__inner">
        <div className="mo-jewel__quote">
          <p>The Jewellery line is a quieter companion to the couture house. It is not new — but new to this site. We are preparing the lookbook with the same care the pieces deserve.</p>
          <em>— The Atelier</em>
        </div>
        <div className="mo-jewel__grid">
          {[1,2,3,4,5,6].map(i => (
            <div key={i} className="mo-placeholder mo-placeholder--square">
              <div className="mo-placeholder__stripes" />
              <div className="mo-placeholder__label">
                <span className="mo-eyebrow">Jewellery imagery — to supply</span>
                <em>Piece {String(i).padStart(2,"0")}  ·  TBD</em>
              </div>
            </div>
          ))}
        </div>
        <div className="mo-jewel__cta">
          <h2 className="mo-display">A private preview, by appointment.</h2>
          <p>If you would like to view the jewellery line ahead of the launch, our team can arrange a private appointment at the d3 atelier.</p>
          <div style={{display:"flex", gap:14, justifyContent:"center", flexWrap:"wrap", marginTop:24}}>
            <button className="mo-btn mo-btn--ink" onClick={() => setPage("appointments")}>Request a private preview</button>
            <a className="mo-btn mo-btn--outline" href={waUrl("Hi Maryam Omaira, I'd like to enquire about the Jewellery line.")} target="_blank" rel="noopener noreferrer">Enquire on WhatsApp</a>
          </div>
        </div>
      </div>
    </section>
  </main>
);

// ============ APPOINTMENTS ============
const AppointmentsPage = () => (
  <main className="mo-page">
    <section className="mo-sub-hero">
      <Eyebrow num="01">Appointments</Eyebrow>
      <h1 className="mo-display mo-display--xl">Book a consultation.</h1>
      <p className="mo-lede mo-lede--center">Bridal, couture, ready-to-wear styling, and jewellery previews — at our Dubai Design District atelier.</p>
    </section>

    <section className="mo-appt">
      <div className="mo-appt__inner">
        <div className="mo-appt__form">
          <AppointmentForm context="Appointment" />
        </div>
        <aside className="mo-appt__side">
          <div className="mo-card-block">
            <Eyebrow>What to expect</Eyebrow>
            <ul className="mo-ticks">
              <li>A 45–60 min private session at the d3 atelier</li>
              <li>Sketching, fabric review and measurement</li>
              <li>Tea, refreshments and a quiet room</li>
              <li>Children welcome; we keep a small play corner</li>
              <li>Parking validated in Building 7</li>
            </ul>
          </div>
          <div className="mo-card-block">
            <Eyebrow>Atelier</Eyebrow>
            <p><strong>{CONTACT.address1}</strong><br/>{CONTACT.address2}<br/>{CONTACT.address3}</p>
            <p style={{marginTop:14}}>{CONTACT.hours}<br/><span style={{opacity:0.55}}>{CONTACT.sundayClosed}</span></p>
          </div>
          <div className="mo-card-block">
            <Eyebrow>Or reach us directly</Eyebrow>
            <div className="mo-contactlist">
              <a href={waUrl()} target="_blank" rel="noopener noreferrer"><span>WhatsApp</span><strong>{CONTACT.whatsappPretty}</strong></a>
              <a href={`tel:${CONTACT.landline}`}><span>Landline</span><strong>{CONTACT.landline}</strong></a>
              <a href={`mailto:${CONTACT.email}`}><span>Email</span><strong>{CONTACT.email}</strong></a>
            </div>
          </div>
        </aside>
      </div>
    </section>
  </main>
);

// ============ VISIT ============
const VisitPage = ({ setPage }) => (
  <main className="mo-page">
    <section className="mo-sub-hero">
      <Eyebrow num="01">Visit</Eyebrow>
      <h1 className="mo-display mo-display--xl">The Atelier  ·  Dubai Design District.</h1>
      <p className="mo-lede mo-lede--center">Seven years on the same address — Building 7, Level 3, Office 309A.</p>
    </section>

    <section className="mo-visit">
      <div className="mo-visit__grid">
        <div className="mo-visit__col">
          <Eyebrow>Address</Eyebrow>
          <p className="mo-address">
            <strong>{CONTACT.address1}</strong><br/>
            {CONTACT.address2}<br/>
            {CONTACT.address3}
          </p>
          <Eyebrow>Hours</Eyebrow>
          <p className="mo-address">
            {CONTACT.hours}<br/>
            <span style={{opacity:0.55}}>{CONTACT.sundayClosed}</span>
          </p>
          <Eyebrow>By car</Eyebrow>
          <p className="mo-body">From Sheikh Zayed Road, take the d3 exit. Visitor parking is on the ground floor of Building 7; we&apos;ll validate your ticket at the atelier.</p>
          <Eyebrow>By metro</Eyebrow>
          <p className="mo-body">The closest stop is Business Bay — a short taxi onward to d3.</p>
          <div style={{display:"flex", gap:14, flexWrap:"wrap", marginTop:18}}>
            <button className="mo-btn mo-btn--ink" onClick={() => setPage("appointments")}>Book an appointment</button>
            <a className="mo-btn mo-btn--outline" href={waUrl()} target="_blank" rel="noopener noreferrer">WhatsApp the atelier</a>
          </div>
        </div>
        <div className="mo-visit__col">
          <div className="mo-map">
            <iframe
              title="Maryam Omaira atelier — Dubai Design District"
              src="https://www.google.com/maps?q=Dubai%20Design%20District%20Building%207&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
            <div className="mo-map__pin">
              <span>Approximate pin  ·  Building 7</span>
              <small>25.1886 N  ·  55.2977 E</small>
            </div>
          </div>
          <div className="mo-placeholder mo-placeholder--wide" style={{marginTop:24}}>
            <div className="mo-placeholder__stripes" />
            <div className="mo-placeholder__label">
              <span className="mo-eyebrow">Atelier interior — to supply</span>
              <em>d3 Building 7 — atelier salon</em>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
);

// ============ CONTACT ============
const ContactPage = () => (
  <main className="mo-page">
    <section className="mo-sub-hero">
      <Eyebrow num="01">Contact</Eyebrow>
      <h1 className="mo-display mo-display--xl">Reach the house.</h1>
      <p className="mo-lede mo-lede--center">For appointments, press, custom commissions, or the jewellery line — please get in touch.</p>
    </section>

    <section className="mo-contact">
      <div className="mo-contact__grid">
        <div className="mo-contact__cards">
          <a className="mo-contact-card" href={waUrl()} target="_blank" rel="noopener noreferrer">
            <Eyebrow>Fastest</Eyebrow>
            <div className="mo-contact-card__big">WhatsApp</div>
            <div className="mo-contact-card__val">{CONTACT.whatsappPretty}</div>
            <span className="mo-link mo-link--arrow">Open conversation →</span>
          </a>
          <a className="mo-contact-card" href={`tel:${CONTACT.landline}`}>
            <Eyebrow>By phone</Eyebrow>
            <div className="mo-contact-card__big">Landline</div>
            <div className="mo-contact-card__val">{CONTACT.landline}</div>
            <span className="mo-link mo-link--arrow">Mon–Sat, 09:00–18:00 →</span>
          </a>
          <a className="mo-contact-card" href={`mailto:${CONTACT.email}`}>
            <Eyebrow>For press &amp; partnerships</Eyebrow>
            <div className="mo-contact-card__big">Email</div>
            <div className="mo-contact-card__val">{CONTACT.email}</div>
            <span className="mo-link mo-link--arrow">Compose →</span>
          </a>
        </div>

        <div className="mo-contact__form">
          <Eyebrow>Or write a note</Eyebrow>
          <h2 className="mo-display">We reply within one business day.</h2>
          <AppointmentForm context="General contact" compact />
        </div>
      </div>
    </section>
  </main>
);

Object.assign(window, { ShopPage, JewelleryPage, AppointmentsPage, VisitPage, ContactPage });