/* booking-modal.jsx — multi-step booking flow */

function BookingModal({ open, onClose, slot }) {
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({ name: "", email: "", company: "", context: "" });
  const [errors, setErrors] = React.useState({});
  const [confirmCode, setConfirmCode] = React.useState("");

  React.useEffect(() => {
    if (open) {
      setStep(1);
      setErrors({});
      const code = "SPR-" + Math.random().toString(36).slice(2, 7).toUpperCase();
      setConfirmCode(code);
    }
  }, [open]);

  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape" && open) onClose(); }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = "Required";
    if (!form.email.trim()) er.email = "Required";
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) er.email = "Looks off";
    if (!form.company.trim()) er.company = "Required";
    setErrors(er);
    return Object.keys(er).length === 0;
  };

  const submit = () => { if (validate()) setStep(2); };

  const slotText = slot
    ? `Mon May ${slot.day} · ${slot.time} CET · 20 min`
    : "20-min assessment";

  return (
    <div className={"tcsp-modal-backdrop" + (open ? " is-open" : "")} onClick={onClose}>
      <div className="tcsp-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Book a Sprint assessment">
        <div className="tcsp-modal-head">
          <span className="tcsp-modal-title">{step === 1 ? "Step 1 of 2 · Your details" : "Confirmed"}</span>
          <button className="tcsp-modal-close" onClick={onClose} aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>

        <div className="tcsp-modal-body">
          {step === 1 && (
            <React.Fragment>
              <div className="tcsp-modal-step">Sprint assessment · 20 min</div>
              <h3 className="tcsp-modal-h">A couple of details before I send the invite</h3>
              <p className="tcsp-modal-p">No marketing list. I read these before the call. If we're not a fit I'll tell you on the call, not in a follow-up sequence.</p>

              <div className="tcsp-modal-summary">
                <div className="tcsp-modal-summary-icon">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <div className="tcsp-modal-summary-text"><strong>{slotText}</strong></div>
              </div>

              <form className="tcsp-form" onSubmit={(e) => { e.preventDefault(); submit(); }}>
                <div className="tcsp-field">
                  <label>Name</label>
                  <input value={form.name} onChange={update("name")} placeholder="Sam Reyes" />
                  {errors.name && <div className="tcsp-field-error">{errors.name}</div>}
                </div>
                <div className="tcsp-field">
                  <label>Work email</label>
                  <input value={form.email} onChange={update("email")} placeholder="sam@acme.com" />
                  {errors.email && <div className="tcsp-field-error">{errors.email}</div>}
                </div>
                <div className="tcsp-field">
                  <label>Company</label>
                  <input value={form.company} onChange={update("company")} placeholder="Acme Capital · 80 people" />
                  {errors.company && <div className="tcsp-field-error">{errors.company}</div>}
                </div>
                <div className="tcsp-field">
                  <label>One workflow you'd automate first (optional)</label>
                  <textarea value={form.context} onChange={update("context")} rows="3" placeholder="Triaging Zendesk tickets into Jira; classifying LP docs by fund; weekly LP report assembly…" />
                </div>
                <div className="tcsp-modal-actions">
                  <button type="submit" className="tcsp-modal-btn">
                    Confirm booking <span>→</span>
                  </button>
                  <span className="tcsp-modal-fineprint">⌘+Return</span>
                </div>
              </form>
            </React.Fragment>
          )}

          {step === 2 && (
            <div className="tcsp-success">
              <div className="tcsp-success-check">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <h3>Booked. Calendar invite is on its way.</h3>
              <p>Check {form.email} in the next 60 seconds. The invite contains the video link and a one-line agenda.</p>
              <div className="tcsp-success-meta">
                <div><span>When</span><span>{slotText}</span></div>
                <div><span>Who</span><span>{form.name}</span></div>
                <div><span>Confirmation</span><span>{confirmCode}</span></div>
              </div>
              <div className="tcsp-success-actions">
                <button className="tcsp-modal-btn" onClick={onClose}>Done</button>
                <button className="tcsp-modal-back" onClick={() => setStep(1)}>← Edit details</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.BookingModal = BookingModal;