function CTA() {
  const [tags, setTags] = React.useState(new Set(['Демо']));
  const [industry, setIndustry] = React.useState(null);

  const toggle = (t) => setTags(prev => {
    const n = new Set(prev);
    n.has(t) ? n.delete(t) : n.add(t);
    return n;
  });

  const REQUEST_TAGS = ['Демо', 'Покупка', 'Своя интеграция', 'Консультация'];
  const INDUSTRY_TAGS = ['Банк', 'FMCG', 'Приложение', 'SaaS', 'Ритейл', 'HoReCa', 'Телеком', 'Другое'];

  return (
    <section id="contact" style={{ padding: '140px 0', background: 'var(--bg)', color: 'var(--ink)' }}>
      <style>{`
        @media (max-width: 860px) {
          #contact img.cta-yuly-avatar {
            width: 48px !important;
            height: 48px !important;
          }
        }
        @media (max-width: 420px) {
          #contact img.cta-yuly-avatar {
            width: 38px !important;
            height: 38px !important;
          }
        }
      `}</style>
      <div className="container">
        <h2 className="display" style={{
          fontSize: 72, lineHeight: 1.08, fontWeight: 700,
          letterSpacing: '-0.035em', color: 'var(--ink)',
          maxWidth: 1100,
        }}>
          Попробовать, приобрести или просто спросить можно в{' '}
          <a
            href="https://t.me/"
            style={{
              color: 'var(--accent)',
              textDecoration: 'underline',
              textDecorationThickness: '4px',
              textUnderlineOffset: '6px',
              whiteSpace: 'nowrap',
            }}
          >
            <svg viewBox="0 0 24 24" fill="currentColor" style={{
              display: 'inline-block', width: '1em', height: '1em',
              verticalAlign: '-0.14em', marginRight: '0.12em',
            }}>
              <path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/>
            </svg>
            телеграм
          </a>{' '}
          {' '}у{' '}
          <span style={{ whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 14, verticalAlign: 'middle' }}>
            Юли
            <img
              src="uploads/yuly.webp"
              alt=""
              loading="lazy"
              decoding="async"
              className="cta-yuly-avatar"
              style={{
                display: 'block', width: 86, height: 86, borderRadius: '50%',
                objectFit: 'cover',
                border: '2px solid rgba(13,13,18,0.10)',
                boxShadow: '0 6px 24px -8px rgba(122,96,255,0.45)',
              }}
            />
          </span>{' '}
          или оставив заявку
        </h2>

        <form
          onSubmit={(e) => e.preventDefault()}
          style={{
            marginTop: 64,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
          }}
        >
          {/* left column: text inputs — stretch to match right card height */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Input placeholder="Ваше имя" style={{ flex: 1 }} />
            <Input placeholder="Я из компании" style={{ flex: 1 }} />
            <Input placeholder="Контакт для связи" style={{ flex: 1 }} />
          </div>

          {/* right column: brief + tags */}
          <div style={{
            background: 'var(--bg-soft)',
            border: '1px solid var(--line)',
            borderRadius: 22,
            padding: '20px 22px',
            display: 'flex', flexDirection: 'column', gap: 18,
          }}>
            <textarea
              placeholder="Кратко о задаче"
              rows={2}
              style={{
                width: '100%', resize: 'none',
                background: 'transparent', border: 'none', outline: 'none',
                color: 'var(--ink)', fontFamily: 'inherit', fontSize: 16,
                padding: '4px 0',
              }}
            />

            <div>
              <div style={{
                fontSize: 13, color: 'var(--muted)', marginBottom: 10,
              }}>Что интересует</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {REQUEST_TAGS.map(t => {
                  const on = tags.has(t);
                  return (
                    <button
                      key={t}
                      type="button"
                      onClick={() => toggle(t)}
                      style={{
                        padding: '7px 14px', borderRadius: 999,
                        fontSize: 13.5, fontWeight: 500,
                        background: on ? 'var(--accent)' : 'var(--card)',
                        color: on ? '#fff' : 'var(--ink-2)',
                        border: '1px solid ' + (on ? 'var(--accent)' : 'var(--line)'),
                        cursor: 'pointer',
                        transition: 'all 0.18s',
                      }}
                    >{t}</button>
                  );
                })}
              </div>
            </div>

            <div>
              <div style={{
                fontSize: 13, color: 'var(--muted)', marginBottom: 10,
              }}>Откуда вы</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {INDUSTRY_TAGS.map(t => {
                  const on = industry === t;
                  return (
                    <button
                      key={t}
                      type="button"
                      onClick={() => setIndustry(on ? null : t)}
                      style={{
                        padding: '7px 14px', borderRadius: 999,
                        fontSize: 13.5, fontWeight: 500,
                        background: on ? 'var(--accent)' : 'var(--card)',
                        color: on ? '#fff' : 'var(--ink-2)',
                        border: '1px solid ' + (on ? 'var(--accent)' : 'var(--line)'),
                        cursor: 'pointer',
                        transition: 'all 0.18s',
                      }}
                    >{t}</button>
                  );
                })}
              </div>
            </div>
          </div>

          <label className="cta-consent" style={{
            gridColumn: '1 / -1',
            display: 'flex', alignItems: 'flex-start', gap: 10,
            fontSize: 13, color: 'var(--muted)', marginTop: 8,
            cursor: 'pointer',
          }}>
            <input type="checkbox" defaultChecked className="cta-consent-input" />
            <span className="cta-consent-box" aria-hidden="true">
              <svg viewBox="0 0 14 14" width="11" height="11"><path d="M3 7.5 L6 10 L11 4" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </span>
            <span>
              Нажимая кнопку, я даю согласие на{' '}
              <a href="#" style={{ color: 'var(--ink-2)', textDecoration: 'underline' }}>обработку персональных данных</a>{' '}
              и соглашаюсь с условиями{' '}
              <a href="#" style={{ color: 'var(--ink-2)', textDecoration: 'underline' }}>политики конфиденциальности</a>.
            </span>
            <style>{`
              .cta-consent { flex-wrap: nowrap !important; }
              .cta-consent > span:last-of-type { flex: 1; min-width: 0; }
              .cta-consent-input {
                position: absolute; opacity: 0; pointer-events: none;
                width: 0; height: 0;
              }
              .cta-consent-box {
                flex-shrink: 0;
                display: inline-flex; align-items: center; justify-content: center;
                width: 18px; height: 18px; min-width: 18px; min-height: 18px;
                border-radius: 4px;
                background: var(--card);
                border: 1.5px solid var(--line);
                margin-top: 1px;
                transition: all 0.15s;
              }
              .cta-consent-input:checked + .cta-consent-box {
                background: var(--accent);
                border-color: var(--accent);
              }
              .cta-consent-box svg { opacity: 0; transition: opacity 0.15s; }
              .cta-consent-input:checked + .cta-consent-box svg { opacity: 1; }
            `}</style>
          </label>

          <button
            type="submit"
            style={{
              gridColumn: '1 / -1',
              marginTop: 8,
              padding: '26px 32px',
              borderRadius: 999,
              background: 'linear-gradient(90deg, #7768F3, #B997FF)',
              color: '#fff',
              fontSize: 18, fontWeight: 700, fontFamily: 'inherit',
              cursor: 'pointer', border: 'none',
              transition: 'transform 0.15s, filter 0.15s, opacity 0.15s',
              boxShadow: 'inset 2px 2px 9px rgba(255,255,255,0.13), 0 14px 40px -16px rgba(119,104,243,0.6)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            }}
            onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.99)'}
            onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
          >
            Отправить
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 7 L11 7 M7.5 3 L11 7 L7.5 11" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
        </form>
      </div>
    </section>
  );
}

function Input(props) {
  return (
    <input
      {...props}
      style={{
        background: 'var(--bg-soft)',
        border: '1px solid var(--line)',
        borderRadius: 22,
        padding: '20px 24px',
        color: 'var(--ink)',
        fontFamily: 'inherit',
        fontSize: 16,
        outline: 'none',
        width: '100%',
        ...props.style,
      }}
    />
  );
}

window.CTA = CTA;