/* =====================================================================
   Future Consulting — Kapcsolat aloldal (i18n-ready)
   ===================================================================== */

const { useState: cUseState } = React;

function ContactPage() {
  return (
    <I18nProvider>
      <ContactPageBody/>
    </I18nProvider>
  );
}

function ContactPageBody() {
  const { t } = useI18n();
  const f = t.form;
  const cp = t.contactPage;
  const [form, setForm] = cUseState({ name: "", email: "", company: "", message: "", gdpr: false });
  const [errors, setErrors] = cUseState({});
  const [status, setStatus] = cUseState("idle"); // idle | sending | sent | error

  const onChange = (key) => (e) => {
    const val = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm((s) => ({ ...s, [key]: val }));
    if (errors[key]) setErrors((er) => ({ ...er, [key]: null }));
  };

  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = f.required;
    if (!form.email.trim()) er.email = f.required;
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = f.invalidEmail;
    if (!form.message.trim()) er.message = f.required;
    if (!form.gdpr) er.gdpr = f.required;
    setErrors(er);
    return Object.keys(er).length === 0;
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setStatus("sending");
    try {
      const res = await fetch('/send.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          company: form.company,
          message: form.message,
          gdpr: form.gdpr,
          _gotcha: '',  // honeypot — üresen kell maradnia
        }),
      });
      const json = await res.json().catch(() => ({ ok: false, error: 'parse_error' }));
      if (json.ok) {
        setStatus('sent');
        if (window.fcsAdsConversion) window.fcsAdsConversion('contact'); // Google Ads konverzió
      } else if (json.errors) {
        setErrors(json.errors);
        setStatus('idle');
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  return (
    <>
      <Nav active="contact"/>

      {/* HERO */}
      <section className="page-hero">
        <div className="ambient-glow"/>
        <div className="grid-bg"/>
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <span className="eyebrow">{f.eyebrow}</span>
              <h1>{f.title}</h1>
              <p className="lead">{f.desc}</p>
            </div>
            <div className="page-hero-meta">
              {cp.meta.map((row, i) => (
                <div className="row" key={i}>
                  <span>{row.k}</span>
                  <span style={row.highlight ? {color:'var(--mint)'} : undefined}>{row.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FORM */}
      <section className="section" style={{paddingTop: 48, paddingBottom: 96}}>
        <div className="container">
          {status === "sent" ? (
            <div className="cta-card form-success" style={{maxWidth: 720, margin: '0 auto'}}>
              <div className="form-success-icon"><Check size={36}/></div>
              <h2 className="cta-title">{f.success.title}</h2>
              <p className="cta-desc">{f.success.desc}</p>
            </div>
          ) : (
            <div className="cta-card form-card" style={{margin: '0 auto'}}>
              <form className="contact-form" onSubmit={onSubmit} noValidate>
                <div className="form-row">
                  <label className="form-field">
                    <span className="form-label">{f.name.label}</span>
                    <input
                      type="text"
                      value={form.name}
                      onChange={onChange("name")}
                      placeholder={f.name.placeholder}
                      className={errors.name ? "form-input has-error" : "form-input"}
                      required
                    />
                    {errors.name && <span className="form-error">{errors.name}</span>}
                  </label>
                  <label className="form-field">
                    <span className="form-label">{f.email.label}</span>
                    <input
                      type="email"
                      value={form.email}
                      onChange={onChange("email")}
                      placeholder={f.email.placeholder}
                      className={errors.email ? "form-input has-error" : "form-input"}
                      required
                    />
                    {errors.email && <span className="form-error">{errors.email}</span>}
                  </label>
                </div>

                <label className="form-field">
                  <span className="form-label">
                    {f.company.label} <span className="form-optional">{f.company.optional}</span>
                  </span>
                  <input
                    type="text"
                    value={form.company}
                    onChange={onChange("company")}
                    placeholder={f.company.placeholder}
                    className="form-input"
                  />
                </label>

                <label className="form-field">
                  <span className="form-label">{f.message.label}</span>
                  <textarea
                    value={form.message}
                    onChange={onChange("message")}
                    placeholder={f.message.placeholder}
                    className={errors.message ? "form-input form-textarea has-error" : "form-input form-textarea"}
                    rows={4}
                    required
                  />
                  {errors.message && <span className="form-error">{errors.message}</span>}
                </label>

                <label className={"form-checkbox " + (errors.gdpr ? "has-error" : "")}>
                  <input
                    type="checkbox"
                    checked={form.gdpr}
                    onChange={onChange("gdpr")}
                  />
                  <span className="form-checkbox-text">
                    {f.gdpr} <a href={f.gdprLink.href} target="_blank" rel="noopener">{f.gdprLink.label}</a>
                  </span>
                </label>

                <div className="form-submit-wrap">
                  <button type="submit" className="btn btn-primary btn-lg" disabled={status === "sending"}>
                    {status === "sending" ? f.sending : f.submit}
                    {status !== "sending" && <ArrowRight size={16}/>}
                  </button>
                  <span className="meta">{t.cta.sub}</span>
                </div>

                {status === "error" && <p className="form-error-banner">{f.error}</p>}
              </form>
            </div>
          )}
        </div>
      </section>

      <Footer/>
      <CookieBanner/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ContactPage/>);