/* gallery.jsx — Galería clínica + Contacto/Inscripción + Footer */

function Gallery() {
  const cases = [
  { src: "assets/caso-mandibula-conducto.jpg", label: "Mandíbula 3D · conducto dentario inferior", tags: ["Segmentación - 3D"], span: "wide" },
  { src: "assets/caso-sagital-cefalometrico.png", label: "", tags: ["CBCT", "Patología hipodensa", "Discrepancias verticales"], span: "tall" },
  { src: "assets/caso-caninos-retenidos.png", label: "Caninos retenidos · localización 3D", tags: ["Renderizado", "Diagnóstico"], span: "tall" },
  { src: "assets/caso-senos-maxilares.png", label: "Senos maxilares · coronal", tags: ["CBCT"], span: "" },
  { src: "assets/caso-via-aerea.jpg", label: "Análisis de vía aérea", tags: ["CBCT", "Vía aérea"], span: "wide" },
  { src: "assets/caso-cefalometria-frontal.png", label: "Cefalometría 3D", tags: ["Craneometría", "Renderizado"], span: "tall" },
  { src: "assets/caso-medicion-osea.png", label: "Grosor de tabla ósea", tags: ["CBCT", "Mediciones"], span: "wide" }];

  return (
    <section className="section gallery" id="galeria">
      <div className="wrap">
        <div className="gallery__head reveal">
          <div>
            <div className="eyebrow">Galería clínica</div>
            <h2 className="gallery__title">Casos clínicos reales.</h2>
          </div>
          <p className="gallery__lead">Una selección de estudios maxilofaciales: CBCT, diagnósticos tridimensionales y casos clínicos analizados en profundidad.


          </p>
        </div>

        <div className="gallery__grid">
          {cases.map((c, i) =>
          <figure
            className={`gcard reveal gcard--${c.span || "base"}`}
            key={c.src}
            style={{ "--reveal-delay": `${i % 3 * 0.08}s` }}>
            
              <img className="gcard__img" src={c.src} alt={c.label || "Caso clínico CBCT"} loading="lazy" />
            
              <figcaption className="gcard__meta">
                <div className="gcard__tags">
                  {c.tags.map((t) => <span className="tag" key={t}>{t}</span>)}
                </div>
                {c.label ? <h4 className="gcard__name">{c.label}</h4> : null}
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

}

function Contact() {
  const [form, setForm] = React.useState({ nombre: "", email: "", tel: "", msg: "" });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");
  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const valid = form.nombre.trim() && /\S+@\S+\.\S+/.test(form.email);
  const submit = async (e) => {
    e.preventDefault();
    if (!valid || sending) return;
    setSending(true);
    setError("");
    try {
      const res = await fetch("https://formsubmit.co/ajax/mariaeugeniateranrx@gmail.com", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          _subject: "Nueva solicitud de inscripción — Curso CBCT + IA",
          _template: "table",
          _captcha: "false",
          Nombre: form.nombre,
          Correo: form.email,
          "Teléfono/WhatsApp": form.tel,
          Mensaje: form.msg || "—"
        })
      });
      if (!res.ok) throw new Error("network");
      setSent(true);
    } catch (err) {
      setError("No se pudo enviar la solicitud. Revisa tu conexión o escríbenos por WhatsApp.");
    } finally {
      setSending(false);
    }
  };
  return (
    <section className="section contact" id="contacto">
      <div className="wrap contact__grid">
        <div className="contact__info reveal">
          <div className="eyebrow" style={{ color: "var(--accent-bright)" }}>Inscripciones abiertas · Cupos limitados</div>
          <h2 className="contact__title">Reserva tu lugar en el curso.</h2>
          <p className="contact__lead">
            Diagnóstico en Ortodoncia con 25 Casos Clínicos Reales — CBCT + IA.
            <strong> Curso 100% presencial</strong> y por tiempo limitado. Las fechas se anunciarán pronto;
            déjanos tus datos y el equipo de RDMAX te contactará con la información de inscripción.
          </p>

          {/* highlighted course details */}
          <div className="course-details">
            <div className="course-details__seats">
              <span className="course-details__num">15</span>
              <span className="course-details__num-lbl">cupos<br />disponibles</span>
            </div>
            <div className="course-details__list">
              <div className="cd-item">
                <span className="cd-item__icon"><Icon name="pin" size={18} /></span>
                <p><strong>Presencial en Caracas.</strong> Primera edición del curso — solo 15 cupos.</p>
              </div>
              <div className="cd-item cd-item--bring">
                <span className="cd-item__icon"><Icon name="cpu" size={18} /></span>
                <p><strong>Trae tu equipo:</strong> tablet, laptop (Mac o Windows). Imprescindible para el trabajo con imágenes.</p>
              </div>
              <div className="cd-item">
                <span className="cd-item__icon"><Icon name="card" size={18} /></span>
                <p><strong>Inversión: $350.</strong> Se coordina por WhatsApp.</p>
              </div>
            </div>
          </div>

          <div className="contact__channels">
            <a className="channel channel--featured" href="https://wa.me/584147365422" target="_blank" rel="noopener">
              <span className="channel__badge">Recomendado</span>
              <span className="channel__icon"><Icon name="phone" size={20} /></span>
              <div>
                <strong>+58 414-7365422</strong>
                <span>WhatsApp · Maira Barazarte — Directora administrativa</span>
                <span className="channel__hint">Vía principal de inscripción · aquí coordinamos los métodos de pago disponibles.</span>
              </div>
            </a>
            <a className="wa-direct" href="https://wa.link/iuuzaw" target="_blank" rel="noopener">
              <Icon name="phone" size={20} />
              Comunícate al WhatsApp ahora
            </a>
            <div className="gloss-gift">
              <span className="gloss-gift__glow" aria-hidden="true"></span>
              <span className="gloss-gift__icon"><Icon name="book" size={22} /></span>
              <span className="gloss-gift__body">
                <span className="gloss-gift__kicker">Regalo académico</span>
                <strong className="gloss-gift__title">Escríbenos y llévate el Glosario de Tomografía para Ortodoncia</strong>
                <span className="gloss-gift__sub">Términos CBCT esenciales · por la Dra. María Eugenia Terán</span>
              </span>
              <span className="gloss-gift__arrow"><Icon name="arrow" size={20} /></span>
            </div>
            <a className="channel" href="mailto:mariaeugeniateranrx@gmail.com">
              <span className="channel__icon"><Icon name="mail" size={20} /></span>
              <div><strong>mariaeugeniateranrx@gmail.com</strong><span>Consultas e inscripciones</span></div>
            </a>
            <a className="channel" href="https://instagram.com/rdmaxradiologia" target="_blank" rel="noopener">
              <img className="channel__avatar" src="assets/rdmax-round.png" alt="RDMAX Radiología" />
              <div><strong>@rdmaxradiologia</strong><span>Instagram · RDMAX Radiología</span></div>
            </a>
            <a className="channel" href="https://instagram.com/mariaeugeniateranrx" target="_blank" rel="noopener">
              <img className="channel__avatar" src="assets/rdmax-round.png" alt="Dra. María Eugenia Terán" />
              <div><strong>@mariaeugeniateranrx</strong><span>Instagram · Dra. María Eugenia Terán</span></div>
            </a>
            <div className="channel">
              <span className="channel__icon"><Icon name="pin" size={20} /></span>
              <div><strong>Bogotá · Barquisimeto · Caracas</strong><span>Centros RDMAX · Colombia – Venezuela</span></div>
            </div>
          </div>
        </div>

        <div className="contact__form-wrap reveal" style={{ "--reveal-delay": "0.1s" }}>
          {!sent ?
          <form className="contact__form" onSubmit={submit} noValidate>
              <h3 className="contact__form-title">Solicitar inscripción</h3>
              <label className="field">
                <span>Nombre completo</span>
                <input type="text" value={form.nombre} onChange={upd("nombre")} placeholder="Dr/a. Nombre Apellido" />
              </label>
              <label className="field">
                <span>Correo electrónico</span>
                <input type="email" value={form.email} onChange={upd("email")} placeholder="tucorreo@clinica.com" />
              </label>
              <label className="field">
                <span>Teléfono / WhatsApp</span>
                <input type="tel" value={form.tel} onChange={upd("tel")} placeholder="+58 ..." />
              </label>
              <label className="field">
                <span>Mensaje <em>(opcional)</em></span>
                <textarea rows="3" value={form.msg} onChange={upd("msg")} placeholder="Cuéntanos sobre tu práctica clínica..." />
              </label>
              <button type="submit" className={`btn btn-primary contact__submit ${!valid || sending ? "is-disabled" : ""}`}>
                {sending ? "Enviando…" : <>Enviar solicitud <span className="arrow"><Icon name="arrow" size={18} /></span></>}
              </button>
              {error ? <p className="contact__error">{error}</p> : null}
              <p className="contact__note">Tu solicitud llega directo al equipo de RDMAX · Respuesta en menos de 24 h hábiles.</p>
            </form> :

          <div className="contact__success">
              <span className="contact__success-icon"><Icon name="check" size={34} /></span>
              <h3>¡Solicitud recibida!</h3>
              <p>Gracias, {form.nombre.split(" ")[0] || "doctor/a"}. El equipo de RDMAX se pondrá en contacto contigo muy pronto.</p>
              <button className="btn btn-ghost" onClick={() => {setSent(false);setForm({ nombre: "", email: "", tel: "", msg: "" });}}>
                Enviar otra solicitud
              </button>
            </div>
          }
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer__inner">
        <div className="footer__brand">
          <span className="nav__mark">MT</span>
          <div>
            <strong>Dra. María Eugenia Terán, PhD</strong>
            <span>Radiología Oral y Maxilofacial</span>
          </div>
        </div>
        <nav className="footer__links">
          <a href="#perfil">Perfil</a>
          <a href="#rdmax">RDMAX</a>
          <a href="#curso">Curso</a>
          <a href="#galeria">Casos</a>
          <a href="#contacto">Inscripciones</a>
          <span className="footer__social">
            <a href="https://instagram.com/rdmaxradiologia" target="_blank" rel="noopener" aria-label="Instagram RDMAX"><Icon name="instagram" size={18} /></a>
            <a href="https://instagram.com/mariaeugeniateranrx" target="_blank" rel="noopener" aria-label="Instagram Dra. María Eugenia Terán"><Icon name="instagram" size={18} /></a>
          </span>
        </nav>
        <p className="footer__legal">
          © {new Date().getFullYear()} RDMAX · Radiodiagnóstico Maxilofacial Digital.<br />
          Venezuela – Colombia. Todos los derechos reservados.
        </p>
      </div>
    </footer>);

}

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