// Start-a-project modal with Web3Forms integration.
function ContactModal({ open, onClose }) {
  const { Icon } = window;
  const { Button, Input, Badge } = window.ZentroDesignSystem_967cea;
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");
  const [message, setMessage] = React.useState("");
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");

  React.useEffect(() => {
    if (open) { setSent(false); setLoading(false); setError(""); setName(""); setEmail(""); setMessage(""); }
  }, [open]);

  if (!open) return null;

  const handleSubmit = async () => {
    if (!name.trim()) { setError("Please enter your name."); return; }
    if (!email.trim()) { setError("Please enter your email."); return; }
    if (!message.trim()) { setError("Please tell us about your project."); return; }
    setError("");
    setLoading(true);
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          access_key: "c59e234b-1684-4918-a3e0-c267665f8366",
          name: name,
          email: email,
          message: message,
          subject: "New Project Brief — Zentro Visuals",
        }),
      });
      const data = await res.json();
      if (data.success) { setSent(true); } else { setError("Something went wrong. Please try again."); }
    } catch (err) {
      setError("Network error. Please check your connection and try again.");
    }
    setLoading(false);
  };

  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 1000, background: "rgba(4,4,6,0.7)", backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20, animation: "zfade 200ms var(--ease-out)" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "100%", maxWidth: 520, maxHeight: "90vh", overflowY: "auto", background: "var(--surface-raised)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)", padding: 32, animation: "zpop 240ms var(--ease-spring)" }}>
        {!sent ? (
          <React.Fragment>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <Badge variant="brand" dot>48h turnaround</Badge>
                <h3 style={{ marginTop: 14, fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 28, letterSpacing: "-0.03em", color: "var(--text-primary)" }}>Start a project</h3>
                <p style={{ marginTop: 8, fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)" }}>Tell us what you're making. We reply within a day.</p>
              </div>
              <button aria-label="Close" onClick={onClose} style={{ width: 40, height: 40, flexShrink: 0, background: "transparent", border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", color: "var(--text-secondary)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="X" size={18} />
              </button>
            </div>
            <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 16 }}>
              <Input label="Name" placeholder="Your name" value={name} onChange={(e) => setName(e.target.value)} />
              <Input label="Email" placeholder="you@example.com" iconLeft={<Icon name="Mail" size={16} />} value={email} onChange={(e) => setEmail(e.target.value)} />
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--text-secondary)" }}>Tell us about your project</div>
                <textarea
                  placeholder="What type of content do you create? What are you looking for? Any references or goals?"
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  style={{ width: "100%", padding: "12px 14px", borderRadius: 8, background: "var(--surface-base)", border: "1px solid var(--border-default)", color: "var(--text-primary)", fontFamily: "var(--font-sans)", fontSize: 14, resize: "vertical", minHeight: 110, outline: "none", lineHeight: 1.6 }}
                />
              </div>
            </div>
            {error && (
              <p style={{ marginTop: 14, fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--gold-400)", display: "flex", alignItems: "center", gap: 6 }}>
                <Icon name="AlertCircle" size={14} color="var(--gold-400)" /> {error}
              </p>
            )}
            <div style={{ marginTop: 28 }}>
              <Button variant="primary" size="lg" fullWidth onClick={handleSubmit} disabled={loading} iconRight={loading ? null : <Icon name="ArrowRight" size={18} />}>
                {loading ? "Sending…" : "Send brief"}
              </Button>
            </div>
          </React.Fragment>
        ) : (
          <div style={{ textAlign: "center", padding: "24px 8px" }}>
            <span style={{ width: 64, height: 64, margin: "0 auto", borderRadius: "50%", background: "rgba(251,208,40,0.14)", border: "1px solid rgba(251,208,40,0.4)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="Check" size={30} color="var(--gold-400)" />
            </span>
            <h3 style={{ marginTop: 22, fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 26, letterSpacing: "-0.03em", color: "var(--text-primary)" }}>Brief received.</h3>
            <p style={{ marginTop: 10, fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)" }}>A producer will email you within 24 hours to kick things off. Keep an eye on your inbox.</p>
            <div style={{ marginTop: 26 }}>
              <Button variant="secondary" onClick={onClose}>Back to site</Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
window.ContactModal = ContactModal;