// radial-orbital-services.jsx — services as an orbiting timeline of nodes. // Adapted from radial-orbital-timeline. Center hub + 7 service nodes orbiting, // auto-rotates, click a node to open its detail card. No deps — inline SVG icons. /* ----- Service icon set ------------------------------------------------- */ const SVC_ICONS = { smm: , content: , production: , ads: , visual: , brand: , sales: }; /* ----- Component -------------------------------------------------------- */ function RadialOrbitalServices({ services, compact }) { const [angle, setAngle] = React.useState(0); const [active, setActive] = React.useState(null); const [autoRotate, setAutoRotate] = React.useState(true); const [hubHover, setHubHover] = React.useState(false); const containerRef = React.useRef(null); const orbitRef = React.useRef(null); const total = services.length; // Geometry (compact = phone-sized) const RADIUS = compact ? 122 : 330; const HUB = compact ? 96 : 132; const NODE = compact ? 56 : 72; const HEIGHT = compact ? 480 : 880; React.useEffect(() => { if (!autoRotate || hubHover) return; const t = setInterval(() => { setAngle((a) => (a + 0.25) % 360); }, 50); return () => clearInterval(t); }, [autoRotate, hubHover]); const toggle = (id) => { if (active === id) { setActive(null); setAutoRotate(true); } else { setActive(id); setAutoRotate(false); // Center on the clicked node by rotating so it lands at the bottom // (270°) — gives plenty of room above for the expanded card. const idx = services.findIndex((s) => s.num === id); const target = idx / total * 360; setAngle(270 - target); } }; const onBgClick = (e) => { if (e.target === containerRef.current || e.target === orbitRef.current) { setActive(null); setAutoRotate(true); } }; // Geometry return (
{/* Orbit ring */}
{/* Connecting lines (revealed on hub hover) */} {services.map((s, i) => { const a = (i / total * 360 + angle) % 360; return (
); })} {/* Center hub */}
setHubHover(true)} onMouseLeave={() => setHubHover(false)} onClick={(e) => { e.stopPropagation(); setActive(null); setAutoRotate(true); }} data-cursor-hover data-cursor-label={active ? 'СБРОС' : 'ВСЕ'} style={{ position: 'absolute', width: HUB, height: HUB, borderRadius: '50%', background: 'linear-gradient(135deg, #5b8bff 0%, #3b6cff 60%, #1a3aa8 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 5, cursor: 'pointer', transform: hubHover ? 'scale(1.06)' : 'scale(1)', transition: 'transform .3s cubic-bezier(.2,.7,.2,1)', boxShadow: hubHover ? '0 0 60px rgba(91,139,255,0.7), 0 0 120px rgba(91,139,255,0.35)' : '0 0 40px rgba(91,139,255,0.45), 0 0 80px rgba(91,139,255,0.25)' }}> {/* Pinging rings */}
услуги
{/* Service nodes */} {services.map((s, i) => { const a = (i / total * 360 + angle) % 360; const rad = a * Math.PI / 180; const x = RADIUS * Math.cos(rad); const y = RADIUS * Math.sin(rad); // Pseudo-depth — closer to camera (cos < 0 is "front") = bigger / more opaque const depth = (1 + Math.sin(rad)) / 2; // 0..1, 1 = front const opacity = 0.45 + depth * 0.55; const z = Math.round(100 + 50 * Math.cos(rad)); const isActive = active === s.num; const Icon = SVC_ICONS[s.iconKey] || SVC_ICONS.smm; return (
{/* Halo */} {/* Node button */} {/* Label — on compact, only the active node's label shows (avoids overlap) */} {(!compact || isActive) &&
{s.num} {s.title}
} {/* Expanded card */} {isActive &&
e.stopPropagation()} style={{ position: 'absolute', top: compact ? NODE + 26 : 128, left: '50%', transform: 'translateX(-50%)', width: compact ? 268 : 340, background: 'rgba(12,14,18,0.96)', border: '1px solid rgba(91,139,255,0.4)', borderRadius: 18, padding: '20px 22px 22px', boxShadow: '0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset', animation: 'orb-card-in .35s cubic-bezier(.2,.7,.2,1)', zIndex: 300 }}>
{s.tag || 'услуга'} {s.num}

{s.title}

{s.desc}

{s.includes && <>
что внутри
    {s.includes.map((it) =>
  • {it}
    • )}
}
}
); })}
{/* Floating hint */}
{active ? 'тап по фону, чтобы закрыть' : (compact ? '· тап по точке — раскрыть ·' : '· наведи на центр — увидишь все · клик по точке — раскрыть ·')}
); } window.RadialOrbitalServices = RadialOrbitalServices; window.SVC_ICONS = SVC_ICONS; /* ----- Mobile services accordion (orbital doesn't fit phones) ----------- */ function ServicesAccordion({ services }) { const [open, setOpen] = React.useState(0); return (
{services.map((s, i) => { const Icon = SVC_ICONS[s.iconKey] || SVC_ICONS.smm; const isOpen = open === i; return (
{isOpen &&

{s.desc}

{s.includes &&
    {s.includes.map((it) =>
  • {it}
    • )}
}
}
); })}
); } window.ServicesAccordion = ServicesAccordion;