/* Маркар landing — final capture form, footer, sticky mobile CTA.
   Side-effect-safe (see Header.jsx). */
(function () {
  const WA = 'https://cdn.simpleicons.org/whatsapp/ffffff';
  const TG = 'https://cdn.simpleicons.org/telegram/ffffff';

  /* ---------- Final form ---------- */
  function FinalForm() {
    const React = window.React;
    const { useState } = React;
    const { Card, Button, Input } = window.DesignSystem_019df8;
    const { Phone, ShieldCheck, Check, ArrowRight } = window.MkIcons;
    const U = window.MkUtils;
    const [name, setName] = useState('');
    const [intent, setIntent] = useState('new');
    const [phone, setPhone] = useState('');
    const [agree, setAgree] = useState(true);
    const [sending, setSending] = useState(false);
    const [done, setDone] = useState(false);
    const phoneOk = U.isValidPhone(phone);
    function submit() {
      if (!phoneOk || !agree || sending) return;
      setSending(true);
      U.submitLead({ source: 'final_form', name: name, phone: phone, intent: intent }).then((r) => {
        setSending(false);
        if (r && r.ok === false) { window.alert('Не удалось отправить заявку. Позвоните нам: +7 (8142) 55-45-05'); return; }
        setDone(true);
      });
    }
    return (
      <section className="mk-section mk-section--subtle" id="lead">
        <div className="mk-container" style={{ textAlign: 'center' }}>
          <p className="mk-overline" style={{ justifyContent: 'center' }}>Заявка</p>
          <h2 className="mk-h2">Оставьте номер — перезвоним за 15 минут</h2>
          <p className="mk-lead" style={{ margin: '14px auto 0' }}>
            Подберём комплектацию, рассчитаем кредит и трейд-ин под ваш бюджет. Без навязывания.
          </p>
          <div className="mk-final__card">
            <Card variant="elevated" padding="lg" style={{ borderRadius: 'var(--radius-2xl)' }}>
              {done ? (
                <div className="mk-quiz__success">
                  <div className="mk-quiz__check"><Check size={32} stroke={3} /></div>
                  <h3 className="mk-quiz__q" style={{ margin: '8px 0' }}>Заявка принята!</h3>
                  <p style={{ color: 'var(--text-muted)', margin: 0 }}>
                    Спасибо, {name || 'друг'}. Перезвоним на {phone} совсем скоро.
                  </p>
                </div>
              ) : (
                <div className="mk-final__form">
                  <div className="mk-intent">
                    <span className="mk-intent__lbl">Что вас интересует?</span>
                    <div className="mk-intent__seg">
                      {[['new', 'Новый авто'], ['used', 'С пробегом'], ['service', 'Сервис']].map(([v, l]) => (
                        <button type="button" key={v}
                          className={'mk-intent__btn' + (intent === v ? ' is-active' : '')}
                          onClick={() => setIntent(v)}>{l}</button>
                      ))}
                    </div>
                  </div>
                  <Input label="Имя" placeholder="Как к вам обращаться" value={name}
                    onChange={(e) => setName(e.target.value)} />
                  <Input label="Телефон" required type="tel" inputMode="tel"
                    placeholder="+7 (___) ___-__-__" icon={<Phone size={18} />} value={phone}
                    onChange={(e) => setPhone(U.formatPhone(e.target.value))} />
                  <label className="mk-consent">
                    <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
                    <span className="mk-consent__box" aria-hidden="true"></span>
                    <span className="mk-consent__txt">Я согласен на <a href="privacy.html" target="_blank" rel="noopener">обработку персональных данных</a></span>
                  </label>
                  <Button variant="primary" size="xl" fullWidth disabled={!phoneOk || !agree || sending}
                    iconRight={sending ? null : <ArrowRight size={20} />} onClick={submit}>
                    {sending ? 'Отправляем…' : 'Получить консультацию'}
                  </Button>
                  <p className="mk-quiz__reassure" style={{ justifyContent: 'center' }}>
                    <ShieldCheck size={16} /> Перезвоним в течение 15 минут в рабочее время
                  </p>
                </div>
              )}
            </Card>
          </div>
        </div>
      </section>
    );
  }
  window.FinalForm = FinalForm;

  /* ---------- Footer ---------- */
  function Footer() {
    const React = window.React;
    const { MapPin, Clock, MessageCircle, Send } = window.MkIcons;
    return (
      <footer className="mk-footer">
        <div className="mk-container">
          <div className="mk-footer__grid">
            <div className="mk-footer__col">
              <a href="#top" className="mk-logo" style={{ marginBottom: 14, display: 'inline-flex' }} aria-label="MARCAR">
                <img src="assets/marcar-logo-white.png" alt="MARCAR" className="mk-logo__img" />
              </a>
              <p style={{ maxWidth: 280, color: 'var(--graphite-400)' }}>
                Автосалон в Петрозаводске. Официальный дилер, авто в наличии, помощь с кредитом и трейд-ин.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 16, alignItems: 'center' }}>
                <a className="mk-msgr mk-msgr--max" href="https://max.ru/+79114094429" target="_blank" rel="noopener" aria-label="MAX"><MessageCircle size={20} /></a>
                <a className="mk-msgr mk-msgr--tg" href="https://t.me/+79114094429" target="_blank" rel="noopener" aria-label="Telegram"><Send size={20} /></a>
                <a className="mk-msgr mk-msgr--vk" href="https://vk.com/marcar10" target="_blank" rel="noopener" aria-label="ВКонтакте">VK</a>
              </div>
            </div>
            <div className="mk-footer__col">
              <h4>Контакты</h4>
              <a href="tel:+78142554505" style={{ fontFamily: 'var(--font-accent)', fontSize: 20 }}>+7 (8142) 55-45-05</a>
              <a href="mailto:soueast.rk@gmail.com">soueast.rk@gmail.com</a>
              <p style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}><MapPin size={17} style={{ flex: 'none', marginTop: 2, color: 'var(--graphite-500)' }} /> г. Петрозаводск, Лесной проспект, 85</p>
              <p style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}><Clock size={17} style={{ flex: 'none', marginTop: 2, color: 'var(--graphite-500)' }} /> Ежедневно, 9:00–21:00</p>
            </div>
            <div className="mk-footer__col">
              <h4>Разделы</h4>
              <a href="#top">Главная</a>
              <a href="#quiz">Подбор авто</a>
              <a href="#models">Модели в наличии</a>
              <a href="https://www.avito.ru/brands/d807a1c1cef1b55d89dc7180e055f114/all/avtomobili?gdlkerfdnwq=101&shopId=9085081" target="_blank" rel="noopener">Объявления на Авито</a>
              <a href="#lead">Оставить заявку</a>
              <a href="privacy.html" target="_blank" rel="noopener">Политика обработки ПДн</a>
            </div>
          </div>
          <div className="mk-footer__bottom">
            <span>ООО «АЦ МАРКАР» · ИНН 9713029697 · КПП 771301001 · ОГРН 1257700360345 · 125599, г. Москва, вн.тер.г. МО Западное Дегунино, км МКАД 78-й, д. 2 к. 1, помещ. 5/1</span>
            <span>© 2026 «Маркар». Не оферта. Уточняйте наличие и условия у менеджера.</span>
          </div>
        </div>
      </footer>
    );
  }
  window.Footer = Footer;

  /* ---------- Sticky mobile CTA ---------- */
  function StickyCta({ onCta }) {
    const React = window.React;
    const { Button } = window.DesignSystem_019df8;
    const { Phone } = window.MkIcons;
    return (
      <div className="mk-stickycta">
        <a href="tel:+78142554505" className="mk-stickycta__call" aria-label="Позвонить">
          <Button variant="light" size="lg" aria-label="Позвонить"><Phone size={20} /></Button>
        </a>
        <Button variant="primary" size="lg" fullWidth onClick={onCta}>Подобрать авто</Button>
      </div>
    );
  }
  window.StickyCta = StickyCta;

  /* ---------- Плавающие кнопки мессенджеров (MAX + Telegram) ---------- */
  function FloatContacts() {
    const React = window.React;
    const { MessageCircle, Send } = window.MkIcons;
    return (
      <div className="mk-fab" aria-label="Связаться в мессенджере">
        <a className="mk-fab__btn mk-fab__btn--max" href="https://max.ru/+79114094429" target="_blank" rel="noopener" aria-label="Написать в MAX">
          <MessageCircle size={24} /><span className="mk-fab__tip">MAX</span>
        </a>
        <a className="mk-fab__btn mk-fab__btn--tg" href="https://t.me/+79114094429" target="_blank" rel="noopener" aria-label="Написать в Telegram">
          <Send size={24} /><span className="mk-fab__tip">Telegram</span>
        </a>
      </div>
    );
  }
  window.FloatContacts = FloatContacts;

  /* ---------- Cookie-баннер ---------- */
  function CookieBanner() {
    const React = window.React;
    const { useState } = React;
    const KEY = 'mk_cookie_ok';
    const [hidden, setHidden] = useState(function () { try { return !!window.localStorage.getItem(KEY); } catch (e) { return false; } });
    if (hidden) return null;
    function accept() { try { window.localStorage.setItem(KEY, '1'); } catch (e) {} setHidden(true); }
    return (
      <div className="mk-cookie" role="dialog" aria-label="Использование cookie">
        <p className="mk-cookie__txt">
          Мы используем cookie и Яндекс.Метрику для работы сайта и аналитики. Продолжая пользоваться
          сайтом, вы соглашаетесь с <a href="privacy.html" target="_blank" rel="noopener">политикой обработки данных</a>.
        </p>
        <button type="button" className="mk-cookie__btn" onClick={accept}>Принять</button>
      </div>
    );
  }
  window.CookieBanner = CookieBanner;
})();