/* @component-map
 * App — Main container, renders rainbow scene with hello world message
 * @end-component-map */

function App() {
  return (
    <div className="scene">
      <svg className="rainbow-svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMax meet" xmlns="http://www.w3.org/2000/svg">
        {/* Main rainbow */}
        <path d="M -40 600 A 440 440 0 0 1 840 600" fill="none" stroke="var(--rainbow-red)" strokeWidth="26" opacity="0.85"/>
        <path d="M -14 600 A 414 414 0 0 1 814 600" fill="none" stroke="var(--rainbow-orange)" strokeWidth="26" opacity="0.85"/>
        <path d="M 12 600 A 388 388 0 0 1 788 600" fill="none" stroke="var(--rainbow-yellow)" strokeWidth="26" opacity="0.85"/>
        <path d="M 38 600 A 362 362 0 0 1 762 600" fill="none" stroke="var(--rainbow-green)" strokeWidth="26" opacity="0.85"/>
        <path d="M 64 600 A 336 336 0 0 1 736 600" fill="none" stroke="var(--rainbow-blue)" strokeWidth="26" opacity="0.85"/>
        <path d="M 90 600 A 310 310 0 0 1 710 600" fill="none" stroke="var(--rainbow-purple)" strokeWidth="26" opacity="0.85"/>
        <path d="M 116 600 A 284 284 0 0 1 684 600" fill="none" stroke="var(--rainbow-pink)" strokeWidth="26" opacity="0.85"/>
        {/* Second small rainbow */}
        <path d="M 480 600 A 180 180 0 0 1 840 600" fill="none" stroke="var(--rainbow-red)" strokeWidth="11" opacity="0.4"/>
        <path d="M 491 600 A 169 169 0 0 1 829 600" fill="none" stroke="var(--rainbow-orange)" strokeWidth="11" opacity="0.4"/>
        <path d="M 502 600 A 158 158 0 0 1 818 600" fill="none" stroke="var(--rainbow-yellow)" strokeWidth="11" opacity="0.4"/>
        <path d="M 513 600 A 147 147 0 0 1 807 600" fill="none" stroke="var(--rainbow-green)" strokeWidth="11" opacity="0.4"/>
        <path d="M 524 600 A 136 136 0 0 1 796 600" fill="none" stroke="var(--rainbow-blue)" strokeWidth="11" opacity="0.4"/>
        <path d="M 535 600 A 125 125 0 0 1 785 600" fill="none" stroke="var(--rainbow-purple)" strokeWidth="11" opacity="0.4"/>
        {/* Clouds left */}
        <g opacity="0.9">
          <ellipse cx="130" cy="90" rx="65" ry="38" fill="var(--cloud)"/>
          <ellipse cx="175" cy="74" rx="50" ry="33" fill="var(--cloud)"/>
          <ellipse cx="88" cy="100" rx="42" ry="26" fill="var(--cloud)"/>
        </g>
        {/* Clouds right */}
        <g opacity="0.85">
          <ellipse cx="630" cy="70" rx="60" ry="34" fill="var(--cloud)"/>
          <ellipse cx="678" cy="55" rx="46" ry="29" fill="var(--cloud)"/>
          <ellipse cx="590" cy="80" rx="40" ry="24" fill="var(--cloud)"/>
        </g>
        {/* Sparkles */}
        <circle cx="200" cy="160" r="5" fill="var(--cloud)" opacity="0.9"><animate attributeName="opacity" values="0.9;0.15;0.9" dur="1.8s" repeatCount="indefinite"/></circle>
        <circle cx="590" cy="130" r="4" fill="var(--cloud)" opacity="0.8"><animate attributeName="opacity" values="0.8;0.1;0.8" dur="2.3s" repeatCount="indefinite"/></circle>
        <circle cx="400" cy="90" r="6" fill="var(--cloud)" opacity="0.7"><animate attributeName="opacity" values="0.7;0.1;0.7" dur="1.5s" repeatCount="indefinite"/></circle>
        <circle cx="320" cy="220" r="4" fill="var(--sparkle)" opacity="0.9"><animate attributeName="opacity" values="0.9;0.2;0.9" dur="2.1s" repeatCount="indefinite"/></circle>
        <circle cx="500" cy="180" r="5" fill="var(--sparkle)" opacity="0.8"><animate attributeName="opacity" values="0.8;0.15;0.8" dur="1.9s" repeatCount="indefinite"/></circle>
        <circle cx="680" cy="200" r="3" fill="var(--cloud)" opacity="0.7"><animate attributeName="opacity" values="0.7;0.1;0.7" dur="2.5s" repeatCount="indefinite"/></circle>
        <circle cx="120" cy="240" r="4" fill="var(--sparkle)" opacity="0.8"><animate attributeName="opacity" values="0.8;0.15;0.8" dur="2.0s" repeatCount="indefinite"/></circle>
      </svg>
      <div className="hello-text">
        <h1>Hello, World! 🌈</h1>
        <p>somewhere over the rainbow...</p>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);