/* jedai-scene.jsx — drifting clouds + sun for background flavor.
   Exposed as window.JedaiScene. */

(function () {
  function JedaiScene({ motion = 7, showScene = true, theme = "paper" }) {
    if (!showScene) return null;
    const motionLow = motion < 3;

    const Cloud = ({ className }) => (
      <div className={"cloud " + className}>
        <svg viewBox="0 0 200 100">
          <g stroke="#2a2438" strokeWidth="3" strokeLinejoin="round">
            <path d="M50 70c-10 0-18-8-18-18s8-18 18-18c3-12 14-20 26-20s23 8 26 20c10 0 18 8 18 18s-8 18-18 18z"
                  fill="#fff"/>
          </g>
        </svg>
      </div>
    );

    const Sun = () => (
      <div className="sun-bg" style={motionLow ? { animation: "none" } : null}>
        <svg viewBox="0 0 220 220">
          <g stroke="#2a2438" strokeWidth="3" strokeLinejoin="round" strokeLinecap="round">
            <circle cx="110" cy="110" r="48" fill="#ffd84a"/>
            <g>
              <path d="M110 30v30M110 160v30M30 110h30M160 110h30M52 52l21 21M147 147l21 21M52 168l21-21M147 73l21-21"/>
            </g>
          </g>
        </svg>
      </div>
    );

    const Star = ({ style }) => (
      <div className="star-bg" style={style}>
        <svg viewBox="0 0 30 30">
          <path d="M15 3l3 9 9 1-7 6 2 9-7-5-7 5 2-9-7-6 9-1z"
                fill="#ffd84a" stroke="#2a2438" strokeWidth="1.6" strokeLinejoin="round"/>
        </svg>
      </div>
    );

    const Planet = () => (
      <div className="planet-bg">
        <svg viewBox="0 0 90 90">
          <g stroke="#2a2438" strokeWidth="2.5">
            <circle cx="45" cy="45" r="22" fill="#b07cff"/>
            <ellipse cx="45" cy="45" rx="36" ry="8" fill="none"/>
          </g>
        </svg>
      </div>
    );

    return (
      <div className="scene">
        <Sun/>
        <Cloud className="cloud-1"/>
        <Cloud className="cloud-2"/>
        <Cloud className="cloud-3"/>
        <Planet/>
        <Star style={{ top: "12%", left: "30%", width: 22, height: 22 }}/>
        <Star style={{ top: "26%", left: "62%", width: 18, height: 18 }}/>
        <Star style={{ bottom: "30%", left: "8%",  width: 14, height: 14 }}/>
      </div>
    );
  }

  window.JedaiScene = JedaiScene;
})();