/* Contact */

const Contact = () => {
  const { t, lang } = useLang();
  const [form, setForm] = React.useState({ topic: 'order', name: '', email: '', order: '', message: '', privacyConsent: false, marketingConsent: false, website: '' });
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const set = (patch) => setForm((current) => ({ ...current, ...patch }));

  const submit = async (event) => {
    event.preventDefault();
    if (loading) return;
    setLoading(true);
    setError('');
    setSent(false);
    const result = await submitRecord('/api/contact', {
      ...form,
      language: lang,
      sourcePage: 'contact'
    });
    setLoading(false);
    if (result.ok) {
      setSent(true);
    } else {
      setError(result.error || t.common.requestFailed);
    }
  };

  return (
    <>
      <PageHero eyebrow={t.contact.eyebrow} title={t.contact.title} sub={t.contact.sub} />
      <section className="section-tight">
        <div className="container contact-grid">
          <aside className="stack" style={{ gap: 18 }}>
            <div className="eyebrow">{t.contact.direct}</div>
            <div className="surface-plain" style={{ padding: 18 }}>
              <SpecRow k={t.contact.email} v={CFG.company.email || t.contact.notConfigured} />
              <SpecRow k="Instagram" v={CFG.company.instagram || t.contact.notConfigured} />
              <SpecRow k="TikTok" v={CFG.company.tiktok || t.contact.notConfigured} />
            </div>
            <p className="notice">{t.contact.contactHelp}</p>
          </aside>

          <form className="surface stack" style={{ padding: 22 }} onSubmit={submit}>
            {sent && <p className="notice">{t.contact.sent}</p>}
            {error && <p className="notice notice-danger" role="alert">{error}</p>}
            <Field label={t.contact.topic}>
              <select className="select" value={form.topic} onChange={(event) => set({ topic: event.target.value })}>
                {Object.keys(t.contact.topics).map((key) => (
                  <option key={key} value={key}>{t.contact.topics[key]}</option>
                ))}
              </select>
            </Field>
            <div className="grid cols-2">
              <Field label={t.contact.name}>
                <input className="input" required value={form.name} onChange={(event) => set({ name: event.target.value })} />
              </Field>
              <Field label={t.contact.messageEmail}>
                <input className="input" required type="email" value={form.email} onChange={(event) => set({ email: event.target.value })} />
              </Field>
            </div>
            <Field label={t.contact.order}>
              <input className="input" value={form.order} onChange={(event) => set({ order: event.target.value })} />
            </Field>
            <Field label={t.contact.message}>
              <textarea className="textarea" required value={form.message} onChange={(event) => set({ message: event.target.value })}></textarea>
            </Field>
            <CheckLabel
              checked={form.privacyConsent}
              onChange={(value) => set({ privacyConsent: value })}
              text={t.contact.privacyConsent}
              required
            />
            <CheckLabel
              checked={form.marketingConsent}
              onChange={(value) => set({ marketingConsent: value })}
              text={t.contact.marketingConsent}
            />
            <input
              type="text"
              value={form.website}
              onChange={(event) => set({ website: event.target.value })}
              tabIndex="-1"
              autoComplete="off"
              className="hp-field"
              aria-hidden="true"
            />
            <button className="btn btn-primary btn-block btn-arrow" type="submit" disabled={loading}>
              {loading ? '...' : t.contact.button}
            </button>
          </form>
        </div>
      </section>
    </>
  );
};

window.Contact = Contact;