/* ────────────────────────────────────────────────────────────
   INVESTORS — EIS/SEIS enquiry section
   ──────────────────────────────────────────────────────────── */
function SiteInvestors() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [kind, setKind] = React.useState("Angel");
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");

  const handle = async (e) => {
    e.preventDefault();
    if (name.trim().length < 2) { setError("Tell us your name."); return; }
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setError("That doesn't look like an email."); return;
    }
    setError("");
    setSending(true);
    try {
      await window.PSForms.send("investor", {
        name: name,
        email: email,
        investing_as: kind,
      });
      setSubmitted(true);
    } catch (err) {
      setError(err.message || "Couldn't send just now — please try again in a moment.");
    }
    setSending(false);
  };

  return (
    <section id="investors" style={{ position: "relative", marginTop: 150 }}>
      {/* Quiet cyan wash — calmer register than the rest of the page */}
      <div aria-hidden data-plx="0.05" style={{
        position: "absolute", inset: -80, zIndex: 0, pointerEvents: "none",
        background:
          "radial-gradient(ellipse 800px 480px at 50% 10%, rgba(0,212,255,0.10), transparent 62%)",
        filter: "blur(10px)",
      }}/>

      <div className="ps-section" style={{ position: "relative", zIndex: 1 }}>
        <div className="ps-hero-grid" style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56,
          alignItems: "start",
        }}>
          {/* ── Left: the case ── */}
          <div>
            <div className="ps-eyebrow ps-sr" style={{ marginBottom: 14 }}>
              — EIS / SEIS funding round —
            </div>
            <h2 className="ps-sr" style={{
              "--sr-delay": "60ms",
              margin: 0, fontFamily: "var(--font-display)",
              fontSize: 56, fontWeight: 500,
              letterSpacing: "-0.025em", color: "var(--fg-1)",
              lineHeight: 1.04, textWrap: "balance",
            }}>
              Own a piece of{" "}
              <span style={{
                background: "var(--ps-gradient)",
                WebkitBackgroundClip: "text", backgroundClip: "text",
                WebkitTextFillColor: "transparent", color: "transparent",
              }}>the table.</span>
            </h2>
            <p className="ps-sr" style={{
              "--sr-delay": "120ms",
              margin: "20px 0 0", color: "var(--fg-2)",
              fontSize: 17, lineHeight: 1.6, textWrap: "pretty",
              maxWidth: 500,
            }}>
              We're raising to bring licensed tabletop worlds into XR —
              starting with Warmachine. The round is structured for UK
              EIS and SEIS relief, and we're talking to angels, funds,
              and family offices now.
            </p>

            <ul className="ps-sr" style={{
              "--sr-delay": "180ms",
              margin: "28px 0 0", padding: 0, listStyle: "none",
              display: "grid", gap: 14,
            }}>
              <InvBullet>SEIS / EIS advance assurance in place</InvBullet>
              <InvBullet>Licensed IP live in closed beta</InvBullet>
              <InvBullet>UK company · London based team</InvBullet>
            </ul>

            <p className="ps-sr" style={{
              "--sr-delay": "240ms",
              margin: "28px 0 0", maxWidth: 480,
              fontFamily: "var(--font-mono)", fontSize: 10,
              letterSpacing: "0.08em", lineHeight: 1.7, color: "var(--fg-3)",
            }}>
              FOR SOPHISTICATED / HIGH-NET-WORTH INVESTORS ONLY. THIS IS
              NOT A PUBLIC OFFER. CAPITAL AT RISK · TAX RELIEF DEPENDS ON
              INDIVIDUAL CIRCUMSTANCES AND MAY CHANGE.
            </p>
          </div>

          {/* ── Right: enquiry card ── */}
          <div className="ps-card ps-sr" style={{
            "--sr-delay": "160ms",
            padding: 32, display: "grid", gap: 18,
            borderColor: "rgba(0,212,255,0.25)",
            boxShadow: "0 0 56px rgba(0,212,255,0.10), inset 0 0 0 1px rgba(0,212,255,0.05)",
          }}>
            <div style={{
              display: "flex", justifyContent: "space-between",
              alignItems: "center", flexWrap: "wrap", gap: 10,
            }}>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 10,
                letterSpacing: "0.18em", color: "var(--ps-cyan)",
                padding: "5px 10px", borderRadius: 4,
                border: "1px solid rgba(0,212,255,0.30)",
                background: "rgba(0,212,255,0.06)",
                whiteSpace: "nowrap",
              }}>// 03 · INVESTORS</span>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 10,
                letterSpacing: "0.18em", color: "var(--fg-3)",
                whiteSpace: "nowrap",
              }}>ROUND OPEN</span>
            </div>

            <h3 style={{
              margin: "8px 0 0", fontFamily: "var(--font-display)",
              fontSize: 30, fontWeight: 500,
              letterSpacing: "-0.02em", color: "var(--fg-1)", lineHeight: 1.1,
            }}>
              Request the deck.
            </h3>

            {!submitted ? (
              <form onSubmit={handle} style={{ display: "grid", gap: 12, marginTop: 4 }}>
                <label style={{ display: "grid", gap: 6 }}>
                  <span style={{
                    fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 500,
                    letterSpacing: "0.16em", textTransform: "uppercase",
                    color: "var(--fg-3)",
                  }}>Name</span>
                  <input className="ps-input" type="text" placeholder="Your name"
                         value={name}
                         onChange={(e)=>{setName(e.target.value); setError("");}} />
                </label>
                <label style={{ display: "grid", gap: 6 }}>
                  <span style={{
                    fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 500,
                    letterSpacing: "0.16em", textTransform: "uppercase",
                    color: "var(--fg-3)",
                  }}>Email</span>
                  <input className="ps-input" type="email" placeholder="you@fund.vc"
                         value={email}
                         onChange={(e)=>{setEmail(e.target.value); setError("");}} />
                </label>

                <div style={{ display: "grid", gap: 6 }}>
                  <span style={{
                    fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 500,
                    letterSpacing: "0.16em", textTransform: "uppercase",
                    color: "var(--fg-3)",
                  }}>Investing as</span>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                    {["Angel", "Fund", "Family office", "Other"].map((opt) => {
                      const on = opt === kind;
                      return (
                        <button key={opt} type="button" onClick={()=>setKind(opt)}
                                style={{
                                  fontFamily: "var(--font-display)", fontSize: 13,
                                  padding: "9px 14px", borderRadius: 999, cursor: "pointer",
                                  background: on ? "rgba(0,212,255,0.08)" : "rgba(10,12,20,0.55)",
                                  color: on ? "var(--ps-cyan)" : "var(--fg-2)",
                                  border: `1px solid ${on ? "rgba(0,212,255,0.55)" : "rgba(255,255,255,0.10)"}`,
                                  transition: "all 180ms var(--ease-out)",
                                }}>
                          {opt}
                        </button>
                      );
                    })}
                  </div>
                </div>

                {error && (
                  <div style={{
                    fontSize: 12, color: "#FF9090",
                    fontFamily: "var(--font-mono)", letterSpacing: "0.04em",
                  }}>// {error}</div>
                )}

                <button type="submit" disabled={sending} style={{
                  marginTop: 6,
                  fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 500,
                  letterSpacing: "0.04em", padding: "14px 22px", borderRadius: 999,
                  border: 0, color: "#0A0C14", cursor: sending ? "wait" : "pointer",
                  opacity: sending ? 0.7 : 1,
                  background: "linear-gradient(90deg, #00D4FF, #4AA6BF, #8A3FFC)",
                  animation: "ps-glow-pulse-cyan 3.6s var(--ease-in-out) infinite",
                  transition: "transform 200ms",
                }}
                  onMouseDown={(e)=>e.currentTarget.style.transform="scale(0.97)"}
                  onMouseUp={(e)=>e.currentTarget.style.transform="scale(1)"}
                  onMouseLeave={(e)=>e.currentTarget.style.transform="scale(1)"}
                >{sending ? "Sending…" : "Request investor pack →"}</button>

                <p style={{
                  margin: "2px 0 0", fontSize: 12, lineHeight: 1.5,
                  color: "var(--fg-3)",
                }}>
                  We reply personally, usually within two working days.
                </p>
              </form>
            ) : (
              <div style={{
                display: "grid", gap: 12,
                animation: "ps-reveal 500ms var(--ease-out) both",
                padding: "20px 22px", borderRadius: 14,
                background: "rgba(10,12,20,0.55)",
                border: "1px solid rgba(0,212,255,0.30)",
              }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontSize: 18,
                  fontWeight: 600, color: "var(--fg-1)",
                }}>Thanks{name ? `, ${name.split(" ")[0]}` : ""} — noted.</div>
                <p style={{ margin: 0, color: "var(--fg-2)", fontSize: 14, lineHeight: 1.55 }}>
                  We'll send the investor pack and EIS/SEIS details to{" "}
                  <b style={{ color: "var(--fg-1)" }}>{email}</b>. Expect a
                  personal reply within two working days.
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function InvBullet({ children }) {
  return (
    <li style={{ display: "flex", alignItems: "flex-start", gap: 12,
                 color: "var(--fg-2)", fontSize: 15, lineHeight: 1.45 }}>
      <span style={{
        marginTop: 6, width: 8, height: 8, borderRadius: 2,
        background: "var(--ps-gradient)",
        boxShadow: "0 0 12px rgba(0,212,255,0.55)",
        flexShrink: 0,
      }}/>
      <span>{children}</span>
    </li>
  );
}

window.SiteInvestors = SiteInvestors;