/* ============================================================
   FLOREA GRUP — Contact
   ============================================================ */
function Contact() {
  const { L } = useL();
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", subject: "", msg: "", consent: false });
  const [err, setErr] = useState({});
  const [sending, setSending] = useState(false);
  const [sendErr, setSendErr] = useState("");
  const [mailtoFallback, setMailtoFallback] = useState("");
  const f = (k) => (e) => {
    const val = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm(s => ({ ...s, [k]: val }));
  };

  const buildMailto = () => {
    const subiect = encodeURIComponent(form.subject || "Formular contact Florea Grup");
    const body = encodeURIComponent(
      `Nume: ${form.name}\nEmail: ${form.email}\n\n${form.msg}\n\n---\nConsimțământ GDPR: ACORDAT`
    );
    return `mailto:contact@floreagrup.ro?subject=${subiect}&body=${body}`;
  };

  const submit = async (e) => {
    e.preventDefault();
    setSendErr("");
    setMailtoFallback("");
    const er = {};
    if (!form.name.trim()) er.name = 1;
    if (!/^\S+@\S+\.\S+$/.test(form.email)) er.email = 1;
    if (!form.msg.trim()) er.msg = 1;
    if (!form.consent) er.consent = 1;
    setErr(er);
    if (Object.keys(er).length) return;

    setSending(true);
    try {
      const res = await fetch("/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (res.ok) { setSent(true); return; }
      const data = await res.json();
      setSendErr(data.error || "");
    } catch (_) {
      // fetch failed (e.g. local dev, no CF function) — will show fallback
    } finally {
      setSending(false);
    }

    // Fallback: show mailto link
    setMailtoFallback(buildMailto());
  };

  return (
    <main>
      <PageHero crumb={L(FG.UI.nav_contact)}
        title={L({ ro: "Hai să construim împreună", en: "Let's build together" })}
        sub={L({ ro: "Întrebări, oferte sau parteneriate — echipa Florea Grup îți răspunde.", en: "Questions, quotes or partnerships — the Florea Grup team is here." })} />

      <section className="section--tight">
        <div className="wrap contact">
          {/* form */}
          <div className="contact__form">
            {sent ? (
              <div className="form-ok">
                <span className="form-ok__ic"><Ic.check /></span>
                <h3 className="h-md">{L({ ro: "Mesaj trimis!", en: "Message sent!" })}</h3>
                <p className="muted">{L({ ro: "Mulțumim. Revenim cât mai curând posibil.", en: "Thank you. We'll reply as soon as possible." })}</p>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className="field-row">
                  <label className="field">
                    <span>{L({ ro: "Nume", en: "Name" })}</span>
                    <input value={form.name} onChange={f("name")} className={err.name ? "bad" : ""} />
                  </label>
                  <label className="field">
                    <span>Email</span>
                    <input value={form.email} onChange={f("email")} className={err.email ? "bad" : ""} placeholder="email@exemplu.ro" />
                  </label>
                </div>
                <label className="field">
                  <span>{L({ ro: "Subiect", en: "Subject" })}</span>
                  <input value={form.subject} onChange={f("subject")} placeholder={L({ ro: "ex. Cerere ofertă betoane", en: "e.g. Concrete quote request" })} />
                </label>
                <label className="field">
                  <span>{L({ ro: "Mesaj", en: "Message" })}</span>
                  <textarea rows="5" value={form.msg} onChange={f("msg")} className={err.msg ? "bad" : ""}></textarea>
                </label>
                <label className="field field--checkbox">
                  <input type="checkbox" checked={form.consent} onChange={f("consent")} className={err.consent ? "bad" : ""} />
                  <span>{L({ ro: "Sunt de acord ca datele personale să fie prelucrate de Florea Grup pentru a răspunde la solicitarea mea. Am citit și înțeleg ", en: "I consent to my personal data being processed by Florea Grup in order to respond to my inquiry. I have read and understand the " })}<a href="#/contact" style={{ textDecoration: "underline", color: "inherit" }}>{L({ ro: "Politica de Confidențialitate", en: "Privacy Policy" })}</a>.</span>
                </label>
                <button type="submit" className="btn btn--primary" disabled={sending}>{sending ? L({ ro: "Se trimite...", en: "Sending..." }) : L({ ro: "Trimite mesajul", en: "Send message" })} <Ic.arrow /></button>
                {sendErr && <p className="form-err">{sendErr}</p>}
                {mailtoFallback && <p className="form-err" style={{ marginTop: ".8rem" }}>{L({ ro: "Trimiterea automată nu a funcționat. ", en: "Automatic sending failed. " })}<a href={mailtoFallback} className="tlink">{L({ ro: "Trimite prin email client", en: "Send via email client" })} <Ic.ext style={{ width: 14 }} /></a></p>}
              </form>
            )}
          </div>

          {/* info */}
          <aside className="contact__info">
            {FG.OFFICES.map((o, i) => (
              <Reveal key={i} d={(i % 3) + 1} className="office">
                <h3 className="office__name">{L(o.name)}</h3>
                <p className="office__addr"><Ic.pin style={{ width: 15 }} /> {L(o.addr)}</p>
                {o.phone && <p className="office__line"><Ic.phone style={{ width: 15 }} /> {o.phone}</p>}
                {o.email && <p className="office__line"><Ic.mail style={{ width: 15 }} /> {o.email}</p>}
                {o.web && <a className="office__line office__web" href={"https://" + o.web} target="_blank" rel="noreferrer"><Ic.ext style={{ width: 15 }} /> {o.web}</a>}
              </Reveal>
            ))}
          </aside>
        </div>
      </section>

    </main>
  );
}
Object.assign(window, { Contact });