const { useState: useStateCta } = React;

function CTA() {
  const [channel, setChannel] = useStateCta('phone'); // phone | email | telegram
  const [form, setForm] = useStateCta({ name: '', park: '', contact: '' });
  const [errors, setErrors] = useStateCta({});
  const [submitted, setSubmitted] = useStateCta(false);

  const channelMeta = {
    phone:    { label: 'Телефон',  placeholder: '+7 (___) ___-__-__', validate: v => /^[+\d\s\-()]{10,}$/.test(v) },
    email:    { label: 'Почта',    placeholder: 'name@company.ru',     validate: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) },
    telegram: { label: 'Telegram', placeholder: '@username',           validate: v => /^@?[a-zA-Z0-9_]{4,}$/.test(v.trim()) },
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = true;
    if (!form.park.trim()) errs.park = true;
    if (!channelMeta[channel].validate(form.contact)) errs.contact = true;
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      fetch('https://script.google.com/macros/s/AKfycbzCJ3oehyE3VyC-dNdTpQ5Li8O87qO6jcwzknZVHXrSXAoW52ybNdYCH8V_uZBv_qQW/exec', {
        method: 'POST',
        mode: 'no-cors',
        body: JSON.stringify({
          name: form.name,
          park: form.park,
          channel,
          contact: form.contact,
          ua: navigator.userAgent
        })
      });
      setSubmitted(true);
    }
  };

  const switchChannel = (ch) => {
    setChannel(ch);
    setForm(f => ({ ...f, contact: '' }));
    setErrors(e => ({ ...e, contact: false }));
  };

  return (
    <section id="cta">
      <div className="wrap">
        <div className="cta-block">
          <div>
            <h2>Бесплатно покажем, как бот закроет поддержку в вашем парке.</h2>
            <div className="cta-sub">Запишитесь на демо — покажем бота на ваших реальных диалогах. Также попробуйте бесплатно 7 дней.</div>
            <div className="cta-sub">Чтобы узнать стоимость подписки для вашего парка — оставьте заявку.</div>
          </div>
          <div>
            {!submitted ?
            <form className="cta-form" onSubmit={submit}>
                <input className={'cta-input ' + (errors.name ? 'error' : '')} placeholder="Имя"
              value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
                <input className={'cta-input ' + (errors.park ? 'error' : '')} placeholder="Название парка"
              value={form.park} onChange={(e) => setForm({ ...form, park: e.target.value })} />

                <div className="cta-channel-tabs" role="tablist">
                  {['phone', 'email', 'telegram'].map(ch => (
                    <button
                      type="button"
                      key={ch}
                      role="tab"
                      aria-selected={channel === ch}
                      className={'cta-channel-tab ' + (channel === ch ? 'active' : '')}
                      onClick={() => switchChannel(ch)}>
                      {channelMeta[ch].label}
                    </button>
                  ))}
                </div>
                <input className={'cta-input ' + (errors.contact ? 'error' : '')}
                  placeholder={channelMeta[channel].placeholder}
                  value={form.contact}
                  onChange={(e) => setForm({ ...form, contact: e.target.value })} />

                <button type="submit" className="cta-submit">Записаться на демо <Icon.Arrow /></button>
                <div className="cta-fineprint">Перезвоним или напишем в рабочее время.</div>
              </form> :

            <div className="cta-success">
                Заявка отправлена. Менеджер свяжется с вами в ближайшее время.
              </div>
            }
          </div>
        </div>
      </div>
      <div className="wrap">
        <footer className="footer">
          <div className="footer-row">
            <div className="logo" style={{ fontSize: 15 }}>
              <div className="logo-mark">П</div>
              Парк AI
            </div>
            <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
              <a href="#bot">Что делает бот</a>
              <a href="#demo">Демо</a>
              <a href="#calc">Калькулятор</a>
              <a href="#how">Подключение</a>
            </div>
            <div>© Парк AI, 2026</div>
          </div>
        </footer>
      </div>
    </section>);

}

window.CTA = CTA;