/* ===========================================================
   IGEC — Secciones (parte 2): Profesionales, Visitanos, Contacto, Footer
   =========================================================== */

/* ---------- Profesionales ---------- */
function ProfeModal({ profe, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);
  const [shown, setShown] = useState(false);
  useEffect(() => { const t = requestAnimationFrame(() => setShown(true)); return () => cancelAnimationFrame(t); }, []);
  return (
    <div className={`modal-backdrop ${shown ? "is-open" : ""}`} onClick={onClose}>
      <div className="modal" style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Cerrar">×</button>
        <Placeholder className="modal__photo" label="foto profesional" />
        <div className="modal__body">
          <h3>{profe.nombre}</h3>
          <p className="modal__role">{profe.rol}</p>
          <p className="modal__bio">{profe.bio}</p>
        </div>
      </div>
    </div>
  );
}

function Profesionales({ data }) {
  const p = data.profesionales;
  const [sel, setSel] = useState(null);
  return (
    <section className="section" id="profesionales">
      <div className="container">
        <div className="section__head">
          <Kicker>{p.kicker}</Kicker>
          <h2>{p.titulo}</h2>
          <p>{p.intro}</p>
        </div>
        <div className="profes__grid">
          {p.miembros.map((m, i) => (
            <Reveal key={i} delay={i * 70}>
              <button className="profe" onClick={() => setSel(m)} style={{ width: "100%", cursor: "pointer" }}>
                <Placeholder className="profe__photo" label="retrato" />
                <div className="profe__body">
                  <div className="profe__name">{m.nombre}</div>
                  <div className="profe__role">{m.rol}</div>
                  <span className="profe__more">Ver perfil <Icon.arrow width="14" height="14" /></span>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
        <p className="profes__nota">{p.nota}</p>
      </div>
      {sel && <ProfeModal profe={sel} onClose={() => setSel(null)} />}
    </section>
  );
}

/* ---------- Visitanos ---------- */
function Visitanos({ data }) {
  const v = data.visitanos;
  return (
    <section className="section section--alt" id="visitanos">
      <div className="container">
        <div className="section__head">
          <Kicker>{v.kicker}</Kicker>
          <h2>{v.titulo}</h2>
        </div>
        <div className="visit__grid">
          <Reveal className="visit__map">
            <Placeholder label={`mapa — ${v.direccion}`} />
          </Reveal>
          <Reveal delay={100}>
            <div className="info-card">
              <div className="info-row">
                <span className="info-row__icon"><Icon.pin /></span>
                <div>
                  <div className="info-row__label">Dirección</div>
                  <div className="info-row__value">{v.direccion}<br />{v.ciudad}</div>
                </div>
              </div>
              <div className="info-row">
                <span className="info-row__icon"><Icon.phone /></span>
                <div>
                  <div className="info-row__label">Teléfono · WhatsApp</div>
                  <div className="info-row__value"><a href={`tel:${v.telefonoTel}`}>{v.telefonoDisplay}</a></div>
                </div>
              </div>
              <div className="info-row">
                <span className="info-row__icon"><Icon.mail /></span>
                <div>
                  <div className="info-row__label">Correo</div>
                  <div className="info-row__value" style={{ wordBreak: "break-word" }}>
                    <a href={`mailto:${v.email}`}>{v.email}</a>
                  </div>
                </div>
              </div>
              <div className="info-row">
                <span className="info-row__icon"><Icon.clock /></span>
                <div style={{ flex: 1 }}>
                  <div className="info-row__label">Horarios de atención</div>
                  <div className="hours">
                    {v.horarios.map((h, i) => (
                      <div className={`hours__row ${/cerrad/i.test(h.horas) ? "is-closed" : ""}`} key={i}>
                        <span className="dia">{h.dia}</span><span className="hs">{h.horas}</span>
                      </div>
                    ))}
                  </div>
                  <OpenNow data={v} />
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function OpenNow({ data }) {
  const now = new Date();
  const day = now.getDay(); // 0 dom .. 6 sab
  const h = now.getHours();
  const abierto = day >= 1 && day <= 5 && h >= 14 && h < 20;
  return (
    <span className="hours__open" style={{ color: abierto ? "var(--green)" : "var(--ink-soft)" }}>
      <span className="dot" style={{ background: abierto ? "var(--green)" : "var(--ink-soft)", boxShadow: abierto ? undefined : "none" }}></span>
      {abierto ? "Abierto ahora" : "Cerrado ahora · te respondemos pronto"}
    </span>
  );
}

/* ---------- Contacto + formulario ---------- */
function ContactForm({ data }) {
  const c = data.contacto, v = data.visitanos;
  const [form, setForm] = useState({ nombre: "", email: "", motivo: "", mensaje: "" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  const set = (k) => (e) => {
    setForm((f) => ({ ...f, [k]: e.target.value }));
    setErrors((er) => ({ ...er, [k]: undefined }));
  };

  const validate = () => {
    const er = {};
    if (!form.nombre.trim()) er.nombre = "Contanos tu nombre.";
    if (!form.email.trim()) er.email = "Necesitamos tu correo.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) er.email = "Revisá el formato del correo.";
    if (!form.motivo) er.motivo = "Elegí un motivo.";
    if (form.mensaje.trim().length < 10) er.mensaje = "Escribí un mensaje un poco más detallado.";
    return er;
  };

  const submit = (e) => {
    e.preventDefault();
    const er = validate();
    setErrors(er);
    if (Object.keys(er).length === 0) setSent(true);
  };

  const mailto = () => {
    const subject = encodeURIComponent(`Consulta web — ${form.motivo || "General"}`);
    const body = encodeURIComponent(`Nombre: ${form.nombre}\nMotivo: ${form.motivo}\n\n${form.mensaje}`);
    window.location.href = `mailto:${v.email}?subject=${subject}&body=${body}`;
  };

  return (
    <div className="form">
      {!sent ? (
        <form onSubmit={submit} noValidate>
          <div className="form__row">
            <div className={`field ${errors.nombre ? "has-error" : ""}`}>
              <label htmlFor="f-nombre">Nombre</label>
              <input id="f-nombre" value={form.nombre} onChange={set("nombre")} placeholder="Tu nombre" />
              <div className="field__error">{errors.nombre}</div>
            </div>
            <div className={`field ${errors.email ? "has-error" : ""}`}>
              <label htmlFor="f-email">Correo</label>
              <input id="f-email" type="email" value={form.email} onChange={set("email")} placeholder="tu@correo.com" />
              <div className="field__error">{errors.email}</div>
            </div>
          </div>
          <div className={`field ${errors.motivo ? "has-error" : ""}`}>
            <label htmlFor="f-motivo">Motivo de la consulta</label>
            <select id="f-motivo" value={form.motivo} onChange={set("motivo")}>
              <option value="">Elegí una opción…</option>
              {c.motivos.map((m, i) => <option key={i} value={m}>{m}</option>)}
            </select>
            <div className="field__error">{errors.motivo}</div>
          </div>
          <div className={`field ${errors.mensaje ? "has-error" : ""}`}>
            <label htmlFor="f-mensaje">Mensaje</label>
            <textarea id="f-mensaje" value={form.mensaje} onChange={set("mensaje")} placeholder="Contanos en qué podemos ayudarte…"></textarea>
            <div className="field__error">{errors.mensaje}</div>
          </div>
          <button type="submit" className="btn btn--primary btn--block">Enviar consulta <span className="arrow"><Icon.arrow width="18" height="18" /></span></button>
          <p className="form__note">Te responderemos a tu correo a la brevedad. Tus datos se usan solo para responder tu consulta.</p>
        </form>
      ) : (
        <div className="form__success">
          <div className="form__success-mark"><Icon.check width="30" height="30" /></div>
          <h3>¡Gracias, {form.nombre.split(" ")[0]}!</h3>
          <p>Recibimos tu consulta sobre <b>{form.motivo.toLowerCase()}</b>. Te escribiremos a <b>{form.email}</b> dentro de las próximas 48&nbsp;horas hábiles.</p>
          <button className="btn btn--ghost" onClick={mailto}>Abrir en mi correo</button>
        </div>
      )}
    </div>
  );
}

function Contacto({ data }) {
  const c = data.contacto, v = data.visitanos;
  return (
    <section className="section contacto" id="contacto">
      <div className="container">
        <div className="contacto__grid">
          <Reveal>
            <Kicker>{c.kicker}</Kicker>
            <h2 style={{ fontSize: "clamp(30px,4.4vw,46px)" }}>{c.titulo}</h2>
            <p className="contacto__lead">{c.intro}</p>
            <div className="contacto__direct">
              <a className="contacto__chip" href={`https://wa.me/${v.whatsapp}`} target="_blank" rel="noopener">
                <Icon.whatsapp /><div><b>WhatsApp</b><span>{v.telefonoDisplay}</span></div>
              </a>
              <a className="contacto__chip" href={`mailto:${v.email}`}>
                <Icon.mail /><div><b>Correo</b><span>{v.email}</span></div>
              </a>
              <a className="contacto__chip" href={v.linktree} target="_blank" rel="noopener">
                <Icon.link /><div><b>Todos nuestros enlaces</b><span>linktr.ee/Instituto_gestaltico</span></div>
              </a>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <ContactForm data={data} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer({ data }) {
  const v = data.visitanos;
  const go = (e, id) => { e.preventDefault(); scrollToId(id); };
  return (
    <footer className="footer" id="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand-col">
            <div className="brand">
              <span className="footer__logo"><Logo size={42} /></span>
              <span className="brand__text">
                <span className="brand__name">{data.nombre}</span>
                <span className="brand__sub">{data.sigla} · {data.ciudad}</span>
              </span>
            </div>
            <p className="footer__about">{data.tagline} Clínica y formación en Terapia Gestalt en el corazón de Córdoba.</p>
          </div>
          <div className="footer__col">
            <h5>Secciones</h5>
            {data.nav.map((n) => <a key={n.id} href={`#${n.id}`} onClick={(e) => go(e, n.id)}>{n.label}</a>)}
          </div>
          <div className="footer__col">
            <h5>Contacto</h5>
            <a href={`tel:${v.telefonoTel}`}>{v.telefonoDisplay}</a>
            <a href={`mailto:${v.email}`}>Escribinos</a>
            <a href={v.linktree} target="_blank" rel="noopener">Linktree</a>
            <a href={v.instagram} target="_blank" rel="noopener">{v.instagramHandle}</a>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© {new Date().getFullYear()} {data.nombre}. {v.direccion}, {data.ciudad}.</span>
          <div className="footer__social">
            <a href={v.instagram} target="_blank" rel="noopener" aria-label="Instagram"><Icon.instagram /></a>
            <a href={`https://wa.me/${v.whatsapp}`} target="_blank" rel="noopener" aria-label="WhatsApp"><Icon.whatsapp /></a>
            <a href={`mailto:${v.email}`} aria-label="Correo"><Icon.mail /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Profesionales, Visitanos, Contacto, Footer });