// booking.jsx — multi-step consultation form

const { useState } = React;

const STYLES = ["Fine line", "Blackwork", "Botanical", "Ornament", "Lettering", "Etching", "Abstract", "Other"];
const PLACEMENTS = ["Forearm", "Upper arm", "Sternum", "Ribs", "Thigh", "Calf", "Back", "Hand", "Other"];
const SIZES = ["Palm", "Hand-span", "Forearm", "Larger"];

function Booking() {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({
    name: "", email: "", pronouns: "",
    style: "", placement: "", size: "",
    description: "", budget: "", availability: "",
    references: "no",
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const setVal = (k, v) => setForm({ ...form, [k]: v });

  const total = 4;
  const next = () => setStep(Math.min(step + 1, total));
  const back = () => setStep(Math.max(step - 1, 0));

  return (
    <section className="section section--paper" id="booking" data-screen-label="05 Booking">
      <div className="kicker-row reveal">
        <span className="num">05 — BOOKING</span>
      </div>

      <div className="booking">
        <div className="booking__intro reveal">
          <span className="eyebrow">Consultation request</span>
          <h2>
            A short<br/>
            <em>inquiry.</em>
          </h2>
          <p className="lede">
            Five fields, four quiet steps. We read every word and answer in turn.
          </p>
          <div className="booking__meta">
            <div>
              <strong>Mara Ash</strong>
              hello@slateandash.studio
            </div>
            <div>
              <strong>Now booking</strong>
              May — September · MMXXVI
            </div>
            <div>
              <strong>Response time</strong>
              within five days
            </div>
          </div>
        </div>

        <div className="form reveal">
          <div className="form__progress">
            {[...Array(total)].map((_, i) => (
              <div
                key={i}
                className={`form__progress-dot ${i < step ? "is-done" : ""} ${i === step ? "is-active" : ""}`}
              />
            ))}
          </div>

          {step === 0 && (
            <div className="form__step" key="0">
              <div className="form__step-label">Step 01 / 04 · Who you are</div>
              <h3 className="form__title">Begin with a name.</h3>
              <div className="field">
                <label>Full name</label>
                <input type="text" value={form.name} onChange={set("name")} placeholder="—" />
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Email</label>
                  <input type="email" value={form.email} onChange={set("email")} placeholder="—" />
                </div>
                <div className="field">
                  <label>Pronouns</label>
                  <input type="text" value={form.pronouns} onChange={set("pronouns")} placeholder="—" />
                </div>
              </div>
              <div className="form__actions">
                <button className="btn-ghost" disabled>← back</button>
                <button className="btn" onClick={next} disabled={!form.name || !form.email}>
                  Continue <span className="btn-arrow" />
                </button>
              </div>
            </div>
          )}

          {step === 1 && (
            <div className="form__step" key="1">
              <div className="form__step-label">Step 02 / 04 · The piece</div>
              <h3 className="form__title">What do you imagine?</h3>
              <div className="field">
                <label>Style — choose one</label>
                <div className="chip-row">
                  {STYLES.map((s) => (
                    <button
                      key={s}
                      type="button"
                      className={`chip ${form.style === s ? "is-on" : ""}`}
                      onClick={() => setVal("style", s)}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Placement</label>
                <div className="chip-row">
                  {PLACEMENTS.map((s) => (
                    <button
                      key={s}
                      type="button"
                      className={`chip ${form.placement === s ? "is-on" : ""}`}
                      onClick={() => setVal("placement", s)}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Approximate size</label>
                <div className="chip-row">
                  {SIZES.map((s) => (
                    <button
                      key={s}
                      type="button"
                      className={`chip ${form.size === s ? "is-on" : ""}`}
                      onClick={() => setVal("size", s)}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>
              <div className="form__actions">
                <button className="btn-ghost" onClick={back}>← back</button>
                <button className="btn" onClick={next} disabled={!form.style || !form.placement}>
                  Continue <span className="btn-arrow" />
                </button>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="form__step" key="2">
              <div className="form__step-label">Step 03 / 04 · The idea</div>
              <h3 className="form__title">Tell us, briefly.</h3>
              <div className="field">
                <label>Description &amp; meaning</label>
                <textarea value={form.description} onChange={set("description")} placeholder="A few sentences is plenty." />
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Budget range</label>
                  <input type="text" value={form.budget} onChange={set("budget")} placeholder="—" />
                </div>
                <div className="field">
                  <label>When you&rsquo;re free</label>
                  <input type="text" value={form.availability} onChange={set("availability")} placeholder="weekdays / etc." />
                </div>
              </div>
              <div className="form__actions">
                <button className="btn-ghost" onClick={back}>← back</button>
                <button className="btn" onClick={next}>Continue <span className="btn-arrow" /></button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="form__step" key="3">
              <div className="form__step-label">Step 04 / 04 · Review</div>
              <h3 className="form__title">A final glance.</h3>
              <div style={{ borderTop: "1px solid rgba(0,0,0,0.08)", marginTop: 8 }}>
                <Row label="Name" val={form.name || "—"} />
                <Row label="Contact" val={form.email || "—"} />
                <Row label="Style" val={form.style || "—"} />
                <Row label="Placement" val={form.placement || "—"} />
                <Row label="Size" val={form.size || "—"} />
                <Row label="Notes" val={form.description ? form.description.slice(0, 60) + (form.description.length > 60 ? "…" : "") : "—"} />
              </div>
              <div className="form__actions">
                <button className="btn-ghost" onClick={back}>← back</button>
                <button className="btn" onClick={next}>Send inquiry <span className="btn-arrow" /></button>
              </div>
            </div>
          )}

          {step === 4 && (
            <div className="form__success" key="4">
              <div className="form__success-icon">&amp;</div>
              <h3>Received.</h3>
              <p>We&rsquo;ll write back within five days from <strong>hello@slateandash.studio</strong>. Until then.</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Row({ label, val }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "120px 1fr",
      gap: 16,
      padding: "14px 0",
      borderBottom: "1px solid rgba(0,0,0,0.08)",
    }}>
      <div style={{
        fontFamily: "var(--mono)",
        fontSize: 10,
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: "var(--ink-400)",
        paddingTop: 4,
      }}>{label}</div>
      <div style={{
        fontFamily: "var(--serif)",
        fontSize: 18,
        color: "var(--ink-black)",
      }}>{val}</div>
    </div>
  );
}

window.Booking = Booking;