/* AMARINE — Contacto */

function ContactPage() {
  const t = useT();
  const [line, setLine] = React.useState("events");
  const [geo, setGeo] = React.useState("mexico");
  const [sent, setSent] = React.useState(false);
  const [showToast, setShowToast] = React.useState(false);
  const params = new URLSearchParams(window.location.search);

  React.useEffect(() => {
    document.body.classList.add("blend-header-logo");

    if (params.get("success") === "true") {
      setShowToast(true);

      setTimeout(() => {
        setShowToast(false);
      }, 6000);

      window.history.replaceState({}, document.title, window.location.pathname);
    }

    const readLine = () => {
      const params = new URLSearchParams(window.location.search);
      const ql = params.get("line");
      if (ql === "events" || ql === "hospitality" || ql === "both") setLine(ql);
    };

    let unsubscribe;

    if (window.AMARINE_ROUTER) {
      unsubscribe = window.AMARINE_ROUTER.onChange(readLine);
    }

    return () => {
      document.body.classList.remove("blend-header-logo");

      if (unsubscribe) {
        unsubscribe();
      }
    };
  }, []);

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  const lineLabel =
    line === "events"
      ? t("contact.routing.line.events")
      : line === "hospitality"
        ? t("contact.routing.line.hospitality")
        : t("contact.routing.line.both");
  const geoLabel =
    geo === "mexico"
      ? t("contact.form.geo.mexico")
      : geo === "spain"
        ? t("contact.form.geo.spain")
        : geo === "usa"
          ? t("contact.form.geo.usa")
          : t("contact.routing.geo.global");

  return (
    <>
      <Header active="contact" />
      {showToast && (
        <div className="amarine-toast">
          <div className="toast-mark">✓</div>

          <div className="toast-content">
            <div className="toast-title">{t("contact.toast.title")}</div>

            <div className="toast-text">{t("contact.toast.body")}</div>
          </div>
        </div>
      )}
      <main>
        <section className="contact-hero gut">
          <Reveal>
            <span className="eyebrow">{t("contact.eyebrow")}</span>
          </Reveal>
          <Reveal as="h1" delay={120}>
            {t("contact.hero.title.part1")}{" "}
            <span className="it">{t("contact.hero.title.part2")}</span>
          </Reveal>
          <Reveal delay={200}>
            <p>
              {t("contact.hero.desc")}{" "}
              <a href="mailto:hola@amarine.mx">{t('contact.press.email')}</a>.
            </p>
          </Reveal>
        </section>

        <section className="contact-grid">
          <form
            className="form"
            action="https://formsubmit.co/hola@amarine.mx"
            method="POST"
          >
            <input type="hidden" name="_subject" value={t('contact.form.subject')} />
            <input type="hidden" name="_captcha" value="true" />
            <input type="hidden" name="_template" value="box" />
            <input
              type="hidden"
              name="_next"
              value="https://amarine-phi.vercel.app/contact?success=true"
            />

            <div className="fld">
              <label>
                {t("contact.form.name")}{" "}
                <span className="opt">{t("contact.form.required")}</span>
              </label>
              <input required type="text" name="name" placeholder="—" />
            </div>

            <div className="fld">
              <label>
                {t("contact.form.email")}{" "}
                <span className="opt">{t("contact.form.required")}</span>
              </label>
              <input required type="email" name="email" placeholder="—" />
            </div>

            <div className="fld full">
              <label>
                {t("contact.form.company")}{" "}
                <span className="opt">{t("contact.form.required")}</span>
              </label>
              <input required type="text" name="company" placeholder="—" />
            </div>

            <div className="fld full">
              <label>
                {t("contact.form.line")}{" "}
                <span className="opt">{t("contact.form.required")}</span>
              </label>

              <input type="hidden" name="line" value={line} />

              <div className="seg">
                {[
                  { v: "events", l: t("contact.form.line.events") },
                  { v: "hospitality", l: t("contact.form.line.hosp") },
                  { v: "both", l: t("contact.form.line.both") },
                ].map((o) => (
                  <div
                    key={o.v}
                    className={`seg-btn ${line === o.v ? "on" : ""}`}
                    onClick={() => setLine(o.v)}
                  >
                    {o.l}
                  </div>
                ))}
              </div>
            </div>

            <div className="fld full">
              <label>
                {t("contact.form.geo")}{" "}
                <span className="opt">{t("contact.form.required")}</span>
              </label>

              <input type="hidden" name="region" value={geo} />

              <div className="seg">
                {[
                  { v: "mexico", l: t("contact.form.geo.mexico") },
                  { v: "spain", l: t("contact.form.geo.spain") },
                  { v: "usa", l: t("contact.form.geo.usa") },
                  { v: "other", l: t("contact.form.geo.other") },
                ].map((o) => (
                  <div
                    key={o.v}
                    className={`seg-btn ${geo === o.v ? "on" : ""}`}
                    onClick={() => setGeo(o.v)}
                  >
                    {o.l}
                  </div>
                ))}
              </div>
            </div>

            <div className="fld full">
              <label>
                {t("contact.form.project")}{" "}
                <span className="opt">{t("contact.form.required")}</span>
              </label>
              <textarea
                required
                name="project"
                placeholder={t("contact.form.project.placeholder")}
              />
            </div>

            <div className="fld full">
              <label>
                {t("contact.form.timeline")}{" "}
                <span className="opt">{t("contact.form.timeline.opt")}</span>
              </label>
              <input
                type="text"
                name="timeline"
                placeholder={t("contact.form.timeline.placeholder")}
              />
            </div>

            <div className="submit-row full">
              <span className="privacy">{t("contact.form.privacy")}</span>
              <button type="submit" className="btn btn-primary">
                {sent ? t("contact.form.sent") : t("contact.form.submit")}{" "}
                <span className="arrow">→</span>
              </button>
            </div>

            <div
              className="full"
              style={{
                paddingTop: 16,
                fontFamily: "var(--serif)",
                fontStyle: "italic",
                fontSize: 14,
                color: "var(--gold)",
              }}
            >
              {t("contact.routing.prefix")} {lineLabel} · {geoLabel}.
            </div>
          </form>

          <aside className="contact-side">
            <h4>{t("contact.team.title")}</h4>
            <p className="role">
              <br />
              <a
                href="mailto:hola@amarine.mx"
                style={{
                  color: "var(--teal)",
                  borderBottom: "1px solid var(--gold)",
                  paddingBottom: 1,
                }}
              >
                {t('contact.press.email')}
              </a>
            </p>

            <div className="hubs">
              <div className="hub">
                <div className="city">{t("contact.hub.mexico.city")}</div>
                <div className="meta">{t("contact.hub.mexico.meta")}</div>
              </div>
              <div className="hub">
                <div className="city">{t("contact.hub.spain.city")}</div>
                <div className="meta">{t("contact.hub.spain.meta")}</div>
              </div>
              <div className="hub">
                <div className="city">{t("contact.hub.us.city")}</div>
                <div className="meta">{t("contact.hub.us.meta")}</div>
              </div>
            </div>

            <div
              style={{
                marginTop: 48,
                paddingTop: 24,
                borderTop: "1px solid var(--rule)",
              }}
            >
              <span className="numeral">{t("contact.press.title")}</span>
              <p
                style={{
                  marginTop: 12,
                  fontSize: 14,
                  color: "var(--graphite)",
                }}
              >
                {t("contact.press.desc.part1")}{" "}
                <a
                  href="mailto:hola@amarine.mx"
                  style={{
                    color: "var(--teal)",
                    borderBottom: "1px solid var(--gold)",
                    paddingBottom: 1,
                  }}
                >
                  {t("contact.press.email")}
                </a>{" "}
                {t("contact.press.desc.part2")}
              </p>
            </div>
          </aside>
        </section>
      </main>
      <Footer />
    </>
  );
}

// Expose to window for router
window.AMARINE_PAGES = window.AMARINE_PAGES || {};
window.AMARINE_PAGES.ContactPage = ContactPage;