// waitlist.jsx — "Join our waiting list" modal. Submitting builds a prefilled
// mailto draft to the wholesale desk and shows an inline thank-you. Loaded from
// index.html alongside the other JSX files; rendered by <App> when open.
const { useState: useStateW, useEffect: useEffectW } = React;

const WAITLIST_EMAIL = 'info@topsecretworkshops.com';

function WaitlistModal({ interest, onClose }) {
  const [form, setForm] = useStateW({
    name: '', company: '', email: '', phone: '', state: '', interest: interest || '',
  });
  const [sent, setSent] = useStateW(false);

  useEffectW(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const canSend = form.name.trim() && form.email.trim();

  function submit(e) {
    e.preventDefault();
    if (!canSend) return;
    const subject = `Wholesale waitlist — ${form.interest || 'TSW menu'}`;
    const body = [
      'New wholesale waiting-list request from the TSW menu:',
      '',
      `Name: ${form.name}`,
      `Company: ${form.company}`,
      `Email: ${form.email}`,
      `Phone: ${form.phone}`,
      `State: ${form.state}`,
      `Interested in: ${form.interest}`,
    ].join('\n');
    window.location.href =
      `mailto:${WAITLIST_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  }

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="wl-card" onClick={(e) => e.stopPropagation()}>
        <button className="close-x" onClick={onClose} aria-label="Close">×</button>
        {sent ?
        <div className="wl-thanks">
            <span className="led led-green"></span>
            <h2 className="wl-title display-md">You're on the list.</h2>
            <p className="wl-lede">
              Thanks{form.name ? `, ${form.name.split(' ')[0]}` : ''} — your email draft is ready in your
              mail client. Hit send and our wholesale desk will reach out as soon as
              {form.interest ? ` ${form.interest} is` : ' it is'} ready in your market.
            </p>
            <button className="btn-red" onClick={onClose}>Done</button>
          </div> :

        <form className="wl-form" onSubmit={submit}>
            <div className="wl-head">
              <span className="led led-red"></span>
              <span className="token-label">Wholesale waitlist</span>
            </div>
            <h2 className="wl-title display-md">Join our waiting list</h2>
            <p className="wl-lede">
              Tell us who you are and what you're after. Submitting opens a prefilled email
              draft — send it and our wholesale desk takes it from there.
            </p>
            <div className="wl-grid">
              <label className="wl-field"><span>Name</span>
                <input value={form.name} onChange={set('name')} placeholder="Jane Buyer" autoFocus /></label>
              <label className="wl-field"><span>Company</span>
                <input value={form.company} onChange={set('company')} placeholder="Dispensary / brand" /></label>
              <label className="wl-field"><span>Email</span>
                <input type="email" value={form.email} onChange={set('email')} placeholder="you@company.com" /></label>
              <label className="wl-field"><span>Phone</span>
                <input value={form.phone} onChange={set('phone')} placeholder="(406) 555-0100" /></label>
              <label className="wl-field"><span>State</span>
                <input value={form.state} onChange={set('state')} placeholder="MT" /></label>
              <label className="wl-field wl-field-wide"><span>What are you interested in</span>
                <input value={form.interest} onChange={set('interest')} placeholder="Sauce, diamonds, bulk carts…" /></label>
            </div>
            <div className="wl-actions">
              <button type="submit" className="btn-red" disabled={!canSend}>Join the waitlist →</button>
              <span className="wl-hint">{canSend ? 'Opens a prefilled email draft' : 'Name and email required'}</span>
            </div>
          </form>
        }
      </div>
    </div>);

}

Object.assign(window, { WaitlistModal });