// Contact page

function ContactPage() {
  const [topic, setTopic] = React.useState("general");
  const [game, setGame] = React.useState("");
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [message, setMessage] = React.useState("");
  const [website, setWebsite] = React.useState(""); // honeypot
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error
  const [errMsg, setErrMsg] = React.useState("");

  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get("topic")) setTopic(params.get("topic"));
    if (params.get("game")) setGame(params.get("game"));
  }, []);

  React.useEffect(() => {
    if (topic === "funding" && !message) {
      setMessage(`Hi Martin — I'd like to talk about ${game || "your projects"}.`);
    }
  }, [topic, game]);

  async function submit(e) {
    e.preventDefault();
    setStatus("sending");
    setErrMsg("");
    try {
      const res = await fetch("contact.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, email, topic, game, message, website }),
      });
      const json = await res.json().catch(() => ({}));
      if (res.ok && json.ok) {
        setStatus("sent");
      } else {
        setStatus("error");
        setErrMsg(json.error || "Something went wrong. Email me directly.");
      }
    } catch (err) {
      setStatus("error");
      setErrMsg("Network error. Email me directly at martin2c51@gmail.com.");
    }
  }

  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <div className="section-label"><span>// SAY HELLO</span></div>
          <h1>Get in <em>touch.</em></h1>
          <p>Hiring, investing, writing about us, or just here to talk shop — pick the lane that fits.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <form className="contact-form" onSubmit={submit}>
              <label>
                Reason for reaching out
                <select value={topic} onChange={(e) => setTopic(e.target.value)}>
                  <option value="hiring">Hiring (engineering role)</option>
                  <option value="funding">Investment / Publishing</option>
                  <option value="press">Press / Media</option>
                  <option value="general">General</option>
                </select>
              </label>
              <label>
                Your name
                <input type="text" required value={name} onChange={(e) => setName(e.target.value)} />
              </label>
              <label>
                Email
                <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
              </label>
              {topic === "funding" && (
                <label>
                  Game
                  <select value={game} onChange={(e) => setGame(e.target.value)}>
                    <option value="">Either / both</option>
                    <option value="Echoes of Tomorrow">Echoes of Tomorrow</option>
                    <option value="Go Go Grocer">Go Go Grocer</option>
                  </select>
                </label>
              )}
              <label>
                Message
                <textarea required value={message} onChange={(e) => setMessage(e.target.value)} />
              </label>
              {/* Honeypot — bots fill, humans never see */}
              <div style={{ position: "absolute", left: "-9999px", height: 0, overflow: "hidden" }} aria-hidden="true">
                <label>Website (leave blank)
                  <input type="text" tabIndex="-1" autoComplete="off" value={website} onChange={(e) => setWebsite(e.target.value)} />
                </label>
              </div>

              {status === "sent" ? (
                <div style={{ padding: 16, background: "var(--moss)", color: "#fff", borderRadius: 2, fontWeight: 600 }}>
                  ✓ Message sent. I'll get back within 48h.
                </div>
              ) : status === "error" ? (
                <>
                  <div style={{ padding: 16, background: "var(--maple)", color: "#fff", borderRadius: 2, fontSize: 14 }}>
                    ✗ {errMsg}
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ alignSelf: "flex-start", marginTop: 8 }}>
                    Try again →
                  </button>
                </>
              ) : (
                <button
                  type="submit"
                  className="btn btn-primary"
                  disabled={status === "sending"}
                  style={{ alignSelf: "flex-start", marginTop: 8, opacity: status === "sending" ? 0.6 : 1 }}
                >
                  {status === "sending" ? "Sending…" : "Send message →"}
                </button>
              )}
            </form>

            <aside>
              <div className="contact-channels">
                <div className="contact-channel">
                  <h4>Hiring</h4>
                  <p>Senior engineering roles. C++, Python, distributed systems, real-time work.</p>
                  <a href="mailto:martin2c51@gmail.com">martin2c51@gmail.com</a>
                </div>
                <div className="contact-channel">
                  <h4>Investment &amp; publishing</h4>
                  <p>Echoes of Tomorrow and Go Go Grocer are seeking funding partners. Decks available.</p>
                  <a href="mailto:martin2c51@gmail.com?subject=Funding">martin2c51@gmail.com</a>
                </div>
                <div className="contact-channel">
                  <h4>Press</h4>
                  <p>Studio fact sheet, screenshots, and review keys when builds are ready.</p>
                  <a href="mailto:martin2c51@gmail.com?subject=Press">martin2c51@gmail.com</a>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
}

window.ContactPage = ContactPage;