// TagWave Contact page

function ContactApp() {
  const [lang, setLang] = React.useState("en");
  const tr = TRANSLATIONS[lang];

  return (
    <LangContext.Provider value={{ lang, setLang, tr }}>
      <ContactNav />
      <main>
        <ContactHero />
      </main>
      <ContactFooter />
    </LangContext.Provider>
  );
}

/* ─── NAV ─── */
function ContactNav() {
  const { tr } = useLang();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 16);
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  return (
    <nav className={`top ${scrolled ? "scrolled" : ""}`}>
      <a className="logo" href="index.html">
        <span className="logo-mark"><i></i></span>
        TagWave
      </a>
      <div className="nav-links">
        <a href="index.html#features">{tr.nav.features}</a>
        <a href="index.html#workflow">{tr.nav.workflow}</a>
        <a href="index.html#integrations">{tr.nav.integrations}</a>
        <a href="index.html#pricing">{tr.nav.pricing}</a>
        <a href="index.html#faq">{tr.nav.faq}</a>
      </div>
      <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
        <a href="#" style={{ color: "var(--bone-dim)", textDecoration: "none", fontSize: 13.5, marginRight: 6 }}>{tr.nav.signin}</a>
        <a className="btn btn-primary" href="index.html#pricing">
          <span className="dot"></span>{tr.nav.download}
        </a>
      </div>
    </nav>
  );
}

/* ─── CONTACT HERO ─── */
function ContactHero() {
  const { tr, lang } = useLang();
  const c = tr.contact;
  // Web3Forms: envio direto do navegador, sem função serverless (o Vercel deste
  // projeto não builda /api). A access key é PÚBLICA. Pegar grátis em web3forms.com.
  const WEB3FORMS_ACCESS_KEY = "36bfe4e5-ed18-4ed0-9178-2e2798b46028";

  const [form, setForm] = React.useState({ name: "", email: "", message: "" });
  const [status, setStatus] = React.useState("idle"); // idle | loading | success | error
  const [focused, setFocused] = React.useState(null);

  // Aliases para compatibilidade com o JSX abaixo
  const sent = status === "success";

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;

    setStatus("loading");
    try {
      // FormData (multipart) evita o preflight CORS que o JSON dispara.
      const fd = new FormData();
      fd.append("access_key", WEB3FORMS_ACCESS_KEY);
      fd.append("subject", "Novo contato — TagWave (" + lang + ")");
      fd.append("from_name", "TagWave Landing");
      fd.append("name", form.name);
      fd.append("email", form.email);
      fd.append("message", form.message);
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        body: fd,
      });
      const data = await res.json().catch(() => ({}));
      if (data.success) {
        setStatus("success");
      } else {
        setStatus("error");
      }
    } catch (_) {
      setStatus("error");
    }
  };

  const inputStyle = (field) => ({
    width: "100%",
    background: focused === field ? "rgba(244,237,228,0.04)" : "rgba(244,237,228,0.02)",
    border: `1px solid ${focused === field ? "color-mix(in oklab, var(--accent) 60%, transparent)" : "rgba(244,237,228,0.1)"}`,
    borderRadius: 10,
    padding: "14px 18px",
    color: "var(--bone)",
    fontFamily: "'Geist', sans-serif",
    fontSize: 14,
    outline: "none",
    transition: "border-color .2s, background .2s",
    boxSizing: "border-box",
  });

  const labelStyle = {
    display: "block",
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 10,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "var(--bone-mid)",
    marginBottom: 8,
  };

  return (
    <section style={{ position: "relative", minHeight: "100vh", paddingTop: 140, paddingBottom: 100, overflow: "hidden" }}>
      {/* glows */}
      <div className="glow" style={{ width: 700, height: 700, background: "var(--accent)", top: -200, right: -150, opacity: 0.14 }}></div>
      <div className="glow" style={{ width: 500, height: 500, background: "var(--copper)", bottom: 0, left: -120, opacity: 0.12 }}></div>

      <div className="container">
        {/* Eyebrow */}
        <div className="eyebrow" style={{ marginBottom: 48 }}>
          <span style={{ color: "var(--accent)" }}>◆</span> &nbsp; {c.eyebrow}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 0.9fr)", gap: 80, alignItems: "start" }}>

          {/* LEFT: heading + form */}
          <div>
            <h1 className="editorial-h1" style={{ margin: "0 0 32px", lineHeight: 0.9 }}>
              {c.h1}<span className="serif" style={{ color: "var(--accent)", fontWeight: 400 }}>{c.h1_italic}</span>{c.h1_end}
            </h1>
            <p style={{ fontSize: 16, color: "var(--bone-dim)", lineHeight: 1.6, maxWidth: "48ch", marginBottom: 52 }}>
              {c.subtitle}
            </p>

            {sent ? (
              <div style={{
                padding: "40px 36px",
                borderRadius: 16,
                border: "1px solid color-mix(in oklab, var(--accent) 40%, transparent)",
                background: "linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, #1c1817), #0b0908)",
                boxShadow: "0 40px 80px -40px var(--accent)",
              }}>
                <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.025em", marginBottom: 10 }}>{c.sent_title}</div>
                <p style={{ color: "var(--bone-dim)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>{c.sent_body}</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 22 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <div>
                    <label style={labelStyle}>{c.form_name}</label>
                    <input
                      type="text"
                      placeholder={c.ph_name}
                      value={form.name}
                      onChange={(e) => setForm({ ...form, name: e.target.value })}
                      onFocus={() => setFocused("name")}
                      onBlur={() => setFocused(null)}
                      style={inputStyle("name")}
                      required
                    />
                  </div>
                  <div>
                    <label style={labelStyle}>{c.form_email}</label>
                    <input
                      type="email"
                      placeholder={c.ph_email}
                      value={form.email}
                      onChange={(e) => setForm({ ...form, email: e.target.value })}
                      onFocus={() => setFocused("email")}
                      onBlur={() => setFocused(null)}
                      style={inputStyle("email")}
                      required
                    />
                  </div>
                </div>

                <div>
                  <label style={labelStyle}>{c.form_message}</label>
                  <textarea
                    placeholder={c.ph_message}
                    value={form.message}
                    onChange={(e) => setForm({ ...form, message: e.target.value })}
                    onFocus={() => setFocused("message")}
                    onBlur={() => setFocused(null)}
                    style={{ ...inputStyle("message"), minHeight: 180, resize: "vertical", lineHeight: 1.6 }}
                    required
                  />
                </div>

                <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
                    <button
                      type="submit"
                      disabled={status === "loading"}
                      className="btn btn-primary"
                      style={{ fontSize: 14, opacity: status === "loading" ? 0.6 : 1, cursor: status === "loading" ? "not-allowed" : "pointer" }}
                    >
                      {status === "loading" ? (
                        <>
                          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#0b0807", animation: "pulseGlow 0.8s ease-in-out infinite" }}></span>
                          {c.sending || "Sending…"}
                        </>
                      ) : (
                        <>
                          <span className="dot"></span>
                          {c.submit}
                        </>
                      )}
                    </button>
                    <span className="mono" style={{ fontSize: 10, color: "var(--bone-mid)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
                      {c.note}
                    </span>
                  </div>

                  {status === "error" && (
                    <div style={{
                      fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                      color: "oklch(0.72 0.14 28)",
                      background: "rgba(217,83,64,0.08)",
                      border: "1px solid rgba(217,83,64,0.2)",
                      borderRadius: 8, padding: "10px 14px",
                      letterSpacing: "0.04em",
                    }}>
                      {c.error || "Something went wrong. Try again or email us directly."}
                    </div>
                  )}
                </div>
              </form>
            )}
          </div>

          {/* RIGHT: contact info */}
          <div style={{ paddingTop: 16 }}>
            {/* Divider label */}
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 40 }}>
              <span style={{ height: 1, width: 28, background: "var(--accent)" }}></span>
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--bone-mid)" }}>
                {c.info_label}
              </span>
            </div>

            {/* Email */}
            <a
              href={`mailto:${c.email}`}
              style={{
                display: "block",
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: "clamp(14px, 1.6vw, 22px)",
                color: "var(--bone)",
                textDecoration: "none",
                letterSpacing: "-0.01em",
                marginBottom: 48,
                transition: "color .2s",
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
              onMouseLeave={(e) => e.currentTarget.style.color = "var(--bone)"}
            >
              {c.email}
            </a>

            {/* Stats cards */}
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div className="glass" style={{ padding: "20px 24px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--bone-mid)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
                  {c.response_label}
                </span>
                <span style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.025em", color: "var(--accent)" }}>
                  {c.response_val}
                </span>
              </div>

              {/* Waveform decoration */}
              <div className="glass" style={{ padding: "20px 24px" }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--bone-mid)", letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 14 }}>
                  engine · live
                </div>
                <ContactWave />
                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 12, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "var(--bone-mid)" }}>
                  <span style={{ color: "var(--accent)" }}>● online</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactWave() {
  const count = 48;
  const bars = Array.from({ length: count }).map((_, i) => {
    const v = 0.25 + 0.75 * Math.abs(Math.sin(i * 0.41) * Math.cos(i * 0.19 + 1.2));
    const h = Math.max(3, v * 32);
    return (
      <i key={i} style={{
        display: "block", width: 3, borderRadius: 1,
        height: `${h}px`,
        background: "linear-gradient(180deg, var(--accent-bright), var(--accent-deep))",
        animationDelay: `${(i % 7) * 0.09}s`,
        animation: "pulseGlow 1.3s ease-in-out infinite",
      }} />
    );
  });
  return <div style={{ display: "flex", alignItems: "flex-end", gap: 2, height: 36 }}>{bars}</div>;
}

/* ─── FOOTER ─── */
function ContactFooter() {
  const { lang, setLang, tr } = useLang();
  const f = tr.footer;
  const langs = [
    { code: "en", label: "EN" },
    { code: "pt", label: "PT" },
    { code: "es", label: "ES" },
  ];
  return (
    <footer style={{ padding: "60px 40px", borderTop: "1px solid rgba(244,237,228,0.06)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "var(--bone-mid)" }}>
          <a className="logo" href="index.html" style={{ textDecoration: "none" }}>
            <span className="logo-mark"><i></i></span>
            TagWave
          </a>
          <span>{f.copyright}</span>
          <span style={{ display: "flex", gap: 10, alignItems: "center" }}>
            {langs.map((l, i) => (
              <React.Fragment key={l.code}>
                {i > 0 && <span style={{ opacity: 0.3 }}>·</span>}
                <button
                  onClick={() => setLang(l.code)}
                  style={{
                    background: "none", border: "none", cursor: "pointer", padding: 0,
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                    color: lang === l.code ? "var(--accent)" : "var(--bone-mid)",
                    fontWeight: lang === l.code ? 600 : 400,
                    letterSpacing: "0.08em", transition: "color .2s",
                  }}
                >{l.label}</button>
              </React.Fragment>
            ))}
          </span>
        </div>
      </div>
    </footer>
  );
}

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