'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { useLocale } from 'next-intl';

export function DataGridPulse() {
  const locale = useLocale();
  return (
    <div className="relative w-full py-32 bg-[#050B14] overflow-hidden flex flex-col items-center border-y border-primary/20 -mx-[50vw] px-[50vw] mb-16">
      
      {/* Blueprint grid background */}
      <div 
        className="absolute inset-0 opacity-20 pointer-events-none" 
        style={{ 
          backgroundImage: 'linear-gradient(#82ED20 1px, transparent 1px), linear-gradient(90deg, #82ED20 1px, transparent 1px)', 
          backgroundSize: '40px 40px' 
        }} 
      />

      {/* Pulsing horizontal lines (Data Flow) */}
      <motion.div 
        animate={{ x: ["-100%", "100%"] }}
        transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
        className="absolute top-1/3 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent opacity-50 blur-[2px]"
      />
      <motion.div 
        animate={{ x: ["100%", "-100%"] }}
        transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
        className="absolute top-2/3 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-white to-transparent opacity-30 blur-[2px]"
      />

      <div className="relative z-10 w-full max-w-4xl mx-auto flex flex-col items-center text-center">
        <h3 className="text-sm font-bold uppercase tracking-widest text-primary mb-6">
          {locale === 'en' ? 'Network Expansion in Numbers' : 'Netzausbau in Zahlen'}
        </h3>
        
        <div className="bg-black/40 backdrop-blur-md p-12 md:p-16 rounded-3xl border border-white/10 shadow-2xl">
          <div className="font-mono text-6xl md:text-8xl font-black text-white tracking-tighter mb-4 leading-none" style={{ fontVariantNumeric: 'tabular-nums' }}>
            372.161<span className="text-primary text-3xl md:text-5xl ml-2">m</span>
          </div>
          <p className="text-white/70 text-lg md:text-xl font-medium max-w-lg mx-auto">
            {locale === 'en' 
              ? 'Cable routes laid since 2023. A massive infrastructure achievement, driven by our own machinery.'
              : 'Verlegte Kabeltrassen seit 2023. Eine massive Infrastrukturleistung, getragen von unserem eigenen Maschinenpark.'}
          </p>
        </div>
      </div>
      
    </div>
  );
}
