// Shared product page renderer — Hero, Features, Mock, Use cases, Tech, CTA. // Loaded as a Babel script after primitives + product mocks. // Uses window.TA_STRINGS (langs nav) + window.TA_PRODUCTS (per-product strings). const { useState: useS_, useEffect: useE_, useRef: useR_ } = React; function useProductI18n() { const [lang, setLang] = useS_(() => localStorage.getItem("ta-lang") || "ua"); useE_(() => { localStorage.setItem("ta-lang", lang); document.documentElement.lang = lang; }, [lang]); return [lang, setLang]; } function PSimpleNav({ p, lang, setLang }) { const langs = ["ua", "ru", "en"]; const back = window.TA_PRODUCTS[lang].common.back; return (
{back} {p.label} · {p.version}
{langs.map((l) => ( ))}
{window.TA_PRODUCTS[lang].common.to_pricing}
); } function PHero({ p, accent, MockComponent }) { return (
{p.hero_meta.map((m, i) => ( {m} ))}
{p.tagline}

{p.hero_title}

{p.hero_sub}

); } function PFeatures({ p, lang, accent }) { const c = window.TA_PRODUCTS[lang].common; return (
{c.kicker_features}

{p.features_title}

{p.features.map((f, i) => (
{String(i + 1).padStart(2, "0")}

{f.t}

{f.d}

))}
); } function PMock({ p, lang, accent, MockComponent, renderMock }) { const c = window.TA_PRODUCTS[lang].common; const node = renderMock ? renderMock(lang) : MockComponent; if (!node) return null; return (
{c.kicker_mock}

{p.label}

{MockComponent}
); } function PUseCases({ p, lang, accent }) { const c = window.TA_PRODUCTS[lang].common; return (
{c.kicker_usecases}

{p.usecases_title}

{p.usecases.map((u, i) => (
0{i + 1}

{u.who}

Pain
{u.pain}
Win
{u.win}
))}
); } function PTech({ p, lang, accent }) { const c = window.TA_PRODUCTS[lang].common; return (
{c.kicker_tech}

{p.tech_title}

{p.tech.map((row, i) => (
{row.k}
{row.v}
))}
); } /* ---- Screenshots gallery — full MT5 chart style ---- */ function PScreenshots({ p, lang, accent, theme }) { const c = window.TA_PRODUCTS[lang].common; const themeKey = (theme === "light") ? "light" : "dark"; const langKey = (lang === "ua") ? "en" : (lang || "en"); const screenshots = typeof p.screenshots === "function" ? p.screenshots(themeKey, langKey) : (p.screenshots || []); if (!screenshots || screenshots.length === 0) return null; const base = (typeof window !== "undefined" && window.__TA_BASE_PATH) || ""; const [active, setActive] = useS_(0); return (
{c.kicker_mock}

{p.label}

{screenshots[active].label}
{screenshots[active].label}
{screenshots.map((s, i) => ( ))}
); } /* ---- FAQ accordion ---- */ function PFAQ({ p, lang, accent }) { const c = window.TA_PRODUCTS[lang].common; const [open, setOpen] = useS_(-1); if (!p.faq || p.faq.length === 0) return null; return (
{c.kicker_faq}

{c.faq_title}

{p.faq.map((item, i) => (
{open === i && (

{item.a}

)}
))}
); } function PCTA({ p, lang, accent }) { const c = window.TA_PRODUCTS[lang].common; const scrollToPricing = () => { const el = document.getElementById("product-pricing") || document.getElementById("copier-pricing"); if (el) el.scrollIntoView({ behavior: "smooth" }); }; return (

{p.cta_title}

{p.cta_sub}

{c.back}
); } function PFooter({ lang }) { const t = window.TA_STRINGS[lang]; return ( ); } function ProductPage({ slug, accent, MockComponent, renderMock }) { const [t, lang, setLang] = window.useI18n(); const tw = window.useTweakState(window.TA_TWEAKS); const p = window.TA_PRODUCTS[lang][slug]; useE_(() => { document.title = p.label + " — Trade Axis"; }, [p.label]); const setTweakKeys = (edits) => { Object.entries(edits).forEach(([k, v]) => localStorage.setItem("ta-" + k, v)); window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*"); }; return (
{p.screenshots && p.screenshots.length > 0 ? : } {slug === "pro" && } {slug === "copier" && } {slug === "journal" && }
); } Object.assign(window, { ProductPage }); /* Scaled wrapper — same approach as journal/copier sections on the homepage */ function ScaledMock({ children, baseWidth = 1080 }) { const outerRef = useR_(null); const innerRef = useR_(null); useE_(() => { if (!outerRef.current || !innerRef.current) return; const fit = () => { const ow = outerRef.current.clientWidth; innerRef.current.style.width = baseWidth + "px"; const s = Math.min(1, ow / baseWidth); 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(); }, [baseWidth]); return (
{children}
); } Object.assign(window, { ScaledMock }); /* --------- Pro Pricing Section (для сторінки pro.html) --------- */ function ProPricingSection({ t }) { const p = t.pricing; const [modal, setModal] = useS_(null); return (
{modal !== null && setModal(null)} />}
{p.kicker}

{p.title}

{p.sub}

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

{plan.name}

$ {plan.price} {plan.period}
{plan.note &&
{plan.note}
}
    {plan.features.map((f, j) => (
  • {f}
    • ))}
))}
); } Object.assign(window, { ProPricingSection }); function JournalPricingSection({ t }) { const jp = t.journal_pricing; const [modal, setModal] = useS_(null); const JOURNAL_ACCENT = "var(--ta-green)"; return (
{modal !== null && setModal(null)} />}
{jp.kicker}

{jp.title}

{jp.sub}

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

{p.name}

$ {p.price} {p.period}
{p.note &&
{p.note}
}
    {p.features.map((f, j) => (
  • {f}
    • ))}
))}
); } Object.assign(window, { JournalPricingSection });