// Contact form
window.ContactForm=function ContactForm({lang}){
  const t=useT(lang);
  const fr=lang==="fr";
  const [ok,setOk]=React.useState(false);
  const submit=async(ev)=>{
    ev.preventDefault();
    // TODO: envoyer vers Supabase self-hosted quand VPS prêt
    // const { error } = await supabase.from('contact_messages').insert({...});
    setOk(true);
    ev.target.reset();
  };
  return (
    <form className="form" onSubmit={submit}>
      <div className="field">
        <label>{t.f_name}</label>
        <input required placeholder={fr?"Marie Lefèvre":"Marie Lefèvre"}/>
      </div>
      <div className="field">
        <label>{t.f_email}</label>
        <input type="email" required placeholder="marie@email.com"/>
      </div>
      <div className="field">
        <label>{t.f_phone}</label>
        <input placeholder="+230 5453 7576"/>
      </div>
      <div className="field">
        <label>{t.f_subj}</label>
        <select>
          <option>{t.f_subj_exc}</option>
          <option>{t.f_subj_resa}</option>
          <option>{t.f_subj_prop}</option>
          <option>{t.f_subj_other}</option>
        </select>
      </div>
      <div className="field full">
        <label>{t.f_msg}</label>
        <textarea required placeholder={fr?"Dites-nous tout — dates, envies, nombre de voyageurs…":"Tell us everything — dates, ideas, party size…"}/>
      </div>
      {ok?<div className="success-msg full">✓ {t.f_ok}</div>:null}
      <div className="full" style={{display:"flex",justifyContent:"flex-end",gap:12}}>
        <a href={WA_LINK} target="_blank" className="btn btn-ghost"><Icon.wa/>{t.wa_hi}</a>
        <button type="submit" className="btn btn-primary">{t.cta_send}<Icon.send/></button>
      </div>
    </form>
  );
};