e-tib.com/components/blocks/ScaleOfImpact.tsx

'use client';

import React, { useRef } from 'react';
import { useScroll, useTransform, m } from 'framer-motion';
import { useLocale } from 'next-intl';

export function ScaleOfImpact() {
  const containerRef = useRef<HTMLDivElement>(null);
  const locale = useLocale();
  
  // Track scroll progress through this container
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"]
  });

  // Map scroll progress to SVG path length
  const pathLength = useTransform(scrollYProgress, [0.2, 0.8], [0, 1]);
  
  // Opacity for the massive background numbers
  const bgOpacity = useTransform(scrollYProgress, [0.1, 0.4, 0.8, 1], [0, 0.1, 0.1, 0]);

  return (
    <div 
      ref={containerRef} 
      className="relative w-full min-h-[40vh] md:min-h-[70vh] bg-[#050B14] py-12 md:py-0 flex flex-col items-center justify-center overflow-hidden border-y border-neutral-800"
    >
      {/* Massive Watermark Numbers */}
      <m.div 
        style={{ opacity: bgOpacity }}
        className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none select-none overflow-hidden mix-blend-overlay"
      >
        <div className="font-heading font-black text-[20vw] leading-none text-white opacity-20 whitespace-nowrap">
          <span className="font-mono tracking-tighter">1.435.223</span>
        </div>
      </m.div>

      {/* Foreground Content */}
      <div className="relative z-10 container max-w-7xl mx-auto px-4 flex flex-col items-center text-center">
        
        <h2 className="text-3xl sm:text-4xl md:text-5xl font-heading font-extrabold text-white mb-6 tracking-tight leading-tight">
          {locale === 'en' ? (
            <>An infrastructure <br className="md:hidden"/> that connects the country.</>
          ) : (
            <>Eine Infrastruktur, <br className="md:hidden"/> die das Land verbindet.</>
          )}
        </h2>
        
        <p className="text-white/60 text-lg md:text-xl max-w-2xl font-medium mb-4 md:mb-16">
          {locale === 'en' 
            ? "We don't just talk about the energy transition. We build it. In the last 36 months alone, we have completed a route that stretches from our headquarters in Guben all the way to Munich."
            : "Wir sprechen nicht nur über die Energiewende. Wir bauen sie. Allein in den letzten 36 Monaten haben wir eine Strecke realisiert, die von unserem Hauptsitz in Guben bis nach München reicht."
          }
        </p>

        {/* Abstract SVG Line Animation */}
        <div className="w-full max-w-4xl h-12 md:h-32 relative">
          <svg 
            width="100%" 
            height="100%" 
            viewBox="0 0 1000 100" 
            preserveAspectRatio="none"
            className="absolute inset-0"
          >
            {/* Background dim line */}
            <path 
              d="M0,50 Q250,0 500,50 T1000,50" 
              fill="none" 
              stroke="rgba(255,255,255,0.05)" 
              strokeWidth="2"
            />
            {/* Glowing animated line */}
            <m.path 
              d="M0,50 Q250,0 500,50 T1000,50" 
              fill="none" 
              stroke="#ffc107" // warning/yellow color
              strokeWidth="4"
              style={{ pathLength }}
              className="drop-shadow-[0_0_15px_rgba(255,193,7,0.8)]"
            />
          </svg>
        </div>

        {/* Static Data Grid (No jumping text) */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-2 md:gap-12 w-full max-w-5xl mt-4 md:mt-12">
          <div className="flex flex-col items-center">
            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">200<span className="text-emerald-400">+</span></div>
            <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'Projects' : 'Projekte'}</div>
          </div>
          <div className="flex flex-col items-center">
            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">974<span className="text-emerald-400 text-xl md:text-2xl ml-1">km</span></div>
            <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'Cable Laying' : 'Kabelverlegung'}</div>
          </div>
          <div className="flex flex-col items-center">
            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">300<span className="text-emerald-400 text-xl md:text-2xl ml-1">km</span></div>
            <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'Open Trenching' : 'Offener Tiefbau'}</div>
          </div>
          <div className="flex flex-col items-center">
            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">160<span className="text-emerald-400 text-xl md:text-2xl ml-1">km</span></div>
            <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'HDD Drilling' : 'Spülbohrung'}</div>
          </div>
        </div>
      </div>
    </div>
  );
}