// ATOM Center — Page: Contact
const ContactPage = ({ lang, navigate }) => {
  const tr = (k) => t(lang, "contact." + k);
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(false);
  const [form, setForm] = useState({ name:"", email:"", company:"", role:"", audience:"corp", interest:"", message:"" });

  const CONTACT_ENDPOINT = "https://formsubmit.co/ajax/contact@atom-center.com";

  const onSubmit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setSending(true);
    setError(false);
    try {
      const res = await fetch(CONTACT_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          _subject: `[ATOM Center] ${form.audience === "corp" ? "Demande entreprise" : "Demande particulier"} — ${form.name}`,
          _template: "table",
          _captcha: "false",
          _replyto: form.email,
          Nom: form.name,
          Email: form.email,
          Entreprise: form.company || "—",
          Fonction: form.role || "—",
          Audience: form.audience === "corp" ? "Entreprise" : "Particulier",
          "Centre d'intérêt": form.interest || "—",
          Langue: lang.toUpperCase(),
          Message: form.message,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || data.success === "false") throw new Error("send-failed");
      setSubmitted(true);
      setForm({ name:"", email:"", company:"", role:"", audience:"corp", interest:"", message:"" });
      setTimeout(() => setSubmitted(false), 6000);
    } catch (err) {
      setError(true);
      setTimeout(() => setError(false), 6000);
    } finally {
      setSending(false);
    }
  };

  return (
    <>
      <header className="page-header">
        <div className="container">
          <div className="breadcrumb">{t(lang,"nav.home")} <span>/</span> {tr("breadcrumb")}</div>
          <h1>{tr("titleA")} <span className="accent">{tr("titleB")}</span> {tr("titleC")}</h1>
          <p className="page-sub">{tr("sub")}</p>
        </div>
      </header>

      <section>
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info">
              <h2 className="h-display-2">{tr("infoTitle")}</h2>
              <p>{tr("infoSub")}</p>
              <div className="contact-info-item">
                <Icon name="map-pin"/>
                <div>
                  <div className="label">{tr("addrLabel")}</div>
                  <div className="value" style={{whiteSpace:"pre-line"}}>{tr("addrValue")}</div>
                </div>
              </div>
              <div className="contact-info-item">
                <Icon name="phone"/>
                <div>
                  <div className="label">{tr("phoneLabel")}</div>
                  <div className="value" style={{whiteSpace:"pre-line"}}>{tr("phoneValue")}</div>
                </div>
              </div>
              <div className="contact-info-item">
                <Icon name="message-circle"/>
                <div>
                  <div className="label">{tr("waLabel")}</div>
                  <div className="value">{tr("waValue")}</div>
                </div>
              </div>
              <div className="contact-info-item">
                <Icon name="mail"/>
                <div>
                  <div className="label">{tr("emailLabel")}</div>
                  <div className="value">{tr("emailValue")}</div>
                </div>
              </div>
            </div>

            <div>
              <h2 className="h-display-2" style={{marginBottom:12}}>{tr("formTitle")}</h2>
              <p style={{color:"var(--fg-2)", marginBottom:32, fontSize:16, lineHeight:1.55}}>{tr("formSub")}</p>

              {submitted && (
                <div style={{padding:16, background:"#E8F4EC", border:"1px solid #2D8B4D", borderRadius:8, color:"#1F7A3A", marginBottom:20, fontSize:14, fontWeight:600}}>
                  ✓ {lang === "fr" ? "Demande envoyée. Nous revenons vers vous sous 48h." : "Request sent. We will get back to you within 48h."}
                </div>
              )}
              {error && (
                <div style={{padding:16, background:"#FDECEC", border:"1px solid #C0392B", borderRadius:8, color:"#922B21", marginBottom:20, fontSize:14, fontWeight:600}}>
                  ✕ {lang === "fr" ? "Échec de l'envoi. Réessayez ou écrivez à contact@atom-center.com." : "Sending failed. Please retry or email contact@atom-center.com."}
                </div>
              )}

              <form className="form" onSubmit={onSubmit}>
                <div className="form-row">
                  <div className="form-group">
                    <label>{tr("fName")}</label>
                    <input type="text" required value={form.name} onChange={e=>setForm({...form, name:e.target.value})}/>
                  </div>
                  <div className="form-group">
                    <label>{tr("fEmail")}</label>
                    <input type="email" required value={form.email} onChange={e=>setForm({...form, email:e.target.value})}/>
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-group">
                    <label>{tr("fCompany")}</label>
                    <input type="text" value={form.company} onChange={e=>setForm({...form, company:e.target.value})}/>
                  </div>
                  <div className="form-group">
                    <label>{tr("fRole")}</label>
                    <input type="text" value={form.role} onChange={e=>setForm({...form, role:e.target.value})}/>
                  </div>
                </div>
                <div className="form-group">
                  <label>{tr("fAudience")}</label>
                  <select value={form.audience} onChange={e=>setForm({...form, audience:e.target.value})}>
                    <option value="corp">{tr("fAudOptCorp")}</option>
                    <option value="ind">{tr("fAudOptInd")}</option>
                  </select>
                </div>
                <div className="form-group">
                  <label>{tr("fInterest")}</label>
                  <select value={form.interest} onChange={e=>setForm({...form, interest:e.target.value})}>
                    <option value="">{tr("fInterestOpt")}</option>
                    <option>{tr("fInterestLang")}</option>
                    <option>{tr("fInterestOffice")}</option>
                    <option>{tr("fInterestMgmt")}</option>
                    <option>{tr("fInterestAudit")}</option>
                  </select>
                </div>
                <div className="form-group">
                  <label>{tr("fMessage")}</label>
                  <textarea required value={form.message} onChange={e=>setForm({...form, message:e.target.value})}></textarea>
                </div>
                <button type="submit" disabled={sending} className="btn btn-primary btn-lg" style={{alignSelf:"flex-start", opacity: sending ? 0.6 : 1, cursor: sending ? "wait" : "pointer"}}>
                  <Icon name="send" size={14}/>
                  {sending
                    ? (lang === "fr" ? "Envoi en cours…" : "Sending…")
                    : tr("fSubmit")}
                </button>
                <p style={{fontSize:12, color:"var(--fg-3)", marginTop:8}}>{tr("fNote")}</p>
              </form>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

window.ContactPage = ContactPage;