/* ============ SIGN-IN MODAL ============ */

function SignInModal({ open, onClose }) {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);

  React.useEffect(() => {
    if (!open) return;
    // reset every time it opens
    setSent(false);
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  if (!open) return null;

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email) return;
    setSent(true);
  };

  return (
    <div className="signin-backdrop" onClick={onClose}>
      <div className="signin-modal" onClick={(e) => e.stopPropagation()}>
        <button className="signin-close" onClick={onClose} aria-label="Close">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
            <path d="M6 6 L 18 18 M18 6 L 6 18"/>
          </svg>
        </button>

        {sent ? (
          <div className="signin-sent">
            <div className="signin-sent-icon">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                <rect x="3" y="6" width="18" height="13" rx="2"/>
                <path d="M3 8 L 12 14 L 21 8"/>
              </svg>
            </div>
            <h2 className="signin-title">Check your email.</h2>
            <p className="signin-sub">
              We sent a sign-in link to <strong>{email}</strong>. The link expires in 15 minutes.
            </p>
            <button className="btn btn-outline" onClick={onClose} style={{ marginTop: 12 }}>Done</button>
          </div>
        ) : (
          <form onSubmit={handleSubmit}>
            <div className="signin-eyebrow">D1 Membership</div>
            <h2 className="signin-title">Sign In</h2>
            <p className="signin-sub">
              Membership is free. We'll email you a one-time link to sign in or to create a new account.
            </p>

            <label className="signin-field">
              <span>Full name</span>
              <input
                type="text"
                autoComplete="name"
                placeholder="Jane Doe"
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </label>
            <label className="signin-field">
              <span>Email</span>
              <input
                type="email"
                autoComplete="email"
                placeholder="jane@example.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                autoFocus
              />
            </label>

            <button className="btn btn-primary btn-lg signin-submit" type="submit" disabled={!email}>
              Send sign-in link
            </button>

            <p className="signin-fineprint">
              By continuing you agree to D1's Terms and Privacy Policy. No password required — we'll send a one-time link.
            </p>
          </form>
        )}
      </div>
    </div>
  );
}

window.SignInModal = SignInModal;