/* global React, Container, Section, SectionIdx, Button, useLang, t, I18nStore */

// ╔══ ОТПРАВКА ЗАЯВОК ═══════════════════════════════════════════╗
// Токен бота больше НЕ хранится здесь. Форма шлёт заявку на ваш прокси
// (Cloudflare Worker), а уже он — секретно — пересылает её в Telegram.
//
// Вставьте сюда адрес воркера после деплоя (см. telegram-proxy/worker.js):
//   например 'https://ea-soft-leads.ВАШ-САБДОМЕН.workers.dev'
// Пока пусто — форма работает в демо-режиме (показывает «спасибо», но не шлёт).
// ╚══════════════════════════════════════════════════════════════╝
const PROXY_URL = 'https://aged-cell-e04f.azat-massaurov.workers.dev/';

async function sendToTelegram(form) {
  const payload = { ...form, lang: I18nStore.lang };

  if (!PROXY_URL) {
    console.warn('[Telegram] PROXY_URL не задан — демо-режим, заявка не отправлена:\n', payload);
    await new Promise(r => setTimeout(r, 600));
    return;
  }

  const res = await fetch(PROXY_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });
  const data = await res.json().catch(() => ({}));
  if (!res.ok || !data.ok) throw new Error(data.error || ('HTTP ' + res.status));
}

function Contact() {
  useLang();
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [form, setForm] = React.useState({ name: '', phone: '', service: '', task: '' });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const valid = form.name.trim().length > 0 && form.phone.trim().length > 0 && form.service.length > 0;
  const services = t('contact.services');

  const sent = status === 'sent';
  const sending = status === 'sending';

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!valid || sending) return;
    setStatus('sending');
    try {
      await sendToTelegram(form);
      setStatus('sent');
    } catch (err) {
      console.error('[Telegram] Ошибка отправки:', err);
      setStatus('error');
    }
  };

  return (
    <Section id="contact" dark>
      <Container>
        <SectionIdx n="07" name={t('contact.idx')} meta={t('contact.idxMeta')} />

        <div className="ea-contact-grid">
          <div className="ea-contact-left">
            <h2 className="ea-h2" style={{ color: 'var(--ea-white)' }}>{t('contact.title')}</h2>
            <p className="ea-lead" style={{ marginBottom: '32px' }}>{t('contact.lead')}</p>

            <div className="ea-contact-badges">
              {t('contact.badges').map((b, i) => <span key={i} className="ea-contact-badge">{b}</span>)}
            </div>

            <address className="ea-contact-rows" style={{ marginTop: '48px', fontStyle: 'normal' }}>
              <Row k={t('contact.rowPhone')} v="+7 (776) 207-11-22" href="tel:+77762071122" large />
              <Row k={t('contact.rowEmail')} v="info@easoft.kz" href="mailto:info@easoft.kz" large />
              <Row k={t('contact.rowAddr')} v={t('contact.addrVal')} />
              <Row k={t('contact.rowBin')} v="210 440 027 346" />
              <Row k={t('contact.rowWork')} v={t('contact.workVal')} />
            </address>
          </div>

          <div className="ea-contact-right">
            {sent ? (
              <div style={{ paddingTop: '8px' }}>
                <div style={{
                  fontFamily: 'var(--ea-font-mono)', fontSize: '11px',
                  textTransform: 'uppercase', letterSpacing: '0.06em',
                  color: 'var(--ea-success-500)', marginBottom: '14px'
                }}>{t('contact.sentTag')}</div>
                <h2 className="ea-h2" style={{ color: 'var(--ea-white)', fontSize: '40px', margin: '0 0 16px' }}>
                  {t('contact.sentTitle')}
                </h2>
                <p className="ea-lead" style={{ color: 'var(--ea-ink-300)' }}>{t('contact.sentText')}</p>
              </div>
            ) : status === 'error' ? (
              <div style={{ paddingTop: '8px' }}>
                <div style={{
                  fontFamily: 'var(--ea-font-mono)', fontSize: '11px',
                  textTransform: 'uppercase', letterSpacing: '0.06em',
                  color: 'var(--ea-danger-500, #e5484d)', marginBottom: '14px'
                }}>{t('contact.errTag')}</div>
                <h2 className="ea-h2" style={{ color: 'var(--ea-white)', fontSize: '40px', margin: '0 0 16px' }}>
                  {t('contact.errTitle')}
                </h2>
                <p className="ea-lead" style={{ color: 'var(--ea-ink-300)', marginBottom: '28px' }}>{t('contact.errText')}</p>
                <Button variant="primary" size="md" arrow type="button" onClick={() => setStatus('idle')}>{t('contact.retry')}</Button>
              </div>
            ) : (
              <form className="ea-form" onSubmit={onSubmit}>
                <div className="ea-form-field">
                  <label htmlFor="ea-name">{t('contact.fName')} <span className="req">*</span></label>
                  <input
                    id="ea-name" className="ea-form-input"
                    placeholder={t('contact.phName')}
                    value={form.name} onChange={update('name')}
                    required
                  />
                </div>

                <div className="ea-form-field">
                  <label htmlFor="ea-phone">{t('contact.fPhone')} <span className="req">*</span></label>
                  <input
                    id="ea-phone" className="ea-form-input" type="tel"
                    placeholder={t('contact.phPhone')}
                    value={form.phone} onChange={update('phone')}
                    required
                  />
                </div>

                <div className="ea-form-field">
                  <label htmlFor="ea-service">{t('contact.fService')} <span className="req">*</span></label>
                  <select
                    id="ea-service" className="ea-form-input ea-form-select"
                    value={form.service} onChange={update('service')}
                    required
                  >
                    <option value="" disabled>{t('contact.selectPlaceholder')}</option>
                    {services.map((o, i) => <option key={i} value={o}>{o}</option>)}
                  </select>
                </div>

                <div className="ea-form-field">
                  <label htmlFor="ea-task">{t('contact.fTask')}</label>
                  <textarea
                    id="ea-task" className="ea-form-input ea-form-textarea"
                    placeholder={t('contact.taskPlaceholder')}
                    rows="3"
                    value={form.task} onChange={update('task')}
                  />
                </div>

                <div className="ea-form-foot">
                  <Button variant="primary" size="md" arrow type="submit" disabled={sending}>
                    {sending ? t('contact.sending') : t('contact.submit')}
                  </Button>
                  <p className="ea-form-disclaimer">{t('contact.disclaimer')}</p>
                </div>
              </form>
            )}
          </div>
        </div>
      </Container>
    </Section>
  );
}

function Row({ k, v, large, href }) {
  const Tag = href ? 'a' : 'span';
  const props = href ? { href } : {};
  return (
    <div className="ea-contact-row">
      <span className="k">{k}</span>
      <Tag className={'v' + (large ? ' large' : '') + (href ? ' link' : '')} {...props}>{v}</Tag>
    </div>
  );
}

function Footer() {
  useLang();
  const services = t('footer.services');
  const company = t('footer.company');
  const navIds = ['cases', 'pricing', 'certs', 'faq', 'contact'];
  const svcIds = ['services', 'services', 'services', 'services', 'services', 'services'];
  return (
    <footer className="ea-footer">
      <div className="ea-container">
        <div className="ea-footer-grid">
          <div className="ea-footer-brand">
            <img src="assets/logo-black.png" alt="EA-SOFT" width="100" height="18" />
            <p>{t('footer.desc')}</p>
          </div>
          <div className="ea-footer-col">
            <h5>{t('footer.colServices')}</h5>
            {services.map((s, i) => <a key={i} href={`#${svcIds[i]}`}>{s}</a>)}
          </div>
          <div className="ea-footer-col">
            <h5>{t('footer.colCompany')}</h5>
            {company.map((s, i) => <a key={i} href={`#${navIds[i]}`}>{s}</a>)}
          </div>
          <div className="ea-footer-col">
            <h5>{t('footer.colContact')}</h5>
            <a href="tel:+77762071122">+7 (776) 207-11-22</a>
            <a href="mailto:info@easoft.kz">info@easoft.kz</a>
            <a href="https://www.google.com/maps/place/просп.+Бауыржана+Момышулы+25b,+Шымкент" target="_blank" rel="noopener">
              {t('footer.addrLink')}
            </a>
          </div>
        </div>

        <div className="ea-footer-bottom">
          <span>{t('footer.copy')}</span>
          <span>{t('footer.bin')}</span>
          <span>v.2026.05</span>
        </div>
      </div>
    </footer>
  );
}

window.Contact = Contact;
window.Footer = Footer;