function LeadModal({ open, onClose, mode = 'call' }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: '',
    email: '',
    phone: '',
    timeframe: '',
    wantsGuide: false,
  });

  // When opened in guide mode, pre-check the guide box
  React.useEffect(() => {
    if (open && mode === 'guide') {
      setForm(f => ({ ...f, wantsGuide: true }));
    }
  }, [open, mode]);

  // Reset submitted state when closed
  React.useEffect(() => {
    if (!open) {
      setTimeout(() => setSubmitted(false), 300);
    }
  }, [open]);

  // Escape key to close
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  const submit = (e) => {
    e.preventDefault();
    // In real deploy: POST to your CRM (Follow Up Boss via Netlify Forms + Zapier).
    // See README for wiring instructions.
    console.log('Lead submitted:', form);
    setSubmitted(true);
  };

  const update = (field) => (e) => setForm(f => ({ ...f, [field]: e.target.value }));
  const toggle = (field) => (e) => setForm(f => ({ ...f, [field]: e.target.checked }));

  const isGuideMode = mode === 'guide';

  return (
    <div
      className={"modal-backdrop" + (open ? " open" : "")}
      onClick={onClose}
      role="dialog"
      aria-modal="true"
      aria-hidden={!open}
    >
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">×</button>

        {!submitted ? (
          <>
            <div className="modal-eyebrow">
              {isGuideMode ? 'The Free Austin Buyer Guide' : 'The Byrne Buyer Guarantee'}
            </div>
            <h3 className="modal-title">
              {isGuideMode ? (
                <>Get the <em>Buyer Guide.</em></>
              ) : (
                <>Let's start the <em>conversation.</em></>
              )}
            </h3>
            <p className="modal-sub">
              {isGuideMode
                ? "Tell us where to send it. We'll email the guide within minutes and follow up personally within one business day."
                : "Tell us a little about you. We'll follow up within one business day ... real human, no auto-drip."}
            </p>
            <form onSubmit={submit} className="form-grid">
              <div className="field">
                <label htmlFor="lead-name">Name</label>
                <input
                  id="lead-name"
                  type="text"
                  required
                  value={form.name}
                  onChange={update('name')}
                  placeholder="Your name"
                />
              </div>
              <div className="field">
                <label htmlFor="lead-email">Email</label>
                <input
                  id="lead-email"
                  type="email"
                  required
                  value={form.email}
                  onChange={update('email')}
                  placeholder="you@example.com"
                />
              </div>
              <div className="field">
                <label htmlFor="lead-phone">Phone</label>
                <input
                  id="lead-phone"
                  type="tel"
                  required
                  value={form.phone}
                  onChange={update('phone')}
                  placeholder="(512) 555-0100"
                />
              </div>
              <div className="field">
                <label htmlFor="lead-timeframe">Timeframe to buy</label>
                <select
                  id="lead-timeframe"
                  required
                  value={form.timeframe}
                  onChange={update('timeframe')}
                >
                  <option value="" disabled>Select a timeframe</option>
                  <option value="just-exploring">Just exploring</option>
                  <option value="0-3-months">0-3 months</option>
                  <option value="3-6-months">3-6 months</option>
                  <option value="6-plus-months">6+ months</option>
                </select>
              </div>

              <label className="checkbox-field">
                <input
                  type="checkbox"
                  checked={form.wantsGuide}
                  onChange={toggle('wantsGuide')}
                />
                <span className="checkbox-label">
                  <strong>Yes, send me the Free Austin Buyer Guide</strong>
                  <em>A short PDF on how to buy smart in this market.</em>
                </span>
              </label>

              <button type="submit" className="btn-primary">
                {isGuideMode ? 'Send me the guide →' : 'Send it →'}
              </button>
            </form>
            <p className="modal-fine">
              By submitting, you agree that we may contact you about the
              Byrne Buyer Guarantee. We won't share your information.
            </p>
          </>
        ) : (
          <div className="modal-success">
            <div className="checkmark">✓</div>
            <h3>Thanks ... we've got it.</h3>
            <p>
              {form.wantsGuide
                ? "The Austin Buyer Guide is on its way to your inbox. A member of the Byrne team will also reach out personally within one business day."
                : "A member of the Byrne team will reach out within one business day."}
            </p>
            <div style={{ marginTop: 28 }}>
              <button className="btn-primary" onClick={onClose}>Close</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.LeadModal = LeadModal;