function Booking({ open, onClose, prefService }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    service: prefService || "Bridal Makeup",
    date: "",
    venue: "",
    name: "",
    email: "",
    phone: "",
    message: "",
  });
  React.useEffect(() => {
    if (prefService) setData(d => ({ ...d, service: prefService }));
  }, [prefService]);
  React.useEffect(() => {
    if (open) { setStep(0); document.body.style.overflow = "hidden"; }
    else document.body.style.overflow = "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  if (!open) return null;
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const services = ["Bridal Makeup", "Brow Shading", "Cortejo & Familia", "Editorial & Eventos"];
  const canNext0 = !!data.service;
  const canNext1 = !!data.date;
  const canSubmit = data.name && data.email && data.phone;

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(58,47,36,0.6)",
      backdropFilter: "blur(8px)",
      zIndex: 300, display: "grid", placeItems: "center", padding: 24,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "min(880px, 100%)",
        background: "var(--paper)",
        borderRadius: 6,
        overflow: "hidden",
        boxShadow: "0 30px 80px rgba(0,0,0,0.25)",
        display: "grid",
        gridTemplateColumns: "0.7fr 1.2fr",
        maxHeight: "92vh",
      }}>
        {/* Sidebar */}
        <div style={{ background: "var(--coffee)", color: "var(--ivory)", padding: 36, position: "relative" }}>
          <Monogram size={40} color="var(--ivory)" />
          <div className="eyebrow" style={{ color: "var(--marfil)", marginTop: 32 }}>Reserva tu cita</div>
          <h3 className="display" style={{ fontSize: 32, margin: "10px 0 24px", lineHeight: 1.1 }}>
            Tres pasos hasta <span className="italic" style={{ color: "var(--rose-soft)" }}>tu día.</span>
          </h3>
          <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 18 }}>
            {["Servicio & detalles", "Fecha & locación", "Tus datos"].map((t, i) => (
              <li key={i} style={{ display: "flex", gap: 14, alignItems: "center", opacity: step >= i ? 1 : 0.45 }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 999,
                  border: "1px solid var(--bridal)",
                  background: step >= i ? "var(--rose)" : "transparent",
                  borderColor: step >= i ? "var(--rose)" : "var(--bridal)",
                  display: "grid", placeItems: "center",
                  fontSize: 12, color: "var(--ivory)",
                }}>{i + 1}</span>
                <span style={{ fontSize: 14 }}>{t}</span>
              </li>
            ))}
          </ol>
          <div style={{ position: "absolute", bottom: 36, left: 36, right: 36 }}>
            <hr style={{ border: 0, borderTop: "1px solid rgba(234,232,226,0.2)", margin: "0 0 16px" }} />
            <div className="eyebrow" style={{ color: "var(--marfil)" }}>Respuesta &lt; 24 hrs</div>
          </div>
        </div>

        {/* Form */}
        <div style={{ padding: 36, overflow: "auto" }}>
          <button onClick={onClose} style={{
            position: "absolute", top: 20, right: 20,
            width: 36, height: 36, borderRadius: 999,
            border: "1px solid var(--marfil)", color: "var(--coffee)",
          }}>✕</button>

          {step === 0 && (
            <div className="reveal">
              <h4 className="display" style={{ fontSize: 26, margin: "0 0 24px", color: "var(--coffee)" }}>¿Qué servicio te interesa?</h4>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 24 }}>
                {services.map(s => (
                  <button key={s} onClick={() => update("service", s)} style={{
                    padding: "16px 18px",
                    border: "1px solid " + (data.service === s ? "var(--coffee)" : "var(--marfil)"),
                    background: data.service === s ? "var(--coffee)" : "transparent",
                    color: data.service === s ? "var(--ivory)" : "var(--coffee)",
                    borderRadius: 4, textAlign: "left",
                    fontFamily: "var(--serif)", fontSize: 18,
                    transition: "all .25s",
                  }}>{s}</button>
                ))}
              </div>
              <Field label="Cuéntanos más (opcional)" >
                <textarea value={data.message} onChange={e => update("message", e.target.value)} rows={4}
                  placeholder="Estilo de boda, número de personas en cortejo, referencias…"
                  style={inputStyle} />
              </Field>
              <Footer2 onNext={() => setStep(1)} canNext={canNext0} onClose={onClose} />
            </div>
          )}

          {step === 1 && (
            <div className="reveal">
              <h4 className="display" style={{ fontSize: 26, margin: "0 0 24px", color: "var(--coffee)" }}>¿Cuándo y dónde?</h4>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <Field label="Fecha del evento">
                  <input type="date" value={data.date} onChange={e => update("date", e.target.value)} style={inputStyle} />
                </Field>
                <Field label="Hora aproximada de inicio">
                  <input type="time" defaultValue="06:00" style={inputStyle} />
                </Field>
              </div>
              <Field label="Venue / locación">
                <input value={data.venue} onChange={e => update("venue", e.target.value)} placeholder="Hacienda El Carmen, GDL" style={inputStyle} />
              </Field>
              <Field label="¿Cuántas personas además de ti?">
                <div style={{ display: "flex", gap: 8 }}>
                  {["Solo yo", "1–3", "4–6", "7+"].map(o => (
                    <button key={o} onClick={() => update("people", o)} style={{
                      flex: 1, padding: "12px",
                      border: "1px solid " + (data.people === o ? "var(--coffee)" : "var(--marfil)"),
                      background: data.people === o ? "var(--coffee)" : "transparent",
                      color: data.people === o ? "var(--ivory)" : "var(--coffee)",
                      borderRadius: 4, fontSize: 13,
                    }}>{o}</button>
                  ))}
                </div>
              </Field>
              <Footer2 onBack={() => setStep(0)} onNext={() => setStep(2)} canNext={canNext1} />
            </div>
          )}

          {step === 2 && (
            <div className="reveal">
              <h4 className="display" style={{ fontSize: 26, margin: "0 0 24px", color: "var(--coffee)" }}>Tus datos de contacto</h4>
              <Field label="Nombre completo">
                <input value={data.name} onChange={e => update("name", e.target.value)} style={inputStyle} />
              </Field>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <Field label="Correo">
                  <input type="email" value={data.email} onChange={e => update("email", e.target.value)} style={inputStyle} />
                </Field>
                <Field label="WhatsApp">
                  <input type="tel" value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="+52 33 …" style={inputStyle} />
                </Field>
              </div>
              <div style={{
                padding: 18, background: "var(--bridal)", borderRadius: 4, fontSize: 13, color: "var(--coffee)", marginTop: 12,
              }}>
                <strong style={{ fontFamily: "var(--serif)", fontWeight: 500, fontSize: 16 }}>Resumen:</strong>
                <div style={{ marginTop: 8, lineHeight: 1.7 }}>
                  {data.service} · {data.date || "—"} · {data.venue || "—"} · {data.people || "Solo yo"}
                </div>
              </div>
              <Footer2 onBack={() => setStep(1)} onNext={() => setStep(3)} canNext={canSubmit} nextLabel="Enviar solicitud" />
            </div>
          )}

          {step === 3 && (
            <div className="reveal" style={{ textAlign: "center", padding: "40px 20px" }}>
              <Monogram size={80} color="var(--rose)" animated strokeWidth={1.2} />
              <h4 className="display italic" style={{ fontSize: 36, margin: "32px 0 16px", color: "var(--coffee)" }}>
                Gracias, {data.name.split(" ")[0] || "querida"}.
              </h4>
              <p style={{ color: "var(--coffee-soft)", fontSize: 15, maxWidth: 360, margin: "0 auto", lineHeight: 1.6 }}>
                Recibimos tu solicitud. Te escribiremos personalmente al correo y WhatsApp en menos de 24 horas para confirmar disponibilidad.
              </p>
              <button onClick={onClose} className="btn btn-primary" style={{ marginTop: 32 }}>Cerrar</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

const inputStyle = {
  width: "100%",
  padding: "12px 14px",
  border: "1px solid var(--marfil)",
  borderRadius: 4,
  background: "var(--ivory)",
  color: "var(--coffee)",
  fontFamily: "var(--sans)",
  fontSize: 14,
  outline: "none",
};

function Field({ label, children }) {
  return (
    <label style={{ display: "block", marginBottom: 16 }}>
      <span className="eyebrow" style={{ display: "block", marginBottom: 8 }}>{label}</span>
      {children}
    </label>
  );
}

function Footer2({ onBack, onNext, canNext, nextLabel = "Continuar", onClose }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--marfil)" }}>
      {onBack ? (
        <button onClick={onBack} className="btn-ghost btn">← Volver</button>
      ) : <span></span>}
      <button onClick={onNext} disabled={!canNext} className="btn btn-rose"
        style={{ opacity: canNext ? 1 : 0.4, cursor: canNext ? "pointer" : "not-allowed" }}>
        {nextLabel}
      </button>
    </div>
  );
}

window.Booking = Booking;