// Yookie landing v5 — i18n, snap-scroll, reveal animations, pinned CTAs const { useState, useEffect, useRef, useLayoutEffect, useMemo } = React; const { useTweaks, TweaksPanel, TweakSection, TweakColor } = window; const { ServiceFragment, TimeChip, MasterPill, CalendarFragment, ConfirmToast, SearchFragment } = window.YookieFragments; const I18N = window.YookieI18n; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#39D1FF" }/*EDITMODE-END*/; const TG_BOT = "https://t.me/yookie_bot"; // ============================================================================ // Hooks // ============================================================================ function useIsMobile(bp = 960) { const [m, setM] = useState(() => typeof window !== 'undefined' && window.innerWidth <= bp); useEffect(() => { const onR = () => setM(window.innerWidth <= bp); window.addEventListener("resize", onR); return () => window.removeEventListener("resize", onR); }, [bp]); return m; } function useReveal(threshold = 0) { const ref = useRef(null); const [v, setV] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; // Find scrollable ancestor (snap-container) — observer needs it as root let root = null; let p = el.parentElement; while (p) { if (p.classList && p.classList.contains('snap-container')) { root = p; break; } p = p.parentElement; } // Negative bottom margin so reveal fires only AFTER element is well into the viewport, // not while it's still offscreen below. const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setV(true); io.disconnect(); } }, { threshold, root, rootMargin: "0px 0px -30% 0px" }); io.observe(el); return () => io.disconnect(); }, [threshold]); return [ref, v]; } // Lang persistence function useLang() { const [lang, setLang] = useState(() => { try { const saved = localStorage.getItem("yookie_lang"); if (saved && I18N[saved]) return saved; } catch (e) {} return "ru"; }); useEffect(() => { try { localStorage.setItem("yookie_lang", lang); } catch (e) {} document.documentElement.lang = lang; }, [lang]); return [lang, setLang]; } // Parallax bg function useParallaxBG(scrollEl) { useEffect(() => { const el = document.querySelector('.bg-glow'); if (!el) return; const target = scrollEl || window; const onScroll = () => { const y = (target.scrollTop ?? window.scrollY) * 0.04; el.style.transform = `translateY(${-y}px)`; }; target.addEventListener("scroll", onScroll, { passive: true }); return () => target.removeEventListener("scroll", onScroll); }, [scrollEl]); } // ============================================================================ // Magnetic button // ============================================================================ function MagneticButton({ children, primary, isMobile, href, onClick, ...rest }) { const ref = useRef(null); const [t, setT] = useState({ x: 0, y: 0 }); const Tag = href ? "a" : "button"; const linkProps = href ? { href, target: "_blank", rel: "noopener noreferrer" } : { onClick }; return ( { if (isMobile) return; const r = ref.current.getBoundingClientRect(); const x = (e.clientX - r.left - r.width / 2) * 0.25; const y = (e.clientY - r.top - r.height / 2) * 0.4; setT({ x, y }); }} onMouseLeave={() => setT({ x: 0, y: 0 })} className={primary ? "btn-primary" : "btn-ghost"} style={{ transform: `translate(${t.x}px, ${t.y}px)`, transition: "transform .25s cubic-bezier(.2,.8,.2,1)", textDecoration: "none" }} {...linkProps} {...rest}> {children} ); } function YookieLogo({ size = 28 }) { return Yookie; } // ============================================================================ // Lang selector // ============================================================================ function LangSelector({ lang, setLang, dark }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onClick); return () => document.removeEventListener("mousedown", onClick); }, []); const langs = [ { c: "ru", l: "Русский", s: "RU" }, { c: "uz", l: "O‘zbekcha", s: "UZ" }, { c: "en", l: "English", s: "EN" } ]; const current = langs.find(l => l.c === lang) || langs[0]; return (
{open && (
{langs.map(l => ( ))}
)}
); } // ============================================================================ // Nav // ============================================================================ function Nav({ t, lang, setLang }) { const [open, setOpen] = useState(false); return ( <>
{open && (
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 200, background: "rgba(8,10,14,0.85)", backdropFilter: "blur(24px)", display: "flex", flexDirection: "column", padding: "80px 24px 40px" }}>
{[ { l: t.nav.idea, h: "#idea" }, { l: t.nav.how, h: "#how" }, { l: t.nav.why, h: "#why" }, { l: t.nav.masters, h: "#masters" } ].map((item) => setOpen(false)} style={{ padding: "18px 4px", fontSize: 28, color: "#fff", textDecoration: "none", fontWeight: 600, fontFamily: "'Gilroy', sans-serif", letterSpacing: -0.5, borderBottom: "1px solid rgba(255,255,255,0.06)" }}>{item.l} )}
)} ); } // ============================================================================ // HERO — pill lifted up so it doesn't cover headline // ============================================================================ function Hero({ t }) { const isMobile = useIsMobile(); const [mouse, setMouse] = useState({ x: 0, y: 0 }); const [ref, inView] = useReveal(0.05); useEffect(() => { if (isMobile) return; const onMove = (e) => { const w = window.innerWidth, h = window.innerHeight; setMouse({ x: (e.clientX - w / 2) / w, y: (e.clientY - h / 2) / h }); }; window.addEventListener("mousemove", onMove); return () => window.removeEventListener("mousemove", onMove); }, [isMobile]); return (
{!isMobile && ( <> {/* SearchFragment lifted to top-left */}
{/* Confirm right-top */}
{/* TimeChip — small, bottom-right under text safely */}
)}
{t.hero.tag}

{t.hero.l1}{" "} {t.hero.l2}
{t.hero.l3}

{t.hero.sub}

{t.hero.cta1} document.getElementById('how')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}> {t.hero.cta2}
{isMobile && (
)}
{!isMobile && (
{t.hero.scroll}
)}
); } // ============================================================================ // IDEA // ============================================================================ function Idea({ t }) { const isMobile = useIsMobile(); const [ref, inView] = useReveal(0.2); return (
{t.idea.kicker}

{t.idea.h1}
{t.idea.h2a} {t.idea.h2b} {t.idea.h2c}
{t.idea.h3}

{t.idea.stats.map((s, i) =>
{s[0]} {s[1]}
)}
); } // ============================================================================ // PROBLEM/SOLUTION // ============================================================================ function ProblemSolution({ t }) { const isMobile = useIsMobile(); const [ref, inView] = useReveal(0.15); return (
{t.ps.kickerLeft}

{t.ps.titleLeft[0]}
{t.ps.titleLeft[1]}

{t.ps.problems.map((x, i) =>
0{i + 1}
{x.t}
{x.d}
)}
{t.ps.kickerRight}

{t.ps.titleRightA}
{t.ps.titleRightB}

{t.ps.solutions.map((x, i) =>
{x.t}
{x.d}
)}
); } // ============================================================================ // HOW IT WORKS // ============================================================================ function HowItWorks({ t }) { const isMobile = useIsMobile(); const [ref, inView] = useReveal(0.2); return (
{t.how.kicker}

{t.how.titleA}
{t.how.titleB}

{t.how.sub}

{t.how.steps.map((s, i) =>
STEP 0{i + 1}
{s.t}

{s.d}

)}
{!isMobile && (
)}
); } // ============================================================================ // WHY // ============================================================================ function Why({ t }) { const isMobile = useIsMobile(); const [ref, inView] = useReveal(0.12); const symbols = ["⚡", "👁", "↻", "💬"]; const spans = [2, 1, 1, 2]; return (

{t.why.titleA} {t.why.titleB}

{t.why.cards.map((c, i) =>
{symbols[i]}
{c.t}
{c.d}
)}
); } // ============================================================================ // FOR MASTERS // ============================================================================ function ForMasters({ t }) { const isMobile = useIsMobile(); const [ref, inView] = useReveal(0.15); return (
{t.masters.kicker}

{t.masters.titleA}
{t.masters.titleB}
{t.masters.titleC}

{t.masters.sub}

{t.masters.bullets.map((p, i) =>
{p}
)}
{t.masters.cta}
{t.masters.today}
{t.masters.booksToday}
{t.masters.growth}
{[ { ti: "10:00", n: "Юлия С.", s: t.masters.services.manicure, st: "active" }, { ti: "11:30", n: "Дарья В.", s: t.masters.services.brows, st: "ok" }, { ti: "13:00", n: "Анна И.", s: t.masters.services.manicure, st: "ok" }, { ti: "15:00", n: "Мария Р.", s: t.masters.services.coloring, st: "ok" } ].map((r, i) =>
{r.ti}
{r.n}
{r.s}
{r.st === "active" && {t.masters.now} }
)}
); } // ============================================================================ // FINAL CTA // ============================================================================ function FinalCTA({ t }) { const isMobile = useIsMobile(); const [ref, inView] = useReveal(0.2); return (

{t.final.titleA}
{t.final.titleB}

{t.final.sub}

{t.final.cta1} {t.final.cta2}
{t.final.copyright}
); } // ============================================================================ // App // ============================================================================ function App() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const [lang, setLang] = useLang(); const t = I18N[lang]; const isMobile = useIsMobile(); const containerRef = useRef(null); useParallaxBG(containerRef.current); useEffect(() => { document.documentElement.style.setProperty("--ac", tweaks.accent); }, [tweaks]); const accentPresets = [ { v: "#39D1FF", l: "Cyan" }, { v: "#A78BFA", l: "Lilac" }, { v: "#34D399", l: "Mint" }, { v: "#F59E0B", l: "Amber" }, { v: "#FF6B9D", l: "Rose" } ]; return (
); } ReactDOM.createRoot(document.getElementById("root")).render();