/* eslint-disable */ // Shared helpers: theme, motion utils, icons, magnetic, tilt, reveal, orbs, grid const { useState, useEffect, useRef, useLayoutEffect, useCallback, useMemo } = React; /* =============== THEME =============== */ function useTheme() { const [theme, setTheme] = useState(() => { try { return localStorage.getItem('seo.theme') || 'dark'; } catch { return 'dark'; } }); useEffect(() => { document.documentElement.setAttribute('data-theme', theme); try { localStorage.setItem('seo.theme', theme); } catch {} }, [theme]); return [theme, setTheme]; } function ThemeToggle({ theme, setTheme }) { const on = theme === 'dark'; return ( ); } /* =============== ICONS (hand-tuned Lucide-style) =============== */ const Icon = ({ name, size=16, stroke=2, ...p }) => { const s = { width:size, height:size, stroke:'currentColor', fill:'none', strokeWidth:stroke, strokeLinecap:'round', strokeLinejoin:'round', ...p }; const paths = { search: <>, trending: <>, layers: <>, sparkle: <>, bolt: <>, target: <>, chart: <>, grid: <>, user: <>, settings: <>, folder: <>, list: <>, zap: <>, globe: <>, key: <>, calendar: <>, wallet: <>, users: <>, plus: <>, check: <>, arrow: <>, chevron: <>, chevronDown: <>, close: <>, play: <>, menu: <>, clock: <>, bell: <>, eye: <>, link: <>, upload: <>, download: <>, filter: <>, copy: <>, external: <>, robot: <>, flame: <>, ai: <>, book: <>, tool: <>, dashboard: <>, star: <>, shield: <>, paw: <>, logo: <>, code: <>, alert: <>, monitor: <>, phone: <>, x: <>, }; return {paths[name] || null}; }; /* =============== MOTION: magnetic, tilt, reveal, typewriter, counter =============== */ function useMagnetic(strength = 24) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; let raf; const onMove = (e) => { const r = el.getBoundingClientRect(); const x = e.clientX - (r.left + r.width/2); const y = e.clientY - (r.top + r.height/2); cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { el.style.transform = `translate(${x/strength}px, ${y/strength}px)`; }); }; const onLeave = () => { el.style.transform = ''; }; el.addEventListener('mousemove', onMove); el.addEventListener('mouseleave', onLeave); return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); cancelAnimationFrame(raf); }; }, [strength]); return ref; } function useTilt(max = 10) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width - 0.5; const py = (e.clientY - r.top) / r.height - 0.5; el.style.transform = `perspective(800px) rotateX(${-py*max}deg) rotateY(${px*max}deg) translateZ(0)`; el.style.setProperty('--mx', `${(e.clientX - r.left)}px`); el.style.setProperty('--my', `${(e.clientY - r.top)}px`); }; const onLeave = () => { el.style.transform = ''; }; el.addEventListener('mousemove', onMove); el.addEventListener('mouseleave', onLeave); return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); }; }, [max]); return ref; } function useReveal() { useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.15 }); document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el)); return () => io.disconnect(); }); } function Typewriter({ phrases, speed = 50, hold = 1500 }) { const [text, setText] = useState(''); const [i, setI] = useState(0); const [dir, setDir] = useState(1); // 1 typing, -1 deleting useEffect(() => { const target = phrases[i % phrases.length]; let t; if (dir === 1) { if (text.length < target.length) t = setTimeout(() => setText(target.slice(0, text.length+1)), speed); else t = setTimeout(() => setDir(-1), hold); } else { if (text.length > 0) t = setTimeout(() => setText(target.slice(0, text.length-1)), speed/2); else { setDir(1); setI(i+1); } } return () => clearTimeout(t); }, [text, dir, i, phrases, speed, hold]); return {text}│; } function Counter({ to, duration=1400, suffix='', fmt }) { const [n, setN] = useState(0); const ref = useRef(null); const started = useRef(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting && !started.current) { started.current = true; const t0 = performance.now(); const tick = (now) => { const p = Math.min(1, (now - t0) / duration); const eased = 1 - Math.pow(1-p, 3); setN(to * eased); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); } }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [to, duration]); const v = fmt ? fmt(n) : Math.round(n).toLocaleString('ru-RU'); return {v}{suffix}; } /* =============== BACKGROUND LAYERS =============== */ function Orbs({ variant='hero' }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); const x = (e.clientX - r.left - r.width/2) / r.width; const y = (e.clientY - r.top - r.height/2) / r.height; el.style.setProperty('--px', x); el.style.setProperty('--py', y); }; window.addEventListener('mousemove', onMove); return () => window.removeEventListener('mousemove', onMove); }, []); const sets = { hero: [ { color:'var(--g-tertiary)', size:520, top:'-10%', left:'-8%', opacity:0.55, speed:40 }, { color:'var(--g-primary)', size:620, top:'30%', left:'55%', opacity:0.45, speed:-55 }, { color:'var(--g-deep)', size:440, top:'60%', left:'15%', opacity:0.5, speed:30 }, { color:'var(--g-secondary)',size:380, top:'5%', left:'70%', opacity:0.5, speed:-35 }, ], sub: [ { color:'var(--g-primary)', size:420, top:'10%', left:'70%', opacity:0.25, speed:30 }, { color:'var(--g-tertiary)', size:360, top:'60%', left:'-5%', opacity:0.25, speed:-30 }, ] }; return (
{sets[variant].map((o, idx) => (
))}
); } function ReactiveGrid() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); el.style.setProperty('--mx', `${e.clientX - r.left}px`); el.style.setProperty('--my', `${e.clientY - r.top}px`); }; window.addEventListener('mousemove', onMove); return () => window.removeEventListener('mousemove', onMove); }, []); return (
); } /* =============== MAGNETIC BUTTON WRAPPER =============== */ function Magnetic({ children, strength=24, className='', ...rest }) { const ref = useMagnetic(strength); return {children}; } /* expose */ Object.assign(window, { useTheme, ThemeToggle, Icon, useMagnetic, useTilt, useReveal, Typewriter, Counter, Orbs, ReactiveGrid, Magnetic, });