/* global React */
const { useMemo } = React;

function FloatingShapes() {
  // Stars distributed across viewport
  const stars = useMemo(() => {
    return Array.from({ length: 60 }).map((_, i) => ({
      x: Math.random() * 100,
      y: Math.random() * 100,
      d: Math.random() * 4,
      s: 0.6 + Math.random() * 1.4,
    }));
  }, []);
  return (
    <>
      <div className="shapes" aria-hidden="true">
        <div className="shape s1" />
        <div className="shape s2" />
        <div className="shape s3" />
        <div className="shape s4" />
      </div>
      <div className="stars" aria-hidden="true">
        {stars.map((s, i) => (
          <span key={i} className="star" style={{
            left: `${s.x}%`,
            top: `${s.y}%`,
            transform: `scale(${s.s})`,
            animationDelay: `${s.d}s`
          }} />
        ))}
      </div>
    </>
  );
}

function SunRays() {
  return (
    <div className="rays" aria-hidden="true">
      <svg viewBox="0 0 800 800">
        <defs>
          <radialGradient id="rayGrad">
            <stop offset="0%" stopColor="rgba(255,194,61,0.4)" />
            <stop offset="100%" stopColor="rgba(255,194,61,0)" />
          </radialGradient>
        </defs>
        {Array.from({ length: 24 }).map((_, i) => {
          const a = (i * Math.PI * 2) / 24;
          const x = 400 + Math.cos(a) * 380;
          const y = 400 + Math.sin(a) * 380;
          return (
            <line key={i}
              x1="400" y1="400" x2={x} y2={y}
              stroke="rgba(255, 220, 100, 0.18)"
              strokeWidth="2"
            />
          );
        })}
        <circle cx="400" cy="400" r="200" fill="url(#rayGrad)" />
      </svg>
    </div>
  );
}

Object.assign(window, { FloatingShapes, SunRays });