// primer-contact.jsx — Contact page: dark hero, form, coverage placeholder, footer

const { useState: useStC } = React;

function ContactField({ label, type = "text", full, value, onChange }) {
  const Tag = type === "textarea" ? "textarea" : "input";
  return (
    <label className="p-c-field" style={full ? { gridColumn: "1 / -1" } : undefined}>
      <span className="p-mono p-c-label">{label}</span>
      <Tag
        className="p-c-input"
        rows={type === "textarea" ? 3 : undefined}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </label>
  );
}

function GlobeVisual() {
  const R = 90, C = 100;
  const meridianAngles = [18, 36, 54, 72, 90];
  const latitudes = [-55, -30, 0, 30, 55];
  const pin = { left: 64.5, top: 21 };
  return (
    <div className="p-c-visual">
      <svg viewBox="0 0 200 200" className="p-c-globe-svg">
        <defs>
          <radialGradient id="globeShade" cx="38%" cy="32%" r="75%">
            <stop offset="0%" stopColor="rgba(255,255,255,0.10)"/>
            <stop offset="100%" stopColor="rgba(255,255,255,0)"/>
          </radialGradient>
        </defs>
        <circle cx={C} cy={C} r={R} fill="url(#globeShade)" stroke="rgba(255,255,255,0.35)" strokeWidth="1"/>
        <line x1={C} y1={C - R} x2={C} y2={C + R} stroke="rgba(255,255,255,0.16)" strokeWidth="1"/>
        {meridianAngles.slice(0, -1).map((deg) => {
          const rx = R * Math.sin((deg * Math.PI) / 180);
          return <ellipse key={deg} cx={C} cy={C} rx={rx} ry={R} fill="none" stroke="rgba(255,255,255,0.16)" strokeWidth="1"/>;
        })}
        {latitudes.map((phi) => {
          const rad = (phi * Math.PI) / 180;
          const y = C - R * Math.sin(rad);
          const halfW = R * Math.cos(rad);
          return <line key={phi} x1={C - halfW} y1={y} x2={C + halfW} y2={y} stroke="rgba(255,255,255,0.16)" strokeWidth="1"/>;
        })}
      </svg>
      <div className="p-c-pin" style={{ left: `${pin.left}%`, top: `${pin.top}%` }}>
        <span className="p-c-pin-ring"/>
        <span className="p-c-pin-dot"/>
      </div>
      <div className="p-c-pin-label" style={{ left: `${pin.left}%`, top: `${pin.top}%` }}>
        <span className="p-mono">NEW YORK, NY</span>
      </div>
      <div className="p-c-visual-label">
        <div style={{ fontWeight: 600, fontSize: 15, color: "var(--paper)", marginBottom: 4 }}>Our office</div>
        <div style={{ fontSize: 13.5, color: "rgba(255,255,255,0.5)" }}>New York, NY</div>
      </div>
    </div>
  );
}

function ContactHero() {
  const [form, setForm] = useStC({ name: "", email: "", company: "", project: "" });
  const [status, setStatus] = useStC({ state: "idle", message: "" });
  const set = (k) => (v) => setForm((f) => ({ ...f, [k]: v }));

  async function submit(e) {
    e.preventDefault();
    if (status.state === "submitting") return;
    setStatus({ state: "submitting", message: "" });
    try {
      // The unnamed "website" field is a honeypot the API rejects when filled.
      const honeypot = e.target.elements.website?.value || "";
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, website: honeypot }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setStatus({ state: "error", message: data.error || "Something went wrong. Please try again." });
        return;
      }
      setStatus({ state: "success", message: "Message sent — we'll be in touch soon." });
      setForm({ name: "", email: "", company: "", project: "" });
      window.va?.("event", { name: "contact_form_submitted" });
    } catch {
      setStatus({ state: "error", message: "Network error. Please try again." });
    }
  }

  return (
    <section style={{ background: "var(--ink)", color: "var(--paper)", paddingBottom: 100 }}>
      <div className="p-container" style={{ paddingTop: 72, paddingBottom: 56, borderBottom: "1px solid rgba(255,255,255,0.09)" }}>
        <div className="p-mono" style={{ color: "#9AE6B4", letterSpacing: "0.1em", marginBottom: 18 }}></div>
        <h1 className="p-page-h1" style={{ fontSize: 56, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1.05, maxWidth: 720, marginBottom: 22 }}>
          Got a deal in mind?<br/>Let's talk.
        </h1>
        <a href="mailto:hello@primer.com" style={{ fontSize: 19, color: "rgba(255,255,255,0.7)", borderBottom: "1px solid rgba(255,255,255,0.25)", paddingBottom: 2 }}>
          hello@primer.com
        </a>
      </div>

      <div className="p-container p-c-grid">
        <div>
          <div className="p-mono" style={{ color: "rgba(255,255,255,0.4)", letterSpacing: "0.08em", marginBottom: 28 }}>CONTACT FORM</div>
          <form className="p-c-form" onSubmit={submit}>
            <ContactField label="NAME" value={form.name} onChange={set("name")} />
            <ContactField label="EMAIL" value={form.email} onChange={set("email")} />
            <ContactField label="COMPANY" value={form.company} onChange={set("company")} />
            <ContactField label="DESCRIBE YOUR PROJECT" type="textarea" full value={form.project} onChange={set("project")} />

            {/* Honeypot — hidden from real users, bots tend to fill it */}
            <input type="text" name="website" tabIndex={-1} autoComplete="off" aria-hidden="true"
              style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />

            <button type="submit" disabled={status.state === "submitting"}
              className="p-btn p-btn-accent"
              style={{ background: "var(--paper)", color: "var(--ink)", gridColumn: "1 / -1", justifySelf: "start", marginTop: 8, opacity: status.state === "submitting" ? 0.6 : 1 }}>
              {status.state === "submitting" ? "Sending…" : "Send message"}
              <Ico.arrow/>
            </button>

            {status.message && (
              <div style={{ gridColumn: "1 / -1", fontSize: 14, color: status.state === "error" ? "#F87171" : "#9AE6B4" }}>
                {status.message}
              </div>
            )}
          </form>
        </div>

        <div>
          <div className="p-mono" style={{ color: "rgba(255,255,255,0.4)", letterSpacing: "0.08em", marginBottom: 28 }}>FIG. 01</div>
          <GlobeVisual/>
        </div>
      </div>
    </section>
  );
}

function ContactPage() {
  return (
    <div style={{ position: "relative" }}>
      <div className="p-top-black-bg" />
      <Nav/>
      <ContactHero/>
      <Footer/>
    </div>
  );
}

Object.assign(window, { ContactPage });