// FAQ accordion + form + tweaks panel + modal
const { useState: useStateF, useEffect: useEffectF, useRef: useRefF } = React;

const FAQ_ITEMS = [
  {
    q: "Заменит ли Axiomic моих менеджеров?",
    a: "Нет. Axiomic закрывает первую линию: мгновенно отвечает, квалифицирует лид, отсекает нецелевых, передаёт в Битрикс24 с историей диалога. Менеджеры получают готового к разговору клиента и вместо 80 заявок в день обрабатывают 20 горячих. Живого продавца AI не заменит — он его разгружает.",
  },
  {
    q: "Сколько это стоит?",
    a: "20 000 ₽ в месяц. Одна подписка, без доплат за количество диалогов и каналов. Включено: все мессенджеры (Telegram, ВК, Авито, MAX), интеграция с Битрикс24, дашборд с метриками, база знаний без лимитов. Первая неделя — бесплатно, в продакшене, без реквизитов карты. Для сравнения: менеджер с окладом, KPI и налогами выходит в 90–130 тыс ₽/мес и не работает ночью.",
  },
  {
    q: "Как быстро можно запустить?",
    a: "7 рабочих дней от договора до первого диалога в продакшене. День 1–2: подключаем мессенджеры и Битрикс24. День 3–4: грузим прайсы, каталоги, договоры в базу знаний. День 5–6: настраиваем воронку и сценарии. День 7: запуск в боевом режиме. Без кода, без ваших разработчиков.",
  },
  {
    q: "Поймёт ли клиент, что общается с ботом?",
    a: "Axiomic не притворяется человеком — это против этики и закона. Но тон, темп ответов и стиль неотличимы от хорошего менеджера: печатает с задержкой, уточняет, не отвечает шаблонами. По данным пилотных клиентов, 72% клиентов доходят до звонка, не задав вопроса «это человек?».",
  },
  {
    q: "Как он учится на моих документах?",
    a: "Загружаете прайсы, каталоги, договоры, регламенты в любых форматах — PDF, Excel, Word, Google Docs. Мы разбираем их на смысловые фрагменты и индексируем (RAG). Когда клиент спрашивает про цену — AI находит точную строку в вашем прайсе и цитирует её. Не придумывает, не округляет.",
  },
  {
    q: "Насколько безопасны данные клиентов?",
    a: "Данные хранятся на серверах в РФ, шифрование TLS + AES-256. Мы включены в реестр операторов ПДн Роскомнадзора (152-ФЗ). Диалоги не используются для обучения моделей. По запросу — соглашение о неразглашении и аудит безопасности перед подписанием.",
  },
];

const H1_VARIANTS = [
  {
    // A: speed / loss
    lines: [
      <>Пока вы <span className="strike">спите</span>,</>,
      <>клиенты <em>пишут</em></>,
    ],
    sub: "AI-менеджер Axiomic отвечает на заявки за 3 секунды — в Telegram, ВК, Авито и MAX. Неделя бесплатно, дальше — 20 000 ₽/мес.",
  },
  {
    // B: result / outcome
    lines: [
      <>Отвечайте на заявки</>,
      <>за <em>3 секунды</em> — 24/7</>,
    ],
    sub: "AI-менеджер для строительных компаний. Ведёт клиента по воронке, квалифицирует, создаёт сделку в Битрикс24. Неделя бесплатно, дальше — 20 000 ₽/мес.",
  },
  {
    // C: technical / engineered
    lines: [
      <>AI-менеджер</>,
      <>для <em>стройки</em></>,
    ],
    sub: "Специализированный AI, заточенный под строительные компании. Цитирует ваши прайсы, знает терминологию, работает в мессенджерах.",
  },
];

function FAQ() {
  return (
    <div className="faq">
      {FAQ_ITEMS.map((item, i) => (
        <details key={i} className="faq__item" name="faq">
          <summary>
            <span className="faq__q">
              <span className="mono faint" style={{ marginRight: 14, fontSize: 12 }}>
                0{i + 1}
              </span>
              {item.q}
            </span>
            <span className="faq__plus" aria-hidden="true"></span>
          </summary>
          <div className="faq__a">{item.a}</div>
        </details>
      ))}
    </div>
  );
}

function DemoForm({ inline = false, onSuccess, ctaSource }) {
  const [submitted, setSubmitted] = useStateF(false);
  const [submitting, setSubmitting] = useStateF(false);
  const [error, setError] = useStateF(null);
  const [state, setState] = useStateF({ name: "", contact: "", niche: "", channel: "phone" });

  const CHANNELS = [
    { id: "phone", label: "Телефон", placeholder: "+7 900 000-00-00" },
    { id: "telegram", label: "Telegram", placeholder: "@username" },
    { id: "whatsapp", label: "WhatsApp", placeholder: "+7 900 000-00-00" },
    { id: "max", label: "MAX", placeholder: "@username или номер" },
    { id: "email", label: "Email", placeholder: "you@company.ru" },
  ];
  const current = CHANNELS.find((c) => c.id === state.channel) || CHANNELS[0];

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setError(null);
    try {
      const contactLine = state.contact.trim()
        ? `${current.label}: ${state.contact.trim()}`
        : "";
      const resp = await fetch("/api/public-lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: state.name.trim(),
          contact: contactLine,
          niche: state.niche.trim(),
          cta_source: ctaSource || (inline ? "demo-inline" : "demo-modal"),
        }),
      });
      let body = {};
      try {
        body = await resp.json();
      } catch (_) {
        body = {};
      }
      if (!resp.ok || body.ok === false) {
        setError(body.error || `Ошибка отправки (HTTP ${resp.status}). Попробуйте позже.`);
        setSubmitting(false);
        return;
      }
      setSubmitted(true);
      if (onSuccess) setTimeout(onSuccess, 2400);
    } catch (err) {
      setError("Не удалось отправить заявку. Проверьте соединение и попробуйте ещё раз.");
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <div className="form">
        <div className="form__success">
          <b>Заявка принята.</b> Свяжемся в течение часа в рабочее время. Спасибо, {state.name.split(" ")[0] || "👋"}.
        </div>
      </div>
    );
  }

  return (
    <form className="form" onSubmit={handleSubmit}>
      <div className="form__field">
        <label className="form__label" htmlFor={`${inline ? "i" : "m"}-name`}>01 · Имя</label>
        <input
          id={`${inline ? "i" : "m"}-name`}
          className="form__input"
          type="text"
          required
          placeholder="Иван Петров"
          value={state.name}
          onChange={(e) => setState({ ...state, name: e.target.value })}
        />
      </div>
      <div className="form__field">
        <label className="form__label">02 · Как с вами связаться</label>
        <div className="form__chips" role="radiogroup" aria-label="Канал связи">
          {CHANNELS.map((c) => (
            <button
              key={c.id}
              type="button"
              role="radio"
              aria-checked={state.channel === c.id}
              className={`form__chip ${state.channel === c.id ? "active" : ""}`}
              onClick={() => setState({ ...state, channel: c.id, contact: "" })}
            >
              {c.label}
            </button>
          ))}
        </div>
        <input
          id={`${inline ? "i" : "m"}-contact`}
          className="form__input"
          style={{ marginTop: 10 }}
          type="text"
          required
          placeholder={current.placeholder}
          value={state.contact}
          onChange={(e) => setState({ ...state, contact: e.target.value })}
        />
      </div>
      <div className="form__field form__field--full">
        <label className="form__label" htmlFor={`${inline ? "i" : "m"}-niche`}>03 · Ниша</label>
        <select
          id={`${inline ? "i" : "m"}-niche`}
          className="form__select"
          required
          value={state.niche}
          onChange={(e) => setState({ ...state, niche: e.target.value })}
        >
          <option value="">Выберите направление</option>
          <option value="Загородное строительство">Загородное строительство (дома, коттеджи)</option>
          <option value="Ремонт и отделка">Ремонт и отделка</option>
          <option value="Новостройки">Продажа новостроек</option>
          <option value="Стройматериалы">Стройматериалы</option>
          <option value="Другое">Другое</option>
        </select>
      </div>
      <div className="form__footer">
        <div className="form__note">
          {error ? (
            <span style={{ color: "#e0413a" }}>{error}</span>
          ) : (
            "Свяжемся в течение часа в рабочее время — там, где вам удобно."
          )}
        </div>
        <button type="submit" className="btn btn--primary btn--lg" disabled={submitting}>
          {submitting ? "Отправляем…" : "Записаться на демо"}
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </button>
      </div>
    </form>
  );
}

function Tweaks({ open, onClose, theme, setTheme, accent, setAccent, h1, setH1, grid, setGrid, font, setFont }) {
  return (
    <div className={`tweaks ${open ? "active" : ""}`}>
      <div className="tweaks__head">
        <span className="tweaks__title">Tweaks</span>
        <button onClick={onClose} style={{ color: "var(--text-dim)", fontSize: 18, lineHeight: 1 }} aria-label="Закрыть">×</button>
      </div>
      <div className="tweaks__row">
        <label>Тема</label>
        <div className="tweaks__toggle">
          <button className={theme === "dark" ? "active" : ""} onClick={() => setTheme("dark")}>dark</button>
          <button className={theme === "light" ? "active" : ""} onClick={() => setTheme("light")}>light</button>
        </div>
      </div>
      <div className="tweaks__row">
        <label>Акцент</label>
        <div className="tweaks__toggle">
          <button className={accent === "green" ? "active" : ""} onClick={() => setAccent("green")}>signal</button>
          <button className={accent === "blue" ? "active" : ""} onClick={() => setAccent("blue")}>blue</button>
          <button className={accent === "ochre" ? "active" : ""} onClick={() => setAccent("ochre")}>ochre</button>
        </div>
      </div>
      <div className="tweaks__row">
        <label>H1 вариант</label>
        <div className="tweaks__toggle">
          <button className={h1 === 0 ? "active" : ""} onClick={() => setH1(0)}>A</button>
          <button className={h1 === 1 ? "active" : ""} onClick={() => setH1(1)}>B</button>
          <button className={h1 === 2 ? "active" : ""} onClick={() => setH1(2)}>C</button>
        </div>
      </div>
      <div className="tweaks__row">
        <label>Чертёжная сетка</label>
        <div className="tweaks__toggle">
          <button className={grid === "on" ? "active" : ""} onClick={() => setGrid("on")}>on</button>
          <button className={grid === "off" ? "active" : ""} onClick={() => setGrid("off")}>off</button>
        </div>
      </div>
      <div className="tweaks__row">
        <label>Шрифт</label>
        <div className="tweaks__toggle">
          <button className={font === "onest" ? "active" : ""} onClick={() => setFont("onest")}>Onest</button>
          <button className={font === "inter" ? "active" : ""} onClick={() => setFont("inter")}>Inter</button>
          <button className={font === "golos" ? "active" : ""} onClick={() => setFont("golos")}>Golos</button>
        </div>
      </div>
    </div>
  );
}

function Modal({ open, onClose }) {
  useEffectF(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <div className={`modal-backdrop ${open ? "active" : ""}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Закрыть">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <path d="M18 6L6 18M6 6l12 12" />
          </svg>
        </button>
        <h3>Записаться на демо</h3>
        <p>Покажем продукт на вашем кейсе. 30 минут, без презентаций.</p>
        <DemoForm onSuccess={onClose} ctaSource="demo-modal" />
      </div>
    </div>
  );
}

Object.assign(window, { FAQ, DemoForm, Tweaks, Modal, H1_VARIANTS });