/* eslint-disable */
// Get-a-quote modal — matches the enquiry form on the live site
const EE_QUOTE_LOCATIONS = ["Lisbon, Portugal", "Belfast, UK", "York, England", "Dublin, Ireland", "Other"];
const EE_QUOTE_OCCASIONS = ["Bachelorette Party", "Corporate/Team Building", "Birthday Event", "Kids Party", "Other"];

const V3QuoteModal = ({ open, onClose, occasion }) => {
  const [loc, setLoc] = React.useState("Lisbon, Portugal");
  const [picked, setPicked] = React.useState([]);
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => {
    if (!open) return;
    setSent(false);
    if (occasion) setPicked([occasion]);
    const onKey = e => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, occasion, onClose]);
  if (!open) return null;
  const toggle = o => setPicked(p => p.includes(o) ? p.filter(x => x !== o) : [...p, o]);
  return (
    <div className="ee-quote-scrim" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="ee-quote-modal" role="dialog" aria-modal="true" aria-label="Request a quote">
        <button className="ee-quote-close" onClick={onClose} aria-label="Close">×</button>
        <div className="ee-quote-head">
          <span className="v3-eyebrow v3-eyebrow-oneline">Private events</span>
          <h3>Tell us about your <em>event.</em></h3>
          <p>Fill this in and we'll come back with a tailored quote within 4 hours.</p>
        </div>
        <form className="ee-quote-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
          <div className="ee-q-row">
            <label className="ee-q-field"><span>First name *</span><input type="text" required placeholder="Enter your first name"/></label>
            <label className="ee-q-field"><span>Last name</span><input type="text" placeholder="Enter your last name"/></label>
          </div>
          <label className="ee-q-field"><span>Email *</span><input type="email" required placeholder="Enter your email"/></label>
          <div className="ee-q-row">
            <fieldset className="ee-q-field ee-q-choices">
              <legend>Event location *</legend>
              {EE_QUOTE_LOCATIONS.map(o => (
                <label key={o} className="ee-q-opt">
                  <input type="radio" name="ee-q-loc" checked={loc === o} onChange={() => setLoc(o)}/>
                  <i aria-hidden="true"></i>{o}
                </label>
              ))}
            </fieldset>
            <fieldset className="ee-q-field ee-q-choices">
              <legend>Occasion *</legend>
              {EE_QUOTE_OCCASIONS.map(o => (
                <label key={o} className="ee-q-opt ee-q-opt-box">
                  <input type="checkbox" checked={picked.includes(o)} onChange={() => toggle(o)}/>
                  <i aria-hidden="true"></i>{o}
                </label>
              ))}
            </fieldset>
          </div>
          <div className="ee-q-row">
            <label className="ee-q-field"><span>Preferred date 1 *</span><input type="date" required/></label>
            <label className="ee-q-field"><span>Preferred date 2</span><input type="date"/></label>
          </div>
          <label className="ee-q-field"><span>Estimated number of guests *</span><input type="number" min="1" required placeholder="e.g. 24"/></label>
          <button type="submit" className="v3-btn v3-btn-lime ee-q-send">{sent ? "Sent — talk soon ✓" : "Send"}</button>
        </form>
      </div>
    </div>
  );
};

window.V3QuoteModal = V3QuoteModal;