// Marmar Halim — Designer / Bridal / Couture / Modest / Appointments / Contact / Stockists / FAQs
const { useState: useStateS } = React;

/* ---------- The Designer / Atelier ---------- */
function Designer({ go }) {
  return (
    <div className="page-enter" data-screen-label="The Designer">
      <section className="designer-hero">
        <img src="media/editorial-campaign-eye.webp" alt="" />
        <div className="container copy">
          <div>
            <div className="eyebrow gold" style={{ marginBottom: 24, color: "var(--accent)" }}>The Designer</div>
            <h1>Marmar <em>Halim.</em></h1>
          </div>
        </div>
      </section>

      <section className="container">
        <div className="story-grid">
          <aside className="col-meta">
            <div className="eyebrow gold">In Brief</div>
            <p style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.3, marginTop: 14, color: "var(--ink)" }}>
              Egyptian designer trained in Cairo and Milan; founder of the eponymous house in Dubai since 2014.
            </p>
            <dl>
              <div><dt>Born</dt><dd>Cairo, Egypt</dd></div>
              <div><dt>Trained</dt><dd>Fashion Design Center, Cairo · Istituto di Moda Burgo, Milan (top of class)</dd></div>
              <div><dt>House launched</dt><dd>Dubai · 2014</dd></div>
              <div><dt>Atelier opened</dt><dd>Dubai Design District · 2019</dd></div>
              <div><dt>Signature</dt><dd>Hand pleating &amp; draping in silk taffeta, georgette, chiffon</dd></div>
            </dl>
          </aside>
          <div className="col-body">
            <p>The label began with a pivot. After a first career in human resources, Marmar Halim left Cairo for Milan to train at the Istituto di Moda Burgo, where she graduated top of class. The house opened in Dubai in 2014 with a small, deliberate book of eveningwear — gowns that began on the body rather than on a flat pattern.</p>
            <p>The signature came quickly: pleating and draping done by hand, with the fabric allowed to keep its breath. Silk taffeta is shaped on the dressmaker's stand. Georgette and chiffon are folded under tension and released. Nothing is set into permanence; the cloth is encouraged to move.</p>
            <p>In 2019 the house took a permanent showroom inside Dubai Design District. The atelier has stayed quietly hands-on: a small team, a long lead time, and a long-term relationship with each client. The SS25 collection — <em>"My Girl"</em> — is dedicated to motherhood, and is the first to be shown in the new showroom space.</p>
            <p>Stocked at Moda Operandi, shown at Dubai Fashion Week 2019, dressed for editorial across the region. The house keeps a small London diary by appointment.</p>
          </div>
        </div>
      </section>

      {/* Editorial stack */}
      <section className="container" style={{ padding: "120px 0" }}>
        <div className="stack">
          <div className="a"><img src="media/campaign-01.webp" alt="" /></div>
          <div className="b"><img src="media/campaign-03.webp" alt="" /></div>
        </div>
      </section>

      {/* Craft split */}
      <section className="split dark">
        <div><img src="media/campaign-02.webp" alt="" /></div>
        <div className="copy">
          <div className="eyebrow gold" style={{ marginBottom: 18, color: "var(--accent)" }}>The Atelier · Dubai d3</div>
          <h3>A long table, taffeta on the stand.</h3>
          <p>The atelier works in two rhythms: ready-to-order eveningwear with a four-to-six week window, and the slower couture book that runs six to ten weeks with two to three fittings. Every gown comes off the same table.</p>
          <p>Visits are by appointment. The first one is conversational — a coffee, a question about what the dress has to do.</p>
          <div className="actions">
            <button className="btn btn--ivory" onClick={() => go("appointments")}>Book a Visit <span className="arrow"></span></button>
            <button className="btn btn--gold" onClick={() => go("couture")}>The Couture Service <span className="arrow"></span></button>
          </div>
        </div>
      </section>

      {/* Founder quote band */}
      <section className="quote-band">
        <div className="container">
          <div className="eyebrow gold" style={{ marginBottom: 28 }}>On Process</div>
          <q>My process always begins with a feeling. Then I turn to fabric — the way it moves often tells me what it wants to become.</q>
          <div className="cite"><span className="rule"></span><span>Marmar Halim</span></div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Bridal ---------- */
function Bridal({ go }) {
  const { PRODUCTS } = window.MMH_DATA;
  const bridal = PRODUCTS.filter(p => p.line === "Bridal" || p.line === "Couture").slice(0, 6);
  return (
    <div className="page-enter" data-screen-label="Bridal">
      <section className="designer-hero" style={{ height: "clamp(420px, 65vh, 700px)" }}>
        <img src="media/campaign-03.webp" alt="" style={{ opacity: 0.85, objectPosition: "center 30%" }} />
        <div className="container copy">
          <div>
            <div className="eyebrow gold" style={{ marginBottom: 18, color: "var(--accent)" }}>Bridal · By Appointment</div>
            <h1>For the <em>day</em> she becomes.</h1>
          </div>
        </div>
      </section>

      <section className="section container">
        <div className="craft">
          <div className="copy">
            <div className="eyebrow gold" style={{ marginBottom: 18 }}>The Bridal Service</div>
            <h2>A private fitting, <em>then six weeks.</em></h2>
            <p>The bridal book is small and worked by hand. Each gown begins with a consultation in the Dubai atelier — by video for international clients — followed by two to three fittings before delivery.</p>
            <dl className="list">
              <div><dt>01 · Consultation</dt><dd>1 hour at the atelier or by video</dd></div>
              <div><dt>02 · Toile fitting</dt><dd>The first body on you, 2–3 weeks in</dd></div>
              <div><dt>03 · Mid fitting</dt><dd>Fabric, hand-pleating, length</dd></div>
              <div><dt>04 · Final delivery</dt><dd>Within 6–10 weeks of confirmation</dd></div>
            </dl>
            <div className="flex" style={{ gap: 12, flexWrap: "wrap" }}>
              <button className="btn" onClick={() => go("appointments")}>Book a Bridal Appointment <span className="arrow"></span></button>
              <a className="btn btn--ghost" href="https://wa.me/971564973497?text=Hi%20Marmar%20Halim%2C%20I%27d%20like%20to%20enquire%20about%20bridal." target="_blank" rel="noreferrer">WhatsApp Bridal</a>
            </div>
          </div>
          <div className="img"><img src="media/product-15.webp" alt="Alina — strapless pleated chiffon gown with cape" style={{ aspectRatio: "4/5", objectFit: "contain", padding: "8%", background: "var(--bone)", mixBlendMode: "multiply" }} /></div>
        </div>
      </section>

      <section className="section--tight container">
        <SectionHead eyebrow="The Bridal Looks" title={<span>A small <em>edit.</em></span>} meta={<p>A bridal lookbook in private circulation — these are pieces clients have most often returned to. Each can be reworked in ivory, dove, blush or a custom undertone.</p>} />
        <div className="products-grid">
          {bridal.map(p => <ProductCard key={p.id} p={p} onOpen={() => go("appointments")} />)}
        </div>
        <div className="center" style={{ marginTop: 56 }}>
          <button className="link-under" onClick={() => go("appointments")}>Request the Bridal Lookbook →</button>
        </div>
      </section>
    </div>
  );
}

/* ---------- Couture ---------- */
function Couture({ go }) {
  return (
    <div className="page-enter" data-screen-label="Couture">
      <section className="designer-hero" style={{ height: "clamp(420px, 65vh, 700px)" }}>
        <img src="media/campaign-02.webp" alt="" style={{ opacity: 0.78 }} />
        <div className="container copy">
          <div>
            <div className="eyebrow gold" style={{ marginBottom: 18, color: "var(--accent)" }}>Couture · One of One</div>
            <h1>Made for the <em>moment.</em></h1>
          </div>
        </div>
      </section>

      <section className="section container">
        <div className="section-head">
          <div>
            <div className="eyebrow gold" style={{ marginBottom: 18 }}>The Service</div>
            <h2 className="title" style={{ fontSize: "clamp(40px, 5vw, 64px)" }}>One gown. <em>One wearer.</em></h2>
          </div>
          <div className="meta">
            <p>Marmar Halim Couture is the house's bespoke service. Each commission is designed for a single wearer and a single occasion — red carpet, gala, dynasty wedding — and is built over six to ten weeks with two to three fittings.</p>
          </div>
        </div>

        <dl style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--line)", borderRadius: 0 }}>
          {[
            ["01", "Sketch", "A 30-minute conversation. The mood, the moment, the silhouette."],
            ["02", "Toile", "First body fitting — usually three weeks after sketch approval."],
            ["03", "Mid fitting", "Fabric is cut. Hand-pleating begins. Length confirmed."],
            ["04", "Final fitting", "The gown moves with the wearer; nothing else."],
            ["05", "Delivery", "Hand-finished in the atelier. Shipped or collected in Dubai."],
            ["06", "Archive", "Each commission is documented for the house archive."],
          ].map(([n, t, d], i) => (
            <div key={n} style={{ padding: "32px 28px", borderRight: i % 3 < 2 ? "1px solid var(--line)" : "0", borderBottom: i < 3 ? "1px solid var(--line)" : "0", gridColumn: "span 1" }}>
              <div className="mono" style={{ color: "var(--accent-deep)", fontSize: 11, letterSpacing: ".18em", marginBottom: 18 }}>— {n}</div>
              <dt style={{ fontFamily: "var(--serif)", fontWeight: 400, fontSize: 26, lineHeight: 1.05, marginBottom: 10 }}>{t}</dt>
              <dd style={{ margin: 0, color: "var(--ink-2)", fontSize: 14 }}>{d}</dd>
            </div>
          ))}
        </dl>

        <div className="spacer-lg"></div>
        <div className="flex" style={{ gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <button className="btn btn--lg" onClick={() => go("appointments")}>Enquire about Couture <span className="arrow"></span></button>
          <a className="btn btn--ghost btn--lg" href="https://wa.me/971564973497?text=Hi%20Marmar%20Halim%2C%20I%27d%20like%20to%20enquire%20about%20a%20couture%20commission." target="_blank" rel="noreferrer">WhatsApp the Atelier</a>
        </div>
      </section>

      <section className="split">
        <div className="copy">
          <div className="eyebrow gold" style={{ marginBottom: 18 }}>Investment</div>
          <h3>From <em>AED 40,000.</em></h3>
          <p>Couture commissions start from AED 40,000 and rise with fabric, embellishment and silhouette complexity. A 50% deposit confirms the commission; the balance is due at delivery.</p>
          <p>Atelier visits in Dubai are complimentary; international fittings are arranged by appointment.</p>
        </div>
        <div><img src="media/product-14.webp" alt="" style={{ background: "var(--bone)", padding: "10%", mixBlendMode: "multiply" }} /></div>
      </section>
    </div>
  );
}

/* ---------- Modest ---------- */
function Modest({ go, openProduct }) {
  const { PRODUCTS } = window.MMH_DATA;
  const modest = PRODUCTS.filter(p => p.line === "Modest" || p.line === "Couture" || p.id === "p10" || p.id === "p11" || p.id === "p13" || p.id === "p15").slice(0, 8);
  return (
    <div className="page-enter" data-screen-label="Modest">
      <section className="page-head container">
        <div className="crumbs"><button onClick={() => go("home")}>Home</button> / Modest</div>
        <h1>Modest <em>eveningwear.</em></h1>
        <p className="lede">A distinct line within the house — full coverage with the same hand and the same silhouette. Long sleeve, high neck, sweeping skirt. Made to your measurement over four to six weeks.</p>
      </section>

      <section className="container">
        <div className="products-grid">
          {modest.map(p => <ProductCard key={p.id} p={p} onOpen={openProduct} />)}
        </div>

        <div className="spacer-lg"></div>
        <div className="craft" style={{ background: "var(--bone)", padding: "clamp(40px, 5vw, 80px)" }}>
          <div className="copy">
            <div className="eyebrow gold" style={{ marginBottom: 18 }}>On Coverage</div>
            <h2 style={{ fontFamily: "var(--serif)", fontWeight: 300, fontSize: "clamp(34px, 4vw, 52px)", lineHeight: 1.05, marginBottom: 20 }}>Designed for <em>full coverage</em> — without reduction.</h2>
            <p style={{ color: "var(--ink-2)" }}>Every modest piece is built to the same silhouette logic as the open-shoulder book. Hand pleating moves; sleeves are cut from the same cloth as the body; length is to floor.</p>
            <button className="btn btn--ghost" onClick={() => go("appointments")} style={{ marginTop: 18 }}>Book a Modest Fitting <span className="arrow"></span></button>
          </div>
          <div className="img" style={{ background: "var(--ivory)" }}>
            <img src="media/product-12.webp" alt="" style={{ aspectRatio: "4/5", objectFit: "contain", padding: "10%", mixBlendMode: "multiply" }} />
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Appointments / Book a Fitting ---------- */
function Appointments({ go, toast }) {
  const [form, setForm] = useStateS({ name: "", email: "", phone: "", line: "Eveningwear", date: "", message: "" });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    toast("Request received · we'll reply within 24 hours");
  };

  return (
    <div className="page-enter" data-screen-label="Book a Fitting">
      <section className="page-head container">
        <div className="crumbs"><button onClick={() => go("home")}>Home</button> / Appointments</div>
        <h1>Book a <em>fitting.</em></h1>
        <p className="lede">Tell us a little about what you're looking for. The atelier replies personally within 24 hours, Sunday to Thursday.</p>
      </section>

      <section className="container" style={{ paddingBottom: 120 }}>
        <div className="book-grid">
          <div className="book-info">
            <div className="eyebrow gold" style={{ marginBottom: 14 }}>The Atelier</div>
            <p style={{ fontFamily: "var(--serif)", fontSize: 20, lineHeight: 1.4, color: "var(--ink)" }}>
              Dubai Design District (d3), Za'abeel. Fittings by appointment, Sunday to Thursday. London diary by request.
            </p>
            <dl>
              <div><dt>WhatsApp · primary</dt><dd><a href="https://wa.me/971564973497" target="_blank" rel="noreferrer">+971 56 497 3497</a></dd></div>
              <div><dt>Email</dt><dd><a href="mailto:onlinestore@marmar-halim.com">onlinestore@marmar-halim.com</a></dd></div>
              <div><dt>Showroom</dt><dd>Dubai Design District, Za'abeel · by appointment</dd></div>
              <div><dt>Lead time</dt><dd>Eveningwear 4–6 wks · Couture 6–10 wks</dd></div>
            </dl>

            <div className="spacer-lg" style={{ height: 40 }}></div>
            <div className="eyebrow gold" style={{ marginBottom: 14 }}>What to expect</div>
            <ol style={{ paddingLeft: 0, listStyle: "none", display: "grid", gap: 18 }}>
              {["A short reply confirming the slot and the line.", "A conversational first fitting — measurements only if you'd like.", "A proposal of pieces, fabrics and a lead time.", "Confirmation, deposit, atelier production."].map((s, i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "32px 1fr", gap: 16, alignItems: "baseline" }}>
                  <span className="mono" style={{ color: "var(--accent-deep)" }}>0{i + 1}</span>
                  <span style={{ fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.35, color: "var(--ink-2)" }}>{s}</span>
                </li>
              ))}
            </ol>
          </div>

          <form className="book" onSubmit={submit}>
            <div className="field">
              <label htmlFor="line">Line of interest</label>
              <div className="radio-row">
                {["Eveningwear", "Bridal", "Couture", "Modest"].map((l) => (
                  <button type="button" key={l} className="filter-chip" aria-pressed={form.line === l} onClick={() => setForm({ ...form, line: l })}>{l}</button>
                ))}
              </div>
            </div>
            <div className="field"><label htmlFor="name">Name</label><input id="name" required value={form.name} onChange={set("name")} placeholder="Your full name" /></div>
            <div className="field"><label htmlFor="email">Email</label><input id="email" type="email" required value={form.email} onChange={set("email")} placeholder="you@email.com" /></div>
            <div className="field"><label htmlFor="phone">Phone (with country code)</label><input id="phone" value={form.phone} onChange={set("phone")} placeholder="+971 …" /></div>
            <div className="field"><label htmlFor="date">Preferred date</label><input id="date" type="date" value={form.date} onChange={set("date")} /></div>
            <div className="field"><label htmlFor="message">A note (optional)</label><textarea id="message" value={form.message} onChange={set("message")} placeholder="The occasion, the silhouette you have in mind, or a question." /></div>
            <div className="flex" style={{ gap: 12, flexWrap: "wrap", marginTop: 8 }}>
              <button className="btn btn--lg" type="submit">Request Appointment <span className="arrow"></span></button>
              <a className="btn btn--ghost btn--lg" href={`https://wa.me/971564973497?text=Hi%20Marmar%20Halim%2C%20I%27d%20like%20to%20book%20a%20fitting%20-%20${encodeURIComponent(form.line)}.`} target="_blank" rel="noreferrer">Or WhatsApp Now</a>
            </div>
            <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 8 }}>By submitting, you agree to be contacted by the atelier. We never share your details.</p>
          </form>
        </div>
      </section>
    </div>
  );
}

/* ---------- Contact ---------- */
function Contact({ go }) {
  return (
    <div className="page-enter" data-screen-label="Contact">
      <section className="page-head container">
        <div className="crumbs"><button onClick={() => go("home")}>Home</button> / Contact</div>
        <h1>Find the <em>atelier.</em></h1>
        <p className="lede">The fastest reply is WhatsApp. Showroom visits in Dubai are by appointment.</p>
      </section>

      <section className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }} className="contact-grid">
          {[
            { label: "WhatsApp · primary", body: <a href="https://wa.me/971564973497" target="_blank" rel="noreferrer" style={{ fontFamily: "var(--serif)", fontSize: 26 }}>+971 56 497 3497</a>, note: "Replies within hours · Sun–Thu" },
            { label: "Email", body: <><a href="mailto:onlinestore@marmar-halim.com" style={{ fontFamily: "var(--serif)", fontSize: 22, display: "block" }}>onlinestore@marmar-halim.com</a><a href="mailto:customer.care@marmar-halim.com" style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--ink-2)" }}>customer.care@marmar-halim.com</a></>, note: "Replies within 24 hours" },
            { label: "Atelier · Dubai", body: <div style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.3 }}>Dubai Design District (d3)<br/>Za'abeel, Dubai · UAE</div>, note: "By appointment · exact unit shared on confirmation" },
          ].map((c, i, a) => (
            <div key={i} style={{ padding: "40px 32px", borderRight: i < a.length - 1 ? "1px solid var(--line)" : 0 }}>
              <div className="eyebrow gold" style={{ marginBottom: 14 }}>{c.label}</div>
              <div style={{ marginBottom: 18 }}>{c.body}</div>
              <div style={{ fontSize: 12, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--muted)" }}>{c.note}</div>
            </div>
          ))}
        </div>

        <div className="spacer-lg"></div>
        <dl style={{ margin: 0 }}>
          <div className="detail-row"><dt>Showroom hours</dt><dd>Daily 10:00 – 21:00 (showroom) · Mon–Fri 09:00 – 17:00 (customer care)</dd></div>
          <div className="detail-row"><dt>London diary</dt><dd>By appointment only · address shared on confirmation</dd></div>
          <div className="detail-row"><dt>Made to order</dt><dd>4–6 weeks ready-to-order · 6–10 weeks couture</dd></div>
          <div className="detail-row"><dt>Worldwide shipping</dt><dd>Fully tracked from Dubai · arrival typically 3–7 working days post-completion</dd></div>
        </dl>

        <div className="spacer-lg"></div>
        <div className="center" style={{ paddingBottom: 80 }}>
          <button className="btn btn--lg" onClick={() => go("appointments")}>Book a Fitting <span className="arrow"></span></button>
        </div>
      </section>
    </div>
  );
}

/* ---------- Stockists & Press ---------- */
function Stockists({ go }) {
  const { STOCKISTS } = window.MMH_DATA;
  return (
    <div className="page-enter" data-screen-label="Stockists">
      <section className="page-head container">
        <div className="crumbs"><button onClick={() => go("home")}>Home</button> / Stockists &amp; Press</div>
        <h1>In good <em>company.</em></h1>
        <p className="lede">Where the house is carried and where it is read. Logos shown only with permission.</p>
      </section>

      <section className="container" style={{ paddingBottom: 120 }}>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--line)" }}>
          {STOCKISTS.map((s, i) => (
            <li key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr 1fr auto", alignItems: "center", padding: "32px 0", borderBottom: "1px solid var(--line)", gap: 24 }}>
              <span className="mono" style={{ color: "var(--accent-deep)" }}>— {String(i + 1).padStart(2, "0")}</span>
              <span style={{ fontFamily: "var(--serif)", fontWeight: 300, fontSize: "clamp(28px, 3vw, 44px)" }}>{s.name}</span>
              <span className="eyebrow">{s.kind}</span>
              <a className="link-under" href={s.url} target="_blank" rel="noreferrer">Visit →</a>
            </li>
          ))}
        </ul>

        <div className="spacer-lg"></div>
        <div className="craft" style={{ alignItems: "start" }}>
          <div className="copy">
            <div className="eyebrow gold" style={{ marginBottom: 18 }}>Press &amp; Image Requests</div>
            <h2 style={{ fontFamily: "var(--serif)", fontWeight: 300, fontSize: "clamp(34px, 4vw, 52px)", lineHeight: 1.05, marginBottom: 20 }}>Editorial loans, <em>image rights,</em> interview requests.</h2>
            <p style={{ color: "var(--ink-2)" }}>For press queries, including image rights and editorial loans, please write to the atelier with your title, deadline and the shoot brief.</p>
            <a className="btn btn--ghost" href="mailto:onlinestore@marmar-halim.com" style={{ marginTop: 18 }}>onlinestore@marmar-halim.com</a>
          </div>
          <div className="img"><img src="media/social-hero.webp" alt="" style={{ aspectRatio: "4/5", objectFit: "cover" }} /></div>
        </div>
      </section>
    </div>
  );
}

/* ---------- FAQs ---------- */
function FAQs({ go }) {
  const { FAQ } = window.MMH_DATA;
  return (
    <div className="page-enter" data-screen-label="FAQs">
      <section className="page-head container">
        <div className="crumbs"><button onClick={() => go("home")}>Home</button> / FAQs</div>
        <h1>The <em>service.</em></h1>
        <p className="lede">Made-to-order, sizing, returns, shipping. If your question isn't here, the atelier is on WhatsApp.</p>
      </section>

      <section className="container" style={{ paddingBottom: 120 }}>
        <div style={{ borderTop: "1px solid var(--line)" }}>
          {FAQ.map((f, i) => (
            <details key={i} style={{ padding: "26px 0", borderBottom: "1px solid var(--line)" }}>
              <summary style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24, cursor: "pointer", listStyle: "none" }}>
                <span style={{ fontFamily: "var(--serif)", fontSize: "clamp(22px, 2.5vw, 32px)", fontWeight: 400 }}><span className="mono" style={{ color: "var(--accent-deep)", marginRight: 18, fontSize: 12 }}>0{i + 1}</span>{f.q}</span>
                <span style={{ fontSize: 24, fontFamily: "var(--serif)", color: "var(--ink-2)" }}>+</span>
              </summary>
              <p style={{ maxWidth: "60ch", margin: "18px 0 0 56px", color: "var(--ink-2)", fontSize: 16 }}>{f.a}</p>
            </details>
          ))}
        </div>

        <div className="spacer-lg"></div>
        <div className="center">
          <a className="btn btn--ghost" href="https://wa.me/971564973497" target="_blank" rel="noreferrer">Still have a question? WhatsApp the Atelier <span className="arrow"></span></a>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Designer, Bridal, Couture, Modest, Appointments, Contact, Stockists, FAQs });