/* contact.jsx — contact info + multi-step booking */

const BOOK_SERVICES = [
  "Armonización facial", "Botox", "Sculptra", "Diseño de labios",
  "Rejuvenecimiento", "Limpieza facial", "Tricología", "Microinjerto",
  "Estética corporal", "No estoy segura",
];

// Business WhatsApp number (international format, no +, spaces or dashes)
const BUSINESS_WHATSAPP = "573013083210";

// Build the prefilled WhatsApp message from the gathered booking data
function buildWhatsAppUrl(data) {
  const lines = [
    `Hola, soy ${data.name}. Me gustaría agendar una valoración. ✨`,
    "",
    `• Tratamiento de interés: ${data.service}`,
    `• Mi WhatsApp: ${data.phone}`,
  ];
  if (data.notes.trim()) {
    lines.push(`• Información adicional: ${data.notes.trim()}`);
  }
  lines.push("", "¿Me ayudan a coordinar la fecha y hora? Gracias.");
  const text = encodeURIComponent(lines.join("\n"));
  return `https://wa.me/${BUSINESS_WHATSAPP}?text=${text}`;
}

function Booking() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    service: "",
    name: "",
    phone: "",
    notes: "",
  });

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const next = () => setStep((s) => Math.min(s + 1, 2));
  const back = () => setStep((s) => Math.max(s - 1, 0));

  const canNext =
    (step === 0 && data.service) ||
    (step === 1 && data.name && data.phone);

  const submit = (e) => {
    e.preventDefault();
    if (!canNext) return;
    if (step === 1) {
      // Final step: open WhatsApp with the prewritten message, then show confirmation
      window.open(buildWhatsAppUrl(data), "_blank", "noopener,noreferrer");
      next();
    } else {
      next();
    }
  };

  return (
    <form className="booking" onSubmit={submit}>
      {/* Step indicator */}
      <div className="booking-steps">
        {[0, 1, 2].map((i) => (
          <span key={i} className={`booking-step ${i <= step ? "is-done" : ""}`}></span>
        ))}
      </div>

      {step === 0 && (
        <div>
          <div className="booking-step-label">Paso 1 de 2 · Tratamiento</div>
          <h3 className="booking-title">¿Qué te trae hoy?</h3>
          <p className="booking-help">Selecciona el área que más te interesa. Lo refinamos en consulta.</p>
          <div className="svc-pills">
            {BOOK_SERVICES.map((s) => (
              <button
                key={s}
                type="button"
                className={`pill ${data.service === s ? "is-selected" : ""}`}
                onClick={() => update("service", s)}
              >
                {s}
              </button>
            ))}
          </div>
        </div>
      )}

      {step === 1 && (
        <div>
          <div className="booking-step-label">Paso 2 de 2 · Tus datos</div>
          <h3 className="booking-title">¿A nombre de quién?</h3>
          <p className="booking-help">Al confirmar te llevamos a WhatsApp con el mensaje listo para enviar.</p>
          <div className="field">
            <label>Nombre completo</label>
            <input value={data.name} onChange={(e) => update("name", e.target.value)} placeholder="Tu nombre" />
          </div>
          <div className="field">
            <label>WhatsApp</label>
            <input value={data.phone} onChange={(e) => update("phone", e.target.value)} placeholder="+57 301 308 3210" />
          </div>
          <div className="field">
            <label>Algo que debamos saber (opcional)</label>
            <textarea
              rows={3}
              value={data.notes}
              onChange={(e) => update("notes", e.target.value)}
              placeholder="Embarazo, medicamentos, tratamientos previos, lo que prefieras compartir..."
            />
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="booking-confirm">
          <div className="confirm-check">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 14l6 6 12-13" />
            </svg>
          </div>
          <div className="booking-step-label">Casi listo</div>
          <h3 className="booking-title">Gracias, {data.name.split(" ")[0] || "ya casi terminamos"}.</h3>
          <p className="booking-help" style={{ maxWidth: 360, margin: "0 auto" }}>
            Abrimos WhatsApp con tu solicitud de <strong>{data.service}</strong> lista para enviar.
            Si no se abrió, toca el botón de abajo.
          </p>
          <div style={{ marginTop: 28 }}>
            <a className="btn btn-gold" href={buildWhatsAppUrl(data)} target="_blank" rel="noreferrer">
              Abrir WhatsApp ahora <Arr />
            </a>
          </div>
        </div>
      )}

      {step < 2 && (
        <div className="booking-actions">
          {step > 0 ? (
            <button type="button" className="btn btn-ghost" onClick={back}>← Anterior</button>
          ) : (
            <span></span>
          )}
          <button
            type="submit"
            className={`btn ${canNext ? "btn-primary" : "btn-ghost"}`}
            disabled={!canNext}
            style={!canNext ? { opacity: 0.5, cursor: "not-allowed" } : {}}
          >
            {step === 1 ? "Confirmar solicitud" : "Continuar"} <Arr />
          </button>
        </div>
      )}
    </form>
  );
}

function Contact({ bookingRef }) {
  return (
    <section className="contact-wrap section-pad" id="contacto" ref={bookingRef}>
      <div className="wrap">
        <div className="contact-grid">
          <Reveal>
            <Eyebrow>Contacto · Agenda</Eyebrow>
            <h2 className="section-title" style={{ marginTop: 18, color: "var(--cream)" }}>
              Reserva tu<br/><em style={{ color: "var(--champagne)" }}>valoración.</em>
            </h2>
            <p className="lead" style={{ color: "oklch(0.86 0.02 70)", marginTop: 24, maxWidth: "46ch" }}>
              Cupos limitados cada semana. Atendemos con cita previa para garantizar
              la atención que cada paciente merece.
            </p>

            <div className="contact-info-list">
              <div className="contact-info">
                <div className="contact-info-ico">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M9 16s6-5 6-10A6 6 0 0 0 3 6c0 5 6 10 6 10z" />
                    <circle cx="9" cy="6.5" r="2" />
                  </svg>
                </div>
                <div>
                  <div className="contact-info-label">Ubicación</div>
                  <div className="contact-info-val">Montería, Córdoba — Colombia</div>
                </div>
              </div>

              <div className="contact-info">
                <div className="contact-info-ico">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M3 4c0 7 4 11 11 11l1.5-3-3-1-1.5 1.5C8 11 5 8 5 5.5L6.5 4l-1-3L3 2.5z" />
                  </svg>
                </div>
                <div>
                  <div className="contact-info-label">WhatsApp directo</div>
                  <div className="contact-info-val"><a href="https://wa.me/573013083210">+57 301 308 3210</a></div>
                </div>
              </div>

              <div className="contact-info">
                <div className="contact-info-ico">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="2" y="2" width="14" height="14" rx="4" />
                    <circle cx="9" cy="9" r="3.5" />
                    <circle cx="13.5" cy="4.5" r="0.5" fill="currentColor" />
                  </svg>
                </div>
                <div>
                  <div className="contact-info-label">Instagram</div>
                  <div className="contact-info-val"><a href="https://www.instagram.com/medvictoriadjanon/" target="_blank" rel="noreferrer">@medvictoriadjanon</a></div>
                </div>
              </div>

              <div className="contact-info">
                <div className="contact-info-ico">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="9" cy="9" r="7" />
                    <path d="M9 4v5l3 2" />
                  </svg>
                </div>
                <div>
                  <div className="contact-info-label">Horario de atención</div>
                  <div className="contact-info-val" style={{ fontSize: 17 }}>Lunes a Viernes · 8:00 – 18:00<br/>Sábado · 8:00 – 12:00</div>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={1}>
            <Booking />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* Footer */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <img src="assets/logo-vd.png" alt="Dra. Victoria D'janon · Medicina Estética & Antiedad" style={{ width: 220, height: "auto", marginBottom: 24, display: "block" }} />
            <p>
              Clínica boutique de medicina estética en Montería, Córdoba.
              Resultados naturales, criterio médico y experiencia personalizada.
            </p>
          </div>
          <div>
            <h4>Tratamientos</h4>
            {["Armonización facial","Botox","Sculptra","Tricología","Microinjerto FUE","Skincare clínico"].map(s => (
              <a key={s} className="footer-link" href="#servicios">{s}</a>
            ))}
          </div>
          <div>
            <h4>Explorar</h4>
            {[["Sobre la doctora","#doctora"],["Resultados","#resultados"],["Diario","#educacion"],["Preguntas","#faq"],["Contacto","#contacto"]].map(([l,h]) => (
              <a key={l} className="footer-link" href={h}>{l}</a>
            ))}
          </div>
          <div>
            <h4>Contacto</h4>
            <a className="footer-link" href="https://wa.me/573013083210">WhatsApp · +57 301 308 3210</a>
            <a className="footer-link" href="https://www.instagram.com/medvictoriadjanon/" target="_blank" rel="noreferrer">@medvictoriadjanon</a>
            <a className="footer-link" href="#contacto">Agendar valoración</a>
            <p style={{ marginTop: 12, fontSize: 13 }}>Montería, Córdoba<br/>Colombia</p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 VD Medicina Estética. Todos los derechos reservados.</span>
          <span>Diseño: Estudio interno · Hecho con cuidado en Montería</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });