'use client';

import { motion } from 'framer-motion';

interface AbstractTrenchProps {
  className?: string;
  invert?: boolean;
}

/**
 * AbstractTrench
 * 
 * Visualizes open trench construction (Offene Bauweise / Graben).
 * A sharp, geometric profile representing a cut into the earth.
 * A beam of energy flows through the trench, hugging the sharp corners,
 * fading in and out at the horizontal edges.
 * Purely abstract, architectural styling.
 */
export function AbstractTrench({ className = '', invert = false }: AbstractTrenchProps) {
  const color = invert ? 'rgba(10, 61, 40, 0.6)' : 'rgba(14, 122, 92, 0.6)';
  const glowColor = invert ? 'rgba(10, 61, 40, 1)' : 'rgba(20, 184, 138, 1)';
  
  // Geometric trench path: straight, 45-deg drop, straight bottom, 45-deg rise, straight
  const pathD = "M -100 50 L 300 50 L 350 200 L 650 200 L 700 50 L 1100 50";
  // Length of this polyline is approx 1260
  const pathLength = 1260;
  const beamLength = 250;

  return (
    <svg 
      viewBox="0 0 1000 300" 
      preserveAspectRatio="none"
      className={`absolute pointer-events-none select-none w-full ${className}`}
      aria-hidden="true"
    >
      {/* Subtle track background */}
      <path 
        d={pathD} 
        stroke={color} 
        strokeWidth="1" 
        fill="none" 
        strokeLinejoin="round"
        opacity={0.15} 
      />
      
      {/* Moving Energy Beam */}
      <motion.path
        d={pathD}
        stroke={glowColor}
        strokeWidth="2"
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
        // Dasharray: beam length, then gap for the rest of the path
        strokeDasharray={`${beamLength} ${pathLength}`}
        animate={{
          strokeDashoffset: [pathLength, -beamLength],
          opacity: [0, 1, 1, 0]
        }}
        transition={{
          duration: 7.5,
          ease: "linear",
          repeat: Infinity,
          times: [0, 0.15, 0.85, 1], // Syncs with the offset to fade exactly at edges
          delay: 1.5 // Offset from AbstractBore if used together
        }}
      />
    </svg>
  );
}