// Trade Axis — full page sections // Requires: React global + primitives + ProPanel/MT5Window + JournalApp const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React; function useI18n() { const [lang, setLang] = useS(() => localStorage.getItem("ta-lang") || "ua"); useE(() => { localStorage.setItem("ta-lang", lang); document.documentElement.lang = lang; }, [lang]); const t = window.TA_STRINGS[lang]; return [t, lang, setLang]; } function useTweakState(TWEAKS) { const [theme, setTheme] = useS(() => localStorage.getItem("ta-theme") || TWEAKS.theme); const [accent, setAccent] = useS(() => localStorage.getItem("ta-accent") || TWEAKS.accent); useE(() => { document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-accent", accent); localStorage.setItem("ta-theme", theme); localStorage.setItem("ta-accent", accent); }, [theme, accent]); return { theme, setTheme, accent, setAccent }; } /* --------- Nav --------- */ function Nav({ t, lang, setLang, theme, setTheme }) { const base = (typeof window !== "undefined" && window.__TA_BASE_PATH) || ""; const home = base + "index.html"; const hashLink = (h) => base + "index.html" + h; const [scrolled, setScrolled] = useS(false); const [productsOpen, setProductsOpen] = useS(false); const closeTimer = useR(null); useE(() => { const fn = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", fn); return () => window.removeEventListener("scroll", fn); }, []); const openProducts = () => { clearTimeout(closeTimer.current); setProductsOpen(true); }; const scheduleClose = () => { closeTimer.current = setTimeout(() => setProductsOpen(false), 180); }; const products = [ { name: "Trade Axis Pro", href: base + "products/pro.html", desc: t.nav.products_pro_desc, accent: "var(--ta-blue)", badge: "EA · MT5" }, { name: "Trade Axis Journal", href: base + "products/journal.html", desc: t.nav.products_journal_desc, accent: "var(--ta-green)", badge: "Windows" }, { name: "Trade Axis Copier", href: base + "products/copier.html", desc: t.nav.products_copier_desc, accent: "#5FB8E8", badge: "Windows · MT5" }, ]; return ( ); } /* --------- Hero --------- */ function Hero({ t }) { return (
{/* ambient blobs */}
{t.hero.eyebrow}

{t.hero.title_a} {t.hero.title_b}{t.hero.title_c}

{t.hero.sub}

{[t.hero.badge_1, t.hero.badge_2, t.hero.badge_3].map((b, i) => (
{b}
))}
{/* live pill top-right */}
{t.hero.ticker_live} · XAUUSD
{/* floating telegram card */}
✈
Trade Axis Bot now
🟢 XAUUSD SELL · 0.10 @ 4835.27
Stop: 400 pts · Risk: $32 (0.72%)
); } /* --------- Stats strip --------- */ function StatsStrip({ t }) { const stats = [ { n: "47", l: t.stats.countries }, { n: "3 200+", l: t.stats.traders }, { n: "1.8M", l: t.stats.trades }, { n: "99.96%", l: t.stats.uptime }, ]; return (
{stats.map((s, i) => (
{s.n}
{s.l}
))}
); } /* --------- Product: Pro --------- */ function ProSection({ t }) { return (
{t.pro.kicker}

{t.pro.name}

{t.pro.tagline}

{t.pro.desc}

{t.pro.explore} →
{t.pro.features.map((f, i) => (
{String(i + 1).padStart(2, "0")}

{f.t}

{f.d}

))}
); } function JournalScaled({ strings }) { const outerRef = useR(null); const innerRef = useR(null); useE(() => { if (!outerRef.current || !innerRef.current) return; const fit = () => { const ow = outerRef.current.clientWidth; const iw = 1080; innerRef.current.style.width = iw + "px"; const s = Math.min(1, ow / iw); innerRef.current.style.transform = `scale(${s})`; const ih = innerRef.current.scrollHeight; outerRef.current.style.height = (ih * s) + "px"; }; fit(); const ro = new ResizeObserver(fit); ro.observe(outerRef.current); return () => ro.disconnect(); }, []); return (
); } /* --------- Product: Journal --------- */ function JournalSection({ t }) { return (
{t.journal.features.map((f, i) => (
{String(i + 1).padStart(2, "0")}

{f.t}

{f.d}

))}
{t.journal.kicker}

{t.journal.name}

{t.journal.tagline}

{t.journal.desc}

{t.journal.explore} →
); } /* --------- Product: Copier --------- */ function CopierScaled({ strings }) { const outerRef = useR(null); const innerRef = useR(null); useE(() => { if (!outerRef.current || !innerRef.current) return; const fit = () => { const ow = outerRef.current.clientWidth; const iw = 1080; innerRef.current.style.width = iw + "px"; const s = Math.min(1, ow / iw); innerRef.current.style.transform = `scale(${s})`; const ih = innerRef.current.scrollHeight; outerRef.current.style.height = (ih * s) + "px"; }; fit(); const ro = new ResizeObserver(fit); ro.observe(outerRef.current); return () => ro.disconnect(); }, []); return (
); } function CopierSection({ t }) { const COPIER_ACCENT = "#5FB8E8"; // light blue return (
{t.copier.kicker}

{t.copier.name}

{t.copier.tagline}

{t.copier.desc}

{t.copier.explore} →
{t.copier.features.map((f, i) => (
{String(i + 1).padStart(2, "0")}

{f.t}

{f.d}

))}
); } /* --------- How it works --------- */ function HowSection({ t }) { return (
{t.how.kicker}

{t.how.title}

{/* connector line */}
{t.how.steps.map((s, i) => (
{s.n}

{s.t}

{s.d}

))}
); } /* --------- Pricing --------- */ function PricingSection({ t }) { const [modal, setModal] = useS(null); // null | {name, price} return (
{modal !== null && setModal(null)} />}
{t.pricing.kicker}

{t.pricing.title}

{t.pricing.sub}

{t.pricing.plans.map((p, i) => (
{p.badge && (
{p.badge}
)}

{p.name}

$ {p.price} {p.period}
    {p.features.map((f, j) => (
  • {f}
    • ))}
))}
{t.pricing.guarantee}
{/* Pointer to dedicated Copier pricing */}
COPIER MT5

{t.pricing.copier_pointer_title || "Trade Axis Copier — окрема підписка"}

{t.pricing.copier_pointer_desc || "Платиться окремо від Pro + Journal. Тарифи нижче."}

{t.pricing.copier_pointer_cta || "До тарифів Copier"} →
); } /* --------- FAQ --------- */ function FAQSection({ t }) { const [open, setOpen] = useS(0); return (
{t.faq.kicker}

{t.faq.title}

{t.faq.items.map((it, i) => (
{open === i && (

{it.a}

)}
))}
); } /* --------- Final CTA --------- */ function CTASection({ t }) { const scrollToPricing = () => { const el = document.getElementById("pricing"); if (el) el.scrollIntoView({ behavior: "smooth" }); }; return (

{t.cta.title}

{t.cta.sub}

{t.cta.secondary}
); } /* --------- Footer --------- */ function Footer({ t }) { return ( ); } /* --------- Tweaks panel --------- */ function TweaksPanel({ t, theme, setTheme, accent, setAccent, setTweakKeys }) { const [visible, setVisible] = useS(false); useE(() => { const handler = (e) => { if (e.data?.type === "__activate_edit_mode") setVisible(true); if (e.data?.type === "__deactivate_edit_mode") setVisible(false); }; window.addEventListener("message", handler); window.parent.postMessage({ type: "__edit_mode_available" }, "*"); return () => window.removeEventListener("message", handler); }, []); if (!visible) return null; const set = (k, v) => { if (k === "theme") { setTheme(v); setTweakKeys({ theme: v }); } if (k === "accent") { setAccent(v); setTweakKeys({ accent: v }); } }; return (

{t.tweaks.title}

{t.tweaks.theme}
{t.tweaks.accent}
); } /* --------- Copier Pricing (3 tiers) --------- */ function CopierPricingSection({ t }) { const cp = t.copier_pricing; const COPIER_ACCENT = "#5FB8E8"; const [modal, setModal] = useS(null); return (
{modal !== null && setModal(null)} />}
{cp.kicker}

{cp.title}

{cp.sub}

{cp.plans.map((p, i) => (
{p.badge && (
{p.badge}
)}

{p.name}

$ {p.price} {p.period}
{p.note &&
{p.note}
}
    {p.features.map((f, j) => (
  • {f}
    • ))}
))}
{cp.guarantee &&
{cp.guarantee}
}
); } /* --------- Payments Modal --------- */ const PAYMENT_DETAILS = { usdt: { icon: "₮", name: "USDT TRC20", sub: "USDT · Tron", fields: [ { label: "Адреса", value: "TVDMQPFV11ppxtq5kDeeeiUBdKnih3X5fE", copy: true, mono: true, small: true }, { label: "Мережа", value: "TRC20 (Tron)", copy: false }, ], }, binance: { icon: "🔶", name: "Binance Pay", sub: "USDT · BTC · BNB", fields: [ { label: "Binance UID", value: "27857831", copy: true }, { label: "Валюта", value: "USDT / BTC / BNB", copy: false }, ], }, }; function PaymentsModal({ t, planName, planPrice, onClose }) { const [step, setStep] = useS(1); const [form, setForm] = useS({ name: "", email: "", telegram: "", country: "" }); const [payMethod, setPayMethod] = useS("usdt"); const [copied, setCopied] = useS(null); const [submitting, setSubmitting] = useS(false); const [submitError, setSubmitError] = useS(""); const [extraAccounts, setExtraAccounts] = useS(0); const [couponCode, setCouponCode] = useS(""); const [couponApplied, setCouponApplied] = useS(null); // { discount, partner, label } const [couponError, setCouponError] = useS(""); const [couponLoading, setCouponLoading] = useS(false); const isTrial = planPrice === "0" || planPrice === 0; const isYearly = planName && (planName.includes("рік") || planName.includes("год") || planName.includes("year")); const baseAccounts = 3; const totalAccounts = baseAccounts + extraAccounts; const priceBeforeDiscount = planPrice ? Number(planPrice) + extraAccounts * 10 : planPrice; const discountAmount = couponApplied ? Math.round(priceBeforeDiscount * couponApplied.client_discount / 100) : 0; const totalPrice = priceBeforeDiscount ? priceBeforeDiscount - discountAmount : priceBeforeDiscount; const applyCoupon = async () => { if (!couponCode.trim()) return; setCouponLoading(true); setCouponError(""); setCouponApplied(null); try { const res = await fetch("/.netlify/functions/coupon", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ coupon: couponCode.trim() }), }); const data = await res.json(); if (data.status === "ok") { setCouponApplied(data); } else { setCouponError(data.message || "Невірний купон"); } } catch (e) { setCouponError("Помилка перевірки. Спробуйте ще раз."); } setCouponLoading(false); }; useE(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, []); const setField = (k, v) => setForm((f) => ({ ...f, [k]: v })); const isStep1Valid = form.name.trim() && form.email.trim() && form.country.trim() && (isTrial || form.telegram.trim()); const copyText = (text, id) => { navigator.clipboard.writeText(text).then(() => { setCopied(id); setTimeout(() => setCopied(null), 2000); }); }; // Для тріалу — відправляємо на trial endpoint і одразу step 3 const handleTrialSubmit = async () => { setSubmitting(true); setSubmitError(""); try { const params = new URLSearchParams({ action: "trial", email: form.email.trim(), name: form.name.trim(), product: "pro+journal", }); const res = await fetch("/.netlify/functions/license?" + params.toString()); const data = await res.json(); if (data.status === "ok") { setStep(3); } else if (data.status === "trial_exists") { setSubmitError("Тріал для цього email вже видано. Перевірте пошту або зверніться до підтримки."); } else { setSubmitError(data.message || "Помилка. Спробуйте ще раз або напишіть нам."); } } catch (e) { setSubmitError("Помилка з'єднання. Напишіть нам у Telegram."); } setSubmitting(false); }; const handlePaid = async () => { setSubmitting(true); setSubmitError(""); try { const res = await fetch("/.netlify/functions/order", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: form.name, email: form.email, telegram: form.telegram, country: form.country, plan: planName || "", price: totalPrice || "", accounts: totalAccounts, coupon: couponApplied ? couponCode.toUpperCase() : "", discount: couponApplied ? `${couponApplied.client_discount}%` : "", partner: couponApplied ? couponApplied.partner : "", payment_method: PAYMENT_DETAILS[payMethod]?.name || payMethod, }), }); const data = await res.json(); if (data.status === "error" || data.status === "server_error") { setSubmitError(data.message || "Помилка відправки. Спробуйте ще раз."); } else { setStep(3); } } catch (e) { setSubmitError("Помилка з'єднання. Напишіть нам у Telegram."); } setSubmitting(false); }; const p = t.payments; const det = PAYMENT_DETAILS[payMethod]; const stepStyle = (n) => ({ display: "flex", alignItems: "center", gap: 6, }); const numStyle = (n) => ({ width: 22, height: 22, borderRadius: 99, fontSize: 11, fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, background: step === n ? "var(--accent)" : step > n ? "color-mix(in oklab, var(--accent) 30%, var(--bg-card))" : "var(--bg-3)", color: step === n ? "#fff" : step > n ? "var(--accent)" : "var(--text-3)", border: step > n ? "1px solid color-mix(in oklab, var(--accent) 40%, transparent)" : "1px solid var(--line)", }); const lblStyle = (n) => ({ fontSize: 12, fontFamily: "var(--mono)", color: step === n ? "var(--text)" : "var(--text-3)", fontWeight: step === n ? 600 : 400, }); return (
e.stopPropagation()} style={{ background: "var(--bg)", border: "1px solid var(--line-2)", borderRadius: 24, padding: "28px 28px 32px", width: "100%", maxWidth: 580, maxHeight: "92vh", overflowY: "auto", position: "relative", boxShadow: "0 40px 120px rgba(0,0,0,0.6)", }} > {/* Close */} {/* Steps indicator */}
1
Ваші дані
{!isTrial && <>
2
Оплата
}
{isTrial ? 2 : 3}
Готово
{/* Plan badge */} {planName && (
✦ {planName}{totalPrice ? ` · $${totalPrice}` : ""}{couponApplied ? ` (-${couponApplied.client_discount}%)` : ""}
)} {/* ── STEP 1: Form ── */} {step === 1 && (
{[ { k: "name", label: "Ім'я", placeholder: "Іван", type: "text" }, { k: "email", label: "Email", placeholder: "ivan@gmail.com", type: "email" }, ...(!isTrial ? [{ k: "telegram", label: "Telegram", placeholder: "@username", type: "text" }] : []), { k: "country", label: "Країна", placeholder: "Україна", type: "text" }, ].map(({ k, label, placeholder, type }) => (
{label} *
setField(k, e.target.value)} placeholder={placeholder} style={{ width: "100%", boxSizing: "border-box", background: "var(--bg-card)", border: "1px solid var(--line)", borderRadius: 10, padding: "9px 12px", fontSize: 14, color: "var(--text)", fontFamily: k === "telegram" ? "var(--mono)" : "inherit", outline: "none", }} />
))}
💌 {isTrial ? "Ліцензійний ключ на 14 днів надійде на вказаний email одразу після підтвердження." : "На вказаний email надійде ліцензійний ключ після підтвердження оплати."}
{submitError && (
{submitError}
)}
{/* Вибір рахунків для річного тарифу */} {isYearly && isStep1Valid && (
Кількість торгових рахунків MT5
{[0, 1, 2, 3, 4, 5, 6, 7].map(extra => ( ))}
Базово 3 рахунки включено · +$10 за кожен додатковий {extraAccounts > 0 && +${extraAccounts * 10} до суми}
)}
)} {/* ── STEP 2: Payment ── */} {step === 2 && (
{/* Method selector */}
{Object.entries(PAYMENT_DETAILS).map(([key, d]) => ( ))}
{/* Details */}
{det.fields.map((f, i) => (
{f.label} {f.link ? Написати в Telegram → : {f.value} } {f.copy && ( )}
))}
{/* Купон знижки */}
Купон знижки
{couponApplied ? (
🎉
{couponCode.toUpperCase()} — -{couponApplied.client_discount}% знижка
Економія: ${discountAmount}
) : (
{ setCouponCode(e.target.value.toUpperCase()); setCouponError(""); }} onKeyDown={(e) => e.key === "Enter" && applyCoupon()} placeholder="PARTNER20" style={{ flex: 1, background: "var(--bg-card)", border: "1px solid var(--line)", borderRadius: 10, padding: "9px 12px", fontSize: 14, fontFamily: "var(--mono)", color: "var(--text)", letterSpacing: ".05em", outline: "none", }} />
)} {couponError && (
{couponError}
)}
{/* Сума до оплати */}
До оплати:
{couponApplied && ( ${priceBeforeDiscount} )} ${totalPrice} {couponApplied && ( -{couponApplied.client_discount}% )}
💡 Після оплати натисніть кнопку нижче — ваші дані запишемо і зв'яжемось з вами.
Інші способи оплати (PayPal, Wise, банк) —{" "} напишіть у Telegram
{submitError && (
{submitError}
)}
)} {/* ── STEP 3: Done ── */} {step === 3 && (
✓
{isTrial ? "Ключ надіслано!" : "Дякуємо!"}
{isTrial ? <>Ваш безкоштовний ключ на 14 днів надіслано на {form.email}. Перевірте пошту і активуйте додаток. : <>Ваше замовлення отримано. Ми перевіримо оплату і надішлемо ліцензійний ключ на {form.email} протягом кількох хвилин. }
✈ Написати в Telegram
{isTrial ? "Якщо не отримали ключ протягом 5 хв — перевірте спам або зв'яжіться з нами." : "Якщо не отримали ключ протягом 30 хв — зв'яжіться з нами."}
)}
); } /* --------- Reviews carousel --------- */ function ReviewsSection({ t }) { const items = t.reviews.items; const trackRef = useR(null); const scrollBy = (dir) => { const el = trackRef.current; if (!el) return; el.scrollBy({ left: dir * (el.clientWidth * 0.85), behavior: "smooth" }); }; return (
{t.reviews.kicker}

{t.reviews.title}

{t.reviews.sub}

{items.map((r, i) => (
{Array.from({ length: 5 }).map((_, k) => ( ))}

“{r.quote}”

{r.name.charAt(0)}
{r.name}
{r.role}
))}
); } /* --------- AI chat launcher --------- */ function AIChatLauncher({ t }) { const [open, setOpen] = useS(false); const [messages, setMessages] = useS([{ role: "bot", text: t.chat.first_message }]); const [input, setInput] = useS(""); const [busy, setBusy] = useS(false); const messagesEndRef = useR(null); useE(() => { if (messagesEndRef.current) { messagesEndRef.current.scrollIntoView({ behavior: "smooth" }); } }, [messages]); const send = async (text) => { const q = (text ?? input).trim(); if (!q || busy) return; const newMessages = [...messages, { role: "user", text: q }]; setMessages(newMessages); setInput(""); setBusy(true); try { // Конвертуємо в формат Anthropic API const apiMessages = newMessages .filter(m => m.role !== "bot" || m !== newMessages[0]) // прибираємо перше привітання .map(m => ({ role: m.role === "bot" ? "assistant" : "user", content: m.text })); const res = await fetch("/.netlify/functions/claude", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: apiMessages }), }); const data = await res.json(); setMessages((m) => [...m, { role: "bot", text: data.reply || "—" }]); } catch (e) { setMessages((m) => [...m, { role: "bot", text: "Виникла помилка. Спробуйте ще раз або напишіть у Telegram." }]); } setBusy(false); }; return ( <> {/* Launcher button */} {/* Panel */} {open && (
{t.chat.title}
{t.chat.sub}
{messages.map((m, i) => (
{m.text}
))} {busy && (
...
)}
{messages.length <= 1 && (
{t.chat.examples ? "" : ""}
{t.chat.examples.map((ex, i) => ( ))}
)}
{ e.preventDefault(); send(); }} style={{ display: "flex", gap: 8 }}> setInput(e.target.value)} placeholder={t.chat.placeholder} style={{ flex: 1, background: "var(--bg-card)", border: "1px solid var(--line)", borderRadius: 10, padding: "10px 12px", color: "var(--text)", fontSize: 14, fontFamily: "inherit", outline: "none", }} />
{t.chat.hint}
)} ); } /* --------- Root App --------- */ function App() { const [t, lang, setLang] = useI18n(); const TWEAKS = window.TA_TWEAKS; const tw = useTweakState(TWEAKS); const setTweakKeys = (edits) => window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*"); return (
); } Object.assign(window, { Nav, Footer, AIChatLauncher, TweaksPanel, useTweakState, useI18n }); // Only mount if root is empty (i.e. on the home page). // Product pages mount their own root with ProductPage component. if (document.getElementById("root") && !window.__TA_PRODUCT_PAGE) { ReactDOM.createRoot(document.getElementById("root")).render(); }