// Booking — interactive form with service pills, date/time, contact info, success state
const { useState } = React;

const Booking = () => {
  const [service, setService] = useState("preventiva");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [date, setDate] = useState("");
  const [time, setTime] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const reset = () => {
    setSubmitted(false);
    setName(""); setEmail(""); setPhone(""); setDate(""); setTime("");
    setService("preventiva");
  };

  return (
    <section className="section booking" id="contacto">
      <div className="container">
        <div className="booking__grid">
          <div className="booking__intro">
            <span className="eyebrow-mark">Agenda tu cita</span>
            <h2>¡Donde todo comienza!</h2>
            <p>
              Reserva en menos de un minuto. Te confirmamos por correo y SMS, y
              te recordamos el día antes.
            </p>

            <div className="booking__contact-block">
              <div className="booking__contact-item">
                <div className="booking__contact-item-icon">
                  <img src="../../assets/icons/icon-location.png" alt="" />
                </div>
                <div>
                  <strong>Visítanos</strong>
                  Ave. Roosevelt 1450, San Juan, PR
                </div>
              </div>
              <div className="booking__contact-item">
                <div className="booking__contact-item-icon">
                  <img src="../../assets/icons/icon-telemedicine.png" alt="" />
                </div>
                <div>
                  <strong>Telemedicina</strong>
                  Lunes a sábado, 7am – 9pm
                </div>
              </div>
              <div className="booking__contact-item">
                <div className="booking__contact-item-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{color: "#F4F9F9"}}>
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"></path>
                  </svg>
                </div>
                <div>
                  <strong>Llámanos</strong>
                  +1 787 555 1234 · hola@saludaware.pr
                </div>
              </div>
            </div>
          </div>

          <div className="booking__form">
            {submitted ? (
              <div className="booking__success">
                <img src="../../assets/iso-saludaware-original.png" className="booking__success-iso" alt="" />
                <h3>Cita confirmada.</h3>
                <p>
                  Te enviamos los detalles a <strong>{email || "tu correo"}</strong>.
                  Si necesitas cambiar algo, estamos a un mensaje de distancia.
                </p>
                <button className="btn btn-outline" onClick={reset}>Reservar otra</button>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div className="booking__field">
                  <label>Tipo de consulta</label>
                  <div className="booking__pills">
                    {[
                      ["preventiva", "Medicina preventiva"],
                      ["estetica", "Medicina estética"],
                      ["telemedicina", "Telemedicina"],
                      ["nutricion", "Nutrición"],
                    ].map(([k, label]) => (
                      <span
                        key={k}
                        className={`booking__pill ${service === k ? "active" : ""}`}
                        onClick={() => setService(k)}
                      >{label}</span>
                    ))}
                  </div>
                </div>

                <div className="booking__form-row">
                  <div className="booking__field">
                    <label>Nombre completo</label>
                    <input type="text" placeholder="María González" value={name} onChange={e => setName(e.target.value)} required />
                  </div>
                  <div className="booking__field">
                    <label>Teléfono</label>
                    <input type="tel" placeholder="787 555 0000" value={phone} onChange={e => setPhone(e.target.value)} required />
                  </div>
                </div>

                <div className="booking__field">
                  <label>Correo electrónico</label>
                  <input type="email" placeholder="tu@correo.com" value={email} onChange={e => setEmail(e.target.value)} required />
                </div>

                <div className="booking__form-row">
                  <div className="booking__field">
                    <label>Fecha preferida</label>
                    <input type="date" value={date} onChange={e => setDate(e.target.value)} required />
                  </div>
                  <div className="booking__field">
                    <label>Hora</label>
                    <select value={time} onChange={e => setTime(e.target.value)} required>
                      <option value="">Elige una hora</option>
                      <option>09:00 am</option>
                      <option>10:30 am</option>
                      <option>11:45 am</option>
                      <option>02:00 pm</option>
                      <option>03:30 pm</option>
                      <option>05:00 pm</option>
                    </select>
                  </div>
                </div>

                <button type="submit" className="btn btn-primary btn-lg" style={{width: "100%", justifyContent: "center", marginTop: 8}}>
                  Confirmar mi cita <span aria-hidden="true">→</span>
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Booking = Booking;