/* ============================================================
   KHAL DESIGN — Bespoke commissioning + booking
     · CustomOrderPage — open-ended intake → draft confirmation
     · BookingPage — standalone fitting booking
   ============================================================ */

function CustomOrderPage({ onNav, route }) {
  const [draft, setDraft] = useState(null);

  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 commission is with us.</h1>
          <p className="co-draft-sub">
            Thank you. The workshop is reviewing every detail and will confirm materials, fit and pricing 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 · pricing in progress</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 ? "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}`
                  : "We'll reply directly"}
              </strong>
            </div>
          </div>

          <div className="co-steps-mini">
            {[["Brief submitted", "done"], ["Workshop review & pricing", "active"], ["Fit & materials confirmed", "todo"], ["Production begins", "todo"]].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="co-draft-actions">
            <Btn variant="ghost" arrow={false} onClick={() => setDraft(null)}>Edit brief</Btn>
            <Btn arrow={false} onClick={() => onNav("shop", {})}>Browse the collection</Btn>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-page">
      <section className="bespoke-hero">
        <Ph label="ATELIER · PATTERN CUTTING" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "var(--accent-bright)" }}>Bespoke Commissions</Eyebrow>
          <h1 className="serif about-hero-h">Made entirely to you.</h1>
          <p className="lede on-img" style={{ maxWidth: "46ch", marginTop: 16 }}>
            Share your foot measurements, leather preference and any reference images — the workshop prices it
            individually and confirms every detail with you 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 brief", "Text, links, images and voice notes — whatever captures the style best."],
              ["02", "Optional consultation", "Book a call with the workshop, virtual or in Lagos."],
              ["03", "We price it for you", "Bespoke work starts unpriced. We cost it precisely and confirm with you."],
              ["04", "Approve & begin", "Once you confirm, your pair goes into production."],
            ].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.</p>
            </div>
          </aside>

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

/* ───────────────────────────────────────────────────────────
   BOOKING — standalone fitting booking
   ─────────────────────────────────────────────────────────── */
function BookingPage({ onNav }) {
  const [held, setHeld] = useState(null);
  return (
    <div className="fade-page">
      <section className="bespoke-hero">
        <Ph label="ATELIER · MEASURING" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "var(--accent-bright)" }}>Booking</Eyebrow>
          <h1 className="serif about-hero-h">Reserve your fitting.</h1>
          <p className="lede on-img" style={{ maxWidth: "46ch", marginTop: 16 }}>
            In the Lagos workshop or virtually — slots held instantly, so you know your time is confirmed.
          </p>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap-wide booking-grid">
          <div className="booking-main">
            <Eyebrow line>Choose a time</Eyebrow>
            <BookingWidget onHeld={setHeld} />
          </div>
          <aside className="booking-aside">
            <div className="booking-info">
              <Icon name="globe" size={20} />
              <div><strong>Two ways to meet</strong><p>Virtual from anywhere, or in person at the Lagos workshop.</p></div>
            </div>
            <div className="booking-info">
              <Icon name="ruler" size={20} />
              <div><strong>What to expect</strong><p>Foot measurements and material selection, talked through with the workshop.</p></div>
            </div>
            <div className="booking-info">
              <Icon name="swap" size={20} />
              <div><strong>Flexible</strong><p>Reschedule any time up to 24 hours before. Your hold is free.</p></div>
            </div>
            {held && (
              <Btn block arrow={false} onClick={() => onNav("custom", {})} style={{ marginTop: 8 }}>
                Add your brief →
              </Btn>
            )}
          </aside>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CustomOrderPage, BookingPage });