// Animated Leipzig canal scene — Karl-Heine-Kanal inspired
// Pure SVG + CSS animations, no external deps
function CanalScene() {
  return (
    <div style={{
      position:"absolute", inset:0, zIndex:0, overflow:"hidden",
      pointerEvents:"none",
    }}>
      <style>{`
        @keyframes boat-drift {
          0%   { transform: translateX(-200px) translateY(0); }
          50%  { transform: translateX(60vw) translateY(-2px); }
          100% { transform: translateX(120vw) translateY(0); }
        }
        @keyframes boat-bob {
          0%, 100% { transform: translateY(0) rotate(-0.5deg); }
          50%      { transform: translateY(-3px) rotate(0.5deg); }
        }
        @keyframes wave-1 {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-200px); }
        }
        @keyframes wave-2 {
          0%   { transform: translateX(0); }
          100% { transform: translateX(200px); }
        }
        @keyframes shimmer {
          0%, 100% { opacity: 0.4; }
          50%      { opacity: 0.9; }
        }
        @keyframes cloud-drift {
          0%   { transform: translateX(-10vw); }
          100% { transform: translateX(110vw); }
        }
        @keyframes ripple {
          0%   { transform: scale(0.8); opacity: 0; }
          30%  { opacity: 0.5; }
          100% { transform: scale(2.2); opacity: 0; }
        }
        @keyframes leaf-fall {
          0%   { transform: translate(0,0) rotate(0deg); opacity: 0; }
          10%  { opacity: 0.6; }
          90%  { opacity: 0.6; }
          100% { transform: translate(40px, 180px) rotate(300deg); opacity: 0; }
        }
        @keyframes bird-fly {
          0%   { transform: translate(0,0); opacity: 0; }
          10%  { opacity: 0.7; }
          90%  { opacity: 0.7; }
          100% { transform: translate(60vw, -40px); opacity: 0; }
        }
        .boat-wrap   { animation: boat-drift 48s linear infinite; }
        .boat-inner  { animation: boat-bob 3.2s ease-in-out infinite; transform-origin: center bottom; }
        .wave-a      { animation: wave-1 22s linear infinite; }
        .wave-b      { animation: wave-2 28s linear infinite; }
        .wave-c      { animation: wave-1 35s linear infinite; }
        .shimmer     { animation: shimmer 4s ease-in-out infinite; }
        .shimmer-2   { animation: shimmer 5.5s ease-in-out infinite 0.8s; }
        .shimmer-3   { animation: shimmer 6.5s ease-in-out infinite 1.6s; }
        .cloud-a     { animation: cloud-drift 90s linear infinite; }
        .cloud-b     { animation: cloud-drift 130s linear infinite 30s; }
        .cloud-c     { animation: cloud-drift 110s linear infinite 60s; }
        .ripple-a    { animation: ripple 4s ease-out infinite; transform-origin: center; }
        .ripple-b    { animation: ripple 4s ease-out infinite 1.3s; transform-origin: center; }
        .ripple-c    { animation: ripple 4s ease-out infinite 2.6s; transform-origin: center; }
        .leaf-a      { animation: leaf-fall 9s linear infinite; }
        .leaf-b      { animation: leaf-fall 11s linear infinite 3s; }
        .bird-a      { animation: bird-fly 25s linear infinite; }
        .bird-b      { animation: bird-fly 32s linear infinite 8s; }
      `}</style>

      <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice"
        style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
        
        <defs>
          {/* Sky — soft morning */}
          <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"   stopColor="#f6efe0"/>
            <stop offset="40%"  stopColor="#ecdfc4"/>
            <stop offset="75%"  stopColor="#d8c79e"/>
            <stop offset="100%" stopColor="#b89a6c"/>
          </linearGradient>
          {/* Water gradient */}
          <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"   stopColor="#3d5774"/>
            <stop offset="40%"  stopColor="#2c4259"/>
            <stop offset="100%" stopColor="#1a2c40"/>
          </linearGradient>
          {/* Sun glow */}
          <radialGradient id="sunglow" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%"   stopColor="rgba(255, 235, 180, 0.9)"/>
            <stop offset="40%"  stopColor="rgba(231, 195, 130, 0.5)"/>
            <stop offset="100%" stopColor="rgba(231, 195, 130, 0)"/>
          </radialGradient>
          {/* Mist over water */}
          <linearGradient id="mist" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%"   stopColor="rgba(246,239,224,0.35)"/>
            <stop offset="100%" stopColor="rgba(246,239,224,0)"/>
          </linearGradient>
          {/* Foreground vignette to keep text readable on the left */}
          <linearGradient id="leftScrim" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"   stopColor="rgba(251,248,242,0.92)"/>
            <stop offset="45%"  stopColor="rgba(251,248,242,0.55)"/>
            <stop offset="75%"  stopColor="rgba(251,248,242,0.0)"/>
          </linearGradient>
        </defs>

        {/* Sky */}
        <rect x="0" y="0" width="1440" height="560" fill="url(#sky)"/>

        {/* Sun */}
        <circle cx="1000" cy="430" r="180" fill="url(#sunglow)" className="shimmer"/>
        <circle cx="1000" cy="430" r="38" fill="rgba(255,238,195,0.85)"/>

        {/* Drifting clouds */}
        <g className="cloud-a" opacity="0.55">
          <ellipse cx="200" cy="180" rx="120" ry="14" fill="#fff"/>
          <ellipse cx="260" cy="172" rx="60"  ry="10" fill="#fff"/>
        </g>
        <g className="cloud-b" opacity="0.45">
          <ellipse cx="400" cy="240" rx="160" ry="16" fill="#fff"/>
          <ellipse cx="470" cy="230" rx="80"  ry="11" fill="#fff"/>
        </g>
        <g className="cloud-c" opacity="0.35">
          <ellipse cx="100" cy="120" rx="90"  ry="10" fill="#fff"/>
        </g>

        {/* Birds */}
        <g className="bird-a" opacity="0.7">
          <path d="M 200 220 q 4 -6 8 0 q 4 -6 8 0" stroke="#3a2d1e" strokeWidth="1.4" fill="none"/>
        </g>
        <g className="bird-b" opacity="0.6">
          <path d="M 150 280 q 4 -5 7 0 q 3 -5 7 0" stroke="#3a2d1e" strokeWidth="1.2" fill="none"/>
        </g>

        {/* Distant tree line on right bank */}
        <path d="M 0 560 Q 50 540 100 555 Q 160 530 220 552 Q 280 540 340 560 Q 400 545 460 558 Q 540 540 600 560 L 600 580 L 0 580 Z" 
          fill="#3a4a3a" opacity="0.65"/>

        {/* Karl-Heine-style arched bridge (background) */}
        <g transform="translate(720, 380)">
          {/* Bridge body */}
          <rect x="0" y="0" width="380" height="60" fill="#7d5a3f"/>
          <rect x="0" y="0" width="380" height="6"  fill="#5e4530"/>
          <rect x="0" y="54" width="380" height="6" fill="#5e4530"/>
          {/* Two arches */}
          <path d="M 40 60 L 40 95 Q 40 130 80 130 L 130 130 Q 170 130 170 95 L 170 60 Z" fill="#1a2c40"/>
          <path d="M 210 60 L 210 95 Q 210 130 250 130 L 300 130 Q 340 130 340 95 L 340 60 Z" fill="#1a2c40"/>
          {/* Arch trim */}
          <path d="M 40 60 L 40 95 Q 40 130 80 130 L 130 130 Q 170 130 170 95 L 170 60" stroke="#9c7855" strokeWidth="2.5" fill="none"/>
          <path d="M 210 60 L 210 95 Q 210 130 250 130 L 300 130 Q 340 130 340 95 L 340 60" stroke="#9c7855" strokeWidth="2.5" fill="none"/>
          {/* Brick texture lines */}
          {[8,16,24,32,40,48].map(y=>(
            <line key={y} x1="0" y1={y} x2="380" y2={y} stroke="rgba(60,40,25,0.18)" strokeWidth="0.5"/>
          ))}
          {/* Railing posts */}
          {[20,80,140,200,260,320,360].map(x=>(
            <rect key={x} x={x} y="-14" width="3" height="14" fill="#5e4530"/>
          ))}
          <line x1="20" y1="-10" x2="363" y2="-10" stroke="#5e4530" strokeWidth="2"/>
        </g>

        {/* Bridge reflection in water (mirrored, blurred) */}
        <g transform="translate(720, 560) scale(1, -0.55)" opacity="0.32">
          <rect x="0" y="-60" width="380" height="60" fill="#7d5a3f"/>
          <path d="M 40 -60 L 40 -95 Q 40 -130 80 -130 L 130 -130 Q 170 -130 170 -95 L 170 -60 Z" fill="#1a2c40"/>
          <path d="M 210 -60 L 210 -95 Q 210 -130 250 -130 L 300 -130 Q 340 -130 340 -95 L 340 -60 Z" fill="#1a2c40"/>
        </g>

        {/* Left bank: trees + bushes silhouette */}
        <path d="M 0 580 Q 50 540 80 545 Q 120 510 160 540 Q 200 520 240 545 L 240 580 Z" 
          fill="#2c3a2c" opacity="0.8"/>
        <path d="M 1100 580 Q 1180 530 1240 555 Q 1320 530 1400 560 L 1440 560 L 1440 580 L 1100 580 Z" 
          fill="#2c3a2c" opacity="0.85"/>

        {/* Water */}
        <rect x="0" y="560" width="1440" height="340" fill="url(#water)"/>

        {/* Mist layer */}
        <rect x="0" y="555" width="1440" height="80" fill="url(#mist)"/>

        {/* Sun reflection on water — vertical shimmer */}
        <g>
          <rect x="980" y="560" width="50" height="280" fill="rgba(255,228,170,0.18)" className="shimmer"/>
          <rect x="990" y="600" width="30" height="240" fill="rgba(255,228,170,0.25)" className="shimmer-2"/>
          <rect x="996" y="640" width="20" height="200" fill="rgba(255,228,170,0.35)" className="shimmer-3"/>
        </g>

        {/* Water wave lines — animated */}
        <g opacity="0.6">
          <g className="wave-a">
            <path d="M -200 620 Q -100 615 0 620 T 200 620 T 400 620 T 600 620 T 800 620 T 1000 620 T 1200 620 T 1400 620 T 1600 620"
              stroke="rgba(220,210,190,0.35)" strokeWidth="0.8" fill="none"/>
            <path d="M -200 660 Q -100 655 0 660 T 200 660 T 400 660 T 600 660 T 800 660 T 1000 660 T 1200 660 T 1400 660 T 1600 660"
              stroke="rgba(220,210,190,0.25)" strokeWidth="0.8" fill="none"/>
          </g>
          <g className="wave-b">
            <path d="M -200 700 Q -100 695 0 700 T 200 700 T 400 700 T 600 700 T 800 700 T 1000 700 T 1200 700 T 1400 700 T 1600 700"
              stroke="rgba(220,210,190,0.3)" strokeWidth="0.8" fill="none"/>
            <path d="M -200 740 Q -100 735 0 740 T 200 740 T 400 740 T 600 740 T 800 740 T 1000 740 T 1200 740 T 1400 740 T 1600 740"
              stroke="rgba(220,210,190,0.2)" strokeWidth="0.8" fill="none"/>
          </g>
          <g className="wave-c">
            <path d="M -200 790 Q -100 785 0 790 T 200 790 T 400 790 T 600 790 T 800 790 T 1000 790 T 1200 790 T 1400 790 T 1600 790"
              stroke="rgba(220,210,190,0.18)" strokeWidth="0.8" fill="none"/>
            <path d="M -200 830 Q -100 825 0 830 T 200 830 T 400 830 T 600 830 T 800 830 T 1000 830 T 1200 830 T 1400 830 T 1600 830"
              stroke="rgba(220,210,190,0.12)" strokeWidth="0.8" fill="none"/>
          </g>
        </g>

        {/* Static ripples (wake) */}
        <g transform="translate(680, 690)">
          <ellipse cx="0" cy="0" rx="30" ry="4" stroke="rgba(220,210,190,0.4)" strokeWidth="0.8" fill="none" className="ripple-a"/>
          <ellipse cx="0" cy="0" rx="30" ry="4" stroke="rgba(220,210,190,0.4)" strokeWidth="0.8" fill="none" className="ripple-b"/>
          <ellipse cx="0" cy="0" rx="30" ry="4" stroke="rgba(220,210,190,0.4)" strokeWidth="0.8" fill="none" className="ripple-c"/>
        </g>

        {/* Drifting boat */}
        <g className="boat-wrap">
          <g className="boat-inner" transform="translate(0, 680)">
            {/* hull */}
            <path d="M -55 0 Q -45 18, -25 20 L 50 20 Q 68 18, 70 0 Z" fill="#3a2d1e" stroke="#1a1208" strokeWidth="1.2"/>
            {/* deck stripe */}
            <path d="M -50 2 L 65 2" stroke="#b8924a" strokeWidth="1.2"/>
            {/* cabin */}
            <rect x="-15" y="-14" width="40" height="14" fill="#f3ecdd" stroke="#3a2d1e" strokeWidth="1"/>
            <rect x="-12" y="-11" width="36" height="6" fill="#1a3a5c" opacity="0.6"/>
            {/* mast */}
            <line x1="-25" y1="-14" x2="-25" y2="-50" stroke="#3a2d1e" strokeWidth="1.5"/>
            <line x1="-25" y1="-50" x2="-29" y2="-50" stroke="#3a2d1e" strokeWidth="1.2"/>
            {/* tiny flag */}
            <path d="M -25 -48 L -36 -45 L -25 -42 Z" fill="#b8924a"/>
            {/* waterline */}
            <line x1="-55" y1="20" x2="70" y2="20" stroke="#b8924a" strokeWidth="0.6" opacity="0.6"/>
            {/* reflection */}
            <path d="M -50 22 Q -40 30, -25 32 L 50 32 Q 65 30, 68 22 Z" fill="#1a2c40" opacity="0.5"/>
          </g>
        </g>

        {/* Falling leaves */}
        <g className="leaf-a" transform="translate(180, 200)">
          <path d="M 0 0 q 3 -4 6 0 q -3 4 -6 0" fill="#b8924a" opacity="0.7"/>
        </g>
        <g className="leaf-b" transform="translate(260, 240)">
          <path d="M 0 0 q 3 -4 6 0 q -3 4 -6 0" fill="#9c7855" opacity="0.6"/>
        </g>

        {/* Left readability scrim */}
        <rect x="0" y="0" width="1440" height="900" fill="url(#leftScrim)"/>
      </svg>
    </div>
  );
}
window.CanalScene = CanalScene;