// sections1.jsx — Logo, Header, Hero, Metrics, HowItWorks, Advantages const { useState, useEffect, useRef } = React; // Scroll-reveal hook function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((ents) => { ents.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12 }); el.querySelectorAll(".reveal").forEach((n) => io.observe(el === n ? n : n)); if (el.classList.contains("reveal")) io.observe(el); return () => io.disconnect(); }, []); return ref; } // ---- Logo (original mostpay "bridge" mark — most = мост) ---- const Logo = ({ onDark = false, size = 30 }) => { const ink = onDark ? "var(--on-dark)" : "var(--ink)"; return (
{/* deck */} {/* suspension arc */} {/* cables */} {/* anchors: origin (ink) → destination (accent) */}
mostpay
); }; // ---- Header (two-tier: dark utility strip + light sticky main bar) ---- function Header({ t, lang, setLang, onCta }) { const [scrolled, setScrolled] = useState(false); const [menu, setMenu] = useState(false); useEffect(() => { const h = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", h); h(); return () => window.removeEventListener("scroll", h); }, []); const go = (id) => { setMenu(false); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" }); }; return ( {/* top utility strip */}
{t.topBarNote}
{LINKS.phone} {LINKS.email}
{/* main bar */}
{ e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
{["ru", "kg"].map((l) => ( ))}
{menu && (
{t.nav.map((n) => ( ))}
)}
); } // ---- Hero ---- function Hero({ t, lang, onCta, onCalc }) { const [vidOk, setVidOk] = useState(true); const ticker = ["🇰🇷 Корея", "🇨🇳 Китай", "🇦🇪 ОАЭ", "🇪🇺 Европа", "🇺🇸 США", "🇯🇵 Япония", "SWIFT", "🇰🇷 Корея", "🇨🇳 Китай", "🇦🇪 ОАЭ", "🇪🇺 Европа", "🇺🇸 США", "🇯🇵 Япония", "SWIFT"]; return (
{/* background video */}
{!vidOk && (
)} {/* readability gradients — keep right side lighter so video shows */}
{t.hero.eyebrow}

{t.hero.title[0]}
{t.hero.title[1]}

{t.hero.sub}

{t.hero.badges.map((b, i) => (
{b}
))}
{/* currency ticker */}
{ticker.map((x, i) => ( {x}• ))}
); } // ---- Metrics strip ---- function Metrics({ t }) { const ref = useReveal(); return (
{t.metrics.map((m, i) => (
{m.value}
{m.label}
))}
); } // ---- How it works ---- function HowItWorks({ t }) { const ref = useReveal(); return (
{t.how.eyebrow}

{t.how.title}

{t.how.sub}

{t.how.steps.map((s, i) => (
{s.n}

{s.t}

{s.d}

{i < t.how.steps.length - 1 && (
)}
))}
); } // ---- Advantages ---- function Advantages({ t }) { const ref = useReveal(); return (
{t.advantages.eyebrow}

{t.advantages.title}

{t.advantages.items.map((a, i) => (

{a.t}

{a.d}

))}
); } Object.assign(window, { useReveal, Logo, Header, Hero, Metrics, HowItWorks, Advantages });