/* Bilermen site - Contact */

const { useState } = React;

function ContactScreen({ navigate }) {
  const [toast, setToast] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState('');

  async function submit(e) {
    e.preventDefault();
    if (sending) return;
    const form = e.target;

    /* Honeypot - automated bots fill hidden fields; real visitors never see this one. */
    if (form.elements['company_url'] && form.elements['company_url'].value) {
      setToast(true);
      form.reset();
      return;
    }

    const payload = {
      name:    (form.elements['name'].value || '').trim(),
      company: (form.elements['company'].value || '').trim() || null,
      website: (form.elements['website'].value || '').trim() || null,
      email:   (form.elements['email'].value || '').trim(),
      message: (form.elements['message'].value || '').trim(),
    };

    setSending(true);
    setErr('');
    try {
      // Send email via Web3Forms
      const web3FormsPayload = {
        access_key: 'be81c5cd-0fd6-4a26-b265-e4ac70066110', // Web3Forms public access key (safe in client code)
        subject: 'New Briefing Request from ' + payload.name,
        from_name: 'Bilermen Website',
        replyto: payload.email,
        message: `Name: ${payload.name}\nEmail: ${payload.email}\nCompany: ${payload.company || '-'}\nWebsite: ${payload.website || '-'}\n\nMessage:\n${payload.message}`
      };
      
      const resp = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json'
        },
        body: JSON.stringify(web3FormsPayload)
      });
      const result = await resp.json().catch(() => ({}));
      if (!resp.ok || result.success === false) {
        throw new Error(result.message || 'submit failed');
      }

      form.reset();
      setToast(true);
    } catch (e2) {
      setErr((window.SITE_LANG === 'ru')
        ? 'Не удалось отправить. Попробуйте ещё раз или напишите нам напрямую: info@bilermen-partners.com'
        : 'Could not send. Please try again, or email us directly at info@bilermen-partners.com');
    } finally {
      setSending(false);
    }
  }

  return (
    <>
      <section className="container" data-screen-label="Contact">
        <div className="contact-grid">
          <FadeIn>
            <Eyebrow>{t('contact.eyebrow')}</Eyebrow>
            <h1 className="display-lg">{t('contact.title')}</h1>
            <p className="lede">{t('contact.lede')}</p>
              {window.SITE_DATA.CONTACTS && window.SITE_DATA.CONTACTS.map((c, i) => (
                <div key={c.id || i} className="contact-meta" style={{ marginBottom: '2rem' }}>
                  <h3 style={{ gridColumn: '1 / -1', marginBottom: '0.5rem', color: 'var(--color-primary)', fontSize: '1.25rem' }}>
                    {window.SITE_LANG === 'ru' ? (c.title_ru || c.title) : c.title}
                  </h3>
                  <div className="item">
                    <small>{t('contact.address')}</small>
                    <strong><a href={c.addressUrl || '#'} target="_blank" rel="noopener noreferrer">
                      {(window.SITE_LANG === 'ru' ? (c.address_ru || c.address) : c.address).split('\n').map((line, idx) => <React.Fragment key={idx}>{line}<br/></React.Fragment>)}
                    </a></strong>
                  </div>
                  <div className="item">
                    <small>{t('contact.email')}</small>
                    <strong><a href={"mailto:" + c.email}>{c.email}</a></strong>
                  </div>
                  <div className="item">
                    <small>{t('contact.phone')}</small>
                    <strong>
                      {c.phone && <a href={"tel:" + c.phone.replace(/\s+/g,'')}>{c.phone}</a>}
                      {c.phone && c.phone2 && <br/>}
                      {c.phone2 && <a href={"tel:" + c.phone2.replace(/\s+/g,'')}>{c.phone2}</a>}
                    </strong>
                  </div>
                  <div className="item">
                    <small>LinkedIn</small>
                    <strong><a href={c.linkedin} target="_blank" rel="noopener noreferrer">{c.linkedinHandle} ↗</a></strong>
                  </div>
                </div>
              ))}
          </FadeIn>
          <FadeIn delay={120}>
            <form className="form" onSubmit={submit}>
              <div className="form-row">
                <div className="field"><label>{t('contact.form.name')}</label><input name="name" placeholder={t('contact.form.namePh')} required /></div>
                <div className="field"><label>{t('contact.form.company')}</label><input name="company" placeholder={t('contact.form.companyPh')} /></div>
              </div>
              <div className="form-row">
                <div className="field"><label>{t('contact.form.website')}</label><input name="website" type="url" placeholder={t('contact.form.websitePh')} /></div>
                <div className="field"><label>{t('contact.form.email')}</label><input name="email" type="email" placeholder={t('contact.form.emailPh')} required /></div>
              </div>
              <div className="field" style={{ marginBottom: 24 }}>
                <label>{t('contact.form.scope')}</label>
                <textarea name="message" placeholder={t('contact.form.scopePh')} required></textarea>
              </div>
              {/* Honeypot - visually hidden; only bots fill it. */}
              <input type="text" name="company_url" tabIndex="-1" autoComplete="off" aria-hidden="true"
                     style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
              {err && <p style={{ color: '#A03A2D', marginBottom: 16, fontSize: 14 }}>{err}</p>}
              <Button type="submit" arrow>
                {sending ? (window.SITE_LANG === 'ru' ? 'Отправка…' : 'Sending…') : t('contact.form.send')}
              </Button>
            </form>
          </FadeIn>
        </div>
      </section>

      <section className="container">
        <FadeIn>
          <div className="map-embed-wrap">
            <iframe
              title="Bilermen Hyzmatdashlar office - Ashgabat"
              src="https://www.google.com/maps?q=Ashgabat,+Turkmenistan&output=embed&z=13"
              width="100%"
              height="420"
              style={{ border: 0, display: 'block' }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen></iframe>
            <div className="map-embed-info">
              <div className="map-embed-info-row">
                <strong>Office</strong>
                <span>1908 st. (Gundogar), 6/2, Ashgabat, Turkmenistan</span>
              </div>
              <a className="map-embed-link" href="https://www.google.com/maps/search/?api=1&query=Ashgabat+Turkmenistan+Gundogar+1908"
                 target="_blank" rel="noopener noreferrer">Open in Google Maps →</a>
            </div>
          </div>
        </FadeIn>
      </section>
      {toast && <Toast title="Briefing request received" body="A Bilermen partner will respond within two business days." onDismiss={() => setToast(false)} />}
    </>
  );
}

window.ContactScreen = ContactScreen;