function Reservas({ openSignal }) {
  const t = useT();
  const [lang] = useLang();
  const [form, setForm] = React.useState({
    nome: '', email: '', telefone: '',
    data: '', hora: '19:00', pessoas: '2',
    ocasiao: '', obs: '',
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [touched, setTouched] = React.useState({});
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (openSignal > 0 && ref.current) {
      ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, [openSignal]);

  function validate(f) {
    const e = {};
    if (!f.nome.trim() || f.nome.trim().length < 2) e.nome = t.reservas.errNome;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) e.email = t.reservas.errEmail;
    if (!f.telefone.trim() || f.telefone.replace(/\D/g,'').length < 7) e.telefone = t.reservas.errTel;
    if (!f.data) e.data = t.reservas.errData;
    if (f.data) {
      const d = new Date(f.data);
      const today = new Date(); today.setHours(0,0,0,0);
      if (d < today) e.data = t.reservas.errPast;
    }
    return e;
  }

  function update(k, v) {
    const next = { ...form, [k]: v };
    setForm(next);
    if (touched[k]) setErrors(validate(next));
  }
  function blur(k) {
    setTouched({ ...touched, [k]: true });
    setErrors(validate(form));
  }
  function submit(e) {
    e.preventDefault();
    const errs = validate(form);
    setErrors(errs);
    setTouched(Object.fromEntries(Object.keys(form).map(k => [k, true])));
    if (Object.keys(errs).length === 0) {
      // Monta mensagem de WhatsApp e abre
      const pessoas = form.pessoas;
      const pessoaLabel = pessoas === '1' ? t.reservas.pessoa : t.reservas.pessoas;
      const dataFmt = (() => {
        try {
          const d = new Date(form.data + 'T00:00');
          return d.toLocaleDateString(lang === 'en' ? 'en-GB' : 'pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });
        } catch { return form.data; }
      })();
      const msg = lang === 'en'
        ? `Hi! I'd like to book a table at Trem de Minas:\n\n• Name: ${form.nome}\n• Date: ${dataFmt}\n• Time: ${form.hora}\n• People: ${pessoas}\n• Phone: ${form.telefone}\n• Email: ${form.email}${form.ocasiao ? `\n• Occasion: ${form.ocasiao}` : ''}${form.obs ? `\n• Notes: ${form.obs}` : ''}`
        : `Olá! Gostaria de reservar uma mesa no Trem de Minas:\n\n• Nome: ${form.nome}\n• Data: ${dataFmt}\n• Hora: ${form.hora}\n• Pessoas: ${pessoas} ${pessoaLabel}\n• Telefone: ${form.telefone}\n• Email: ${form.email}${form.ocasiao ? `\n• Ocasião: ${form.ocasiao}` : ''}${form.obs ? `\n• Observações: ${form.obs}` : ''}`;
      const waUrl = `https://wa.me/message/HZDOYF2VYMO3H1?text=${encodeURIComponent(msg)}`;
      // Fallback: se o wa.me/message/ não aceitar text, abre só o link. Usamos window.open.
      window.open(waUrl, '_blank', 'noopener');
      setSubmitted(true);
    }
  }

  const today = new Date().toISOString().split('T')[0];
  const horas = [];
  for (let h = 12; h <= 22; h++) {
    horas.push(`${String(h).padStart(2,'0')}:00`);
    if (h < 22) horas.push(`${String(h).padStart(2,'0')}:30`);
  }

  return (
    <section id="reservas" ref={ref} style={{
      padding: '140px 0', background: 'var(--ink)', color: 'var(--cream)',
    }}>
      <div className="wrap">
        <div style={{
          display: 'grid', gridTemplateColumns: '0.9fr 1.1fr',
          gap: 80, alignItems: 'start',
        }} className="res-grid">

          <div>
            <div className="eyebrow" style={{ marginBottom: 20, color: 'var(--accent)' }}>
              <style>{`#reservas .eyebrow::before { background: var(--accent); }`}</style>
              {t.reservas.eyebrow}
            </div>
            <h2 className="title-font" style={{
              fontSize: 'clamp(48px, 6vw, 84px)', lineHeight: 0.95,
              color: 'var(--cream)', marginBottom: 32,
            }}>
              {t.reservas.title1}<br/>
              <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>{t.reservas.title2}</span>
            </h2>
            <p style={{
              fontSize: 17, lineHeight: 1.6, color: 'rgba(251,246,235,0.75)',
              maxWidth: '38ch', marginBottom: 40,
            }}>
              {t.reservas.lede}
            </p>
            <div style={{
              padding: '24px 0', borderTop: '1px solid rgba(251,246,235,0.2)',
              borderBottom: '1px solid rgba(251,246,235,0.2)',
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
            }}>
              <div>
                <div className="mono" style={{
                  fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: 'rgba(251,246,235,0.5)', marginBottom: 8,
                }}>WhatsApp</div>
                <div style={{ fontSize: 18 }}>
                  <a href={DATA_SHARED.whatsapp} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--cream)', textDecoration: 'none', borderBottom: '1px solid rgba(251,246,235,0.3)', paddingBottom: 2 }}>
                    Chamar no WhatsApp →
                  </a>
                </div>
              </div>
              <div>
                <div className="mono" style={{
                  fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: 'rgba(251,246,235,0.5)', marginBottom: 8,
                }}>Email</div>
                <div style={{ fontSize: 18 }}>{DATA_SHARED.endereco.email}</div>
              </div>
            </div>
            <div style={{
              marginTop: 24,
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'rgba(251,246,235,0.5)',
            }}>
              {t.reservas.confirmMsg}
            </div>
          </div>

          <div style={{
            background: 'var(--cream)', color: 'var(--ink)',
            padding: 40, border: '1px solid var(--accent-deep)',
          }}>
            {submitted ? (
              <div style={{ textAlign: 'center', padding: '60px 20px' }}>
                <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  border: '1px solid var(--accent)', color: 'var(--accent)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 24, marginBottom: 24,
                }}>✓</div>
                <h3 className="title-font" style={{ fontSize: 36, marginBottom: 14 }}>
                  {t.reservas.successTitle}, {form.nome.split(' ')[0]}!
                </h3>
                <p style={{ color: 'var(--ink-soft)', maxWidth: '32ch', margin: '0 auto', lineHeight: 1.5 }}>
                  {t.reservas.successMsgA} {form.pessoas} {t.reservas.successMsgB} {form.hora} {t.reservas.successMsgC} {new Date(form.data).toLocaleDateString(lang === 'en' ? 'en-GB' : 'pt-BR')}.
                  <br/>{t.reservas.successMsgD}
                </p>
                <button className="btn" onClick={() => { setSubmitted(false); setForm({ nome:'', email:'', telefone:'', data:'', hora:'19:00', pessoas:'2', ocasiao:'', obs:'' }); setTouched({}); setErrors({}); }}
                  style={{ marginTop: 32 }}>
                  {t.reservas.newReserva}
                </button>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="mono" style={{
                  fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: 'var(--accent)', marginBottom: 24,
                }}>{t.reservas.formHeader}</div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="form-grid">
                  <div className={`field ${errors.nome && touched.nome ? 'error' : ''}`}>
                    <label>{t.reservas.f.nome}</label>
                    <input type="text" value={form.nome} onChange={e=>update('nome', e.target.value)} onBlur={()=>blur('nome')} />
                    <div className="err-msg">{touched.nome && errors.nome}</div>
                  </div>
                  <div className={`field ${errors.telefone && touched.telefone ? 'error' : ''}`}>
                    <label>{t.reservas.f.telefone}</label>
                    <input type="tel" value={form.telefone} onChange={e=>update('telefone', e.target.value)} onBlur={()=>blur('telefone')} placeholder="+44 ..." />
                    <div className="err-msg">{touched.telefone && errors.telefone}</div>
                  </div>
                  <div className={`field ${errors.email && touched.email ? 'error' : ''}`} style={{ gridColumn: '1 / -1' }}>
                    <label>{t.reservas.f.email}</label>
                    <input type="email" value={form.email} onChange={e=>update('email', e.target.value)} onBlur={()=>blur('email')} />
                    <div className="err-msg">{touched.email && errors.email}</div>
                  </div>
                  <div className={`field ${errors.data && touched.data ? 'error' : ''}`}>
                    <label>{t.reservas.f.data}</label>
                    <input type="date" value={form.data} min={today} onChange={e=>update('data', e.target.value)} onBlur={()=>blur('data')} />
                    <div className="err-msg">{touched.data && errors.data}</div>
                  </div>
                  <div className="field">
                    <label>{t.reservas.f.hora}</label>
                    <select value={form.hora} onChange={e=>update('hora', e.target.value)}>
                      {horas.map(h => <option key={h} value={h}>{h}</option>)}
                    </select>
                    <div className="err-msg"></div>
                  </div>
                  <div className="field">
                    <label>{t.reservas.f.pessoas}</label>
                    <select value={form.pessoas} onChange={e=>update('pessoas', e.target.value)}>
                      {[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].map(n => (
                        <option key={n} value={n}>{n} {n===1 ? t.reservas.pessoa : t.reservas.pessoas}</option>
                      ))}
                    </select>
                    <div className="err-msg"></div>
                  </div>
                  <div className="field">
                    <label>{t.reservas.f.ocasiao}</label>
                    <select value={form.ocasiao} onChange={e=>update('ocasiao', e.target.value)}>
                      {t.reservas.ocasioes.map(o => <option key={o} value={o === '—' ? '' : o}>{o}</option>)}
                    </select>
                    <div className="err-msg"></div>
                  </div>
                  <div className="field" style={{ gridColumn: '1 / -1' }}>
                    <label>{t.reservas.f.obs}</label>
                    <textarea rows="2" value={form.obs} onChange={e=>update('obs', e.target.value)} />
                  </div>
                </div>

                <button type="submit" className="btn" style={{
                  width: '100%', justifyContent: 'center', marginTop: 28,
                  padding: '18px 22px', background: 'var(--accent)', borderColor: 'var(--accent)',
                }}>
                  {t.reservas.submit}
                  <span style={{ fontSize: 10 }}>→</span>
                </button>
              </form>
            )}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .res-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .form-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.Reservas = Reservas;