// 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(TWEAKS.theme); const [accent, setAccent] = useS(TWEAKS.accent); useE(() => { document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-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.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}

); } /* --------- 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.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 }) { return (
{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 }) { return (

{t.cta.title}

{t.cta.sub}

); } /* --------- 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"; return (
{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 strip --------- */ function PaymentsStrip({ t }) { return (
{t.payments.title}
{t.payments.sub}
{t.payments.methods.map((m, i) => ( {m} ))}
); } /* --------- 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 (stub) --------- */ 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 send = async (text) => { const q = (text ?? input).trim(); if (!q || busy) return; setMessages((m) => [...m, { role: "user", text: q }]); setInput(""); setBusy(true); try { const reply = await window.claude.complete({ messages: [ { role: "user", content: `Ти — підтримка Trade Axis (Pro EA для MT5, Journal Windows app, Copier MT5). Відповідай коротко (2-4 речення) тією мовою, якою тебе питають. Якщо не знаєш точну ціну — кажи "уточни в розділі Тарифи на сайті". Питання: ${q}` }, ], }); setMessages((m) => [...m, { role: "bot", text: reply }]); } catch (e) { setMessages((m) => [...m, { role: "bot", text: "—" }]); } 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) => ( ))}
)}
)} ); } /* --------- 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(); }