'use client';

import React from 'react';

export default function ProductsIllustration() {
  return (
    <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none bg-primary">
      <svg
        viewBox="0 0 1000 500"
        className="w-full h-full"
        preserveAspectRatio="xMidYMid slice"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <linearGradient id="scan-beam" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#82ed20" stopOpacity="0" />
            <stop offset="50%" stopColor="#82ed20" stopOpacity="0.5" />
            <stop offset="100%" stopColor="#82ed20" stopOpacity="0" />
          </linearGradient>
        </defs>

        {/* 3D Cable Wireframe Construction */}
        <g transform="translate(100, 250) rotate(-10)">
           
           {/* Inner Core Strands (Twisted) */}
           {[...Array(5)].map((_, i) => (
             <path
               key={`strand-${i}`}
               d={`M 0 ${i*10 - 20} Q 400 ${i*10 - 60} 800 ${i*10 - 20}`}
               stroke="white"
               strokeWidth="2"
               strokeOpacity="0.8"
               fill="none"
             >
               <animate attributeName="d" 
                 values={`M 0 ${i*10 - 20} Q 400 ${i*10 - 60} 800 ${i*10 - 20};
                          M 0 ${i*10 - 20} Q 400 ${i*10 + 20} 800 ${i*10 - 20};
                          M 0 ${i*10 - 20} Q 400 ${i*10 - 60} 800 ${i*10 - 20}`}
                 dur="4s"
                 repeatCount="indefinite"
               />
             </path>
           ))}

           {/* Insulation Layers (Ellipses along the path) */}
           {[...Array(8)].map((_, i) => (
             <ellipse 
               key={`ring-${i}`}
               cx={100 + i * 100} 
               cy="0" 
               rx="40" 
               ry="80" 
               stroke="white" 
               strokeWidth="1" 
               strokeOpacity="0.2"
               fill="none"
             />
           ))}

           {/* Outer Sheath (Top and Bottom Lines) */}
           <path d="M 0 -80 L 800 -80" stroke="white" strokeWidth="1" strokeOpacity="0.3" strokeDasharray="10 5" />
           <path d="M 0 80 L 800 80" stroke="white" strokeWidth="1" strokeOpacity="0.3" strokeDasharray="10 5" />

           {/* Scanning Ring (Animated) */}
           <g>
             <ellipse cx="0" cy="0" rx="50" ry="90" stroke="#82ed20" strokeWidth="2" strokeOpacity="0.8" fill="none">
               <animate attributeName="cx" from="0" to="800" dur="3s" repeatCount="indefinite" />
               <animate attributeName="rx" values="50;45;50" dur="0.5s" repeatCount="indefinite" />
             </ellipse>
             {/* Scan Beam */}
             <rect x="-50" y="-100" width="100" height="200" fill="url(#scan-beam)" opacity="0.3">
                <animate attributeName="x" from="-50" to="750" dur="3s" repeatCount="indefinite" />
             </rect>
           </g>
        </g>

        {/* Floating Data/Tech Elements */}
        <g transform="translate(0, 0)">
           {[...Array(20)].map((_, i) => (
             <rect
               key={`bit-${i}`}
               x={Math.random() * 1000}
               y={Math.random() * 500}
               width={Math.random() * 20 + 5}
               height="2"
               fill="white"
               fillOpacity="0.3"
             >
               <animate attributeName="opacity" values="0;0.5;0" dur={`${Math.random() * 2 + 1}s`} repeatCount="indefinite" />
               <animate attributeName="width" values="5;30;5" dur={`${Math.random() * 2 + 1}s`} repeatCount="indefinite" />
             </rect>
           ))}
        </g>

      </svg>
      <div className="absolute inset-0 bg-gradient-to-r from-primary/80 via-transparent to-primary/80" />
    </div>
  );
}