/* Hi-fi blocks part 3:
   Integrations → Solo/Integrated → UseCases → Pricing → Trust → FAQ → Final CTA → Footer */

/* ─────────────── INTEGRATIONS ─────────────── */
const HfIntegrations = () => (
  <div className="hf-section">
    <div className="hf-eyebrow-row"><span className="eyebrow">интеграции</span></div>
    <h2>
      Уже в&nbsp;Amo / Bitrix /<br/>
      GetCourse?<br/>
      <span className="display-italic h-accent">Не трогаем.</span>
    </h2>
    <p className="body" style={{ marginTop: 12 }}>
      TelegaFirst встаёт <strong style={{ color: "var(--hf-ink)" }}>сверху</strong> как канал привлечения и общения.
      Лиды, заказы и контакты улетают в твою текущую систему. Команда работает как работала.
    </p>

    {/* diagram */}
    <div className="hf-card" style={{ marginTop: 20, padding: 18 }}>
      <svg viewBox="0 0 320 200" width="100%">
        {/* TG node */}
        <rect x="20" y="80" width="110" height="42" rx="10" fill="#0f1419"/>
        <text x="75" y="100" fontFamily="var(--hf-font-display)" fontSize="13" fontWeight="800" fill="white" textAnchor="middle">TelegaFirst</text>
        <text x="75" y="115" fontFamily="var(--hf-font-mono)" fontSize="9" fill="rgba(255,255,255,0.5)" textAnchor="middle">фронт-офис</text>

        {/* arrows */}
        <g stroke="#2aabee" strokeWidth="2" fill="none" strokeLinecap="round">
          <path d="M135 90 Q 165 90, 200 30"/>
          <path d="M135 101 L 200 101"/>
          <path d="M135 112 Q 165 112, 200 172"/>
        </g>
        <g fill="#2aabee">
          <circle cx="200" cy="30" r="3"/>
          <circle cx="200" cy="101" r="3"/>
          <circle cx="200" cy="172" r="3"/>
        </g>

        {/* target systems */}
        {[
          ["AmoCRM",          15,  "#3B5BFC"],
          ["Bitrix24",        87,  "#2FC6F6"],
          ["GetCourse · LMS", 158, "#E63312"]
        ].map(([n, y, c], i) => (
          <g key={i}>
            <rect x="205" y={y} width="110" height="28" rx="8" fill="white" stroke="rgba(15,20,25,0.14)" strokeWidth="1"/>
            <rect x={211} y={y + 7} width="14" height="14" rx="3" fill={c}/>
            <text x="219" y={y + 17.5} fontFamily="var(--hf-font-display)" fontSize="9" fontWeight="800" fill="white" textAnchor="middle">
              {String(n).charAt(0)}
            </text>
            <text x="231" y={y + 18} fontFamily="var(--hf-font-body)" fontSize="12" fontWeight="600" fill="#0f1419">{n}</text>
          </g>
        ))}
      </svg>
    </div>

    <div className="hf-card bare" style={{ marginTop: 14, padding: 14 }}>
      <h3>+ Webhooks · REST API · Zapier · Make</h3>
      <p className="body" style={{ marginTop: 6, fontSize: 13.5 }}>
        Любишь склеивать сам — пожалуйста. Любая внешняя система получает события TelegaFirst в своём формате.
      </p>
    </div>
  </div>
);

/* ─────────────── SOLO / INTEGRATED ─────────────── */
const HfSoloOrIntegrated = () => (
  <div className="hf-section alt">
    <div className="hf-eyebrow-row"><span className="eyebrow">как тебе удобно</span></div>
    <h2>Соло или<br/>с&nbsp;интеграцией.</h2>

    <div className="hf-stack" style={{ marginTop: 20 }}>
      <div className="hf-card" style={{ padding: 18 }}>
        <span className="hf-chip tg dot">сценарий A</span>
        <h3 style={{ marginTop: 12, fontSize: 19 }}>Соло</h3>
        <p className="body" style={{ marginTop: 6, fontSize: 13.5 }}>
          С нуля. TelegaFirst — твоя минимальная CRM. Запуск за вечер. Это единственный инструмент, который тебе нужен.
        </p>
      </div>
      <div className="hf-card" style={{ padding: 18, border: "1px dashed var(--hf-line-2)", background: "transparent" }}>
        <span className="hf-chip" style={{ background: "var(--hf-surface)", borderColor: "var(--hf-line-2)" }}>сценарий B</span>
        <h3 style={{ marginTop: 12, fontSize: 19 }}>С&nbsp;интеграцией</h3>
        <p className="body" style={{ marginTop: 6, fontSize: 13.5 }}>
          Поверх Amo / Bitrix / GetCourse / любая LMS. Ничего не ломаем. Команда работает как работала.
        </p>
      </div>
      <div className="hf-card dark" style={{ padding: 18 }}>
        <span className="hf-chip" style={{ background: "rgba(255,255,255,0.08)", color: "rgba(255,255,255,0.8)", borderColor: "rgba(255,255,255,0.18)" }}>сценарий C · для vibe-coder'ов</span>
        <h3 style={{ marginTop: 12, fontSize: 19, color: "white" }}>Сам разбираешься в AI?</h3>
        <p className="body" style={{ marginTop: 6, fontSize: 13.5, color: "rgba(255,255,255,0.75)" }}>
          Дай нашей доке свою LLM на разбор — посмотри как мы устроены. Документация открытая, секретов нет.
        </p>
      </div>
    </div>
  </div>
);

/* ─────────────── USE CASES ─────────────── */
const UseCase = ({ icon, title, desc, gradient }) => (
  <div className="hf-card" style={{ padding: 16, display: "flex", gap: 14, alignItems: "flex-start" }}>
    <div className="hf-icobox" style={{ background: gradient, color: "white", border: "none", boxShadow: "var(--hf-shadow-sm)" }}>{icon}</div>
    <div>
      <h3>{title}</h3>
      <p className="body" style={{ marginTop: 4, fontSize: 13.5 }} dangerouslySetInnerHTML={{ __html: desc }}/>
    </div>
  </div>
);

const HfUseCases = () => (
  <div className="hf-section">
    <div className="hf-eyebrow-row"><span className="eyebrow">кому подойдёт</span></div>
    <h2>Это работает<br/>для:</h2>

    <div className="hf-stack" style={{ marginTop: 20 }}>
      <UseCase icon="🏢"
        gradient="linear-gradient(135deg, #0f1419, #2c3e50)"
        title="Реальный бизнес"
        desc="Поток лидов, автоматизация обработки, прозрачный контроль команды и&nbsp;операторов." />
      <UseCase icon="✨"
        gradient="linear-gradient(135deg, #d63384, #6c5ce7)"
        title="Личный бренд"
        desc="Ты — продукт. Продаёшь консультации, подписки, доступы — AI ведёт клиента всю воронку от твоего имени." />
      <UseCase icon="💅"
        gradient="linear-gradient(135deg, #ff6b6b, #ee5a52)"
        title="Услуги и салоны"
        desc="Запись, напоминания, предоплата за&nbsp;услугу, повторные касания после визита." />
      <UseCase icon="📦"
        gradient="linear-gradient(135deg, #6c5ce7, #a29bfe)"
        title="Цифровые продукты"
        desc="Купил → мгновенно получил. Файлы, лицензии, ссылки на&nbsp;доступ." />
      <UseCase icon="🛒"
        gradient="linear-gradient(135deg, #16a085, #1abc9c)"
        title="Мини-магазин"
        desc="Каталог из&nbsp;5–100 позиций. Корзина, оплата, доставка/самовывоз — в&nbsp;одном диалоге." />
      <UseCase icon="🎓"
        gradient="linear-gradient(135deg, #2aabee, #1f8fc9)"
        title="Онлайн-школа"
        desc="Каталог программ, оплата, авто-выдача доступа в&nbsp;LMS, удержание подписчиков." />
    </div>
  </div>
);

/* ─────────────── PRICING ─────────────── */
const HfPricing = () => (
  <div className="hf-section alt">
    <div className="hf-eyebrow-row"><span className="eyebrow">тарифы</span></div>
    <h2>Прозрачные<br/>тарифы.</h2>

    <div className="hf-stack" style={{ marginTop: 22 }}>
      <div className="hf-tier">
        <div style={{ flex: 1 }}>
          <div className="hf-tier-name">Starter</div>
          <div className="hf-tier-desc">бот + каталог + платежи · без AI</div>
        </div>
        <div>
          <span className="hf-tier-price">4&nbsp;990</span><span className="hf-tier-cur"> ₽</span>
          <div style={{ textAlign: "right" }}><span className="meta">/мес</span></div>
        </div>
      </div>

      <div className="hf-tier popular">
        <span className="hf-tier-pop">★ POPULAR</span>
        <div style={{ flex: 1 }}>
          <div className="hf-tier-name" style={{ color: "var(--hf-tg-deep)" }}>AI Manager</div>
          <div className="hf-tier-desc">+ AI квалификатор + продавец · 2M токенов/мес</div>
        </div>
        <div>
          <span className="hf-tier-price">9&nbsp;990</span><span className="hf-tier-cur"> ₽</span>
          <div style={{ textAlign: "right" }}><span className="meta">/мес</span></div>
        </div>
      </div>

      <div className="hf-tier">
        <div style={{ flex: 1 }}>
          <div className="hf-tier-name">AI Coach</div>
          <div className="hf-tier-desc">+ удержание подписчиков · 4M токенов/мес</div>
        </div>
        <div>
          <span className="hf-tier-price">14&nbsp;990</span><span className="hf-tier-cur"> ₽</span>
          <div style={{ textAlign: "right" }}><span className="meta">/мес</span></div>
        </div>
      </div>

      <div className="hf-tier" style={{ borderStyle: "dashed", background: "transparent" }}>
        <div style={{ flex: 1 }}>
          <div className="hf-tier-name">Enterprise</div>
          <div className="hf-tier-desc">1000+ юзеров / 20M+ токенов · dedicated infra</div>
        </div>
        <div>
          <span className="hf-chip">по запросу</span>
        </div>
      </div>
    </div>

    <p className="body" style={{ textAlign: "center", marginTop: 18, fontWeight: 600, color: "var(--hf-ink)" }}>
      7 дней триала. Без карты. Отмена в один клик.
    </p>
    <p className="meta" style={{ textAlign: "center", marginTop: 4, fontStyle: "italic" }}>
      нужно больше токенов — 2&nbsp;490 ₽ за&nbsp;1 миллион
    </p>
  </div>
);

/* ─────────────── TRUST ─────────────── */
const HfTrust = () => (
  <div className="hf-section">
    <div className="hf-eyebrow-row"><span className="eyebrow">безопасность</span></div>
    <h2>Спокойствие<br/>за&nbsp;твои данные.</h2>

    <div className="hf-stack" style={{ marginTop: 20 }}>
      <div className="hf-card" style={{ display: "flex", gap: 14, alignItems: "center", padding: 16 }}>
        <div className="hf-icobox" style={{ background: "var(--hf-surface-2)", color: "var(--hf-ink)" }}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <rect x="3" y="8" width="14" height="10" rx="2" stroke="currentColor" strokeWidth="1.5"/>
            <path d="M6 8V6a4 4 0 0 1 8 0v2" stroke="currentColor" strokeWidth="1.5"/>
          </svg>
        </div>
        <div>
          <h3>152-ФЗ выполняется</h3>
          <p className="body" style={{ marginTop: 2, fontSize: 13 }}>обработка персональных данных по закону</p>
        </div>
      </div>
      <div className="hf-card" style={{ display: "flex", gap: 14, alignItems: "center", padding: 16 }}>
        <div className="hf-icobox" style={{ background: "var(--hf-surface-2)", color: "var(--hf-ink)" }}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <rect x="2" y="5" width="16" height="11" rx="2" stroke="currentColor" strokeWidth="1.5"/>
            <circle cx="6" cy="10.5" r="1" fill="currentColor"/>
            <path d="M10 10h5M10 13h3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </div>
        <div>
          <h3>Серверы и&nbsp;данные — в&nbsp;РФ</h3>
          <p className="body" style={{ marginTop: 2, fontSize: 13 }}>хранение перс. данных в&nbsp;российском дата-центре</p>
        </div>
      </div>
    </div>

    {/* Max resilience */}
    <div className="hf-card tg-soft" style={{ marginTop: 18, padding: 18 }}>
      <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
        <div className="hf-icobox" style={{ background: "white", color: "var(--hf-tg-deep)" }}>🛟</div>
        <div>
          <h3 style={{ color: "var(--hf-tg-deep)" }}>А&nbsp;если Telegram заблокируют?</h3>
          <p className="body" style={{ marginTop: 6, fontSize: 13.5 }}>
            Платформа работает и&nbsp;в&nbsp;Max. Конечные клиенты получают полный функционал, операторы остаются в&nbsp;TG. Бизнес продолжает работать.
          </p>
        </div>
      </div>
    </div>
  </div>
);

/* ─────────────── FAQ ─────────────── */
const FaqItem = ({ q, a, open }) => (
  <div className="hf-card" style={{ padding: 16 }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 14 }}>
      <span style={{ fontWeight: 600, fontSize: 14.5, lineHeight: 1.35, flex: 1 }} dangerouslySetInnerHTML={{ __html: q }}/>
      <div style={{ width: 28, height: 28, borderRadius: 999, background: open ? "var(--hf-ink)" : "var(--hf-surface-2)",
        color: open ? "white" : "var(--hf-ink-2)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <span style={{ fontSize: 18, lineHeight: 1, transform: open ? "rotate(45deg)" : "none" }}>+</span>
      </div>
    </div>
    {open && a && (
      <p className="body" style={{ marginTop: 12, fontSize: 13.5 }} dangerouslySetInnerHTML={{ __html: a }}/>
    )}
  </div>
);

const HfFAQ = () => (
  <div className="hf-section alt">
    <div className="hf-eyebrow-row"><span className="eyebrow">FAQ</span></div>
    <h2>Что спрашивают.</h2>

    <div className="hf-stack tight" style={{ marginTop: 20 }}>
      <FaqItem open
        q="А&nbsp;AI не&nbsp;нагрубит и&nbsp;не&nbsp;ошибётся?"
        a="Ты видишь каждый диалог в&nbsp;реальном времени. Кнопка «перехватить» — один тап. Tone-of-voice настраивается под твой бренд." />
      <FaqItem q="Уже работаю в&nbsp;Amo / Bitrix — мешать будет?"/>
      <FaqItem q="Я vibe-coder, могу собрать сам — зачем платить?"/>
      <FaqItem q="Что с&nbsp;152-ФЗ и&nbsp;данными клиентов?"/>
      <FaqItem q="А&nbsp;если Telegram заблокируют?"/>
      <FaqItem q="Сколько займёт реальный запуск?"/>
      <FaqItem q="Команды сейчас нет — справлюсь один?"/>
      <FaqItem q="Можно несколько ботов на&nbsp;одном тарифе?"/>
    </div>
  </div>
);

/* ─────────────── FINAL CTA ─────────────── */
const HfFinalCTA = () => (
  <div className="hf-section dark" style={{ textAlign: "center", padding: "44px 22px" }}>
    <div className="eyebrow" style={{ color: "var(--hf-tg)" }}>давай</div>
    <h1 style={{ color: "white", marginTop: 14, fontSize: 32 }}>
      ~15 минут —<br/>
      и&nbsp;у&nbsp;тебя свой<br/>
      <span className="display-italic" style={{ color: "var(--hf-tg)" }}>AI-админ</span>.
    </h1>
    <p className="lead" style={{ marginTop: 14, color: "rgba(255,255,255,0.75)" }}>
      Хочешь попробовать?
    </p>

    <div style={{ marginTop: 24, textAlign: "left" }}>
      <button className="hf-btn-hero primary">
        <span className="hf-btn-hero-label">
          <span>Попробовать бесплатно</span>
          <span className="hf-btn-hero-sub">7 дней · без карты</span>
        </span>
        <span className="hf-btn-hero-arrow">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <path d="M3 9h12M10 4l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </button>
    </div>

    <p className="meta" style={{ marginTop: 14, color: "rgba(255,255,255,0.55)" }}>
      отмена в один клик
    </p>
  </div>
);

/* ─────────────── FOOTER ─────────────── */
const HfFooter = () => (
  <div className="hf-section" style={{ background: "var(--hf-surface-3)", padding: "32px 22px" }}>
    <div className="hf-logo" style={{ marginBottom: 18 }}>
      <span className="hf-logo-mark">T</span>
      <span>TelegaFirst</span>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 24 }}>
      <div>
        <p className="meta" style={{ marginBottom: 8, fontWeight: 600, color: "var(--hf-ink-2)" }}>Продукт</p>
        <div className="hf-stack tight" style={{ gap: 6 }}>
          {["Возможности", "Тарифы", "Документация", "Roadmap"].map(x => (
            <a key={x} style={{ fontSize: 13, color: "var(--hf-ink-2)", textDecoration: "none" }}>{x}</a>
          ))}
        </div>
      </div>
      <div>
        <p className="meta" style={{ marginBottom: 8, fontWeight: 600, color: "var(--hf-ink-2)" }}>Компания</p>
        <div className="hf-stack tight" style={{ gap: 6 }}>
          {["О нас", "Блог", "Контакты", "Telegram-канал"].map(x => (
            <a key={x} style={{ fontSize: 13, color: "var(--hf-ink-2)", textDecoration: "none" }}>{x}</a>
          ))}
        </div>
      </div>
    </div>
    <div className="hf-divider" style={{ marginBottom: 16 }}></div>
    <p className="meta" style={{ fontSize: 11, lineHeight: 1.6 }}>
      © TelegaFirst · 2026<br/>
      Privacy · Terms · 152-ФЗ · Реквизиты
    </p>
  </div>
);

window.HfIntegrations = HfIntegrations;
window.HfSoloOrIntegrated = HfSoloOrIntegrated;
window.HfUseCases = HfUseCases;
window.HfPricing = HfPricing;
window.HfTrust = HfTrust;
window.HfFAQ = HfFAQ;
window.HfFinalCTA = HfFinalCTA;
window.HfFooter = HfFooter;