/* ============================================================
   EMAGINE BY BUKOLA — Custom Orders
     · CustomOrderPage — open-ended bespoke intake (consultation)
       Every custom & bridal commission is priced individually —
       there is no fixed price list. Made in Nigeria, shipped
       worldwide (dedicated service to the US, UK & Canada).
   ============================================================ */
function CustomOrderPage({ onNav, route }) {
  const [draft, setDraft] = useState(null); /* {ref, consult, heldSlot} */

  if (draft) {
    return (
      <div className="fade-page page-shell">
        <div className="wrap co-draft">
          <div className="co-draft-badge"><Icon name="check" size={28} /></div>
          <Eyebrow>Brief received</Eyebrow>
          <h1 className="serif co-draft-h">Your vision is with us.</h1>
          <p className="co-draft-sub">
            Thank you. Our atelier is reviewing every detail and will reply with a personalised quote —
            wherever you are in the world, we ship worldwide via tracked courier.
          </p>

          <div className="co-draft-card">
            <div className="co-draft-row">
              <span>Reference</span><strong className="mono">{draft.ref}</strong>
            </div>
            <div className="co-draft-row">
              <span>Status</span><strong className="co-pill">Received · pricing in progress</strong>
            </div>
            <div className="co-draft-row">
              <span>{draft.consult ? "Consultation" : "Review"}</span>
              <strong>
                {draft.consult && draft.heldSlot
                  ? `${draft.heldSlot.mode} · ${draft.heldSlot.date.toLocaleDateString("en-GB", { day: "numeric", month: "short" })} at ${draft.heldSlot.time}`
                  : "Within 48 hours"}
              </strong>
            </div>
            {draft.inspiration && draft.inspiration.length > 0 && (
              <div className="co-draft-row">
                <span>Inspiration</span>
                <strong>{draft.inspiration.join(", ")}</strong>
              </div>
            )}
          </div>

          {draft.hasVideo && (
            <div className="co-proc">
              <span className="co-proc-ic">🎬</span>
              <div>
                <strong>Your video is processing…</strong>
                <div className="co-proc-bar"><span></span></div>
              </div>
            </div>
          )}

          <div className="co-steps-mini">
            {[["Brief submitted", "done"], ["Atelier review & pricing", "active"], ["Personalised quote sent", "todo"], ["Production begins", "todo"]].map(([t, s], i) => (
              <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="co-draft-actions">
            <Btn variant="ghost" arrow={false} onClick={() => setDraft(null)}>Edit brief</Btn>
            <Btn arrow={false} onClick={() => onNav("home", {})}>Back to home</Btn>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-page">
      <section className="bespoke-hero">
        <Ph label="ATELIER · LAGOS WORKSHOP" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "#e9c97a" }}>Custom &amp; Bespoke</Eyebrow>
          <h1 className="serif about-hero-h">Request a consultation.</h1>
          <p className="lede on-img" style={{ maxWidth: "50ch", marginTop: 16 }}>
            Open-ended, made entirely to you. Every custom and bridal commission is priced individually —
            there is no fixed price list. Made in Nigeria and shipped worldwide, with dedicated service to
            the US, UK and Canada.
          </p>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap-wide co-grid">
          <aside className="co-aside">
            <Eyebrow line>How it works</Eyebrow>
            {[
              ["01", "Submit your brief", "Text, links, images, video and voice notes — whatever captures it best."],
              ["02", "Optional consultation", "Book a call with the atelier, virtual or in Lagos."],
              ["03", "We price it for you", "Bespoke work starts unpriced. We cost it precisely and send a personalised quote."],
              ["04", "Approve & pay", "Approve your quote and pay your deposit securely. Production begins."],
            ].map(([n, t, d]) => (
              <div className="bk-step" key={n}><span className="mono">{n}</span><div><strong>{t}</strong><p>{d}</p></div></div>
            ))}
            <div className="co-aside-note">
              <Icon name="shield" size={18} />
              <p>Price starts unknown by design — you only ever pay for exactly what you commission. Every finished piece ships worldwide.</p>
            </div>
          </aside>

          <div className="co-form">
            <IntakeEngine context="a Custom Commission" submitLabel="Request a consultation"
              onSubmit={(payload) => { window.scrollTo({ top: 0 }); setDraft(payload); }} />
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CustomOrderPage });