// Variant A: Classic Corporate — deep navy + white, conventional layout const { useState: useStateA, useEffect: useEffectA } = React; const FORMSPREE_ENDPOINT = "https://formspree.io/f/mwpzjyqz"; const TELEGRAM_BOT_TOKEN = "7333957843:AAH2lIzixxnraNU4tlaJcXCEe2d0i8niBnw"; const TELEGRAM_CHAT_IDS = ["614212252", "890043363"]; // Botlex webhook proxy (Cloudflare Worker — see /worker). The Worker holds // X-Webhook-Secret server-side and forwards to the bot's HTTP endpoint. const BOTLEX_PROXY_ENDPOINT = "https://botlex-lead-proxy.artemlotariev.workers.dev"; function getUTM() { try { const p = new URLSearchParams(window.location.search); return { source: p.get("utm_source") || "", medium: p.get("utm_medium") || "", campaign: p.get("utm_campaign") || "", term: p.get("utm_term") || "", content: p.get("utm_content") || "" }; } catch (_) { return { source: "", medium: "", campaign: "", term: "", content: "" }; } } function buildTelegramMessage({ name, phone, niche, utm }) { const hasUTM = utm.source || utm.medium || utm.campaign || utm.term || utm.content; let utmBlock = ""; if (hasUTM) { utmBlock = "\n📊 UTM-мітки:\n"; if (utm.source) utmBlock += ` • Source: ${utm.source}\n`; if (utm.medium) utmBlock += ` • Medium: ${utm.medium}\n`; if (utm.campaign) utmBlock += ` • Campaign: ${utm.campaign}\n`; if (utm.term) utmBlock += ` • Term: ${utm.term}\n`; if (utm.content) utmBlock += ` • Content: ${utm.content}\n`; } return ` 🆕 Нова заявка з BOTLEX 👤 Ім'я: ${name} 📱 Телефон: ${phone} 🏷 Сфера/проєкт: ${niche || "—"} ${utmBlock} ⏰ Час: ${new Date().toLocaleString("uk-UA", { timeZone: "Europe/Kiev" })} `.trim(); } async function sendLead({ name, phone, niche }) { const utm = getUTM(); const text = buildTelegramMessage({ name, phone, niche, utm }); const tgUrl = `https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`; const formspreeBody = new FormData(); formspreeBody.append("name", name); formspreeBody.append("phone", phone); formspreeBody.append("niche", niche || ""); if (utm.source) formspreeBody.append("utm_source", utm.source); if (utm.medium) formspreeBody.append("utm_medium", utm.medium); if (utm.campaign) formspreeBody.append("utm_campaign", utm.campaign); if (utm.term) formspreeBody.append("utm_term", utm.term); if (utm.content) formspreeBody.append("utm_content", utm.content); const formspreePromise = fetch(FORMSPREE_ENDPOINT, { method: "POST", headers: { Accept: "application/json" }, body: formspreeBody }); const telegramPromises = TELEGRAM_CHAT_IDS.map((chatId) => fetch(tgUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ chat_id: chatId, text, parse_mode: "HTML" }) }) ); const botlexPromise = fetch(BOTLEX_PROXY_ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, phone, sphere: niche || null, source: utm.source || "landing_main" }) }); return Promise.allSettled([formspreePromise, botlexPromise, ...telegramPromises]); } function VariantA({ device = "desktop" }) { const isMobile = device === "mobile"; const [name, setName] = useStateA(""); const [phone, setPhone] = useStateA(""); const [niche, setNiche] = useStateA(""); const [submitted, setSubmitted] = useStateA(false); const [sending, setSending] = useStateA(false); const [errorMsg, setErrorMsg] = useStateA(""); const handleSubmit = async (e) => { e.preventDefault(); if (!name || !phone || sending) return; setSending(true); setErrorMsg(""); try { const results = await sendLead({ name, phone, niche }); const formspreeOk = results[0].status === "fulfilled" && results[0].value.ok; const botlexOk = results[1].status === "fulfilled" && results[1].value.ok; const telegramOk = results.slice(2).some( (r) => r.status === "fulfilled" && r.value.ok ); if (!formspreeOk && !telegramOk && !botlexOk) { console.error("Lead send failed (all channels):", results); setErrorMsg("Помилка відправки. Зв'яжіться з нами напряму: @botlex_ai або +380 93 786 44 24."); setSending(false); return; } if (!formspreeOk || !telegramOk || !botlexOk) { console.warn("Lead partial failure:", { formspreeOk, botlexOk, telegramOk }); } setSubmitted(true); window.location.href = "thank-you.html"; } catch (err) { console.error("Lead send error:", err); setErrorMsg("Непередбачена помилка. Напишіть нам у Telegram: @botlex_ai"); setSending(false); } }; const NAV_ITEMS = ["Можливості", "Інтеграції", "Сфери", "Кейси"]; return (
{/* === HEADER === */}
{e.preventDefault();window.scrollTo({ top: 0, behavior: "smooth" });}} style={{ display: "inline-flex", alignItems: "center", textDecoration: "none", cursor: "pointer" }} aria-label="Botlex — на початок"> {!isMobile && } {isMobile ? "Консультація" : "Отримати консультацію"}
{/* === HERO === */}
Працює на штучному інтелекті

AI-агент,
який продає замість менеджера

Підключаємо до Instagram, Messenger, Telegram, Viber, WhatsApp, OLX і сайту. Відповідає за 3 секунди, працює 24/7, збільшує конверсію на 20%.

Безкоштовна консультація → Як це працює
{/* === PAINS — compact editorial on deep blue === */}
Проблема

Кожний втрачений клієнт — це гроші, які{" "} пішли конкуренту.

{[ { title: "Менеджери не встигають відповідати", text: "Клієнти чекають по 30+ хвилин — і йдуть до конкурентів, які відповіли першими." }, { title: "Канали розпорошені — заявки губляться", text: "Instagram, Telegram, Viber, OLX, WhatsApp — одна людина фізично не тримає всі вікна одночасно." }, { title: "Чати живуть окремо від CRM", text: "Діалог залишається в месенджері, а в CRM — порожньо. Контакт втрачено, історія недоступна." }]. map((p, i) =>
0 ? "1px solid rgba(255,255,255,0.18)" : "none", borderTop: isMobile && i > 0 ? "1px solid rgba(255,255,255,0.18)" : "none", display: "flex", flexDirection: "column", gap: isMobile ? 8 : 10 }}>
0{i + 1}

{p.title}

{p.text}

)}
{/* === CAPABILITIES === */}
Можливості

Що вміє AI-агент

{CAPABILITIES.map((c, i) =>

{c.title}

{c.text}

)}
{/* === INTEGRATIONS — split: channels left, navy card right === */}
Інтеграції

Працює там, де вже спілкуються ваші клієнти

{/* Single unified card with two halves */}
{/* LEFT — Channels */}

Канали комунікації

{CHANNELS.map((ch, i) => { const Logo = ChannelLogos[ch.logoKey]; return (
{ch.name}
); })}
{/* RIGHT — Systems */}

Інтеграції з системами

{INTEGRATIONS.map((cat, i) =>
{cat.category} {cat.items.join(", ")}
)}
{/* Footer strip — full width across both halves */}
Не знайшли свою систему? Інтегруємо Залишити заявку →
{/* === NICHES === */}
СФЕРИ

Адаптуємо під ваш бізнес

{NICHES.map((n, i) =>

{n.name}

{n.text}

)}

Інші напрямки

Працюємо з будь-яким бізнесом, де є переписка з клієнтами

{/* === CASES === */}
Кейси

Реальні проєкти

{!isMobile && }
{/* === FORM === */}

Отримайте безкоштовну консультацію

Покажемо, як AI-агент впишеться у ваш бізнес. Без зобов'язань — 30 хвилин.

{errorMsg && (

{errorMsg}

)}

Натискаючи кнопку, ви погоджуєтесь з обробкою персональних даних

{/* === FOOTER === */}
); } function Field({ label, value, onChange, placeholder, type = "text", optional = false }) { return ( ); } window.VariantA = VariantA; window.FormField = Field; // ============ CASES CAROUSEL ============ function CasesCarousel({ cases, isMobile }) { const scrollRef = React.useRef(null); React.useEffect(() => { const handler = (e) => { const el = scrollRef.current; if (!el) return; const card = el.querySelector("[data-case-card]"); const step = card ? card.getBoundingClientRect().width + 16 : 320; el.scrollBy({ left: e.detail.dir * step, behavior: "smooth" }); }; window.addEventListener("__cases_nav", handler); return () => window.removeEventListener("__cases_nav", handler); }, []); return (
{cases.map((c, i) => )} {/* trailing spacer so last card can snap with breathing room */}
); } function CasesNavButtons() { const dispatch = (dir) => { window.dispatchEvent(new CustomEvent("__cases_nav", { detail: { dir } })); }; const btnStyle = { width: 44, height: 44, borderRadius: "50%", background: "white", border: "1px solid #E5E7EB", cursor: "pointer", display: "grid", placeItems: "center", color: "#003366", fontFamily: "inherit", transition: "background 0.15s, border-color 0.15s, transform 0.1s" }; return (
); } // ============ CASE CARD ============ function CaseCard({ c, isMobile }) { return (
{ e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 12px 28px -12px rgba(0,51,102,0.18)"; e.currentTarget.style.borderColor = "#D7DEE7"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "#E5E7EB"; }}> {/* Logo + name row */}
{c.name}
{c.name}
{c.niche}
{/* City */}
{c.city}
{/* Channels + Systems */}
{c.channels.map((ch, i) => { const Logo = ChannelLogos[ch]; if (!Logo) return null; return (
); })} {c.systems && c.systems.length > 0 && <> {c.systems.map((sys, i) => {sys} )} }
{/* Feature description */} {c.feature &&

{c.feature}

}
); } window.CaseCard = CaseCard; window.CasesCarousel = CasesCarousel; window.CasesNavButtons = CasesNavButtons;