"use client"

import { motion, useScroll, useTransform } from "framer-motion";
import { useState, useEffect } from "react";

export function TrainAnimation() {
  const { scrollYProgress } = useScroll();
  const [windowHeight, setWindowHeight] = useState(600);

  useEffect(() => {
    setWindowHeight(window.innerHeight);
    const handleResize = () => setWindowHeight(window.innerHeight);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // Calculate train position within viewport (0 to window height)
  // Train stays on screen and moves from top to bottom of viewport as user scrolls
  const trainY = useTransform(scrollYProgress, [0, 1], [100, windowHeight - 200]);

  return (
    <div className="fixed inset-0 pointer-events-none z-[6] overflow-hidden">
      <motion.div
        className="absolute left-[80px]"
        style={{ 
          y: trainY,
          x: -12 // Center on the track (80px - 12px offset)
        }}
      >
        {/* Train SVG - Vertical orientation */}
        <svg width="50" height="200" viewBox="0 0 50 200">
          {/* Coach 1 */}
          <g id="coach1" transform="translate(0, 0)">
            {/* Coach body - Green with white stripe */}
            <rect
              x="13"
              y="0"
              width="24"
              height="40"
              fill="#006A4E"
              stroke="#003D2E"
              strokeWidth="1.5"
              rx="2"
            />
            <rect x="20" y="0" width="4" height="40" fill="white" opacity="0.8" />
            
            {/* Windows */}
            <rect x="27" y="5" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="27" y="14" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="27" y="23" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="27" y="32" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            
            {/* Wheels */}
            <circle cx="13" cy="8" r="4" fill="#333" stroke="#000" strokeWidth="1" />
            <circle cx="13" cy="32" r="4" fill="#333" stroke="#000" strokeWidth="1" />
          </g>

          {/* Coach 2 */}
          <g id="coach2" transform="translate(0, 50)">
            {/* Coach body - Green with red stripe */}
            <rect
              x="13"
              y="0"
              width="24"
              height="40"
              fill="#006A4E"
              stroke="#003D2E"
              strokeWidth="1.5"
              rx="2"
            />
            <rect x="13" y="0" width="4" height="40" fill="#F42A41" opacity="0.9" />
            
            {/* Windows */}
            <rect x="21" y="5" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="29" y="5" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="21" y="14" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="29" y="14" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="21" y="23" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="29" y="23" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="21" y="32" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            <rect x="29" y="32" width="6" height="6" fill="white" opacity="0.9" rx="1" />
            
            {/* Wheels */}
            <circle cx="13" cy="8" r="4" fill="#333" stroke="#000" strokeWidth="1" />
            <circle cx="13" cy="32" r="4" fill="#333" stroke="#000" strokeWidth="1" />
          </g>

          {/* Locomotive */}
          <g id="locomotive" transform="translate(0, 100)">
            {/* Locomotive body - Green */}
            <rect
              x="13"
              y="0"
              width="24"
              height="50"
              fill="#004a99"
              stroke="#fcd116"
              strokeWidth="1.5"
              rx="2"
            />
            
            {/* Locomotive front - Red stripe */}
            <rect
              x="13"
              y="45"
              width="24"
              height="5"
              fill="#F42A41"
            />
            
            {/* Locomotive windows - White */}
            <rect x="27" y="10" width="6" height="8" fill="white" opacity="0.9" rx="1" />
  
            
            {/* Wheels */}
            <circle cx="13" cy="10" r="4" fill="#333" stroke="#000" strokeWidth="1" />
            <circle cx="13" cy="25" r="4" fill="#333" stroke="#000" strokeWidth="1" />
            <circle cx="13" cy="40" r="4" fill="#333" stroke="#000" strokeWidth="1" />
            
            {/* Chimney on the side */}
            <rect x="37" y="43" width="6" height="4" fill="#8B4513" />
            
            {/* Smoke puffs - coming from the side */}
            <motion.circle
              cx="45"
              cy="45"
              r="3"
              fill="white"
              opacity="0.6"
              animate={{
                cx: [45, 55, 65],
                opacity: [0.6, 0.3, 0],
                scale: [1, 1.5, 2]
              }}
              transition={{
                duration: 2,
                repeat: Infinity,
                ease: "easeOut"
              }}
            />
            <motion.circle
              cx="50"
              cy="47"
              r="3"
              fill="white"
              opacity="0.5"
              animate={{
                cx: [50, 60, 70],
                opacity: [0.5, 0.25, 0],
                scale: [1, 1.5, 2]
              }}
              transition={{
                duration: 2,
                repeat: Infinity,
                ease: "easeOut",
                delay: 0.5
              }}
            />
          </g>
        </svg>
      </motion.div>
    </div>
  );
}