// Summary panel, mobile bar, contact modal, tweaks UI — no pricing displayed.

function Summary({ selection, onContact }) {
  return (
      <div className="sum">
        <div className="sum-card">
          <div className="sum-head">
            <span className="sum-eyebrow">Ваш бриф</span>
            <div className="sum-title">{selection.siteType.name}</div>
            <div className="sum-pillrow">
              <span className="sum-pill">{selection.design.name}</span>
              <span className="sum-pill">{selection.cms.name}</span>
              <span className="sum-pill">
              {selection.pages} {pageWord(selection.pages)}
            </span>
            </div>
          </div>

          <div className="sum-groups">
            {selection.groups.filter((g) => g.key === 'features' || g.key === 'extras').map((g) =>
                <div className="sum-group" key={g.key}>
                  <div className="sum-group-hd">
                    <span>{g.title}</span>
                    <span className="sum-group-count">
                  {g.items.some((i) => i.muted) ? 0 : g.items.length}
                </span>
                  </div>
                  <ul className="sum-list">
                    {g.items.map((it, i) =>
                        <li key={i} className={it.muted ? 'is-muted' : ''}>
                          {!it.muted && <Glyph name="check" size={12} />}
                          <span>{it.label}</span>
                        </li>
                    )}
                  </ul>
                </div>
            )}

            <div className="sum-group">
              <div className="sum-group-hd">
                <span>Сроки</span>
              </div>
              <ul className="sum-list">
                <li>
                  <Glyph name="clock" size={12} />
                  <span>{selection.urgency.name}</span>
                </li>
              </ul>
            </div>
          </div>

          <div className="sum-divider" />

          <div className="sum-cta-block">
            <div className="sum-cta-text">
              <strong>Готовы получить расчёт?</strong>
              <span>
              Менеджер вернётся со сметой и сроками
              в течение 30&nbsp;минут в рабочее время.
            </span>
            </div>
            <button className="btn btn-primary btn-block" onClick={onContact} style={{ backgroundColor: "rgb(255, 14, 58)" }}>
              Отправить заявку на расчёт
              <Glyph name="arrow" size={16} />
            </button>
          </div>

          <div className="sum-foot">
            <Glyph name="info" size={14} />
            <span>Заявка ни к чему не обязывает. Бриф сохраним и пришлём вам копию.</span>
          </div>
        </div>

        <div className="sum-promo">
          <div className="sum-promo-icon"><Glyph name="spark" size={18} /></div>
          <div>
            <b>Скидка 5% на SEO-продвижение</b>
            <p>при заказе разработки сайта</p>
          </div>
        </div>
      </div>);

}

function MobileBar({ selection, onOpen, onContact }) {
  return (
      <div className="mbar" role="region" aria-label="Сводка по брифу">
        <button className="mbar-info" onClick={onOpen}>
          <div>
            <span className="mbar-eyebrow">Ваш бриф</span>
            <span className="mbar-total">{selection.siteType.name}</span>
          </div>
          <span className="mbar-days">
          <Glyph name="doc" size={12} />
            {selection.itemCount} {selection.itemCount === 1 ? 'пункт' : selection.itemCount >= 2 && selection.itemCount <= 4 ? 'пункта' : 'пунктов'}
        </span>
        </button>
        <button className="btn btn-primary mbar-cta" onClick={onContact}>
          Заявка
          <Glyph name="arrow" size={14} />
        </button>
      </div>);

}

function formatPhone(v) {
  const d = v.replace(/\D/g, '').slice(0, 11);
  if (!d) return '';
  let s = '+7';
  if (d.length > 1) s += ' (' + d.slice(1, 4);
  if (d.length >= 5) s += ') ' + d.slice(4, 7);
  if (d.length >= 8) s += '-' + d.slice(7, 9);
  if (d.length >= 10) s += '-' + d.slice(9, 11);
  return s;
}

function ContactModal({ selection, onClose }) {
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', comment: '', agree: false });
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState(false);

  function submit(e) {
    e.preventDefault();
    if (!form.agree) return;

    setSending(true);

    const body = new FormData();
    body.append('_wpcf7', '1170');
    body.append('_wpcf7_unit_tag', 'wpcf7-f1170-p1-o1');
    body.append('_wpcf7_version', '6.0');
    body.append('_wpcf7_locale', 'ru_RU');
    body.append('your-name', form.name);
    body.append('your-phone', formatPhone(form.phone));
    body.append('your-email', form.email);
    body.append('your-message', form.comment);
    body.append('site-type', selection.siteType.name);
    body.append('design', selection.design.name);
    body.append('cms', selection.cms.name);
    body.append('pages', `${selection.pages} ${pageWord(selection.pages)}`);
    body.append('features', selection.features.map(f => f.name).join(', '));
    body.append('extras', selection.extras.map(e => e.name).join(', '));
    body.append('urgency', selection.urgency.name);

    fetch('/wp-json/contact-form-7/v1/contact-forms/1170/feedback', {
      method: 'POST',
      body
    })
        .then(r => r.json())
        .then(data => {
          if (data.status === 'mail_sent' || data.status === 'sent' || data.status === 'spam') {
            setSubmitted(true);
          } else {
            setSendError(true);
            setSending(false);
          }
        })
        .catch(() => {
          setSendError(true);
          setSending(false);
        });
  }

  function handlePhone(e) {
    const digits = e.target.value.replace(/\D/g, '').slice(0, 11);
    setForm({ ...form, phone: digits });
  }

  return (
      <div className="modal-backdrop" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()}>
          <button className="modal-close" onClick={onClose} aria-label="Закрыть">✕</button>

          {!submitted ?
              <>
                <div className="modal-head">
                  <span className="modal-eyebrow">Заявка на расчёт</span>
                  <h3>Готовим персональную смету</h3>
                  <p>
                    Изучим ваш бриф, при необходимости задаём уточняющие вопросы
                    и пришлём детальную смету и сроки.
                  </p>
                </div>

                <div className="modal-brief">
                  <div className="modal-brief-head">
                    <span>Ваш бриф</span>
                    <small>{selection.itemCount} пунктов</small>
                  </div>
                  <dl className="modal-brief-list">
                    {selection.groups.map((g) =>
                        <div className="modal-brief-row" key={g.key}>
                          <dt>{g.title}</dt>
                          <dd>
                            {g.items.map((it, i) =>
                                    <span key={i} className={`brief-chip ${it.muted ? 'is-muted' : ''}`}>
                          {it.label}
                        </span>
                            )}
                          </dd>
                        </div>
                    )}
                  </dl>
                </div>

                <form className="modal-form" onSubmit={submit}>
                  <div className="modal-form-row">
                    <label className="field">
                      <span>Ваше имя</span>
                      <input
                          type="text" required value={form.name}
                          onChange={(e) => setForm({ ...form, name: e.target.value })}
                          placeholder="Иван" />

                    </label>
                    <label className="field">
                      <span>Телефон</span>
                      <input
                          type="tel" required value={formatPhone(form.phone)}
                          onChange={handlePhone}
                          placeholder="+7 (___) ___-__-__" />

                    </label>
                  </div>
                  <label className="field">
                    <span>Email</span>
                    <input
                        type="email" required value={form.email}
                        onChange={(e) => setForm({ ...form, email: e.target.value })}
                        placeholder="you@company.ru" />

                  </label>
                  <label className="field">
                    <span>Комментарий (необязательно)</span>
                    <textarea
                        rows={3}
                        value={form.comment}
                        onChange={(e) => setForm({ ...form, comment: e.target.value })}
                        placeholder="Расскажите подробнее о задаче, ссылки на референсы и т.п." />

                  </label>
                  <label className="check">
                    <input
                        type="checkbox" checked={form.agree}
                        onChange={(e) => setForm({ ...form, agree: e.target.checked })} />

                    <span>Соглашаюсь с <a href="/privacy-policy/" target="_blank">обработкой своих персональных данных</a></span>
                  </label>
                  <button
                      type="submit"
                      className="btn btn-primary btn-block"
                      disabled={!form.agree || !form.name || !form.phone || !form.email || sending}>

                    {sending ? 'Отправка…' : 'Отправить заявку'}
                    <Glyph name="arrow" size={16} />
                  </button>
                </form>
              </> :

              <div className="modal-success">
                <div className="modal-success-icon"><Glyph name="check" size={28} /></div>
                <h3>Заявка отправлена</h3>
                <p>
                  Менеджер свяжется с вами в течение 30&nbsp;минут в рабочее время
                  и пришлёт расчёт. Копия брифа отправлена на ваш email.
                </p>
                <button className="btn btn-primary btn-block" onClick={onClose}>Готово</button>
              </div>
          }
        </div>
      </div>);

}

// Theme palettes
const THEMES = {
  brand: {
    '--bg': '#f5f7fb',
    '--surface': '#ffffff',
    '--surface-2': '#f0f3f9',
    '--ink': '#0f1d33',
    '--ink-2': '#3a4a66',
    '--muted': '#7a87a0',
    '--border': '#e3e8f1',
    '--border-strong': '#cdd5e3',
    '--primary': '#16a085',
    '--primary-soft': '#dff5ee',
    '--primary-ink': '#0c6e5c',
    '--cta': '#ff7849',
    '--cta-ink': '#ffffff',
    '--shadow': '0 18px 40px -20px rgba(15, 29, 51, 0.18)',
    '--shadow-soft': '0 8px 24px -16px rgba(15, 29, 51, 0.12)'
  },
  midnight: {
    '--bg': '#0f1626',
    '--surface': '#172238',
    '--surface-2': '#1f2c47',
    '--ink': '#eef2fb',
    '--ink-2': '#c0caE0',
    '--muted': '#8a96b1',
    '--border': '#27344f',
    '--border-strong': '#3b4a6b',
    '--primary': '#3ec7a3',
    '--primary-soft': '#1d3a35',
    '--primary-ink': '#aef2dd',
    '--cta': '#ff7849',
    '--cta-ink': '#ffffff',
    '--shadow': '0 18px 40px -20px rgba(0, 0, 0, 0.5)',
    '--shadow-soft': '0 8px 24px -16px rgba(0, 0, 0, 0.4)'
  },
  ocean: {
    '--bg': '#f3f7fb',
    '--surface': '#ffffff',
    '--surface-2': '#eef3f9',
    '--ink': '#0a2540',
    '--ink-2': '#365675',
    '--muted': '#6b85a3',
    '--border': '#dde5ef',
    '--border-strong': '#c3cfdf',
    '--primary': '#1f6feb',
    '--primary-soft': '#e0ecfd',
    '--primary-ink': '#0a4cb0',
    '--cta': '#ff5d3a',
    '--cta-ink': '#ffffff',
    '--shadow': '0 18px 40px -20px rgba(10, 37, 64, 0.18)',
    '--shadow-soft': '0 8px 24px -16px rgba(10, 37, 64, 0.12)'
  }
};

function TweaksUI({ t, setTweak }) {
  return (
      <TweaksPanel>
        <TweakSection label="Тема" />
        <TweakRadio
            label="Палитра"
            value={t.theme}
            options={['brand', 'midnight', 'ocean']}
            onChange={(v) => setTweak('theme', v)} />

        <TweakRadio
            label="Плотность"
            value={t.density}
            options={['compact', 'regular', 'cozy']}
            onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Раскладка" />
        <TweakRadio
            label="Итог справа"
            value={t.layout}
            options={['sticky', 'inline']}
            onChange={(v) => setTweak('layout', v)} />

      </TweaksPanel>);

}

Object.assign(window, { Summary, MobileBar, ContactModal, TweaksUI, THEMES });