/* planner-scene.jsx — animated background: sky, clouds, sun, floating shapes */

function PlannerScene({ motion, showWeather, theme }) {
  if (!showWeather) return null;

  return (
    <div className="scene" aria-hidden="true">
      {/* Big sun behind everything */}
      <div className="sun-bg">
        <svg viewBox="0 0 220 220">
          <g stroke="#2a2438" strokeWidth="3" strokeLinecap="round">
            <circle cx="110" cy="110" r="56" fill={theme === "chalkboard" ? "#fff7e0" : "#ffd84a"} opacity="0.55"/>
            <g opacity="0.45">
              {Array.from({length:12}).map((_,i) => {
                const a = (i / 12) * Math.PI * 2;
                const x1 = 110 + Math.cos(a) * 72;
                const y1 = 110 + Math.sin(a) * 72;
                const x2 = 110 + Math.cos(a) * 96;
                const y2 = 110 + Math.sin(a) * 96;
                return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#2a2438" strokeWidth="3"/>;
              })}
            </g>
          </g>
        </svg>
      </div>

      {/* Drifting clouds */}
      <div className="cloud cloud-1">
        <svg viewBox="0 0 160 80">
          <path d="M30 60c-10 0-18-7-18-16s8-16 18-16c3-10 12-18 24-18s21 8 24 18c10 0 18 7 18 16s-8 16-18 16Z" fill="#fff" stroke="#2a2438" strokeWidth="3" strokeLinejoin="round"/>
        </svg>
      </div>
      <div className="cloud cloud-2">
        <svg viewBox="0 0 160 80">
          <path d="M30 60c-10 0-18-7-18-16s8-16 18-16c3-10 12-18 24-18s21 8 24 18c10 0 18 7 18 16s-8 16-18 16Z" fill="#fff" stroke="#2a2438" strokeWidth="3" strokeLinejoin="round" opacity="0.85"/>
        </svg>
      </div>
      <div className="cloud cloud-3">
        <svg viewBox="0 0 160 80">
          <path d="M30 60c-10 0-18-7-18-16s8-16 18-16c3-10 12-18 24-18s21 8 24 18c10 0 18 7 18 16s-8 16-18 16Z" fill="#fff" stroke="#2a2438" strokeWidth="3" strokeLinejoin="round" opacity="0.78"/>
        </svg>
      </div>

      {/* Bouncing stars / shapes */}
      <div className="star-bg" style={{ top: "12%", left: "6%", width: 38, height: 38, animationDelay: "0s" }}>
        <Sticker.sparkle/>
      </div>
      <div className="star-bg" style={{ top: "68%", left: "3%", width: 32, height: 32, animationDelay: "1s" }}>
        <Sticker.star/>
      </div>
      <div className="star-bg" style={{ top: "84%", right: "12%", width: 30, height: 30, animationDelay: "2s" }}>
        <Sticker.sparkle/>
      </div>
      <div className="star-bg" style={{ top: "30%", right: "3%", width: 28, height: 28, animationDelay: "0.5s" }}>
        <Sticker.star/>
      </div>

      {/* Bottom-right planet */}
      <div className="planet-bg">
        <svg viewBox="0 0 90 90">
          <ellipse cx="45" cy="50" rx="38" ry="10" fill="none" stroke="#2a2438" strokeWidth="3" transform="rotate(-18 45 50)"/>
          <circle cx="45" cy="45" r="22" fill="#ff7aa9" stroke="#2a2438" strokeWidth="3"/>
          <circle cx="38" cy="40" r="3" fill="#2a2438"/>
          <circle cx="52" cy="48" r="2" fill="#2a2438"/>
        </svg>
      </div>
    </div>
  );
}

window.PlannerScene = PlannerScene;