/* Desktop hi-fi blocks part 3: Integrations, Solo, UseCases, Pricing, Trust, FAQ, Final CTA, Footer */

const HfdIntegrations = () => (
  <div className="hfd-section">
    <div className="hfd-container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <div className="hfd-eyebrow-row"><span className="eyebrow">интеграции</span></div>
          <h2>Уже в&nbsp;Amo / Bitrix /<br/>GetCourse?<br/><span className="display-italic h-accent">Не трогаем.</span></h2>
          <p className="lead" style={{ marginTop: 22, maxWidth: 500 }}>
            TelegaFirst встаёт <strong style={{ color: "var(--hf-ink)" }}>сверху</strong> как канал привлечения и общения.
            Лиды, заказы и контакты улетают в твою текущую систему. Команда работает как работала.
          </p>
          <div className="hfd-card bare" style={{ marginTop: 28, padding: 24 }}>
            <h3>+ Webhooks · REST API · Zapier · Make</h3>
            <p className="body" style={{ marginTop: 10 }}>
              Любишь склеивать сам — пожалуйста. Любая внешняя система получает события TelegaFirst в своём формате.
            </p>
          </div>
        </div>

        <div className="hfd-card" style={{ padding: 36, background: "var(--hf-surface)" }}>
          <svg viewBox="0 0 480 280" width="100%">
            {/* TG node */}
            <rect x="30" y="115" width="170" height="60" rx="14" fill="#0f1419"/>
            <text x="115" y="143" fontFamily="Manrope, sans-serif" fontSize="18" fontWeight="800" fill="white" textAnchor="middle">TelegaFirst</text>
            <text x="115" y="162" fontFamily="JetBrains Mono, monospace" fontSize="11" fill="rgba(255,255,255,0.5)" textAnchor="middle">фронт-офис</text>

            {/* arrows */}
            <g stroke="#2aabee" strokeWidth="2.5" fill="none" strokeLinecap="round">
              <path d="M205 130 Q 250 130, 290 45"/>
              <path d="M205 145 L 290 145"/>
              <path d="M205 160 Q 250 160, 290 245"/>
            </g>
            <g fill="#2aabee">
              <circle cx="290" cy="45" r="4"/>
              <circle cx="290" cy="145" r="4"/>
              <circle cx="290" cy="245" r="4"/>
            </g>

            {[
              ["AmoCRM",          22,  "#3B5BFC"],
              ["Bitrix24",        122, "#2FC6F6"],
              ["GetCourse · LMS", 222, "#E63312"]
            ].map(([n, y, c], i) => (
              <g key={i}>
                <rect x="295" y={y} width="170" height="46" rx="11" fill="white" stroke="rgba(15,20,25,0.14)" strokeWidth="1"/>
                <rect x={310} y={y + 13} width="20" height="20" rx="5" fill={c}/>
                <text x="320" y={y + 27} fontFamily="Manrope, sans-serif" fontSize="11" fontWeight="800" fill="white" textAnchor="middle">{String(n).charAt(0)}</text>
                <text x="340" y={y + 30} fontFamily="Inter, sans-serif" fontSize="14" fontWeight="600" fill="#0f1419">{n}</text>
              </g>
            ))}
          </svg>
        </div>
      </div>
    </div>
  </div>
);

const HfdSoloOrIntegrated = () => (
  <div className="hfd-section alt">
    <div className="hfd-container">
      <div className="hfd-eyebrow-row"><span className="eyebrow">как тебе удобно</span></div>
      <h2 style={{ marginBottom: 48 }}>Соло или с&nbsp;интеграцией.</h2>

      <div className="hfd-grid-3">
        <div className="hfd-card" style={{ padding: 32 }}>
          <span className="hfd-chip tg dot">сценарий A</span>
          <h3 style={{ marginTop: 16, fontSize: 22 }}>Соло</h3>
          <p className="body" style={{ marginTop: 12 }}>
            С нуля. TelegaFirst — твоя минимальная CRM. Запуск за вечер. Это единственный инструмент, который тебе нужен.
          </p>
        </div>
        <div className="hfd-card" style={{ padding: 32, border: "1px dashed var(--hf-line-2)", background: "transparent", boxShadow: "none" }}>
          <span className="hfd-chip">сценарий B</span>
          <h3 style={{ marginTop: 16, fontSize: 22 }}>С&nbsp;интеграцией</h3>
          <p className="body" style={{ marginTop: 12 }}>
            Поверх Amo / Bitrix / GetCourse / любая LMS. Ничего не ломаем. Команда работает как работала.
          </p>
        </div>
        <div className="hfd-card dark" style={{ padding: 32 }}>
          <span className="hfd-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: 16, fontSize: 22, color: "white" }}>Сам разбираешься в AI?</h3>
          <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.5, color: "rgba(255,255,255,0.7)" }}>
            Дай нашей доке свою LLM на разбор — посмотри как мы устроены. Документация открытая, секретов нет.
          </p>
        </div>
      </div>
    </div>
  </div>
);

const HfdUseCase = ({ icon, title, desc, gradient }) => (
  <div className="hfd-card" style={{ padding: 28, display: "flex", gap: 18, alignItems: "flex-start" }}>
    <div style={{ width: 52, height: 52, borderRadius: 14, background: gradient, color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, flexShrink: 0 }}>{icon}</div>
    <div>
      <h3 style={{ fontSize: 18 }}>{title}</h3>
      <p className="body" style={{ marginTop: 8 }} dangerouslySetInnerHTML={{ __html: desc }}/>
    </div>
  </div>
);

const HfdUseCases = () => (
  <div className="hfd-section">
    <div className="hfd-container">
      <div className="hfd-eyebrow-row"><span className="eyebrow">кому подойдёт</span></div>
      <h2 style={{ marginBottom: 48 }}>Это работает для:</h2>

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

const HfdPricing = () => (
  <div className="hfd-section alt">
    <div className="hfd-container">
      <div className="hfd-eyebrow-row"><span className="eyebrow">тарифы</span></div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56 }}>
        <h2>Прозрачные<br/>тарифы.</h2>
        <p className="lead" style={{ maxWidth: 380, textAlign: "right" }}>
          7 дней триала. Без карты. Отмена в один клик.
        </p>
      </div>

      <div className="hfd-grid-4">
        <div className="hfd-tier">
          <div className="hfd-tier-name">Starter</div>
          <div className="hfd-tier-desc">бот + каталог + платежи · без AI</div>
          <div><span className="hfd-tier-price">4&nbsp;990</span><span className="hfd-tier-cur"> ₽</span></div>
          <span className="hfd-tier-per">в месяц</span>
          <ul>
            <li>Open Lines в&nbsp;Telegram</li>
            <li>Каталог и&nbsp;коммерция</li>
            <li>7 платёжных провайдеров</li>
            <li>Авто-выдача цифровых товаров</li>
          </ul>
        </div>

        <div className="hfd-tier popular">
          <span className="hfd-tier-pop">★ POPULAR</span>
          <div className="hfd-tier-name" style={{ color: "var(--hf-tg-deep)" }}>AI Manager</div>
          <div className="hfd-tier-desc">+ AI квалификатор и&nbsp;продавец</div>
          <div><span className="hfd-tier-price">9&nbsp;990</span><span className="hfd-tier-cur"> ₽</span></div>
          <span className="hfd-tier-per">в месяц · 2M токенов</span>
          <ul>
            <li>Всё из&nbsp;Starter</li>
            <li>AI Квалификатор лидов</li>
            <li>AI Консультант-продавец</li>
            <li>Перехват оператором в&nbsp;1&nbsp;клик</li>
          </ul>
        </div>

        <div className="hfd-tier">
          <div className="hfd-tier-name">AI Coach</div>
          <div className="hfd-tier-desc">+ удержание подписчиков</div>
          <div><span className="hfd-tier-price">14&nbsp;990</span><span className="hfd-tier-cur"> ₽</span></div>
          <span className="hfd-tier-per">в месяц · 4M токенов</span>
          <ul>
            <li>Всё из&nbsp;AI Manager</li>
            <li>AI Коуч — настраиваемый агент</li>
            <li>Доступ к&nbsp;твоим инструментам</li>
            <li>Прогрев на&nbsp;повторные продажи</li>
          </ul>
        </div>

        <div className="hfd-tier" style={{ borderStyle: "dashed", background: "transparent" }}>
          <div className="hfd-tier-name">Enterprise</div>
          <div className="hfd-tier-desc">для крупных клиентов и&nbsp;агентств</div>
          <div style={{ marginTop: 20 }}>
            <span className="hfd-chip">по запросу</span>
          </div>
          <ul>
            <li>1000+ юзеров</li>
            <li>20M+ токенов/мес</li>
            <li>Dedicated infra</li>
            <li>Founder-led onboarding</li>
          </ul>
        </div>
      </div>
      <p className="meta" style={{ textAlign: "center", marginTop: 24, fontStyle: "italic" }}>
        нужно больше токенов — 2&nbsp;490 ₽ за&nbsp;1 миллион
      </p>
    </div>
  </div>
);

const HfdTrust = () => (
  <div className="hfd-section">
    <div className="hfd-container">
      <div className="hfd-eyebrow-row"><span className="eyebrow">безопасность</span></div>
      <h2 style={{ marginBottom: 48 }}>Спокойствие за&nbsp;твои данные.</h2>

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

const HfdFaqItem = ({ q, a, open }) => (
  <div className={`hfd-faq ${open ? 'open' : ''}`}>
    <div className="hfd-faq-row">
      <div className="hfd-faq-q" dangerouslySetInnerHTML={{ __html: q }}/>
      <div className="hfd-faq-toggle">+</div>
    </div>
    {open && a && <div className="hfd-faq-a" dangerouslySetInnerHTML={{ __html: a }}/>}
  </div>
);

const HfdFAQ = () => (
  <div className="hfd-section alt">
    <div className="hfd-container">
      <div className="hfd-eyebrow-row"><span className="eyebrow">FAQ</span></div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "flex-start" }}>
        <div>
          <h2>Что<br/>спрашивают.</h2>
          <p className="lead" style={{ marginTop: 22 }}>
            Если что-то не нашли — напишите нам в&nbsp;Telegram.
          </p>
        </div>
        <div className="hfd-stack tight">
          <HfdFaqItem open
            q="А&nbsp;AI не&nbsp;нагрубит и&nbsp;не&nbsp;ошибётся?"
            a="Ты видишь каждый диалог в&nbsp;реальном времени. Кнопка «перехватить» — один тап. Tone-of-voice настраивается под твой бренд." />
          <HfdFaqItem q="Уже работаю в&nbsp;Amo / Bitrix — мешать будет?"/>
          <HfdFaqItem q="Я vibe-coder, могу собрать сам — зачем платить?"/>
          <HfdFaqItem q="Что с&nbsp;152-ФЗ и&nbsp;данными клиентов?"/>
          <HfdFaqItem q="А&nbsp;если Telegram заблокируют?"/>
          <HfdFaqItem q="Сколько займёт реальный запуск?"/>
          <HfdFaqItem q="Команды сейчас нет — справлюсь один?"/>
          <HfdFaqItem q="Можно несколько ботов на&nbsp;одном тарифе?"/>
        </div>
      </div>
    </div>
  </div>
);

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

    <div style={{ marginTop: 36, display: "inline-flex", gap: 14 }}>
      <button className="hfd-btn-primary">
        <span className="hfd-btn-primary-label">
          <span>Попробовать бесплатно</span>
          <span className="hfd-btn-primary-sub">7 дней · без карты · отмена в один клик</span>
        </span>
        <span className="hfd-btn-primary-arrow">
          <svg width="20" height="20" 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>
  </div>
);

const HfdFooter = () => (
  <div className="hfd-footer">
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
      <div className="hfd-footer-grid">
        <div>
          <div className="hfd-logo" style={{ marginBottom: 14 }}>
            <span className="hfd-logo-mark">T</span>
            <span>TelegaFirst</span>
          </div>
          <p style={{ fontSize: 14, color: "var(--hf-ink-2)", maxWidth: 280, lineHeight: 1.5 }}>
            AI-фронт-офис в&nbsp;Telegram для микробизнеса.
          </p>
        </div>
        <div className="hfd-footer-col">
          <h4>Продукт</h4>
          {["Возможности", "Монетизация", "Интеграции", "Тарифы", "Документация", "Roadmap"].map(x => <a key={x}>{x}</a>)}
        </div>
        <div className="hfd-footer-col">
          <h4>Компания</h4>
          {["О нас", "Блог", "Контакты", "Telegram-канал", "Партнёрам"].map(x => <a key={x}>{x}</a>)}
        </div>
        <div className="hfd-footer-col">
          <h4>Юридическое</h4>
          {["Privacy", "Terms", "152-ФЗ", "Реквизиты", "Оферта"].map(x => <a key={x}>{x}</a>)}
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--hf-line)", paddingTop: 28, display: "flex", justifyContent: "space-between", color: "var(--hf-ink-3)", fontSize: 13 }}>
        <span>© TelegaFirst · 2026</span>
        <span>Сделано в&nbsp;РФ</span>
      </div>
    </div>
  </div>
);

window.HfdIntegrations = HfdIntegrations;
window.HfdSoloOrIntegrated = HfdSoloOrIntegrated;
window.HfdUseCases = HfdUseCases;
window.HfdPricing = HfdPricing;
window.HfdTrust = HfdTrust;
window.HfdFAQ = HfdFAQ;
window.HfdFinalCTA = HfdFinalCTA;
window.HfdFooter = HfdFooter;