// CTA — black ink-block with red accent form, final push

function CTA() {
  const [form, setForm] = React.useState({ name: '', biz: '', phone: '', city: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.phone || !form.biz) return;
    setSubmitted(true);
  };

  return (
    <section id="cta" className="sec ink-block cta-sec">
      <div className="cta-bg" aria-hidden="true" />
      <div className="wrap">
        <div className="cta-card reveal">
          <div className="cta-grid">
            <div className="cta-left">
              <span className="eyebrow">Бесплатный аудит</span>
              <h2 style={{ marginTop: 18, marginBottom: 20, color: 'var(--fg)' }}>
                Узнайте, где<br />ваша карточка<br /><span className="em-red">сейчас.</span>
              </h2>
              <p className="lead" style={{ marginBottom: 28, color: 'var(--fg-2)' }}>
                За 2 рабочих дня соберём отчёт: текущие позиции по 50 запросам,
                сравнение с тремя ближайшими конкурентами и план действий на 90 дней.
                Без обязательств и автоматических подписок.
              </p>

              <ul className="cta-list">
                <li><span className="cl-tick" /> Разбор, где сейчас конкуренты и что вы делаете не так</li>
                <li><span className="cl-tick" /> Конкретные советы, как вести профиль и привлекать клиентов</li>
                <li><span className="cl-tick" /> Прогноз звонков и маршрутов на 3 месяца</li>
                <li><span className="cl-tick" /> Часовой созвон с записью — пришлём вам после</li>
              </ul>
            </div>

            <div className="cta-right">
              {!submitted ?
              <form className="cta-form" onSubmit={onSubmit}>
                  <div className="cf-head">
                    <div className="cf-title">Получить аудит</div>
                    <div className="cf-sub mono">≈ 2 минуты</div>
                  </div>
                  <div className="cf-grid">
                    <label className="cf-field">
                      <span>Имя</span>
                      <input value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} placeholder="Алексей" autoComplete="name" />
                    </label>
                    <label className="cf-field">
                      <span>Город</span>
                      <input value={form.city} onChange={(e) => setForm((f) => ({ ...f, city: e.target.value }))} placeholder="Москва" autoComplete="address-level2" />
                    </label>
                    <label className="cf-field full">
                      <span>Название компании *</span>
                      <input required value={form.biz} onChange={(e) => setForm((f) => ({ ...f, biz: e.target.value }))} placeholder="Кофейня «Зерно»" />
                    </label>
                    <label className="cf-field full">
                      <span>Телефон или Telegram *</span>
                      <input required value={form.phone} onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))} placeholder="+7 (___) ___-__-__" autoComplete="tel" />
                    </label>
                  </div>
                  <button type="submit" className="btn primary cf-submit">
                    Получить аудит бесплатно <Arrow />
                  </button>
                  <div className="cf-fine">
                    Отправляя заявку, вы соглашаетесь с <a href="#">политикой обработки данных</a>.
                    Не передаём контакты третьим лицам.
                  </div>
                </form> :

              <div className="cta-thanks">
                  <div className="ct-check">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                      <path d="m7 16 6 6 12-12" stroke="var(--accent)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                  <h3 style={{ margin: '18px 0 10px', fontSize: 24, color: 'var(--fg)' }}>Заявка получена.</h3>
                  <p style={{ maxWidth: '40ch', color: 'var(--fg-2)' }}>Свяжемся с вами в течение часа в рабочее время. А пока — посмотрите наши кейсы.</p>
                  <button onClick={() => {setSubmitted(false);setForm({ name: '', biz: '', phone: '', city: '' });}}
                className="btn ghost" style={{ marginTop: 24 }}>Отправить ещё одну</button>
                </div>
              }
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .cta-sec{padding:80px 0 96px;background:var(--bg);position:relative;overflow:hidden}
        .cta-bg{
          position:absolute;inset:0;pointer-events:none;
          background:
            radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 50%),
            radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 50%);
        }
        .cta-card{
          position:relative;
          background:var(--surface);
          border:1px solid var(--line-2);border-radius:28px;
          padding:48px;
        }
        @media (max-width:780px){.cta-card{padding:32px 24px}}
        .cta-grid{display:grid;gap:48px;align-items:start}
        @media (min-width:880px){.cta-grid{grid-template-columns:1fr 1fr;gap:64px}}
        .cta-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
        .cta-list li{display:flex;align-items:center;gap:12px;color:var(--fg);font-size:15px}
        .cl-tick{display:inline-block;width:16px;height:2px;background:var(--accent);flex-shrink:0;border-radius:1px}

        .cta-form{
          background:var(--surface-2);border:1px solid var(--line);border-radius:18px;padding:28px;
        }
        .cf-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
        .cf-title{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--fg)}
        .cf-sub{font-size:11px;color:var(--mute);letter-spacing:.06em}
        .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
        .cf-field{display:flex;flex-direction:column;gap:6px}
        .cf-field.full{grid-column:span 2}
        .cf-field>span{font-size:11px;color:var(--mute);font-family:var(--font-mono);letter-spacing:.06em;font-weight:500}
        .cf-field input{
          background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
          padding:14px 16px;color:var(--fg);font-size:15px;font-family:inherit;
          outline:none;transition:border-color .15s ease, box-shadow .15s ease;
        }
        .cf-field input::placeholder{color:var(--dim)}
        .cf-field input:focus{
          border-color:var(--accent);
          box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
        }
        .cf-submit{justify-content:space-between;width:100%;margin-top:20px;padding:16px 22px}
        .cf-fine{margin-top:16px;font-size:12px;color:var(--mute);line-height:1.5}
        .cf-fine a{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}

        .cta-thanks{
          background:var(--surface-2);border:1px solid var(--line);border-radius:18px;padding:48px 32px;
          text-align:center;display:flex;flex-direction:column;align-items:center;
        }
        .ct-check{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
          background:color-mix(in srgb, var(--accent) 14%, transparent);
          border:1px solid color-mix(in srgb, var(--accent) 40%, transparent)}
      `}</style>
    </section>);

}

window.CTA = CTA;