// Line-illustrated celebration scene for the Thank You page.
// Same visual language as HiFiHero — stroke-only line art, paper background.

function ThankYouArt({ palette }) {
  const ink = palette.ink;
  const accent = palette.accent;
  const accent2 = palette.accent2 || palette.accent;
  const S = { stroke: ink, fill: 'none', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };

  return (
    <svg viewBox="0 0 800 460" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"
      style={{ display: 'block' }}>

      <line x1="0" y1="380" x2="800" y2="380" {...S} opacity="0.3" />

      <g {...S}>
        <path d="M 240 80 L 240 280 L 560 280 L 560 80 Q 560 50 530 50 L 270 50 Q 240 50 240 80 Z" strokeWidth="1.6" />
        <line x1="400" y1="50" x2="400" y2="280" opacity="0.6" />
        <line x1="240" y1="100" x2="560" y2="100" opacity="0.6" />
        <path d="M 290 200 L 290 240 L 360 240 L 360 200" opacity="0.25" />
        <path d="M 440 200 L 440 240 L 510 240 L 510 200" opacity="0.25" />
        <line x1="320" y1="100" x2="320" y2="135" opacity="0.5" />
        <ellipse cx="320" cy="143" rx="10" ry="8" />
        <line x1="320" y1="151" x2="320" y2="160" opacity="0.4" />
        <line x1="480" y1="100" x2="480" y2="120" opacity="0.5" />
        <ellipse cx="480" cy="128" rx="10" ry="8" stroke={accent} />
        <line x1="480" y1="136" x2="480" y2="145" opacity="0.4" stroke={accent} />
      </g>

      <g {...S}>
        <path d="M 60 280 L 740 280 L 760 320 L 40 320 Z" strokeWidth="1.5" />
        <line x1="60" y1="290" x2="740" y2="290" opacity="0.4" />
      </g>

      <g {...S} opacity="0.5">
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <line key={i} x1={140 + i * 100} y1="320" x2={140 + i * 100} y2="380" />
        ))}
      </g>

      <g {...S} transform="translate(180, 270)">
        <g transform="rotate(-3)">
          <rect x="-30" y="-4" width="60" height="8" />
        </g>
        <g transform="translate(2, -4) rotate(2)">
          <rect x="-30" y="-4" width="60" height="8" />
        </g>
        <g transform="translate(-1, -8) rotate(-1)">
          <rect x="-30" y="-4" width="60" height="8" />
        </g>
        <g transform="translate(0, -14)">
          <rect x="-32" y="-6" width="64" height="12" strokeWidth="1.5" />
          <line x1="6" y1="-6" x2="6" y2="6" stroke={accent} strokeWidth="2" />
          <path d="M 0 -6 Q 6 -10 12 -6 Q 6 -8 6 -6" stroke={accent} fill="none" strokeWidth="1.5" />
          <path d="M 12 -6 Q 18 -10 24 -6 Q 18 -8 12 -6" stroke={accent} fill="none" strokeWidth="1.5" />
          <line x1="-26" y1="-2" x2="0" y2="-2" opacity="0.4" />
          <line x1="-26" y1="2" x2="-4" y2="2" opacity="0.4" />
        </g>
      </g>

      <g {...S} transform="translate(400, 250)">
        <path d="M -22 0 Q -22 18 0 20 Q 22 18 22 0" strokeWidth="1.5" />
        <ellipse cx="0" cy="0" rx="22" ry="4" />
        <path d="M -20 0 Q -20 14 0 16 Q 20 14 20 0 Z" fill={accent} stroke="none" opacity="0.3" />
        <ellipse cx="0" cy="0" rx="20" ry="3" fill={accent} stroke="none" opacity="0.5" />
        <line x1="0" y1="20" x2="0" y2="42" />
        <ellipse cx="0" cy="42" rx="14" ry="2.5" />
        <circle cx="-6" cy="6" r="1.2" opacity="0.6" />
        <circle cx="4" cy="2" r="1" opacity="0.5" />
        <circle cx="8" cy="10" r="1.2" opacity="0.5" />
        <circle cx="-4" cy="12" r="1" opacity="0.4" />
        <circle cx="0" cy="-6" r="1" opacity="0.6">
          <animate attributeName="cy" values="-6;-18;-30" dur="3s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.6;0.4;0" dur="3s" repeatCount="indefinite" />
        </circle>
        <circle cx="6" cy="-4" r="1" opacity="0.5">
          <animate attributeName="cy" values="-4;-16;-28" dur="3.5s" repeatCount="indefinite" begin="0.6s" />
          <animate attributeName="opacity" values="0.5;0.3;0" dur="3.5s" repeatCount="indefinite" begin="0.6s" />
        </circle>
      </g>

      <g {...S} transform="translate(580, 268)">
        <line x1="-10" y1="14" x2="-2" y2="-30" strokeWidth="1.4" />
        <path d="M -2 -30 L 0 -34 L 2 -30 L 0 -22 Z" />
        <line x1="0" y1="14" x2="8" y2="-22" strokeWidth="1.4" />
        <ellipse cx="9" cy="-26" rx="5" ry="7" />
        <line x1="6" y1="-32" x2="12" y2="-20" opacity="0.4" />
        <line x1="9" y1="-33" x2="9" y2="-19" opacity="0.4" />
        <line x1="10" y1="14" x2="18" y2="-24" strokeWidth="1.4" />
        <ellipse cx="19" cy="-28" rx="5" ry="7" />
        <path d="M -8 8 Q 4 4 16 8" stroke={accent2} strokeWidth="2" fill="none" />
        <path d="M -10 12 Q 4 16 18 12" stroke={accent2} strokeWidth="2" fill="none" />
        <path d="M 4 6 Q -2 0 -6 4 Q 0 4 4 8" stroke={accent2} strokeWidth="1.5" fill="none" />
        <path d="M 4 6 Q 10 0 14 4 Q 8 4 4 8" stroke={accent2} strokeWidth="1.5" fill="none" />
      </g>

      <g {...S}>
        <path d="M 120 60 Q 130 90 120 120 Q 110 150 130 180 Q 150 210 130 240" stroke={accent} strokeWidth="1.4" fill="none" opacity="0.7">
          <animate attributeName="opacity" values="0.4;0.8;0.4" dur="4s" repeatCount="indefinite" />
        </path>
        <path d="M 680 50 Q 670 80 685 110 Q 700 140 680 170 Q 660 200 680 230" stroke={accent2} strokeWidth="1.4" fill="none" opacity="0.7">
          <animate attributeName="opacity" values="0.5;0.9;0.5" dur="4.5s" repeatCount="indefinite" />
        </path>

        <g>
          <rect x="160" y="80" width="6" height="2" fill={accent} stroke="none" opacity="0.8" transform="rotate(20 163 81)">
            <animateTransform attributeName="transform" type="translate" from="0 0" to="4 200" dur="6s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0;0.8;0" dur="6s" repeatCount="indefinite" />
          </rect>
          <rect x="220" y="40" width="2" height="6" fill={accent2} stroke="none" opacity="0.8">
            <animateTransform attributeName="transform" type="translate" from="0 0" to="-3 240" dur="7s" repeatCount="indefinite" begin="0.8s" />
            <animate attributeName="opacity" values="0;0.9;0" dur="7s" repeatCount="indefinite" begin="0.8s" />
          </rect>
          <rect x="320" y="60" width="6" height="2" fill={accent} stroke="none" opacity="0.6" transform="rotate(45 323 61)">
            <animateTransform attributeName="transform" type="translate" from="0 0" to="2 220" dur="5.5s" repeatCount="indefinite" begin="1.2s" />
            <animate attributeName="opacity" values="0;0.7;0" dur="5.5s" repeatCount="indefinite" begin="1.2s" />
          </rect>
          <rect x="500" y="40" width="2" height="6" fill={accent} stroke="none" opacity="0.7">
            <animateTransform attributeName="transform" type="translate" from="0 0" to="-4 230" dur="6.5s" repeatCount="indefinite" begin="0.4s" />
            <animate attributeName="opacity" values="0;0.8;0" dur="6.5s" repeatCount="indefinite" begin="0.4s" />
          </rect>
          <rect x="600" y="70" width="5" height="2" fill={accent2} stroke="none" opacity="0.7" transform="rotate(-30 602 71)">
            <animateTransform attributeName="transform" type="translate" from="0 0" to="3 200" dur="6s" repeatCount="indefinite" begin="1.6s" />
            <animate attributeName="opacity" values="0;0.7;0" dur="6s" repeatCount="indefinite" begin="1.6s" />
          </rect>
          <circle cx="380" cy="50" r="2" fill={accent2} stroke="none" opacity="0.6">
            <animateTransform attributeName="transform" type="translate" from="0 0" to="-2 220" dur="7s" repeatCount="indefinite" begin="2s" />
            <animate attributeName="opacity" values="0;0.8;0" dur="7s" repeatCount="indefinite" begin="2s" />
          </circle>
          <circle cx="450" cy="80" r="1.6" fill={accent} stroke="none" opacity="0.6">
            <animateTransform attributeName="transform" type="translate" from="0 0" to="3 210" dur="5.5s" repeatCount="indefinite" begin="0.2s" />
            <animate attributeName="opacity" values="0;0.7;0" dur="5.5s" repeatCount="indefinite" begin="0.2s" />
          </circle>
        </g>
      </g>

      <g stroke={accent} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round">
        <path d="M 690 110 L 710 130 L 750 90" opacity="0.8" />
      </g>

    </svg>
  );
}

Object.assign(window, { ThankYouArt });