// reservation.jsx — reservation form using RangeCalendar.
// Styled with class names; each direction supplies its own CSS variable scope.

function ReservationForm({ lang, accent, variant = "dark" }) {
  const L = COPY[lang].reserve;
  const F = L.labels;
  const [range, setRange] = React.useState({ start: null, end: null });
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [from, setFrom] = React.useState("");
  const [people, setPeople] = React.useState("2");
  const [message, setMessage] = React.useState("");
  const [agree, setAgree] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  const nights = range.start && range.end ? Math.round((range.end - range.start) / 86400000) : 0;
  const valid = range.start && range.end && nights >= 5 && name.trim() && /\S+@\S+\.\S+/.test(email) && agree;

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

  if (sent) {
    return (
      <div className="rsv-success">
        <div className="rsv-success-mark">✓</div>
        <h3>{F.success}</h3>
        <p className="rsv-success-sum">
          {formatDate(range.start, lang)} → {formatDate(range.end, lang)} · {nights} {F.nights}
        </p>
        <button type="button" className="rsv-success-reset" onClick={() => { setSent(false); setRange({start:null,end:null}); setName(""); setEmail(""); setFrom(""); setPeople("2"); setMessage(""); setAgree(false); }}>
          ← New enquiry
        </button>
      </div>
    );
  }

  return (
    <form className="rsv-form" onSubmit={submit}>
      <div className="rsv-block rsv-block-cal">
        <label className="rsv-lbl">{F.dates}</label>
        <RangeCalendar lang={lang} value={range} onChange={setRange} accent={accent} />
      </div>
      <div className="rsv-grid">
        <label className="rsv-field">
          <span className="rsv-lbl">{F.name}</span>
          <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="—" autoComplete="name" />
        </label>
        <label className="rsv-field">
          <span className="rsv-lbl">{F.email}</span>
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="—" autoComplete="email" />
        </label>
        <label className="rsv-field">
          <span className="rsv-lbl">{F.from}</span>
          <input type="text" value={from} onChange={e => setFrom(e.target.value)} placeholder={lang === "de" ? "Berlin, Wien, …" : "Berlin, NYC, …"} />
        </label>
        <label className="rsv-field">
          <span className="rsv-lbl">{F.people}</span>
          <select value={people} onChange={e => setPeople(e.target.value)}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="2+kids">2 + kids</option>
          </select>
        </label>
      </div>
      <label className="rsv-field rsv-field-message">
        <span className="rsv-lbl">{F.message}</span>
        <textarea value={message} onChange={e => setMessage(e.target.value)} placeholder={F.messagePh} rows={5}></textarea>
      </label>
      <div className="rsv-foot">
        <label className="rsv-check">
          <input type="checkbox" checked={agree} onChange={e => setAgree(e.target.checked)} />
          <span>{F.agree}</span>
        </label>
        <button type="submit" className="rsv-submit" disabled={!valid}>
          <span>{F.send}</span>
          <span className="rsv-submit-arrow">→</span>
        </button>
      </div>
    </form>
  );
}

Object.assign(window, { ReservationForm });