import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 450; const VIEW_HEIGHT = 800; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT * 0.4; // Sun positioned slightly higher for vertical layout export const SolarSystemVertical = () => { const [tick, setTick] = useState(0); const requestRef = useRef(); // Performance optimization: Generate static data once const staticData = useMemo(() => { // Background particles (darker for white background) const particles = Array.from({ length: 60 }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.4 + 0.1, speedY: Math.random() * 0.2 + 0.1, })); // Tech rings configuration (Darker colors for visibility on white) const rings = [ { r: 140, width: 1, dash: '4 4', speed: 0.1, color: '#94a3b8', opacity: 0.5 }, { r: 160, width: 1.5, dash: '20 60', speed: -0.15, color: '#64748b', opacity: 0.6 }, { r: 190, width: 1, dash: '100 100', speed: 0.05, color: '#ea580c', opacity: 0.3 }, // Orange accent { r: 210, width: 3, dash: '2 80', speed: 0.2, color: '#f97316', opacity: 0.5 }, // Data packets { r: 280, width: 0.5, dash: '400 400', speed: -0.02, color: '#334155', opacity: 0.2 }, ]; // Orbiting satellites/debris const debris = Array.from({ length: 8 }, (_, i) => ({ radius: 110 + Math.random() * 150, size: Math.random() * 2 + 2, speed: (Math.random() * 0.3 + 0.1) * (i % 2 === 0 ? 1 : -1), offset: Math.random() * Math.PI * 2, color: i % 2 === 0 ? '#ea580c' : '#475569' })); // Vertical Grid Lines const gridLines = Array.from({ length: 5 }, (_, i) => ({ x: (VIEW_WIDTH / 6) * (i + 1), opacity: 0.1 })); return { particles, rings, debris, gridLines }; }, []); useEffect(() => { const animate = () => { setTick(prev => prev + 1); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // Dynamic calculations const t = tick * 0.01; const sunPulse = Math.sin(t * 3) * 3; const sunRadius = 85 + sunPulse; // Simulated data values const tempValue = (5778 + Math.sin(t) * 15).toFixed(0); const radiationValue = (12.5 + Math.cos(t * 0.5) * 0.4).toFixed(2); return ( ); };