/* global React, ReactDOM, COPY */
const { useState, useEffect, useRef } = React;

const INNER_LINKS = {
  es: [
    { href: "/", idx: "01", label: "Inicio" },
    { href: "/nosotros.html", idx: "02", label: "Nosotros" },
    { href: "/soluciones.html", idx: "03", label: "Soluciones" },
    { href: "/desarrollos.html", idx: "04", label: "Desarrollos" },
    { href: "/contacto.html", idx: "05", label: "Contacto" },
  ],
  en: [
    { href: "/", idx: "01", label: "Home" },
    { href: "/nosotros.html", idx: "02", label: "About" },
    { href: "/soluciones.html", idx: "03", label: "Solutions" },
    { href: "/desarrollos.html", idx: "04", label: "Lab" },
    { href: "/contacto.html", idx: "05", label: "Contact" },
  ],
};

function ContactHero({ p }) {
  return (
    <section className="page-hero" style={{ paddingBottom: 64 }}>
      <div className="wrap">
        <div className="section-tag reveal">{p.tag}</div>
        <h1 className="page-hero-title reveal" data-delay="1">
          {p.title1}<br/>
          <span style={{ color: "var(--accent)" }}>{p.title2}</span>
        </h1>
      </div>
    </section>
  );
}

function ContactLeft({ p }) {
  return (
    <div className="contact-left">
      <p className="contact-intro reveal">{p.intro}</p>

      <div className="fit-block reveal" data-delay="1">
        <div className="fit-block-title">{p.do.title}</div>
        <ul className="fit-items">
          {p.do.items.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
      </div>

      <div className="fit-block dont reveal" data-delay="2">
        <div className="fit-block-title">{p.dont.title}</div>
        <ul className="fit-items">
          {p.dont.items.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
      </div>

      <div className="expect-block reveal" data-delay="3">
        <div className="expect-title">{p.expect.title}</div>
        <ol className="expect-steps">
          {p.expect.steps.map((s, i) => <li key={i}>{s}</li>)}
        </ol>
      </div>

      <div className="direct-row reveal" data-delay="4">
        {p.contact.map((c, i) => (
          <div key={i} className="direct-item">
            <span className="direct-label">{c.label}</span>
            <a href={c.href} className="direct-value">{c.value}</a>
          </div>
        ))}
      </div>
    </div>
  );
}

function ContactForm({ p }) {
  const [status, setStatus] = useState(null);
  const [msg, setMsg] = useState("");
  const formRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    setMsg("");

    fetch("send_email.php", { method: "POST", body: new FormData(formRef.current) })
      .then(r => r.json())
      .then(res => {
        setMsg(res.message);
        if (res.status === "success") {
          setStatus("success");
          formRef.current.reset();
        } else {
          setStatus("error");
        }
      })
      .catch(() => {
        setMsg("Error de conexión. Por favor intenta de nuevo.");
        setStatus("error");
      });
  }

  return (
    <div className="contact-right reveal">
      <div className="form-wrap">
        <div className="form-title">{p.title}</div>
        <p className="form-sub">{p.sub}</p>

        {msg && <div className={`form-response ${status}`}>{msg}</div>}

        <form ref={formRef} onSubmit={handleSubmit}>
          {p.fields.map(f => (
            <div key={f.id} className="form-field">
              <label className="form-label" htmlFor={f.id}>{f.label}</label>
              <input
                className="form-input"
                id={f.id}
                name={f.id}
                type={f.type}
                placeholder={f.placeholder}
                required
              />
            </div>
          ))}
          <div className="form-field">
            <label className="form-label" htmlFor="pain">{p.textareaLabel}</label>
            <textarea
              className="form-input"
              id="pain"
              name="pain"
              placeholder={p.textareaPlaceholder}
            />
          </div>
          <button
            type="submit"
            className="form-submit"
            disabled={status === "sending" || status === "success"}
          >
            {status === "sending" ? p.sendingLabel : status === "success" ? p.sentLabel : p.submit}
          </button>
          <p className="form-note">{p.note}</p>
        </form>
      </div>
    </div>
  );
}

function ContactApp() {
  const [lang, setLang] = useState("es");
  const [direction, setDirection] = useState("a");

  useEffect(() => { document.documentElement.setAttribute("data-lang", lang); }, [lang]);
  useEffect(() => { document.documentElement.setAttribute("data-direction", direction); }, [direction]);
  useEffect(() => { if (typeof initChat === "function") initChat(); }, []);

  useReveal();
  const t = COPY[lang];
  const p = t.contacto;

  return (
    <>
      <MagnetCursor/>
      <div className="grid-overlay"/>
      <StatusBar t={t}/>
      <Nav
        t={t}
        lang={lang}
        setLang={setLang}
        direction={direction}
        setDirection={setDirection}
        navLinks={INNER_LINKS[lang]}
        navCtaHref="/contacto.html"
      />
      <main>
        <ContactHero p={p.hero}/>
        <section className="section" style={{ paddingTop: 48 }}>
          <div className="wrap">
            <div className="contact-split">
              <ContactLeft p={p.left}/>
              <ContactForm p={p.form}/>
            </div>
          </div>
        </section>
      </main>
      <Footer t={t}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactApp/>);