/* Blog + Contacto */
(function () {
  const { useState, useRef } = React;

  function Blog({ data }) {
    const b = data.blog;
    return (
      <section id="blog" className="section blog">
        <div className="wrap blog__head reveal">
          <div>
            <span className="eyebrow">{b.eyebrow}</span>
            <h2 className="h2">{b.title}</h2>
          </div>
          <a className="btn btn-ghost" href="blog.html">
            Ver todo el blog <Icon name="arrowUpRight" size={18} />
          </a>
        </div>
        <div className="wrap blog__grid">
          {b.posts.map((p, i) => (
            <a key={i} className="card post reveal" data-d={i + 1} href={p.href}>
              <div className="post__media">
                <img src={p.img} alt="" loading="lazy" />
                <span className="post__tag">{p.tag}</span>
              </div>
              <div className="post__body">
                <h3 className="h3">{p.title}</h3>
                <div className="post__meta">
                  <span><Icon name="clock" size={15} /> {p.read} de lectura</span>
                  <span className="post__arrow"><Icon name="arrowUpRight" size={18} /></span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  function Contacto({ data }) {
    const c = data.contact;
    const [sent, setSent] = useState(false);
    const [folio, setFolio] = useState("");
    const [enviando, setEnviando] = useState(false);
    const [error, setError] = useState("");
    /* Momento en que se montó el formulario: el servidor exige un mínimo
       de segundos de llenado como medida anti-bot. */
    const t0 = useRef(Math.floor(Date.now() / 1000));

    const submit = (e) => {
      e.preventDefault();
      if (enviando) return;
      setError("");
      setEnviando(true);

      const fd = new FormData(e.target);
      fd.append("_t", String(t0.current));

      fetch("api/contacto.php", { method: "POST", body: fd })
        .then((r) => r.json().then((j) => ({ ok: r.ok, j })))
        .then(({ j }) => {
          if (j.ok) {
            setFolio(j.folio);
            setSent(true);
          } else {
            const errs = j.errors || {};
            setError(errs._ || Object.values(errs)[0] || "No se pudo enviar tu mensaje.");
          }
        })
        .catch(() => setError("No se pudo conectar. Revisa tu conexión e intenta de nuevo."))
        .then(() => setEnviando(false));
    };
    return (
      <section id="contacto" className="section contacto">
        <div className="wrap contacto__grid">
          <div className="contacto__info reveal">
            <span className="eyebrow">{c.eyebrow}</span>
            <h2 className="h2">{c.title}</h2>
            <p className="lead">{c.lead}</p>
            <ul className="contacto__list">
              <li><span className="contacto__ic"><Icon name="phone" size={20} /></span><div><strong>Teléfono de oficina</strong><span><a href="tel:+525598938804">(55) 9893 8804</a></span></div></li>
              <li><span className="contacto__ic"><Icon name="whatsapp" size={20} /></span><div><strong>WhatsApp</strong><span><a href="https://wa.me/526461171693" target="_blank" rel="noreferrer">(646) 117 1693</a></span></div></li>
              <li><span className="contacto__ic"><Icon name="mail" size={20} /></span><div><strong>Correo</strong><span><a href="mailto:contacto@hemel.mx">contacto@hemel.mx</a></span></div></li>
              <li><span className="contacto__ic"><Icon name="mapPin" size={20} /></span><div><strong>Dirección corporativa</strong><span>Av. Isaac Newton #186, Polanco V Sección,<br />Miguel Hidalgo, CDMX, C.P. 11560</span></div></li>
            </ul>
            <div className="contacto__social">
              {data.social.map((s) => (
                <a key={s.icon} href={s.href} target="_blank" rel="noreferrer" className="nav__icon" aria-label={s.label}>
                  <Icon name={s.icon} size={19} />
                </a>
              ))}
            </div>
          </div>

          <div className="card contacto__card reveal" data-d="1">
            {sent ? (
              <div className="contacto__done">
                <div className="contacto__done-ic"><Icon name="check" size={30} stroke={2.2} /></div>
                <h3 className="h3">¡Gracias! Te contactaremos pronto.</h3>
                <p className="muted">Un asesor revisará tu solicitud y responderá con tiempos y arancel.</p>
                {folio && <p className="muted"><strong>Folio:</strong> {folio}</p>}
                <button className="btn btn-ghost" onClick={() => { setSent(false); setFolio(""); }}>Enviar otra solicitud</button>
              </div>
            ) : (
              <form onSubmit={submit} className="form">
                <div className="form__row">
                  <label className="field"><span>Nombre</span><input name="nombre" required placeholder="Tu nombre" autoComplete="name" /></label>
                  <label className="field"><span>Empresa</span><input name="empresa" placeholder="Opcional" autoComplete="organization" /></label>
                </div>
                <div className="form__row">
                  <label className="field"><span>Correo</span><input name="correo" type="email" required placeholder="tucorreo@ejemplo.com" autoComplete="email" /></label>
                  <label className="field"><span>Teléfono</span><input name="telefono" placeholder="+52" autoComplete="tel" /></label>
                </div>
                <label className="field"><span>Asunto</span>
                  <div className="field__select">
                    <select name="asunto" required defaultValue="">
                      <option value="" disabled>Selecciona una opción</option>
                      {c.subjects.map((s) => <option key={s}>{s}</option>)}
                    </select>
                    <Icon name="chevronDown" size={18} />
                  </div>
                </label>
                <label className="field"><span>Mensaje</span><textarea name="mensaje" required rows={4} placeholder="Cuéntanos qué necesitas valuar…" /></label>
                {/* Honeypot: invisible para humanos, los bots lo llenan. */}
                <input type="text" name="sitio_web" defaultValue="" tabIndex={-1} autoComplete="off"
                       aria-hidden="true" style={{ position: "absolute", left: "-9999px", opacity: 0 }} />
                {error && <p className="form__note" style={{ color: "#b91c1c" }}>{error}</p>}
                <button className="btn btn-primary form__submit" type="submit" disabled={enviando}>
                  {enviando ? "Enviando…" : <>Enviar solicitud <Icon name="send" size={18} /></>}
                </button>
                <p className="form__note">Al enviar aceptas nuestro <a href="aviso-de-privacidad.html" target="_blank">Aviso de Privacidad</a>.</p>
              </form>
            )}
          </div>
        </div>
      </section>
    );
  }

  window.Blog = Blog;
  window.Contacto = Contacto;
})();