'use client';

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

export function DataGridPulse() {
  const locale = useLocale();
  return (
    <div className="relative w-full py-12 md:py-24 bg-neutral-50 border border-neutral-100/80 overflow-hidden flex flex-col items-center rounded-3xl mb-16 shadow-sm">
      
      {/* Blueprint grid background */}
      <div 
        className="absolute inset-0 opacity-[0.03] pointer-events-none" 
        style={{ 
          backgroundImage: 'linear-gradient(#117C61 1px, transparent 1px), linear-gradient(90deg, #117C61 1px, transparent 1px)', 
          backgroundSize: '40px 40px' 
        }} 
      />

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

      <div className="relative z-10 w-full max-w-2xl px-6 mx-auto flex flex-col items-center text-center">
        <span className="text-xs md:text-sm font-bold uppercase tracking-widest text-primary mb-4 bg-primary/10 px-3 py-1 rounded-full">
          {locale === 'en' ? 'Network Expansion in Numbers' : 'Netzausbau in Zahlen'}
        </span>
        
        <div className="bg-white/80 backdrop-blur-md p-8 md:p-12 rounded-2xl border border-neutral-200/50 shadow-lg w-full">
          <div className="font-mono text-4xl md:text-7xl font-black text-neutral-900 tracking-tighter mb-4 leading-none animate-pulse-slow" style={{ fontVariantNumeric: 'tabular-nums' }}>
            372.161<span className="text-primary text-2xl md:text-4xl ml-1 font-sans">m</span>
          </div>
          <p className="text-text-secondary text-base md:text-lg font-medium max-w-md mx-auto leading-relaxed">
            {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>
  );
}