'use client';

import React, { useEffect, useState } from 'react';
import { motion, useScroll, useSpring, useTransform } from 'framer-motion';

export function TrenchLines() {
  const { scrollYProgress } = useScroll();
  
  // Apply a spring to make the scroll movement feel heavier, industrial
  const smoothProgress = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

  // Map progress to vertical position
  const yPosition = useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']);
  const yPositionMarker = useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']);

  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden hidden sm:block">
      {/* Left Trench Line */}
      <div className="absolute top-0 bottom-0 left-6 lg:left-12 w-[1px] bg-white/[0.03]">
        <motion.div 
          className="absolute top-0 left-[-1px] w-[3px] h-[15vh] bg-gradient-to-b from-transparent via-primary to-transparent shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
          style={{ y: yPosition }}
        />
        {/* Subtle digging pulse marker */}
        <motion.div
          className="absolute left-[-2px] w-[5px] h-[5px] bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,1)]"
          style={{ y: yPositionMarker, marginTop: '7.5vh' }}
        />
      </div>

      {/* Right Trench Line */}
      <div className="absolute top-0 bottom-0 right-6 lg:right-12 w-[1px] bg-white/[0.03]">
        <motion.div 
          className="absolute top-0 right-[-1px] w-[3px] h-[15vh] bg-gradient-to-b from-transparent via-primary to-transparent shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
          style={{ y: yPosition }}
        />
        {/* Subtle digging pulse marker */}
        <motion.div
          className="absolute right-[-2px] w-[5px] h-[5px] bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,1)]"
          style={{ y: yPositionMarker, marginTop: '7.5vh' }}
        />
      </div>
    </div>
  );
}