/* ============================================================
   TEED MARQUE — Custom Orders
     · CustomOrderPage — open-ended intake → confirmation
   ============================================================ */
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>Request received</Eyebrow>
          <h1 className="serif co-draft-h">Your request is with us.</h1>
          <p className="co-draft-sub">
            Thank you. Our team is reviewing your request and will follow up directly.
          </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 · in review</strong>
            </div>
            {draft.inspiration && draft.inspiration.length > 0 && (
              <div className="co-draft-row">
                <span>Inspiration</span><strong>{draft.inspiration.join(", ")}</strong>
              </div>
            )}
            <div className="co-draft-row">
              <span>{draft.consult ? "Call" : "Follow-up"}</span>
              <strong>
                {draft.consult && draft.heldSlot
                  ? `${draft.heldSlot.mode} · ${draft.heldSlot.date.toLocaleDateString("en-GB", { day: "numeric", month: "short" })} at ${draft.heldSlot.time}`
                  : "Within a few business days"}
              </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">
            {[["Request submitted", "done"], ["Team review", "active"], ["We follow up", "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 request</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="CUSTOM ORDERS" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "var(--accent-bright)" }}>Custom Orders</Eyebrow>
          <h1 className="serif about-hero-h">Commission anything.</h1>
          <p className="lede on-img" style={{ maxWidth: "46ch", marginTop: 16 }}>
            Share your vision in as much detail as you like — we'll follow up directly.
          </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 request", "Text, links, images, video and voice notes — whatever captures it best."],
              ["02", "Optional call", "Book a call with our team if you'd like to talk it through."],
              ["03", "We follow up", "Our team reviews your request and gets back to you directly."],
            ].map(([n, t, d]) => (
              <div className="bk-step" key={n}><span className="mono">{n}</span><div><strong>{t}</strong><p>{d}</p></div></div>
            ))}
          </aside>

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

Object.assign(window, { CustomOrderPage });