/* ============================================================
   RACK & BOX — Cart, Checkout, About, Contact, Account,
   Lookbook, Bespoke, Collections, Wishlist
   ============================================================ */

/* ---------------- CART PAGE ---------------- */
function CartPage({ onNav }) {
  const { cart, updateQty, removeFromCart, cartTotal, currency } = useContext(RBCtx);
  if (cart.length === 0) {
    return (
      <div className="fade-page page-shell center" style={{ minHeight: "60vh", display: "grid", placeItems: "center" }}>
        <div>
          <Icon name="cart" size={46} stroke={1} style={{ color: "var(--ink-faint)" }} />
          <h1 className="serif" style={{ fontSize: 44, margin: "18px 0 10px" }}>Your bag is empty</h1>
          <p style={{ color: "var(--ink-soft)", marginBottom: 26 }}>Let's find something worth the occasion.</p>
          <Btn onClick={() => onNav("shop", {})}>Start shopping</Btn>
        </div>
      </div>
    );
  }
  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <h1 className="serif page-h">Your Bag</h1>
        <div className="cart-grid">
          <div className="cart-items">
            {cart.map((it) => (
              <div className="cart-row" key={it.key}>
                <button className="cart-row-media zoomable" onClick={() => onNav("product", { id: it.id })}><Ph label={it.label} ratio="portrait" /></button>
                <div className="cart-row-body">
                  <div className="spread" style={{ alignItems: "flex-start" }}>
                    <div>
                      <button className="serif cart-row-name" onClick={() => onNav("product", { id: it.id })}>{it.name}</button>
                      <div className="mono cart-row-meta">{it.size} · {it.color}</div>
                    </div>
                    <Price ngn={it.price * it.qty} style={{ fontFamily: "var(--font-display)", fontSize: 22 }} />
                  </div>
                  <div className="spread" style={{ marginTop: 18 }}>
                    <div className="qty">
                      <button onClick={() => updateQty(it.key, -1)}><Icon name="minus" size={14} /></button>
                      <span>{it.qty}</span>
                      <button onClick={() => updateQty(it.key, 1)}><Icon name="plus" size={14} /></button>
                    </div>
                    <button className="cart-remove" onClick={() => removeFromCart(it.key)}>Remove</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <OrderSummary onNav={onNav} cta="Checkout" onCta={() => onNav("checkout", {})} />
        </div>
      </div>
    </div>
  );
}

function OrderSummary({ onNav, cta, onCta, ship = 0, showItems }) {
  const { cart, cartTotal, currency } = useContext(RBCtx);
  const [code, setCode] = useState(""); const [applied, setApplied] = useState(false);
  const discount = applied ? Math.round(cartTotal * 0.1) : 0;
  const total = cartTotal - discount + ship;
  return (
    <aside className="summary">
      <h3 className="serif" style={{ fontSize: 24, marginBottom: 18 }}>Order summary</h3>
      {showItems && (
        <div className="summary-items">
          {cart.map((it) => (
            <div className="summary-item" key={it.key}>
              <div className="summary-item-img"><Ph label={it.label} ratio="square" /><span className="summary-qty">{it.qty}</span></div>
              <div style={{ flex: 1 }}><div className="serif" style={{ fontSize: 15, lineHeight: 1.2 }}>{it.name}</div><div className="mono" style={{ fontSize: 10.5, color: "var(--ink-faint)" }}>{it.size} · {it.color}</div></div>
              <Price ngn={it.price * it.qty} style={{ fontSize: 13 }} />
            </div>
          ))}
        </div>
      )}
      <div className="promo">
        <input className="input" placeholder="Promo code" value={code} onChange={(e) => setCode(e.target.value)} />
        <button className="promo-apply" onClick={() => setApplied(code.trim().length > 0)}>Apply</button>
      </div>
      {applied && <div className="promo-ok"><Icon name="check" size={14} /> Code applied — 10% off</div>}
      <div className="summary-lines">
        <div className="sline"><span>Subtotal</span><Price ngn={cartTotal} /></div>
        {discount > 0 && <div className="sline disc"><span>Discount</span><span>– {RB.format(discount, currency)}</span></div>}
        <div className="sline"><span>Shipping</span>{ship === 0 ? <span className="free">Complimentary</span> : <Price ngn={ship} />}</div>
        <div className="sline"><span>Duties &amp; taxes</span><span style={{ color: "var(--ink-faint)" }}>Calculated next</span></div>
      </div>
      <div className="summary-total"><span>Total</span><Price ngn={total} style={{ fontFamily: "var(--font-display)", fontSize: 25 }} /></div>
      {cta && <Btn block onClick={onCta} style={{ marginTop: 18 }}>{cta}</Btn>}
      <div className="summary-assure">
        <span><Icon name="shield" size={15} /> Secure checkout</span>
        <span><Icon name="truck" size={15} /> Worldwide shipping</span>
      </div>
    </aside>
  );
}

/* ---------------- CHECKOUT ---------------- */
function CheckoutPage({ onNav }) {
  const { cart, cartTotal, clearCart, currency } = useContext(RBCtx);
  const [step, setStep] = useState(1);
  const [shipIdx, setShipIdx] = useState(0);
  const [pay, setPay] = useState("paystack");
  const [wireModal, setWireModal] = useState(false);
  const [orderRef] = useState(() => RB.genOrderRef());
  const [form, setForm] = useState({ email: "", firstName: "", lastName: "", address: "", city: "", phone: "", postal: "" });
  const [errors, setErrors] = useState({});
  const setField = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const validateStep1 = () => {
    const e = {};
    if (!form.email.trim()) e.email = "Email is required.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Enter a valid email address.";
    if (!form.firstName.trim()) e.firstName = "First name is required.";
    if (!form.lastName.trim()) e.lastName = "Last name is required.";
    if (!form.address.trim()) e.address = "Address is required.";
    if (!form.city.trim()) e.city = "City is required.";
    if (!form.phone.trim()) e.phone = "Phone number is required.";
    if (!form.postal.trim()) e.postal = "Postal code is required.";
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const ship = RB.SHIPPING_TIERS[shipIdx];
  const steps = ["Information", "Shipping", "Payment"];

  if (cart.length === 0 && step < 4) {
    return (
      <div className="fade-page page-shell center" style={{ minHeight: "50vh", display: "grid", placeItems: "center" }}>
        <div><h1 className="serif" style={{ fontSize: 38, marginBottom: 16 }}>Nothing to check out</h1><Btn onClick={() => onNav("shop", {})}>Browse the collection</Btn></div>
      </div>
    );
  }

  if (step === 4) {
    return (
      <div className="fade-page page-shell">
        <div className="wrap confirm">
          <div className="confirm-badge"><Icon name="check" size={34} /></div>
          <Eyebrow>Order confirmed</Eyebrow>
          <h1 className="serif" style={{ fontSize: "clamp(38px,5vw,64px)", fontWeight: 500, margin: "12px 0 16px" }}>Thank you. Your story continues.</h1>
          <p className="lede" style={{ maxWidth: "48ch", margin: "0 auto 10px" }}>We've emailed your receipt and tracking details. Order <strong className="mono">#{orderRef}</strong> ships via Shipbubble, our logistics partner.</p>
          <p style={{ color: "var(--ink-soft)", marginBottom: 14 }}>Estimated delivery to {ship.region}: <strong>{ship.time}</strong></p>
          <button type="button" className="wire-modal-btn" style={{ marginBottom: 30 }} onClick={() => onNav("track", { ref: orderRef, region: ship.region, time: ship.time })}>Track your order →</button>
          <div className="row" style={{ gap: 14, justifyContent: "center" }}>
            <Btn onClick={() => { clearCart(); onNav("home", {}); }}>Back to home</Btn>
            <Btn variant="ghost" arrow={false} onClick={() => { clearCart(); onNav("shop", {}); }}>Continue shopping</Btn>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <div className="checkout-top">
          <Logo size={26} onClick={() => onNav("home", {})} />
          <div className="checkout-steps">
            {steps.map((s, i) => (
              <div key={s} className={"cstep" + (step === i + 1 ? " on" : "") + (step > i + 1 ? " done" : "")}>
                <span className="cstep-n">{step > i + 1 ? <Icon name="check" size={13} /> : i + 1}</span>{s}
              </div>
            ))}
          </div>
          <button className="checkout-secure"><Icon name="shield" size={15} /> Secure</button>
        </div>

        <div className="checkout-grid">
          <div className="checkout-main">
            {step === 1 && (
              <div className="fade-page">
                <h2 className="serif checkout-h">Contact &amp; delivery</h2>
                <div className="form-grid">
                  <div className={"field span2" + (errors.email ? " err" : "")}>
                    <label>Email address</label>
                    <input className="input" type="email" placeholder="you@email.com" value={form.email} onChange={setField("email")} />
                    {errors.email && <span className="field-err">{errors.email}</span>}
                  </div>
                  <div className={"field" + (errors.firstName ? " err" : "")}>
                    <label>First name</label>
                    <input className="input" placeholder="First name" value={form.firstName} onChange={setField("firstName")} />
                    {errors.firstName && <span className="field-err">{errors.firstName}</span>}
                  </div>
                  <div className={"field" + (errors.lastName ? " err" : "")}>
                    <label>Last name</label>
                    <input className="input" placeholder="Last name" value={form.lastName} onChange={setField("lastName")} />
                    {errors.lastName && <span className="field-err">{errors.lastName}</span>}
                  </div>
                  <div className={"field span2" + (errors.address ? " err" : "")}>
                    <label>Address</label>
                    <input className="input" placeholder="Street address" value={form.address} onChange={setField("address")} />
                    {errors.address && <span className="field-err">{errors.address}</span>}
                  </div>
                  <div className={"field" + (errors.city ? " err" : "")}>
                    <label>City</label>
                    <input className="input" placeholder="City" value={form.city} onChange={setField("city")} />
                    {errors.city && <span className="field-err">{errors.city}</span>}
                  </div>
                  <div className="field"><label>Country / Region</label>
                    <select className="input"><option>Nigeria</option><option>United Kingdom</option><option>United States</option><option>Ghana</option><option>United Arab Emirates</option><option>Canada</option></select>
                  </div>
                  <div className={"field" + (errors.phone ? " err" : "")}>
                    <label>Phone</label>
                    <input className="input" placeholder="+234 …" value={form.phone} onChange={setField("phone")} />
                    {errors.phone && <span className="field-err">{errors.phone}</span>}
                  </div>
                  <div className={"field" + (errors.postal ? " err" : "")}>
                    <label>Postal code</label>
                    <input className="input" placeholder="Postcode" value={form.postal} onChange={setField("postal")} />
                    {errors.postal && <span className="field-err">{errors.postal}</span>}
                  </div>
                </div>
                <div className="checkout-nav">
                  <button className="back-link" onClick={() => onNav("cart", {})}>← Return to bag</button>
                  <Btn arrow={false} onClick={() => { if (validateStep1()) setStep(2); }}>Continue to shipping</Btn>
                </div>
              </div>
            )}
            {step === 2 && (
              <div className="fade-page">
                <h2 className="serif checkout-h">Shipping method</h2>
                <div className="ship-options">
                  {RB.SHIPPING_TIERS.map((t, i) => (
                    <button key={t.region} className={"ship-opt" + (shipIdx === i ? " on" : "")} onClick={() => setShipIdx(i)}>
                      <span className="ship-radio" />
                      <div className="ship-opt-body"><strong>{t.region}</strong><span>{t.time} · via Shipbubble</span></div>
                      <span className="ship-price">{t.price === 0 ? "Free" : RB.format(t.price, currency)}</span>
                    </button>
                  ))}
                </div>
                <div className="checkout-nav">
                  <button className="back-link" onClick={() => setStep(1)}>← Information</button>
                  <Btn arrow={false} onClick={() => setStep(3)}>Continue to payment</Btn>
                </div>
              </div>
            )}
            {step === 3 && (
              <div className="fade-page">
                <h2 className="serif checkout-h">Payment</h2>
                <div className="pay-methods">
                  {[["paystack", "Paystack"], ["wire", "Dollar Wire Transfer"]].map(([k, l]) => (
                    <button key={k} className={"pay-tab" + (pay === k ? " on" : "")} onClick={() => { setPay(k); if (k === "wire") setWireModal(true); }}>{l}</button>
                  ))}
                </div>
                {pay === "paystack" && <p className="pay-note">You'll be securely redirected to Paystack to complete payment in {(window.BRAND?.currency.base) || "NGN"}.</p>}
                {pay === "wire" && (
                  <div className="wire-info">
                    <p className="pay-note">USD wire transfer — details are below and will also be emailed to you.</p>
                    <button type="button" className="wire-modal-btn" onClick={() => setWireModal(true)}>View full account details →</button>
                  </div>
                )}
                <label className="pay-check"><input type="checkbox" defaultChecked /> <span>Email me about new drops &amp; private fittings</span></label>
                {wireModal && (
                  <div className="modal-overlay" onClick={() => setWireModal(false)}>
                    <div className="modal-card" onClick={(e) => e.stopPropagation()}>
                      <button className="modal-close" onClick={() => setWireModal(false)}>×</button>
                      <h3 className="serif modal-h">Wire transfer details</h3>
                      <div className="wire-details">
                        <div className="wire-row"><span>Account holder</span><strong>{(window.BRAND?.bank.holder) || "PLACEHOLDER"}</strong></div>
                        <div className="wire-row"><span>Bank</span><strong>{(window.BRAND?.bank.bank) || "PLACEHOLDER"}</strong></div>
                        <div className="wire-row"><span>Account number</span><strong className="mono">{(window.BRAND?.bank.account) || "PLACEHOLDER"}</strong></div>
                        <div className="wire-row"><span>Swift code</span><strong className="mono">{(window.BRAND?.bank.swift) || "PLACEHOLDER"}</strong></div>
                        <div className="wire-row"><span>IBAN / routing</span><strong className="mono">{(window.BRAND?.bank.iban) || "PLACEHOLDER"}</strong></div>
                        <div className="wire-row"><span>Currency</span><strong>USD</strong></div>
                        <div className="wire-row"><span>Amount due</span><strong className="serif">${Math.round((cartTotal + ship.price) * (RB.CURRENCY.altRate || 1)).toLocaleString("en-US")}</strong></div>
                        <div className="wire-row"><span>Reference</span><strong className="mono">{orderRef}</strong></div>
                        <div className="wire-note">
                          <strong>Important:</strong> Include the reference number in your payment memo so we can match your transfer to your order. Clearing time: {(window.BRAND?.bank.clearing) || "PLACEHOLDER"}. A bank charge may apply on your end depending on your sending bank.
                        </div>
                      </div>
                      <button className="modal-btn" onClick={() => setWireModal(false)}>Close</button>
                    </div>
                  </div>
                )}
                <div className="checkout-nav">
                  <button className="back-link" onClick={() => setStep(2)}>← Shipping</button>
                  <Btn arrow={false} onClick={() => setStep(4)}>Pay <Price ngn={cartTotal + ship.price} /></Btn>
                </div>
              </div>
            )}
          </div>
          <OrderSummary onNav={onNav} ship={step >= 2 ? ship.price : 0} showItems />
        </div>
      </div>
    </div>
  );
}

/* ---------------- ORDER TRACKING ---------------- */
function OrderTrackingPage({ onNav, route }) {
  const p = (route && route.params) || {};
  const ref = p.ref || "";
  const region = p.region || RB.SHIPPING_TIERS[0].region;
  const time = p.time || RB.SHIPPING_TIERS[0].time;
  const steps = [["Order placed", "done"], ["Processing", "active"], ["Dispatched via Shipbubble", "todo"], ["Delivered", "todo"]];
  return (
    <div className="fade-page page-shell">
      <div className="wrap confirm" style={{ paddingTop: 90 }}>
        <div className="confirm-badge sm"><Icon name="truck" size={26} /></div>
        <Eyebrow>Order tracking</Eyebrow>
        <h1 className="serif" style={{ fontSize: "clamp(32px,4.4vw,48px)", fontWeight: 500, margin: "12px 0 18px" }}>
          {ref ? <>Order <span className="mono">#{ref}</span></> : "Track your order"}
        </h1>
        <p className="lede" style={{ maxWidth: "48ch", margin: "0 auto 30px" }}>
          Estimated delivery to {region}: <strong>{time}</strong>. Your courier is assigned automatically through Shipbubble and will appear here once your order ships.
        </p>
        <div className="co-steps-mini" style={{ maxWidth: 420, margin: "0 auto 36px" }}>
          {steps.map(([t, s]) => (
            <div className={"co-stepm co-" + s} key={t}>
              <span className="co-stepm-dot">{s === "done" && <Icon name="check" size={11} />}</span>
              <span className="co-stepm-t">{t}</span>
            </div>
          ))}
        </div>
        <div className="row" style={{ gap: 14, justifyContent: "center" }}>
          <Btn onClick={() => onNav("home", {})}>Back to home</Btn>
          <Btn variant="ghost" arrow={false} onClick={() => onNav("shop", {})}>Continue shopping</Btn>
        </div>
      </div>
    </div>
  );
}

/* ---------------- ABOUT ---------------- */
function AboutPage({ onNav }) {
  return (
    <div className="fade-page">
      <section className="about-hero">
        <Ph label="ATELIER · WORKSHOP" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "var(--accent-bright)" }}>Our Story</Eyebrow>
          <h1 className="serif about-hero-h" style={{ whiteSpace: "pre-line" }}>{(window.BRAND?.story.heroHeading) || "Style,\ndefined."}</h1>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap about-intro">
          <Reveal><p className="serif about-lede">{(window.BRAND?.story.lede) || "Simi Defined began with a simple belief: that heritage and modernity belong in the same wardrobe."}</p></Reveal>
          <Reveal delay={1}><p style={{ color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.8 }}>{(window.BRAND?.story.body) || "Simi Defined designs premium women's clothing in Lagos, for a woman who dresses with intention."}</p></Reveal>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap-wide values-grid">
          {[
            ["leaf", "Considered fabrics", "We choose fabrics for how they move and wear, not just how they photograph."],
            ["scissors", "Finished to a premium standard", "Every piece is finished with an editorial eye for line and detail."],
            ["globe", "Worn worldwide", (window.BRAND?.story.valuesLine) || "From Lagos to wherever she's headed next, our pieces travel well."],
          ].map(([ic, t, d], i) => (
            <Reveal key={t} delay={i + 1} className="value-card">
              <Icon name={ic} size={26} stroke={1.3} />
              <h3 className="serif" style={{ fontSize: 26, fontWeight: 500, margin: "16px 0 10px" }}>{t}</h3>
              <p style={{ color: "var(--ink-soft)" }}>{d}</p>
            </Reveal>
          ))}
        </div>
      </section>
      <section className="about-quote-sec">
        <div className="wrap center">
          <Reveal><blockquote className="serif about-quote">“We design for clarity — clean lines, considered fabrics, and pieces built to be worn again and again.”</blockquote></Reveal>
          <Reveal delay={1}><div className="testi-author" style={{ marginTop: 24 }}>Simi Defined</div></Reveal>
        </div>
      </section>

      <section className="section-pad ab-split-sec">
        <div className="wrap-wide ab-split">
          <Reveal className="ab-split-media zoomable"><Ph label="STORY · ATELIER" ratio="portrait" /></Reveal>
          <div className="ab-split-body">
            <Reveal delay={1}><h2 className="serif ab-split-h">How a piece comes together</h2></Reveal>
            {[
              ["01", "The line", "Every style starts as a silhouette — where it sits on the shoulder, where it breaks, how it moves when she walks."],
              ["02", "The cloth", "Silk, crepe, velvet, sequinned mesh. Fabric is chosen for drape first, and for how it wears through a long evening."],
              ["03", "The finish", "Hems, linings and closures are checked by hand before a piece is cleared to ship."],
            ].map(([n, t, d], i) => (
              <Reveal key={n} delay={i + 2} className="ab-step">
                <span className="mono ab-step-n">{n}</span>
                <div>
                  <h3 className="serif ab-step-t">{t}</h3>
                  <p style={{ color: "var(--ink-soft)" }}>{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="ab-marquee" aria-hidden="true">
        <Marquee items={["DRESSES", "TAILORING", "EVENING", "OUTERWEAR", "MADE IN LAGOS", "WORN WORLDWIDE"]} />
      </section>

      <section className="section-pad">
        <div className="wrap-wide">
          <Reveal className="section-head" style={{ marginBottom: 40 }}>
            <h2 className="serif">What we stand for</h2>
          </Reveal>
          <div className="ab-pillars">
            {[
              ["Fit before everything", "Sizes run UK 6–14 with a size guide on every product page, because a premium piece that doesn't fit isn't premium."],
              ["Wardrobe, not trend", "We design pieces that outlast the season they launched in — the dress you keep reaching for three years on."],
              ["Buy it properly", "Direct online purchase, secure payment, tracked delivery in Nigeria and worldwide. No DMs required."],
              ["Lagos as a point of view", "Designed in Lagos for women who dress with intention, wherever they're headed next."],
            ].map(([t, d], i) => (
              <Reveal key={t} delay={(i % 2) + 1} className="ab-pillar">
                <h3 className="serif ab-pillar-t">{t}</h3>
                <p style={{ color: "var(--ink-soft)" }}>{d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="ab-cta-sec">
        <Ph label="EDITORIAL · DRESS EDIT" ratio="cinema" className="ab-cta-bg" />
        <div className="ab-cta-ov" aria-hidden="true" />
        <div className="wrap center ab-cta-content">
          <Reveal><h2 className="serif ab-cta-h">Shop the collection</h2></Reveal>
          <Reveal delay={1}><p className="lede on-img" style={{ maxWidth: "44ch", margin: "0 auto 30px" }}>
            Dresses, tailoring and evening pieces — in stock and ready to ship.</p></Reveal>
          <Reveal delay={2}><Btn onClick={() => onNav("shop", {})}>Shop all pieces</Btn></Reveal>
        </div>
      </section>
    </div>
  );
}

/* ---------------- CONTACT ---------------- */
function ContactPage({ onNav }) {
  const [sent, setSent] = useState(false);
  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <h1 className="serif page-h">Customer care</h1>
        <p className="shop-sub" style={{ maxWidth: "52ch" }}>Reach us on Instagram — {(window.BRAND?.regionLine) || "Lagos, Nigeria"}.</p>
        <div className="contact-grid">
          <div className="contact-info">
            {[
              ["ig", "Instagram", (window.BRAND && window.BRAND.igHandle) || "@simidefined", "DMs open"],
              ["pin", "Location", (window.BRAND?.regionLine) || "Lagos, Nigeria", ""],
            ].map(([ic, t, v, s]) => (
              <div key={t} className="contact-card">
                <span className="contact-ic"><Icon name={ic} size={20} /></span>
                <div><span className="contact-t">{t}</span><strong>{v}</strong><span className="contact-s">{s}</span></div>
              </div>
            ))}
          </div>
          <div className="contact-form-wrap">
            {sent ? (
              <div className="contact-sent"><div className="confirm-badge sm"><Icon name="check" size={26} /></div><h3 className="serif" style={{ fontSize: 30, margin: "14px 0 8px" }}>Message received</h3><p style={{ color: "var(--ink-soft)" }}>Thank you for reaching out. We'll be in touch shortly.</p></div>
            ) : (
              <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <h3 className="serif" style={{ fontSize: 28, marginBottom: 18 }}>Send a message</h3>
                <div className="form-grid">
                  <div className="field"><label>Name</label><input className="input" required placeholder="Your name" /></div>
                  <div className="field"><label>Email</label><input className="input" type="email" required placeholder="you@email.com" /></div>
                  <div className="field span2"><label>Subject</label>
                    <select className="input"><option>Order enquiry</option><option>Sizing & fit</option><option>Bespoke commission</option><option>Returns & exchange</option><option>Press & partnerships</option></select>
                  </div>
                  <div className="field span2"><label>Message</label><textarea className="input" rows="5" required placeholder="How can we help?"></textarea></div>
                </div>
                <Btn block arrow={false} type="submit" style={{ marginTop: 16 }}>Send message</Btn>
              </form>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CartPage, CheckoutPage, AboutPage, ContactPage, OrderSummary });